universsr

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.

Features

• 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 and webpack 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-config 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 and hpp 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.
• nodemon to monitor changes made on server-side and automatically restart server.

Requirement

Before you proceed, please make sure your machine has met the following requirements:

Dependency	Version
Node	>= v12.13.0
NPM	>= v6.12.0

Quick Start

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 install

ii) Running app

For development:

npm run dev

For production:

Copy .env.development to ./config folder as .env for production usage:

cp config/.env.development config/.env

Change environment variables in .env to serve your app.

npm run build # or,
npm run build:analyze # to analyze built bundles

npm start

For test:

npm test

Project Structure

Below 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

NPM Scripts

• 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 value

Changelog

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.

License

MIT