Optimize the project for Firebase hosting

Closes #96

Author: koistya

.gitignore

@@ -1,6 +1,13 @@
 # Include your project-specific ignores in this file
 # Read about how to use .gitignore: https://help.github.com/articles/ignoring-files
 
-build
+# Compiled output
+public/dist
+public/index.html
+
+# Node.js and NPM
 node_modules
 npm-debug.log
+
+# Firebase
+firebase-debug.log

README.md

@@ -9,10 +9,8 @@
 [![In progress](https://img.shields.io/waffle/label/koistya/react-static-boilerplate/in%20progress.svg?style=flat-square)](https://waffle.io/koistya/react-static-boilerplate)
 
 > Single-page application boilerplate and tooling powered by [React](http://facebook.github.io/react/)
-> and [Redux](http://redux.js.org/). It's optimized for generating static websites from React components
-> ready to be deployed to a [CDN](https://en.wikipedia.org/wiki/Content_delivery_network) hosting
-> such as [GitHub Pages](https://pages.github.com/), [Amazon S3](http://docs.aws.amazon.com/AmazonS3/latest/dev/WebsiteHosting.html)
-> or [Firebase](https://firebase.google.com/docs/hosting/).
+> and [Redux](http://redux.js.org/). It's optimized for generating a static website from React components
+> ready to be deployed to [Firebase](https://firebase.google.com/) CDN hosting.
 
 **The work is being sponsored by:**
 
@@ -42,32 +40,36 @@
 &nbsp; &nbsp; ✓ [Code-splitting](https://github.com/webpack/docs/wiki/code-splitting) and async chunk loading via [Webpack](https://webpack.github.io/) and [ES6 System.import()](http://www.2ality.com/2014/09/es6-modules-final.html)<br>
 &nbsp; &nbsp; ✓ Hot Module Replacement ([HMR](https://webpack.github.io/docs/hot-module-replacement.html)) /w [React Hot Loader](http://gaearon.github.io/react-hot-loader/)<br>
 &nbsp; &nbsp; ✓ Cross-device testing with [Browsersync](https://browsersync.io/) (see [`run.js#start`](run.js))<br>
-&nbsp; &nbsp; ✓ Easy deployment to [GitHub Pages](https://pages.github.com/), [Amazon S3](http://davidwalsh.name/hosting-website-amazon-s3) or [Firebase](https://www.firebase.com/) (see [`run.js#publish`](run.js))<br>
 &nbsp; &nbsp; ✓ 24/7 community support on [Gitter](https://gitter.im/koistya/react-static-boilerplate); customization requests on [Codementor](https://www.codementor.io/koistya)<br>
 
 
 ### Directory Layout
 
 ```shell
 .
-├── /build/                     # The folder for compiled output
-├── /node_modules/              # 3rd-party libraries and utilities
-├── /components/                # Shared/generic UI components
-│   ├── /layout/                # Layout component
-│   ├── /button/                # Button component
+├── /components/                # Shared or generic UI components
+│   ├── /Button/                # Button component
+│   ├── /Layout/                # Website layout component
+│   ├── /Link  /                # Link component to be used insted of <a>
 │   └── /...                    # etc.
 ├── /core/                      # Core framework
 │   ├── /history.js             # Handles client-side navigation
 │   ├── /router.js              # Handles routing and data fetching
 │   └── /store.js               # Application state manager (Redux)
+├── /node_modules/              # 3rd-party libraries and utilities
 ├── /pages/                     # React components for web pages
 │   ├── /about/                 # About page
 │   ├── /error/                 # Error page
 │   ├── /home/                  # Home page
 │   └── /...                    # etc.
-├── /static/                    # Static files such as favicon.ico etc.
+├── /public/                    # Static files such as favicon.ico etc.
+│   ├── /dist/                  # The folder for compiled output
+│   ├── favicon.ico             # Application icon to be displayed in bookmarks
+│   ├── robots.txt              # Instructions for search engine crawlers
+│   └── /...                    # etc.
 ├── /test/                      # Unit and integration tests
 ├── /utils/                     # Utility and helper classes
+│── index.html                  # HTML page that references application bundle
 │── main.js                     # React application entry point
 │── package.json                # The list of project dependencies and NPM scripts
 │── routes.json                 # This list of application routes
@@ -84,8 +86,9 @@ Just clone the repo, install Node.js modules and run `npm start`:
 $ git clone -o react-static-boilerplate -b master --single-branch \
       https://github.com/koistya/react-static-boilerplate.git MyApp
 $ cd MyApp
+$ npm install -g firebase-tools
 $ npm install           # Install project dependencies listed in package.json
-$ npm start             # Build and launch the app, same as "node tools/start.js"
+$ npm start             # Build and launch the app, same as `node run start`
 ```
 
 **NODE**: Make sure that you have [Node.js](https://nodejs.org/) v6 installed on your local machine.
@@ -96,7 +99,8 @@ $ npm start             # Build and launch the app, same as "node tools/start.js
 The unit tests are powered by [chai](http://chaijs.com/) and [mocha](http://mochajs.org/).
 
 ```shell
-$ npm test
+$ npm run lint
+$ npm run test                  # Or, `npm run test:watch`
 ```
 
 
@@ -105,14 +109,14 @@ $ npm test
 Update deployment URL inside `run.js` file, the run one of the following commands: 
 
 ```shell
-$ npm run publish:gh            # Build and publish the website to GitHub Pages
-$ npm run publish:s3            # Build and publish the website to Amazon S3
+$ firebase login                # Login into Firebase and obtain an authentication token 
+$ npm run publish               # Build and publish the website to Firebase, same as `node run publish`
 ```
 
 If you need just to build the project without publishing it, run:
 
 ```shell
-$ npm run build                 # Build websites into a distributable format 
+$ npm run build                 # Or, `node run build`, `node run build --debug`
 ```
 
 

database.rules.json

@@ -0,0 +1,6 @@
+{
+  "rules": {
+    ".read": "auth != null",
+    ".write": "auth != null"
+  }
+}

docs/recipes/deploy-to-amazon-s3.md

@@ -0,0 +1,40 @@
+## How to Publish Website to Amazon S3
+
+`1`. Configure S3 bucket for hosting a static site:
+
+http://docs.aws.amazon.com/AmazonS3/latest/dev/WebsiteHosting.html
+
+`2`. Install [`s3`](https://github.com/andrewrk/node-s3-client) npm module:
+
+```sh
+$ npm install s3 --save-dev
+```
+
+`3`. Add deployment script to `run.js`:
+
+```js
+tasks.set('publish', () => {
+  const s3 = require('s3');
+  return run('build').then(() => new Promise((resolve, reject) => {
+    const client = s3.createClient({
+      s3Options: {
+        region: 'us-east-1',
+        sslEnabled: true,
+      },
+    });
+    const uploader = client.uploadDir({
+      localDir: 'public',
+      deleteRemoved: true,
+      s3Params: { Bucket: 'www.example.com' }, // TODO: Update deployment URL
+    });
+    uploader.on('error', reject);
+    uploader.on('end', resolve);
+  }));
+});
+```
+
+`4`. Whenever you need to publish your site to Amazon S3 simply run:
+
+```sh
+$ node run publish --release
+```

docs/recipes/deploy-to-github-pages.md

@@ -0,0 +1,50 @@
+## How to Publish a Static Site to [GitHub Pages](https://pages.github.com/)
+
+`1`. Add deployment script to `run.js`:
+
+```js
+tasks.set('publish', () => {
+  const remote = {
+    url: 'https://github.com/<owner>/<repo>.git', // TODO: Update deployment URL
+    branch: 'gh-pages',
+  };
+  const spawn = require('child_process').spawn;
+  const opts = { cwd: path.resolve(__dirname, './build'), stdio: ['ignore', 'inherit', 'inherit'] };
+  const git = (...args) => new Promise((resolve, reject) => {
+    spawn('git', args, opts).on('close', code => {
+      if (code === 0) {
+        resolve();
+      } else {
+        reject(new Error(`git ${args.join(' ')} => ${code} (error)`));
+      }
+    });
+  });
+
+  return Promise.resolve()
+    .then(() => run('clean'))
+    .then(() => git('init', '--quiet'))
+    .then(() => git('config', '--get', 'remote.origin.url')
+      .then(() => git('remote', 'set-url', 'origin', remote.url))
+      .catch(() => git('remote', 'add', 'origin', remote.url))
+    )
+    .then(() => git('ls-remote', '--exit-code', remote.url, 'master')
+      .then(() => Promise.resolve()
+        .then(() => git('fetch', 'origin'))
+        .then(() => git('reset', `origin/${remote.branch}`, '--hard'))
+        .then(() => git('clean', '--force'))
+      )
+      .catch(() => Promise.resolve())
+    )
+    .then(() => run('build'))
+    .then(() => git('add', '.', '--all'))
+    .then(() => git('commit', '--message', new Date().toUTCString())
+      .catch(() => Promise.resolve()))
+    .then(() => git('push', 'origin', `HEAD:${remote.branch}`, '--force', '--set-upstream'));
+});
+```
+
+`2`. Whenever you need to publish your site to GitHub Pages simply run:
+
+```sh
+$ node run publish --release
+```

firebase.json

@@ -0,0 +1,14 @@
+{
+  "database": {
+    "rules": "database.rules.json"
+  },
+  "hosting": {
+    "public": "public",
+    "rewrites": [
+      {
+        "source": "**",
+        "destination": "/index.html"
+      }
+    ]
+  }
+}

static/index.html renamed to index.html

@@ -9,12 +9,12 @@
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
     <link rel="stylesheet" href="https://cdn.rawgit.com/tleunen/react-mdl/master/extra/material.min.css">
     <link rel="stylesheet" href="https://cdn.rawgit.com/isagalaev/highlight.js/master/src/styles/default.css">
-    <link rel="apple-touch-icon" href="apple-touch-icon.png">
+    <link rel="apple-touch-icon" href="public/apple-touch-icon.png">
   </head>
   <body>
     <div id="container"></div>
     <script src="https://cdn.rawgit.com/tleunen/react-mdl/master/extra/material.min.js"></script>
-    <script src="/main.js"></script>
+    <script src="/dist/main.js"></script>
     <!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
     <script>
       window.ga=function(){ga.q.push(arguments)};ga.q=[];ga.l=+new Date;

package.json

@@ -30,7 +30,6 @@
     "babel-runtime": "^6.9.2",
     "browser-sync": "^2.13.0",
     "chai": "^3.5.0",
-    "cpy": "^4.0.1",
     "css-loader": "^0.23.1",
     "del": "^2.2.1",
     "eslint": "^2.13.1",
@@ -44,7 +43,6 @@
     "highlight.js": "^9.5.0",
     "json-loader": "^0.5.4",
     "markdown-it": "^7.0.0",
-    "mkdirp": "^0.5.1",
     "mocha": "^2.5.3",
     "path-to-regexp": "^1.5.3",
     "pixrem": "^3.0.1",
@@ -93,16 +91,15 @@
   },
   "scripts": {
     "eslint": "eslint components core pages test utils main.js run.js webpack.config.js",
-    "stylelint": "stylelint \"components/**/*.css\" \"routes/**/*.css\"",
+    "stylelint": "stylelint \"components/**/*.css\" \"pages/**/*.css\"",
     "lint": "npm run eslint && npm run stylelint",
     "test": "mocha --compilers js:babel-register",
     "test:watch": "mocha --compilers js:babel-register --reporter min --watch",
     "clean": "node run clean",
-    "build": "node run build --release",
-    "build:debug": "node run build",
-    "publish": "node run publish --release",
-    "publish:gh": "node run publish:gh --release",
-    "publish:s3": "node run publish:s3 --release",
+    "build": "node run build",
+    "build:debug": "node run build --debug",
+    "publish": "node run publish",
+    "publish:debug": "node run publish --debug",
     "start": "node run"
   }
 }

static/apple-touch-icon.png renamed to public/apple-touch-icon.png

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Please read: https://msdn.microsoft.com/en-us/library/ie/dn455106.aspx -->
+<browserconfig>
+  <msapplication>
+    <tile>
+      <square70x70logo src="tile.png"/>
+      <square150x150logo src="tile.png"/>
+      <wide310x150logo src="tile-wide.png"/>
+      <square310x310logo src="tile.png"/>
+    </tile>
+  </msapplication>
+</browserconfig>