not-bad-react/not-bad-react-starter

🤘 This repository consists of a modern technical stack for a frontend tier. A combination of the technologies presented here addresses your need in a reliable scalable isomorphic application based on Javascript. Server-side part is hosted on Express, SPA part is bundled with Webpack

Not Bad React Starter

This repository consists of a modern technical stack for a frontend tier. A combination of the technologies presented here addresses your need in a reliable scalable isomorphic application based on Javascript. Server-side part is hosted on Express, SPA part is bundled with Webpack.

This project is a fork of WellyShen's React Cool Starter. Main ideas behind the separation are: simplification, migration for another solutions, and preparation for real-life CI/CD.

Not Bad Technical React Stack

• React Router v4
• Redux
• React Hot Loader v3
• redux-thunk
• react-router-redux v5 (alpha)
• react-helmet
• webpack-isomorphic-tools
• Webpack Dev Middleware
• Webpack Hot Middleware
• morgan
• support of Redux Devtools Extension
• Express v4
• Webpack v2
• Babel v6
• nodemon
• axios
• Flow
• ESLint
• StyleLint
• CSS and SASS support with PostCSS
• CSS modules
• Jest with enzyme
• support of Yarn

Requirements

• node >= 5.0, < 8.0
• npm >= 3.0, < 5.0

Getting Started

1. Clone the repository

2. Install all the dependencies

yarn install

or

npm i

3. Start the app in production mode

npm run start

It will trigger building the bundle and running a server.

Development

Server with hot reloading:

npm run build && npm run start:dev

Development in offline mode:

USE_MOCKS=true npm run start:dev

If you prefer working with mocks only, set it in config/default.js.

Run tests check:

npm test

Please see package.json for other npm sripts useful in development.

App Structure

.
├── build                             # Webpack bundled files will be placed into it
│   └── public                        # The Express server static path
│       └── favicon.ico               # Favicon is placed in the same path with the main HTML page
├── src                               # App source code
│   ├── config                        # App configuration settings, used with `config` npm package
│   ├── components                    # Reusable components (including scss/testing files)
│   ├── containers                    # Container components (including assets/action/reducer/scss/testing files)
│   ├── utils                         # App-wide utils
│   ├── redux                         # Redux related setups
│   │   ├── reducers.js               # The root reducer (registry and injection)
│   │   └── store.js                  # Configure and instrument Redux store
│   ├── theme                         # App-wide style and vendor CSS framework
│   ├── types                         # Flow types for actions, reducers and more
│   ├── client.js                     # App bootstrap and rendering (webpack entry)
│   ├── routes.js                     # Routes configuration for both client and server side
│   └── server.js                     # Express server (with webpack dev/hot middlewares)
├── tools                             # Project related configurations (testing/build etc.)
│   ├── flow                          # Flow types, interface, module aliasing definitions
│   ├── openBrowser                   # Utility for opening Google Chrome
│   ├── jest                          # Jest CSS modules and assets mocks settings
│   ├── webpack                       # Webpack configuration settings
│   │   ├── config.js                 # Configuration for CSS modules, vendor registering
│   │   ├── webpack.client.babel.js   # Webpack configuration for client
│   │   ├── webpack.server.babel.js   # Webpack configuration for server
│   │   └── WIT.config.js             # Webpack Isomorphic Tools configuration file
└── index.js                          # App entry point

Server Side Security and Performance

Concerning to the security and performance for Express in production, WellyShen already setup some middlewares for you:

• helmet - Helps secure Express server with various HTTP headers.
• hpp - Express middleware to protect against HTTP Parameter Pollution attacks.
• compression - Gzip compression support for speeding up Express server responses.

Note: It's just a basic protected mechanism for your app, you can see the security best practices for more advanced configuration.