david-mart / react-boilerplate-edited

React bolierplate - fork from

Fresh project structure setup. Using react/redux, react-router, redux-thunk, chai, react-hot-loader and more. Detailed dev technologies are listed at the bottom of the page.

Setup

1. Install Node 7.2.1 or greater.
2. Clone the project.
   • HTTP: git clone [email protected]:sadasystems/geo-dotmaps-react.git
   • SSH: [email protected]:sadasystems/geo-dotmaps-react.git

Building the Application

# Install the dependencies with yarn
yarn

# Install the dependencies with npm

npm install

Run

• npm start -s

  • This will run the automated build process, start up a webserver, and open the application in your default browser. When developing, this command will continue watching all your files.
    • Note: The -s flag is optional. It enables silent mode which suppresses unnecessary messages during the build.
  • Every time a file is saved, the following is performed:
    • Code is rebuilt.
    • Linter will check the code quality of the project.
    • Unit tests are re-ran.

• npm run start:dash

  • This will run the same command using webpack-dashboard plugin. Now when you run your dev server, you basically work at NASA (c)

Running Tests and Code Coverage

• To run tests explicitly, npm run test.
• To perform code coverage analysis: npm run test:cover.
  • Code coverage can be viewed in the /coverage folder.
    • Open /coverage/index.html in your browser to review the results in finer detail

Building the project

# This will build the solution and produce the artifacts to the /dist folder
npm run build

Technologies

Slingshot offers a rich development experience using the following technologies:

Tech	Description	Learn More
React	Fast, composable client-side components.	Pluralsight Course
Redux	Enforces unidirectional data flows and immutable, hot reloadable store. Supports time-travel debugging. Lean alternative to Facebook's Flux.	Getting Started with Redux, Building React Applications with Idiomatic Redux, Pluralsight Course
React Router	A complete routing library for React	Pluralsight Course
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 Dashboard	A CLI dashboard for your webpack dev server	Getting started
Browsersync	Lightweight development HTTP server that supports synchronized testing and debugging on multiple devices.	Intro vid
Mocha	Feature-rich JavaScript test framework running on Node.js and in the browser, making asynchronous testing simple and fun.	Official Wiki
Material-UI	A Set of React Components that Implement Google's Material Design.	Getting started, Google Material Design specs
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	Transform styles with JS plugins. Used to autoprefix CSS
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?