NPM React SASS Starter

I feel that one of the big issues with learning modern Javascript development is that there is really no straight forward way to get up and running.  With php for example you could just download XAMP or MAMP and you are all set to start writing code.  However, if you want to use the latest Javascript tools with ES6, you better be prepared to do some tooling and initial setup.

In the past, I would use Gulpjs to run all my tasks.  Although I don’t see anything wrong with that solution, this time around, I decided to try and do this with just NPM and Webpack.  Its actually not that hard, and I’m happy with how this came out.  As a disclaimer, I haven’t used this yet, so I’m not sure how well it will scale if I start adding packages.

Key NPM Packages and Tools used

Webpack

Webpack is a module bundler.  In the context of this app, it was used for the purpose of taking code in ES6 and React/JSX and bundling that into code that the browser can read. You can also use Webpack to compile your Typescript, Coffeescript and Templates like Handlebars.  Although I didn’t use it, it can compile SCSS to CSS.  This could be an improvement for this starter package later on.

Babel

Babel can take ES6 Javascript and transpile it to ESNext code that the browser can read.  This was used in conjunction with webpack.  If you were to look in the webpack.config.js you would see the following line:

use: {
  loader: 'babel-loader',
  options: {
    presets: ["@babel/preset-env","@babel/preset-react"]
  }
}

This basically tells Webpack to use Babel to transpile the code to one file that can be used in the browser.

Node Sass

I used this package to compile my SCSS code into a CSS file. With this package, I was able to make a custom npm script that would watch for changes to scss.
"watch:scss": "node-sass --watch sass -o build/css --output-style compressed"

Note that the flag  --output-style compressed is used to minify the final CSS.

onchange

Onchange is an npm package that allows you to create “watchers”. This package was used to “watch” Javascript files for changes. When they were detected, Webpack would compile the code.

"watch:js": "onchange 'js/**/*.js' -- npm run webpack",

uglifyjs-webpack-plugin

This is a webpack plugin that was used to minify the compiled Javascript.

NPM Scripts

In the end there are three npm scripts that can be used to watch your files:

watch
Watches both SCSS and Javascript.

watch:js
Watches just javascript.

watch:scss
Watches SCSS.

Repository

The repository can be located below:
https://github.com/DMiller5383/npm-react-sass-starter

Conclusion

There is still room for improvement here. As mentioned, it hasn’t be “battle tested” yet. I would like to add some support for unit tests (most likely using Jest). Also as mentioned above Webpack does have SASS support. It might be more efficient to use Webpack for this purpose. Finally, I think a live reload feature to refresh the browser on any changes would be a welcome feature to have during development.

As a final note, I wanted to point out that React JS has their own started kit which can be found here. Putting this together was good because it gave me a better understand of how the NPM ecosystem works. However if you do simply want to get up and running with React, the link above is the best place to start

I don’t believe that this is necessarily a better solution then using Gulp or Grunt as a task runner. The major advantage I feel is that there are less dependencies using this system.