There is a great quote by Addy Osmani:
First do it, then do it right, then do it better.
Here is the list of stuff you need to be familiar with to feel comfortable while reading this post:
Main & About components are trivial — you can find them here.
Our main goal — make it universal. Let’s do it.
Server side rendering
/* server.app.js */
// This is entry point of our `app` bundle.
// And here we collect bundle specific stuff
// to pass it to reusable abstraction part.
// We can add `server.admin.js` bundle etc.
// We gonna use ES6 / ES7 syntax in our modules
// So we need to transform it to ES5 with every `require` from here on
Next thing we need to learn is how to build the client bundles and how to setup production / development environments with gulp & webpack.
Gulp, Webpack & hot reloading
npm start or gulp start:dev
Runs development web server with hot reloading.
npm run prod or gulp start:prod
Runs local server with production ready bundles to check how it works.
npm run build or justgulp
Compiles production builds.
Key tools we’re gonna use are Gulp and Webpack. Here is the gulpfile:
/* gulpfile.babel.js */
// Task name to compile production assets
// Task name to start dev server
// Task name to start local server with production assets
First let’s define requirements for production build:
Asset name should contain identifier for long-term caching purposes. We should include hash of the asset file in URL, thus when we’ll update the app, visitor’s browser will download updated asset, rather than using old one from cache. More detailed explanation on subject — in this medium post.
Our app and vendor’s modules should be split in separated chunks. Every time we update the app, whole client’s asset is changed. So visitor have to re-download it, incl. vendor’s modules, that hasn’t been changed. If we will split client’s bundle in two chunks — app and vendor’s stuff — users won’t need to re-download vendor’s modules, because it’s in different chunk and vendor’s chunk is cached by the browser.
Assets files should be minified & gzipped. So we will be serving smaller-sized assets to client.
For webpack compiler we have file with 2 end points:
Under the hood it observes the assets files, if it’s changed, it recompiles assets and sends changes to client. So you don’t need to reload page on every change. Here is how to set this up for React application:
Now we can run npm start and openhttp://lvh.me in browser. Every time we make a changes in js or css files, page will be automatically updated by webpack dev server.
How to manage state in our app?
How to prefetch data on the server, so we can render html with data from API and serve it to client?