Fusion Starter is a comprehensive starter kit for rapid application development using React.
https://fusion-starter.firebaseapp.com
First time? Do the initial machine setup.
git clone https://github.com/cox-auto-kc/fusion-starter.git my-project
cd my-project
npm install
npm start -s
This will run the automated build process, run tests, lint, start up a webserver, and open the application in your default browser. After running the start command, your code is rebuilt and tests run automatically every time you hit save. See the full list of commands.
Once you're comfortable with how the example app works, remove the example app: npm run remove-demo.
Be sure to enable CORS on the APIs you need to call.
##Why Use this?
- One command to get started - Type
npm startto start development in your default browser. - Rapid feedback - Each time you hit save, changes hot reload and linting and automated tests run.
- One command line to check - All feedback is displayed on a single command line.
- No more JavaScript fatigue - Uses the most popular and powerful libraries for working with React.
- Working example app - The included example app shows how this all works together.
- Automated production build - Type
npm run buildto minify and bundle CSS and JS, run tests, lint your code and more.
##Technologies
| Tech | Description | Learn More |
|---|---|---|
| React | Fast, composable client-side components | Thinking in React Pluralsight Courses |
| React Router | A complete routing library for React. | |
| Redux | Enforces unidirectional data flows and immutable stores. Useful on larger apps with complex data flows. Alternative to Facebook's Flux. | Tutorial Video Pluralsight Course Code-based 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. Supports hot reloading. | Quick Webpack How-to 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 Enzyme for DOM testing without a browser using Node. | Pluralsight Course |
| Istanbul | Code coverage data. Using Isparta to handle ES6 code. | |
| TrackJS | JavaScript error tracking. Reports available at TrackJS.com. See Cory for credentials | |
| 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 |
| PostCSS | A tool for transforming CSS with JavaScript. We're using stylelint to lint styles | |
| 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? |
Fusion comes prepackaged with a variety of components to solve for the general needs of developing applications:
| Tech | Description |
|---|---|
| React-Bootstrap | The most popular front-end framework, rebuilt for React. Use any Bootstrap 3 theme you like. Fusion Starter Kit comes with the Tracksuit Bootstrap theme. |
| Griddle | Griddle is a simple grid component for use with React. Griddle ships with filtering, sorting, and paging out of the box. |
| Draft.js | Draft.js is a framework for building rich text editors in React, powered by an immutable model and abstracting over cross-browser differences. |
| D3.js | D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS. |
| React Lazyload | Lazyload your Component, Image or anything matters the performance. |
| React Router Bootstrap | Integration between React Router and React-Bootstrap. |
| React Progress Bar | A progress bar component for React. |
| React Date Time Picker | A date time picker for React. |
| React Select | A flexible Select Input control for React. |
| Entypo Icons | A React component for the entypo icon library. |
| React Font Awesome | A React component for the font-awesome icon library. Note: This component does not include any of the Font Awesome CSS or fonts, so you'll need to make sure to include those on your end somehow, either by adding them to your build process or linking to CDN versions. |
| Tracksuit | A Bootstrap 3 theme with enhancements for touch-based devices. |
##Initial Machine Setup
Mac:
- Install Node.js and Git. The recommended defaults are fine.
- Configure your Editor. Install editorconfig plugin, Disable safe write, Install React plugin and configure your editor.
- Install React developer tools and Redux Dev Tools in Chrome. (Optional, but helpful)
Windows:
- Install Node.js and Git. The recommended defaults are fine.
- Install Python 2.7. Browser-sync (and various other Node modules) rely on node-gyp, which requires Python on Windows.
- Install C++ Compiler. Open Visual Studio and go to File -> New -> Project -> Visual C++ -> Install Visual C++ Tools for Windows Desktop. The C++ compiler is used to compile browser-sync (and perhaps other Node modules).
- Install React developer tools and Redux Dev Tools in Chrome. (Optional, but helpful)
- Configure your Editor. Install editorconfig plugin, Install React plugin and configure your editor.
- Add two lines to your Windows hosts file for vinconnect.com:
127.0.0.1 vinconnect.com
127.0.0.1 www.vinconnect.com
The api configuration example (in /src/api/api.js) assumes that you're running VinConnect and its APIs locally at vinconnect.com, so these host entries make sure cross origin calls like this succeed: vinconnect.com/CarDashboard/API/CRMServiceBase/v1/customers/attachments/list?customerId=212746634
Check out the FAQ