⚫ universal-web-boilerplate

Overview

A modern universal web boilerplate, built on react, redux, webpack, and node. Use as a starting point for server rendered, code split webapps.

See the demo app here

Motivation

Setting up a modern javascript web project can be time consuming and difficult.

Frameworks like nextjs, create-react-app, and razzle address this complexity by abstracting configurations away with custom scaffolding tools and setup scripts.

However these frameworks and tools take control away from the developer, and make it more difficult to change or customize the configuration.

Universal web boilerplate provides an opinionated yet solid foundation you need to get started, without abstracting any of the implementation details away.

Featuring

Modern javascript

• async / await everywhere, to simplify async control flow and error handling
• react HOCs applied with decorators
• iterators and generators integrated with redux-saga

Rapid developer workflow

• Hot module replacement reloads the source code on both server and client on change
• Changes to the web server picked up and reloaded with nodemon

Production ready

• CSS and Javascipt minified in production
• CommonsChunkPlugin bundles all vendor dependencies together to be browser cached
• Polyfills, autoprefixers, NODE_ENV, and all the other details taken care of

Modern frontend tech

• react for declarative UI
• redux for explicit state management
• react-final-form for simple and high performance form handling
• redux-saga for handling async workflows
• redux-first-router for handling universal routing
• material-ui foundational components, with css-modules enabled sass for custom styling
• fetch-everywhere for isomorphic API calls

Testing with Jest + Enzyme

• Components and pages are fully mounted, wrapped with redux, emulating the app's natural state
• Components are tested from a user perspective, hitting all parts of the system

ESLint based on eslint-config-airbnb for fine grained control of code syntax and quality

• Optimized for a react frontend environment
• IDE integration highly recommended

Logging and error handling setup from the start

• redux logger implemented on both server and client
• simple http logging with morgan

Code splitting + server rendering

Universal web boilerplate utilizes the "universal" product line to solve the problem of code splitting + server rendering together.

It is recommended to read more about these modules. Some short excerpts below are provided to give you a general sense of what is going on.

• react-universal-component, which loads components on demand on the client, and synchronously loaded on the server.
• redux-first-router, a router which encourages route based data fetching, and redux as the source of truth for route data.

Usage with a JSON API backend

This app is designed to connect to a live backend, using the API defined here.

If you do not provide an API_URL, the app will run in offline mode, and you will not be able to log in or sign up.

Point the API to http://api.universalboilerplate.com to use the existing api deployed there.

You can also run node-api-boilerplate locally alongside the web server, which is recommended to get started with full stack work.

The app assumes your API server is on running on a separate process, and uses a proxy to send requests to the external API.

This decoupled approach makes the web and api services easier to organize, and provides a more flexible architecture.

Prerequisites

• nodejs, latest LTS - https://nodejs.org/en/
• Yarn - https://yarnpkg.com/en/

Setup

Download the repo and install dependencies

git clone https://github.com/dtonys/universal-web-boilerplate && cd universal-web-boilerplate

yarn

Create a .env file with values below, and add to the project root

NOTE: Substitute your own values as needed

SERVER_PORT=3010
API_URL=http://api.universalboilerplate.com

Start the server in development mode

npm run dev

Build and run the server in production mode

npm run build

npm run start

Run tests

npm run test

Run ESLint

npm run lint-js

External references

This boilerplate was created with inspiration from the following resources:

• react-redux-universal-hot-example - https://github.com/erikras/react-redux-universal-hot-example
• survivejs - https://github.com/survivejs-demos/webpack-demo
• redux-first-router-demo - https://github.com/faceyspacey/redux-first-router-demo
• universal-demo - https://github.com/faceyspacey/universal-demo
• egghead-universal-component - https://github.com/timkindberg/egghead-universal-component
• create-react-app - https://github.com/facebook/create-react-app

Updates

This boilerplate is periodically updated to keep up with the latest tools and best practices.

5/21/2018 - Updates

• Updated all non webpack 4 related dependencies to latest version.

5/28/2018 - Webpack 4 Update

• Updated to webpack 4 + all webpack 4 dependencies.
• Removed a few optimization related features: autodll-webpack-plugin, babel cache

TODO( Performance: Incremental rebuild & Total build time )

TODO( Updates: Update to latest universal stack )