Repository files navigation

A universal React/Redux boilerplate with sensible defaults. Out of the box, thisboilerplate comes with:

• Server-side rendering with Express
• Code splitting withdynamic imports andreact-loadable
• Sanewebpack configurations
• JS hot reloading withreact-hot-loader (@next) andwebpack-dev-server
• CSS, SASS andcss-modules support with hot reloading and noflash of unstyled content (css-hot-loader)
• Routing withreact-router-v4
• Full production builds that do not rely onbabel-node.
• Pre-configured testing tools withjest andenzyme to work with css modules, static files, and aliased module paths.

The JavaScript ecosystem is brimming with open source libraries. With advancesin ES6 and commitments by the big tech companies to invest in JavaScript, thelast several years have arguably turned web development into what was once ahuge pain in the ass, to a pretty decently enjoyable experience.

With so many different packages now available, we now have the freedom and thechoice to craft applications to our exact specifications, reducing bloat andminimizing the number of code we need to support cross-platform apps. It reallyis a new world.

However, with so many different developers working on different libraries,things are constantly in flux, and breaking changes are often introduced. It canbe hard to keep up with the latest and greatest since they're always changing.

To help alleviate this, we've collected some of the best practices and featuresfrom the React ecosystem and put them in one place. Although this boilerplate isfully production-capable as is, its main goal is to serve as an example of howto bring an application together using the latest tools in the ecosystem.

Copy environment variables and edit them if necessary:

cp .env.example .env

Then:

npm installnpm start

Direct your browser tohttp://localhost:3000.

Add environment variables the way you normally would on your production system.

npm run prod:buildnpm run serve

Or simply:

npm run prod

If using Heroku, simply add aProcfile in the root directory. Thepostinstall script will do the rest.

web: npm run serve

Inpackage.json, there is a property named_moduleAliases. This objectdefines the require() aliases used by both webpack and node.

Aliased paths are prefixed with one of two symbols, which denote differentthings:

@ - component and template paths, e.g.@components

$ - server paths that are built by babel, e.g.server/api

Aliases are nice to use for convenience, and lets us avoid using relative pathsin our components:

// This sucksimport SomeComponent from '../../../components/SomeComponent';// This is way betterimport SomeComponent from '@components/SomeComponent';

You can add additional aliases inpackage.json to your own liking.

In development mode, environment variables are loaded bydotenv off the.envfile in your root directory. In production, you'll have to manage theseyourself.

An example with Heroku:

heroku config:set FOO=bar

This project usesCSS Modules.Class names should be incamelCase. Simply import the .scss file into yourcomponent, for example:

├── components│   ├── Header.js│   ├── Header.scss

// Header.scss.headerContainer {  height: 100px;  width: 100%;}

// Header.jsimport css from './Header.scss';const Header = (props) => {  return (    <div className={css.headerContainer}>      {...}    </div>  );}

This project supports the awesomeRedux Devtools Extension.Install the Chrome or Firefox extension and it should just work.

When rendering components on the server, you'll find that you may need to fetchsome data before it can be rendered. Thecomponent rendererlooks for afetchData method on the container component and its childcomponents, then executes all of them and only renders after the promises haveall been resolved.

//  As an ES6 classclass TodosContainer extends React.Component {  static fetchData = ({ store }) => {    return store.dispatch(fetchTodos());  };}// As a functional stateless componentconst TodosContainer = (props) => {  const { todos } = props;  return (    // ...component code  );}TodosContainer.fetchData = ({ store }) => {  return store.dispatch(fetchTodos());}

This project usesasync/await, available by default in Node.js v8.x.x orhigher. If you experience errors, please upgrade your version of Node.js.

The default testing framework is Jest, though you can use whatever you want.

Tests and their corresponding files such as Jest snapshots, should be co-locatedalongside the modules they are testing, in aspec/ folder. For example:

├── components│   ├── todos│   │   ├── TodoForm│   │   │   ├── spec│   │   │   │   ├── TodoForm.test.js│   │   │   ├── index.js│   │   │   ├── index.scss

Tests can be written with ES2015, since it passes throughbabel-register.

To run a single test:

npm test /path/to/single.test.js// Or, to watch for changesnpm run test:watch /path/to/single.test.js

To run all tests:

npm run test:all// Or, to watch for changesnpm run test:all:watch

npm run lint

Check the.eslintignore file for directories excluded from linting.

By default, assets are built intodist/public. This path is then served byexpress under the pathassets. This is the public asset path. In a productionscenario, you may want your assets to be hosted on a CDN. To do so, just changethePUBLIC_ASSET_PATH environment variant.

Example using Heroku, if serving via CDN:

heroku config:set PUBLIC_ASSET_PATH=https://my.cdn.com

Example using Heroku, if serving locally:

heroku config:set PUBLIC_ASSET_PATH=/assets