Using npm packages

SocialStack puts performance first out of the box, with frontend javascript .js builds compiling near instantly on edits and being often less than 60kb when minified. SocialStack is also used to make native mobile app UIs which have a strong requirement of no remote dependencies and that is not a guarantee from npm packages. Many npm packages also only compile properly through webpack. This is often because the package specifically has configuration for webpack builds. As a result, webpack is largely unavoidable for building projects containing npm packages.

Webpack builds are typically large and require usually very custom project specific configuration to tune it to the modules and build preferences you are using. For these reasons, SocialStack does not include webpack by default. To make use of npm modules, you'll need to create an empty npm project with your prefered build chain in it, with only one small note: you'll need to setup react (specifically it's actually preact) as a remote alias. This is because preact is included directly inline in the HTML of the page rather than in any of the js builds such that preact can start warming the DOM whilst the rest of the page is still downloading.

Tips:

• Use a watcher based setup such that you can save files and then wait for your js to recompile - it's a lot faster than it compiling from scratch.

• Put your build output into the UI/Source directory. If it is small, it can just go directly in there and be bundled in with the rest of your UI. If it is large, you should put it in a folder called static. Contents of static directories are ignored by the built in js build chain but are still treated as part of the UI and copied automatically by the socialstack deployment helpers. You can then add its relative URL as a script tag in to the HtmlService site configuration. /pack/static/ is the effective location of the UI/Source directory. For example, UI/Source/Npm/static/hello.js is present at /pack/static/npm/static/hello.js.