Single Page App Starter Kit with ES6, JSPM, React, and Sass

What?

This is the boilerplate tooling for a new single page web application. It transpiles ES6/ES7-style code to browser compatible JavaScript using Babel. It uses JSPM for frontend dependency management, which supports ES6 modules via System.JS. CSS is generated by the excellent Sass pre-processor. Everything is glued together with npm scripts in package.json.

See below to get started.

Documentation

Frontend

• JavaScript: https://github.com/getify/You-Dont-Know-JS/
• React Docs: https://facebook.github.io/react/docs/getting-started.html
• React Style Guide: https://github.com/Khan/style-guides/blob/master/style/react.md
• JSX: https://facebook.github.io/react/docs/jsx-in-depth.html

Tooling

• ES6 Transpiler: https://babeljs.io
• ES6 Module System: https://github.com/systemjs/systemjs/blob/master/docs/es6-modules-overview.md
• System.js: https://github.com/systemjs/systemjs
• JSPM: http://jspm.io
• NPM: https://docs.npmjs.com

Testing

• Jasmine Docs: http://jasmine.github.io/2.3/introduction.html
• Jasmine Cheatsheet: http://www.cheatography.com/citguy/cheat-sheets/jasmine-js-testing/
• Karma Docs: http://karma-runner.github.io
• React Test Utils: https://facebook.github.io/react/docs/test-utils.html

Setup

A) System Requirements

A1) Install NodeJS & NPM

• https://nodejs.org/en/download/

A2) Install JSPM

$ npm install -g jspm

Depending on your specific node setup, this might also require sudo.

A3) Install Ruby & SASS

• http://sass-lang.com/install

Sass is written in Ruby, so install Ruby first. It might already be installed.

B) Project Setup

B1) Clone this repository

$ git clone https://github.com/janlelis/jspm-es6-react-sass-starter.git

B2) Install JavaScript Dependencies

$ npm install

This will also trigger jspm install.

5) Start the Local Server & File Watcher

$ npm start

This will start a local webserver on http://127.0.0.1:8000