A Slush scaffolder that generates JS projects for you (clientside, serverside, both clientside and serverside).
The generated project has live reloading on code changes (for both clientside and serverside, as applicable). The live reloading has been tweaked to be very fast to maximise productivity.
The stack is chosen to use as standard, vanilla technologies as possible. You write all your JS as normal JS (with ES6+ support). You write all your CSS as normal CSS (with CSS4 support). You also get all the conveniences of a modern stack with the productivity of a build system.
The stack uses npm scripts to drive the build targets using the CLI of several packages.
- npm script for build tasks
- ESLint for linting JS
- Stylelint for linting CSS
- Mocha & Chai for testing
- Client (or standalone lib)
- JS
- CSS
- PostCSS to add features to CSS
postcss-import
to allow@import
s to be bundledpostcss-url
to allow files referenced byurl()
(images, fonts, etc.) to be bundled in CSS for performancepostcss-cssnext
to allow for future CSS features (things that LESS and SASS introduced) to be used and to allow for CSS to be automatically patched to support older browserscssnano
to compress built CSS- Normalize.css to make the default stylesheet more consistent across browsers
- A minimalistic base stylesheet that can be configured with CSS variables (taken from Factoid; may make sense to make this a reusable npm module)
- Server
- Debug Mocha tests or server code with
npm run <target> -- --inspect --debug-brk
--inspect
to start the debugger UI--debug-brk
to break on the first line so you have time to open the debugger
- Do not use Webpack to
import
orrequire()
your CSS from inside your JS. Do not use Webpack to bundle CSS into your JS bundles. If you do that, you can no longer share code between the client and the server.
- Install
slush
:npm install -g slush
- Install
slush-js
:npm install -g slush-js
- Scaffold :
slush js
The generated project uses npm scripts to drive all of the build process so that nothing needs to be installed globally with npm. (Only slush
has to be globally installed, and only when first generating the project.) The targets are described in the generated README.md file.