Recently, I have been working on a project which used ReactJS to build several SPAs (Single Page Applications).
I’ll openly admit it was a pain for me to get working even a basic project or starter template. The reason is because there are lots of new concepts, frameworks and technologies. I decided to write down some clarifications, notes, learning techniques and starter template which I did in the process to understand all this front end stack.
The reason for doing other React starter template for single page applications (SPA) is because when I started to look into templates it took to me hours and hours of googling and testing different templates to have some starting point for my SPA application.
There are templates with hundreds of dependencies. Why not reduce to the minimal needed to start playing with React?
Let´s describe the main components to configure in our project:
- Development Server
- Package Manager
- Build System – Bundler
- Browser Sync, Live Reload and HMR (Hot Module Replacement)
As we pretend to do Web Development could be ideal to configure some web server locally for faster developing.
What web server should we use? IIS Express? Tomcat? Node Server?… We don´t want a full-featured Web Server for our dev local machine, what we want is more integration with tooling, plugins, transpilers, etc. So instead of using Web Server, we will use a Dev Server. Normally, using React + ES6 + Webpack we should a Node.js server.
express vs webpack-dev-server
- Express is a Node.js server. If you want advanced configuration you can use Express directly + configure yourself the integration with webpack.
- Webpack-dev-server is a Node.js Express server, which uses webpack-dev-middleware under the hood, which provides fast in-memory access to the webpack assets to generate the webpack bundle.
webpack-dev-server vs webpack-dev-middleware
- webpack-dev-server provides you with a Node.js Express server + WebPack Integration + Live Reloading
- webpack-dev-middleware is kind of webpack connector for dev servers. This can be useful if you already have a Node.js server or if you want to have full control over the server.
NOTE: You should use webpack-dev-server strictly for development. If you want to host your application, consider other standard solutions, such as IIS, Apache or Nginx.
I decided to start using webpack-dev-server initially as it is easy to configure and require less dependencies.
I decided to use ES6 compiled with Babel + React. For the starter template is enough, later we can add more external JS libraries if required.
There is a new tool called yarn, which is a dependency management tool. Just to avoid confusions, yarn is not a replacement for NPM registry. Yarn is a client tool which allows us to manage Deterministic dependencies — with yarn.lock, you’ll get the same versions of the same packages installed in the same directory structure every time. That will save a lots of development efforts and frustrations.
I decided to use yarn as a client tool for package management instead of using npm install, I will use yarn.
Build System – Bundler
- Bundlers. Package all the solution in one bundle.js file which contains all your application modules.
I decided to use the build system / bundler called WebPack because it has some good features like:
- Bundles AMD, CommonJS and ES2015 modules
- Code splitting
- Uses loaders for transformation before bundling
Browser Sync, Live Reload and HMR (Hot Module Replacement)
One of the coolest features in Web Development is live reload which means that every time you save your source files, the changes will be automatically reflected in the browser, and that means quick and fast development flow.
Live Reloading vs Hot Module Replacement
- Live Reloading. Provides a way to refresh browser when a source file has been changed.
- Hot Module Replacement. This is a further step. It provides a way to patch the browser state without a full refresh. It is particularly powerful with technology such as React, because allows for page refreshes without losing state, So, if you have navigated through several pages and filled out several forms to arrive at a corner of your application where you’d like to test a bug, making a change in your application triggers an instant page refresh, while maintaining that state.
- Note: An IDE feature known as safe write can break hot loading. Please turn it off when using HMR.
Which HMR do we need?
Just to be clear, what we need is a Hot Module Replacement (HMR) that integrates perfectly with WebPack and React. After googling a lot, there are different options to configure it:
- Using react-transform-hmr. This blog post explains all the concepts really well and how to configure it. (it didn´t work for me).
- Using react-hot-loader.
I decided to use React Hot Loader 3 integrated with WebPack as a HMR.
There are three main CSS pre-processors: Stylus, LESS and SASS. SASS is a great option as it’s widely adopted and there are tons of mixins and tool sets available in the community.
SASS integration with WebPack
We could use SASS directly using node-ssas tool which allows us to pre-process all .scss files and their @imports. An example of use here:
> node -i node-sass -g
> node-sass app/stylesheets/main.scss > dist/stylesheets/main.css
But ideally we should integrate SASS in webpack and HMR workflow. For development environment it’s recommended NOT to separate the output CSS file from the bundle.js. As webpack is able to use the same bundle.js file for css as well and inject the CSS properly by using JS. Doing that, will be easier the HMR configuration for SASS (SCSS files). For production environment, we will need to publish the final CSS final as a separate file and we could use the plugin extract-text-webpack-plugin to achieve it.
I decided to use SASS and follow directives of The 7-1 Pattern using this blog post as a reference.
Things To include in the template
There is a bunch of things I’d like to include in the starter template like:
Minimal Starter Template
You can see and download the minimal starter template on Github: https://github.com/jquintozamora/react-es6-webpack-minimal-starter-template
More Starter Templates
There we have more well tested starter templates (more complex as well) as a reference: