React-App-Sketch

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.

Directory Layout

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

Quick Start

0. Requirements

nodejs > 6.0
npm > 3.5
git

1. get the latest version

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

2. Install Node packages && Run the app

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.

3. Deploy the app

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

4. Update from sketch

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

onweer / react-app-sketch