A minimal boilerplate of an app that renders React components on the server and 'inflates' (becomes interactive) on the client.
There are many examples of single page applications (SPA), but for many projects a SPA is overkill, leading to unnecessary work and complexity. We still want rich experiences, but don't care so much about client-side routing.
This project is by no means finished. I hope for others to contribute so that it can improve over time and become an example to others entering what has become a very complex development environment.
SPAs typically involve working with React routers and some kind of Flux framework (Redux, Fluxible, etc.). It's a bit of overkill for small projects and add a lot of overhead dev costs, especially for solo developers.
Additionally, in recent years there's a lot of backlash for React SPAs having unreasonably large bundle size, making users download lots of data to load relatively static pages with small dynamic elements.
This framework/boilerplate allows not just a smaller bundle per page, and you can even optionally choose to exclude all JS on certain pages if your project invovlves a lot of static pages.
All this while you can still take advantage of organizing/re-using code in React component style of code structures for your frontend, instead of resorting to old school HTML templates like Handlebars/Mustaches and such.
Currently tested on: Node 8, npm 5+. Install nvm, then:
$ nvm intall 8
$ nvm use 8Project currently uses pm2 to manage the node process, and contains pm2 configuration for auto build/restarts.
Install pm2 globally:
$ npm install -g pm2To build & start node server in dev environment:
$ npm install
$ npm startThis will start webpack watcher and pm2 watcher with autorestart on file changes.
To build & start node server in production environment:
$ npm install
$ npm run productionThis will build client files (webpack), build server files (babel transpile), and start server with NODE_ENV=production on the transpiled files.
- Webpack config should allow prod and dev setup, outputs minified/unminified bundles - link
- Add PM2 to project (pre-req for several items below)
- PM2 watch setup to autorestart server on file changes - link
- Node server with ES6 / babel transpiling to code server JS code in full ES6 - link
- Subtask: Server builds to
distbundle for PM2 to run for production setup - Subtask: Example server logic files per route in ES6 code
- PM2 webpack setup so client JS code also auto rebuilds and restarts - link
- Option to build/include no client JS bundle at all for some pages (static), allows for skipping even common bundles to reduce load times on static pages
- It must dynamically compile a bundle per page
- It must create a 'commons' chunk with shared dependencies (eg.
(p)react) - It must extract CSS into a separate
.cssper page file. - Each bundle must be able to indicate critical CSS modules that should be inlined
- Remove critical CSS from each page's CSS bundle
- Our server needs to be able to know the hashed filenames so they can be rendered/loaded into the document
- Page components can provide
<head>content - Each page component has a dedicated node bundle for SSR
- Add a site-global app manifest using webpack-app-manifest-loader
- Include example of dynamic (lazy) imported modules
- Support nested pages (eg.
articles/one,articles/two) - Dynamically setup server-side routes
- Rebuild and restart server on file change
- Error pages
- Decouple views from routes
Webpack-Dev-Server has been purposefully omitted to keep the development environment as close to production as possible.