a complete react project with :
- react, redux , redux sagas
- eslint
- customizable build config
- jest and enzyme test framework
- babel and eslint config to support es2017
- react hot module replacement
- code spliting
- code organisation based on "Feature first approach"
- expressJs as a web server for serving static files.
- a simple starter kit for express nodejs app with proxy, lint, and configuration based on ENV variables.
- webpack 4.
this project requires
NodeJS
npm
.python 2.7
which may change in future
React full stack has 2 main applications.
- Client
- Server
Client is where all front end code will live. in most of the cases it will be a single page application build with react,redux,sagas, and build by webpack.
Server is a simple HTTP static web server which is going to server front end application when running in production. it will mainly be used to return static files and do simple authentication to prevent first render
to install and run this project you need to
- install node modules and run client applicarion
- install node modules and run server application
cd client
and hit npm install
cd server
and hit npm install
after installing all modules hit npm start
in both client
and server
folders
this will run both the applications in watch
mode. meaning any file change will be reacted and updated
in the browser.
to build for deployment/production.
- go to server folder and hit
npm run build
- wait for server build to finish
- go to client folder and hit
npm run build
doing this will create a dist
folder in the application root which will contain a full stack build
nodejs
application redy to deploy with its own package.json
install node modules and run the app.
important to run the built application it needs following environment variables
NODE_ENV
='production'NODE_ENV_PORT
='3000' or any available port
- Node.js
- Express
- React
- Redux
- Sagas
- React Router v4
- Axios
- AntD with scss
- Webpack 4 with code splitting
- React Hot Loader
- Jest
- Enzyme
- ESLint
its best to use vs code with the following plugins installed.
- EditorConfig for VS Code
- EsLint
- Prettier - code formatter
root folder
.
├── /client/ # This folder contains all the front end code
├── /dist/ # Trnaspiled code server and client together as one expressjs application
├── /server/ # This folder contains server side code like routing managing proxies serving static etc
├── /.editorconfig # file contains editor configuration that makes the code uniform
├── /.gitignore # gitignore files and folder
├── /README.md # contains readme
client folder
.
├── /mocks/ # This folder contains some mocks for jest like api,css modules etc
├── /build-config/ # webpack config divided into types of env is placed here
├── /coverage/ # contains a small application wich shows coverage generated by jest
├── /node_module/ # contains all dependencies modules
├── /src/ # contains the actual source code
├── /.babelrc/ # babel configuration and env specific plugins are kept here
├── /.editorconfig/ # commom configuration to code editor
├── /.eslintignore/ # some rules to ignore for eslint
├── /.eslintrc/ # eslint rules and configuration
├── /.gitignore/ # ignore files to git
├── /.package.json/ # dependencies for client app
├── /.package-lock.json/ # dependencies lock
├── /.webpack.config.js/ # root config for webpack which will import all other configurations.
server folder
.
├── /coverage/ # contains a small application wich shows coverage generated by jest
├── /node_module/ # contains all dependencies modules
├── /src/ # contains the actual source code
├── /.babelrc/ # babel configuration and env specific plugins are kept here
├── /.editorconfig/ # commom configuration to code editor
├── /.eslintignore/ # some rules to ignore for eslint
├── /.eslintrc/ # eslint rules and configuration
├── /.gitignore/ # ignore files to git
├── /.build.js/ # contains small build config written in js executed by nodejs
├── /.package.json/ # dependencies for client app
├── /.package-lock.json/ # dependencies lock