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
A2) Install JSPM
$ npm install -g jspm
Depending on your specific node setup, this might also require sudo.
A3) Install Ruby & SASS
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