React Redux Starter
A project created with love using React, Redux, SCSS, Eslint, StyleLint, Prettier, Webpack, Html5. This page documents all steps that are necessary to get this project up and running.
Features
- React 16.8.x
- Redux 4.x.x
- Webpack 4.x.x
- Babel 7.x.x
- Bootstrap v4.3.x
- jQuery v3.3.x
- Hot Module Replacement
- Uses Pre-Commit Hook for
- Runs Pretifier
- Runs Eslint Fix
- Runs StyleLint Fix
- Eslint
- StyleLint
- Preetier
- SASS/SCSS using
scss-loader
,css-loader
andnode-sass
- Js Minification for Production
- css Minification for Production
- Code Splitting usnig
React.lazy()
andReact.Suspense
- Async/Await support
- Test Coverage
- Standard commit message template on
git commit
Guidlines for Developers
Working On the Project
Prerequisists:
- Nodejs: > v8.12.0 (LTS) (Install Nodejs)
- Prefered Dev Machine: MAC (OSX) but can be done in any operating system
Installing the project:
Clone the Repo
git clone https://github.com/bmnepali/react-redux-starter.git
Install the node packages
-
Go to the project directory:
cd react-redux-starter
-
Then run command to install project dependencies
npm install
or simplynpm i
-
Configure the standard git commit template
git config --local commit.template "./.git-commit-template"
Run the project (development):
- Run the following command to run the project
npm run start
Run all tests for one time only
npm run test
Run tests and watch for changes
npm run test:watch
Run tests and gerate test coverage report
npm run test:coverage
Updating Test Snapshots
npm run test -- -u
(To update the previous component's snapshots)
Run eslint for linting css, scss files
npm run lint:style
Fixing linting issues in css/scss files
npm run lint:style:fix
Run eslint for linting js/jsx files
npm run lint:js
Fixing linting issues in js/jsx files
npm run lint:js:fix
Making code preetier :) by formatting
npm run pretify
Debugging Test cases in browser
npm run test:debug
For commiting the changes just do
git commit
(and it automitically lints, pretifies js and scss)
Branch Structure (Git Workflow)
master :
Where all our production ready project source code is stored. Mostly we dont touch this branch. Except for deployment.
staging:
Where all our testing is done. Which means QA will use this branch for testing the solutions. After all things are ok, we merge staging in to master and deploy application. QA will only use this branch.
develop:
Where our latest development code is kept. It holds the currently developed features after the Pull Request are approved by devs working on their separate feature branches.
feature-branch:
It contains the task wise features developed by one or more developer. Which once approved will be merged into develop branch. E.g: RRS-1001-some-awesome-feature (If you can reflect the task name as branch name, will be better!) But also remember your branch name mnust be concise and as sort as possible.
Maintainer:
- Buddha Man Nepali info@bmnepali.com.np