React Boilerplate by Luxoft

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
Browsersync	Lightweight development HTTP server that supports synchronized testing and debugging on multiple devices.	Intro vid
Jest	Automated tests with built-in expect assertions and Enzyme for DOM testing without a browser using Node.	Pluralsight Course
TrackJS	JavaScript error tracking.	Free trial
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?

The starter kit includes a working example app that puts all of the above to use.

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 don't. ;)
start	Runs tests, lints, starts dev webserver, and opens the app in your default browser. Supported parameters like (*1) proxyUrl="http://localhost:3002/api" apiUrl="..." basePath="..."
lint:tools	Runs ESLint on build related JS files. (eslint-loader lints src files via webpack when npm start is run)
open:mocks	Runs Mock standalone server (default port is 3002) on localhost. See the docs Mocks
clean-dist	Removes everything from the dist folder.
remove-dist	Deletes the dist folder.
create-dist	Creates the dist folder and the necessary subfolders.
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.
test	Runs tests (files ending in .spec.js or .test.js) using Jest and outputs results to the command line. Watches all files so tests are re-run upon save.
test:cover	Runs tests as described above. Generates a HTML coverage report to ./coverage/index.html
test:cover:travis	Runs coverage as described above, however sends machine readable lcov data to Coveralls. This should only be used from the travis build!
analyze-bundle	Analyzes webpack bundles for production and gives you a breakdown of where modules are used and their sizes via a convenient interactive zoomable treemap.

(*1) if you pass proxyUrl, dev server enable proxy on the server port (localhost:3000 default) requests with /api pattern will solved by proxy

Mocks based on url-pattern json-schema-faker

Can you explain the folder structure?

├── .babelrc                  # Configures Babel
├── .editorconfig             # Configures editor rules
├── .eslintrc                 # Configures ESLint
├── .gitignore                # Tells git which files to ignore
├── .gitattributes            # Force LF line endings
├── .istanbul.yml             # Configure istanbul code coverage
├── .npmrc                    # Configures npm to save exact by default
├── README.md                 # Readme file.
├── dist                      # Folder where the build script places the built app. Use this in prod.
├── package.json              # Package configuration. The list of 3rd party libraries and utilities
\---src
    +---modules
        +---App               # Application module for reusable components, utils, contants and other things
        |   +---components    # React components inside module (reusable for App module)
        |   +---constants     # Application constants including constants for Redux
        |   +---redux         # Redux part of the module, separated group of reducers, actions, middlewares, sagas...
        |   |   +---reducers
        |   |   +---state
        |   |   \---store
        |   +---styles        # CSS Styles, typically written in Sass
        |   \---utils         # Module utilites (Reusable in Module App)
        +---Demo              # An example of working module
        |   +---components    # Example module components
        |   +---containers    # Example of view for components redux binding and dusplaying aspecially
        |   +---mocks         # Mocks example with json-schema-faker (user proxy if you need it on localhost:3000/api)
        |   +---redux         # Locally redux things
        |   |   +---actions
        |   |   \---reducers
        |   \---utils         # Locally utilites
    +---configs               # Build project configs     
    ├── webpack.config.dev.js     # Configures webpack for development builds
    └── webpack.config.prod.js    # Configures webpack for production builds

When you run npm start:

1. The sass-loader compiles Sass into CSS
2. Webpack bundles the compiled CSS into bundle.js. Sounds odd, but it works!
3. bundle.js contains code that loads styles into the <head> of index.html via JavaScript. This is why you don't see a stylesheet reference in index.html. In fact, if you disable JavaScript in your browser, you'll see the styles don't load either.

The approach above supports hot reloading, which is great for development. However, it also create a flash of unstyled content on load because you have to wait for the JavaScript to parse and load styles before they're applied. So for the production build, we use a different approach:

When you run npm run build:

1. The sass-loader compiles Sass into CSS
2. The extract-text-webpack-plugin extracts the compiled Sass into styles.css
3. buildHtml.js adds a reference to the stylesheet to the head of index.html.

For both of the above methods, a separate sourcemap is generated for debugging Sass in compatible browsers.

I don't like the magic you just described above. I simply want to use a CSS file.

No problem. Reference your CSS file in index.html, and add a step to the build process to copy your CSS file over to the same relative location /dist as part of the build step. But be forwarned, you lose style hot reloading with this approach.

I just want an empty starter kit.

This starter kit includes an example app so you can see how everything hangs together on a real app. When you're done reviewing it, run this to remove the demo app: