Based on React Slingshot by Cory House. Tech includes:
| Tech | Description | Learn More |
|---|---|---|
| React | Fast, composable client-side components. | Pluralsight Course |
| Redux | Enforces unidirectional data flows and immutable, hot reloadable store. Lean alternative to Facebook's Flux. | Tutorial |
| 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. | Pluralsight Course |
| Browsersync | Lightweight development HTTP server that supports synchronized testing and debugging on multiple devices. | Intro vid |
| Mocha | Automated tests with Chai for assertions and Cheerio for DOM testing without a browser using Node. | Pluralsight Course |
| 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 |
The starter kit includes a working example app that puts all of the above to use.
- Clone the project.
git clone https://github.com/pmachowski/INF-App.git. - Install Node packages.
npm install - Run the example app.
npm start -sThis will run the automated build process, start up a webserver, and open the application in your default browser. Note: The -s flag is optional. It enables silent mode which supresses unnecessary messages during the build.
| Script | Description |
|---|---|
| prestart | Runs automatically before start. Calls remove-dist script which deletes the dist folder. This helps remind you to run the build script before committing since the dist folder will be deleted if you dont. ;) |
| start | Runs tests, lints, starts dev webserver, and opens the app in your default browser. |
| open | Opens the app in your default browser. |
| lint | Runs ESLint. |
| lint:watch | Runs ESLint and watches all files so that they are automatically linted upon save. |
| clean-dist | Removes everything from the dist folder. |
| remove-dist | Deletes the dist folder. |
| create-dist | Creates the dist folder and the necessary subfolders. |
| build:html | Adds trackJS tracking script and copies to /dist. |
| build:sass | Compiles SASS, minifies, generates sourcemap, and stores in /dist. |
| prebuild | Runs automatically before build script (due to naming convention). Cleans dist folder, builds html, and builds sass. |
| build | Bundles all JavaScript using webpack and writes it to /dist. |
| build:verbose | Same as above, but verbose so you can see all the details happening including warnings. |
| test | Runs tests (files ending in .spec.js) using Mocha and outputs results to the command line. Watches all files so tests are re-run upon save. |