This is a boilerplate for React apps. It uses React and Redux with Redux Observables on the client side and is Express on the server. The application is built using Webpack, and it has Hot Module Replacement to allow changes without refreshing in development. For styling, the app uses CSS Modules with Sass.

First off, clone the repository.

git clone https://github.com/MrPickles/boilerplate
cd boilerplate/
npm install

You then want to configure environment variables for the app. The app uses dotenv to set up environment variables, so you should put any environment variables needed at runtime in the .env file. There is a .env.example file provided for guidance.

cp .env.example .env

To run the server in production, you'll want to build the bundled JavaScript and CSS that will be used in the client. Then you can start the server. There is a build and prod script to build the app and start the server in production, respectively. Alternatively, you can just run npm start.

npm run build
npm run prod
# or
npm start

When developing, there is a development build that has development-specific advantages over the production build, such as automatic module replacement, server restarting, and source maps for debugging. To use the development build, run the webpack script in the background or in a separate terminal to have Webpack compile the development build and watch for any changes in the code. The assets will be served by webpack-dev-server. Then run the development server.

npm run webpack # run this in the background or in a separate terminal
npm run dev

This repository uses ESLint and Jest for linting and testing, respectively. To lint the code base, simply run the lint script. You can change the lint rules in .eslintrc.json based on your style preferences.

npm run lint

All tests must have .spec.js as its file extension. The testing script will search for all files with this extension and treat them as tests.

npm run test