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.
- 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
1. Clone the repository
2. Install all the dependencies
yarn installor
npm i3. Start the app in production mode
npm run startIt will trigger building the bundle and running a server.
Server with hot reloading:
npm run build && npm run start:devDevelopment in offline mode:
USE_MOCKS=true npm run start:devIf you prefer working with mocks only, set it in config/default.js.
Run tests check:
npm testPlease see package.json for other npm sripts useful in development.
.
├── 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
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.