Good starter scallfold, pure web app, build with React and Redux, ES6 anywhere. Single page app, push state friendly, deploy with docker.
Tech | Description | Learn More |
---|---|---|
React | Fast, composable client-side components. | Pluralsight Course React Gitbook |
Redux | Enforces unidirectional data flows and immutable, hot reloadable store. Supports time-travel debugging. Lean alternative to Facebook's Flux. | Pluralsight Course Redux gitbook |
React-Router | A complete routing library for React | Pluralsight Course react-router gitbook |
Babel | Compiles ES6 to ES5. Enjoy the new version of JavaScript today. | ES6 REPL, ES6 vs ES5, ES6 Katas, Pluralsight course |
Webpack | Bundles npm packages and our JS into a single file. Includes hot reloading via react-transform-hmr. | Quick Webpack How-to Pluralsight Course Webpack gitbook |
Browsersync | Lightweight development HTTP server that supports synchronized testing and debugging on multiple devices. | Intro vid |
Mocha | Automated tests with Chai for assertions and Enzyme for DOM testing without a browser using Node. | Pluralsight Course |
Isparta | Code coverage tool for ES6 code transpiled by Babel. | |
ESLint | Lint JS. Reports syntax and style issues. Using eslint-plugin-react for additional React specific linting rules. | |
SASS | Compiled CSS styles with variables, functions, and more. | Pluralsight Course |
Editor Config | Enforce consistent editor settings (spaces vs tabs, etc). | IDE Plugins |
npm Scripts | Glues all this together in a handy automated build. | Pluralsight course, Why not Gulp? |
This is a Sketch for a real React App, it could be used for enterprise projects.
Before you start, take a moment to see how the project structure looks like:
├── README.md # Quick start document
├── bin # scripts
│ ├── release.js # script help to release
│ ├── service.js # start the fake api service
│ └── start.js # jump to the development
├── dist/ # The folder for compiled output
├── config # configuration use node-config
│ └── default.json
├── package.json # package definition
├── src # all source code written for this app
│ ├── 404.html # 404 page
│ ├── 500.html # 500 page
│ ├── actions # react actions
│ │ └── session.js
│ ├── constants.js # const constants
│ ├── containers # container components, connect to store
│ │ ├── index.js
│ │ ├── layout.jsx
│ │ └── login.jsx
│ ├── favicon.ico
│ ├── images # images
│ │ └── focus.gif
│ ├── index.html # home html
│ ├── index.jsx # entry file
│ ├── middlewares # middlewares for react, redux & router
│ │ ├── apiError.js
│ │ └── wrapperHeader.js
│ ├── reducers # react reducers
│ │ ├── index.js
│ │ └── session.js
│ ├── routes # routers
│ │ └── index.jsx
│ ├── store.js # all states
│ └── styles # SASS
│ ├── flatkit.scss
│ └── main.scss
└── webpack.config.babel.js # webpack config, including prod & dev
- nodejs > 6.0
- npm > 3.5
- git
git clone -o sketch -b master --single-branch \
https://github.com/zzswang/react-app-sketch.git MyApp
cd MyApp
// connect to your own repository
git remote add origin your-app-repository
git push -u origin master
run npm install && npm start
This will run the automated build process, start up a fake api server, and open the application in your default browser. When doing development with this kit, this command will continue watching files all your files. Every time you hit save the code is rebuilt, linting runs, and tests run automatically.
deploy with command line
cp config/default.json config/production.json
// editing this file, and save
NODE_ENV=production npm run build
npm run deploy -- machine:/path/to/deploy/
Note: If you want to put the app in a sub path, like http://you.domain/texas/, plz modify the baseUrl in the config/production.json.
deploy with docker
// it will build an image defined in your package.json
npm run docker
// export you image to somewhere else, run it
docker run -d -p 80:80 your_image
It is impossible to make everything perfect with one time shot, we need to track up with the sketch improvements, make sure up-to-date.
run git fetch sketch master
, and do the merge work git merge sketch/master