SuperCell 2.1.1 - Build 2016
This Build is no longer being maintained. Please use Create-React-App instead.
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.
v2.1.1, October 22, 2017
- updated outdated packages
v2.1.0, June 5, 2017
- Added Eslint
- Changed default router to BrowserHistory
- Added express server for deployment to Heroku
- Added instruction for Heroku depolyment below.
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
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.
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.
- IMPORTANT: COMMENT OUT: in
.gitignorecomment out last two lines see below. Heroku needs these build folders to run app.
# public/css/ # public/js/
npm run build(creates app production mode ready for heroku or other cloud platform)
- Commit your project to git locally. This commit will be used for heroku.
git push heroku master
- IMPORTANT: UNCOMMENT OUT: in
.gitignoreuncomment out last two lines see below.
- Commit your project back to git with the commented .gitignore. You can now recommit your project to your remote repo without unnecessary build files.
- ES6+ with Babel. Use all the new niffty ES6+ features and transpile down to ES5.
- Browserify: JSX transforms, ES6 modules.
- React Ready!
- Uglify: minification.
- 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.