universsr - Universal React web app boilerplate, powered by Node.js Express web framework as backend.
✨ The name - "universsr" is combination of universal and server-side rendering (SSR) acronym.
- Server-rendered
react+react-frontloadfor async data loading. Express- Node.js framework for backend work.- Code splitting for server rendered components via
loadable-componentslibrary. - Combination of
babelandwebpackenables 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-configfor React Router. - Sass as extension of CSS and
PostCSSfor 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
helmetandhppmiddlewares. - Using
webpack-bundle-analyzerto visualize size of webpack output files. - Delightful testing with
jestframework for React components. - SEO ready with
react-helmetcomponent to manage document head. huskyfor better git commits experience.nodemonto 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 |
i) Installation
# cloning git repository into `my-project` folder
git clone --depth=1 https://github.com/borisding/universsr.git my-project
# install project dependencies
cd my-project && npm installii) Running app
For development:
npm run devFor production:
Copy .env.development to ./config folder as .env for production usage:
cp config/.env.development config/.envChange environment variables in .env to serve your app.
npm run build # or,
npm run build:analyze # to analyze built bundles
npm startFor test:
npm testBelow is overview of project folder structure in this starter along with the short descriptions, respectively:
CLICK ME
├── app # contains all app source files
| ├── client.js # webpack's client entry
| ├── components # contains React components
| ├── index.js # app main entry file
| ├── middleware # contains Express middleware, include server renderer
| ├── pages # contains page components
| ├── routes # contains react route's configuration
| ├── server.js # Express http server of the app
| ├── services # services registered for react frontload api
| ├── static # contains static files that used in components
| └── theme # contains app styels and variables
├── babel.config.js # default babel configuration object
├── bundler # contains webpack bundler config files
| ├── webpack.client.js # webpack config for client
| ├── webpack.common.js # webpack common config for both client/server
| ├── webpack.compiler.js # webpack compiler for client and dev server
| └── webpack.server.js # webpack config for server
├── config # contains environment variables
├── env.loader.js # env variables loader with `dotenv` and `dotenv-expand`
├── index.js # app entry to expose app server
├── jest.config.js # jest testing framework config file
├── package-lock.json # package lock file
├── package.json # required dependencies, scripts, etc
├── postcss.config.js # PostCSS config file
├── prettier.config.js # Prettier formatter config file
├── resources # contains other resources
| ├── coverage # generated test coverage folder
| ├── icons # contains icons for the app
| ├── jest # jest related files such as mocks
| └── logs # store genereated log files
├── stylelint.config.js # stylelint config file
├── utils # util files for the app
| ├── env.js # environment util
| ├── index.js # entry file to re-export utils
| ├── logger.js # logger util for the app
| └── paths.js # project defined paths
└── webpack.config.babel.js # webpack config entry
- 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 build 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 via nodemon. |
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
dotenv and dotenv-expand packages are used in conjunction with webpack.DefinePlugin plugin for managing environment variables. The entire logic can be found in ./env.loader.js file. 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 |
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 valueAll 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.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent