React web app boilerplate, powered by Express web framework as backend.
- Server-rendered
react
+react-frontload
for async data loading. Express
- Node.js framework for backend work.- Code splitting for server rendered components via
loadable-components
library. - Combination of
babel
andwebpack
enables writing next generation JavaScript and code optimization. webpack-hot-server-middleware
- hot reload for bundled file on server-side.- Static route configuration with
react-router-dom
for React Router. - Sass as extension of CSS and
PostCSS
for transforming styles, as well as CSS modules implementation out of the box. - Enforce convention and avoid errors with code linter and formatter. (
eslint
,prettier
,stylelint
) - Implement security good practices with Express
helmet
andhpp
middlewares. - Using
webpack-bundle-analyzer
to visualize size of webpack output files. - Delightful testing with
jest
framework for React components. - SEO ready with
react-helmet
component to manage document head. husky
for better git commits experience.babel-watch
to monitor changes made on server-side and automatically restart server.
Before you proceed, please make sure your machine has met the following requirements:
Dependency | Version |
---|---|
Node | >= v12.13.0 |
NPM | >= v6.12.0 |
# cloning git repository into `react-ssr` folder
git clone --depth=1 https://github.com/xuanhoa88/react-ssr.git react-ssr
# install project dependencies
cd react-ssr && npm install
For development:
Create .env.development
for development usage:
cp .env.defaults .env.development
Change environment variables to serve your app.
npm run dev
For production:
Change environment variables in .env.defaults
to serve your app.
npm run build # or,
npm run build:analyze # to analyze built bundles
npm start
For test:
Create .env.test
for staging usage:
cp .env.defaults .env.test
Change environment variables to serve your app.
npm test
Below is overview of project folder structure in this starter along with the short descriptions, respectively:
CLICK ME
├── assets # contains other resources
| ├── images # contains images for the app
├── coverage # generated test coverage folder
├── shared # util files for the app
| ├── env.js # environment util
| └── paths.js # project defined paths
├── src # contains all app source files
| ├── components # contains React components
| ├── ssr # contains server components
| ├── pages # contains page components
| ├── routes # contains react route's configuration
| ├── services # services registered for react frontload api
| ├── static # contains static files that used in components
| └── theme # contains app styels and variables
| ├── client.js # webpack's client entry
| ├── server.js # Express http server of the app
├── tools # contains webpack bundler config files
| ├── webpack.client.js # webpack config for client
| ├── webpack.common.js # webpack common config for both client/server
| └── webpack.server.js # webpack config for server
├── babel.config.js # default babel configuration object
├── jest.config.js # jest testing framework config file
├── package.json # required dependencies, scripts, etc
├── postcss.config.js # PostCSS config file
├── prettier.config.js # Prettier formatter config file
├── stylelint.config.js # stylelint config file
- The following are available scripts in the project to perform respective tasks;
- We can execute script by running:
npm run <script name here>
CLICK ME
Script Name | Description |
---|---|
clean |
Remove dist folder and respective built files. |
build |
Remove previous built files and build production ready files to be served. |
build:analyze |
Same with build script, except it comes with webpack bundle analyzer to visualize size of the output files. |
dev |
Start app server in development environment. |
start |
Start app server in production environment. |
test |
Perform tests execution. |
test:update |
Running tests with snapshots get updated on. |
test:watch |
Running tests with watch mode turned on. |
test:coverage |
Running tests with coverage report output. |
lint |
Perform source code lint checks for JS, React and styles based on the ESLint and stylelint config. |
lint:style |
Perform lint checks for Sass style. |
lint:js |
Perform lint checks for JS and React. |
Environment Variables
The .env file is loaded based on the defined process.env.NODE_ENV
value:
File name | NODE_ENV | In Source Control |
---|---|---|
.env.test |
test | Yes |
.env.development |
development | Yes |
.env.defaults |
production | No (Need to create new) |
Defined custom environment variables can be accessed via process.env.[VARIABLE_NAME]
, for in instance:
process.env.PORT; // this will give us PORT value
All notable changes made to the project will be documented on release page. For new project, always using the latest version. This project adheres to Semantic Versioning.