Front-end build system for Node, React and ES6+ React apps. Includes React Router. Gulp version.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
public
server
src
.eslintrc.json
.gitignore
Procfile
gulpfile.js
package.json
readme.md

readme.md

SuperCell 2.1.1 - Build 2016

This Build is no longer being maintained. Please use Create-React-App instead.

David David

SuperCell Build 2016 is a simple boilerplate for Node, React, React-Router, Redux, and Sass. It features an easy to configure Gulp setup that is friendly to beginners while still offering advanced features such as browser-sync, babel ES6+ compiler, source maps, and optimized builds.

CHANGELOG

v2.1.1, October 22, 2017

  • updated outdated packages

v2.1.0, June 5, 2017

v2.0.0, May 24, 2017

  • Updated react-router to v4, hashHistory on by default.
  • Updated outdated packages to current versions.
  • Modified src folder and file structure.

YouTube Demo 1.0.8

SuperCell YouTube Demo

Install Packages

After cloning the project to your computer run the following command in your terminal to install all required node packages.

sudo npm install

The first time you run gulp the build may take a little longer as it compiles and builds out the "public/css" and "public/js" folders and files.

Running App

This build system can be run in two modes: development and production. Use development when you are developing your app. In this mode your JS will not be minified, React will include all its warnings and your CSS will contain sourcemaps to the original SCSS files. When you are ready to deploy you can start the app in production mode which will turn off React warnings, uglify your JS, and turn off sourcemaps for both JS and CSS.

npm run dev  (starts app in development mode) 

Building App and Deploy to Heroku

Make sure you have a Heroku account and heroku-cli installed.

  1. IMPORTANT: COMMENT OUT: in .gitignore comment out last two lines see below. Heroku needs these build folders to run app.
# public/css/
# public/js/
  1. npm run build (creates app production mode ready for heroku or other cloud platform)
  2. Commit your project to git locally. This commit will be used for heroku.
  3. heroku create
  4. git push heroku master
  5. heroku open
  6. IMPORTANT: UNCOMMENT OUT: in .gitignore uncomment out last two lines see below.
public/css/
public/js/
  1. Commit your project back to git with the commented .gitignore. You can now recommit your project to your remote repo without unnecessary build files.

Features

  • ES6+ with Babel. Use all the new niffty ES6+ features and transpile down to ES5.
  • Browserify: JSX transforms, ES6 modules.
  • React Ready!
  • Uglify: minification.
  • BrowserSync.
  • Sass / flexbox ready (IE10+), layout for everygreen browsers.

How to use

Precompiled JS and SCSS files are in the src folder and compile to public. All other files including HTML, image etc. are in public. BrowserSync runs from public and serves as the "Dist" folder for client-side apps.