Serve all static assets from the same root directory

Previously assets were served from the `static/` directory; at the root
of this directory were unmodified static files that were part of version
control, e.g. `index.html`. This contained `static/compiled/`, which
contained compiled files (CSS bundle, JS bundle, etc.) and was not under
version control.

Now all assets are served from the `dist` directory in the root of the
project; `static` has moved to `src/static`.

The proximate motivation for this is that service workers can’t control
files outside of the directory they are served from; so, serving a
service worker from `/compiled/sw.js` prevented that service worker from
caching `/index.html`. This can be overridden with a header, but since
we serve the site statically from S3, that’s not so simple.

This change also I think is strictly more sensible.

Author: Mat Brown

.gitignore

@@ -1,4 +1,4 @@
-static/compiled
+dist
 node_modules
 npm-debug.log
 bower_components

.travis.yml

@@ -38,7 +38,7 @@ deploy:
     secure: qqkSdpnlOM80HavspUc/S4OpohDAkbDqaCKQTw08j2/CaU0LwN335CVQhDZ4Oskgr6y5evx6LrTU0BNiDfzcMIEykokV1ZCPLuWLrHo/ZtCSIU+3ikVErY/0qZH4FdZ1h/Q1FP5gTDydP0QbXWkQsQQg1cgg2NTX4/BsTTT9nBRJeg4Gdm9ARLW0b3SGutW13tW8fuRG9YrNJs6gKZsZ6FhP1ru4T47tdsbphV1IsedZv8nU7dGnWQj67//4OpAHOi1KOm6K1CprNa35Kw7D/+n6786skbPi7Tsu7UbIVMWD+Jy1c2xtz3mqinIbyS8spzLd3kbDV+BRvIYXXHpC6B4gGhyRd+ohN+WcoDQZJha2PaOfIPfAxPhK2IKO6h+6i8Q0CK4/x4Yd8PurVHrB8KEyPrMHPa42abMTTeRLs7OAjrtM7dWucngCvW6fBqhpgp36cRDZeXLKjywkapo1/6l64fjkM+wGkYFkI5i6qzEAr0JvBrIeTDiymz1Oitf3Uio+vs4hfjXegQansq5l/mXtMdI9DfNrKm/R2zpUp1qS7i+v1MfnhAxd8NOEGYpT75sJbSVca0jgnkLXcja6+O4oRswx4maA+BTiIcwknAn6B4Rupf8U0Tnt3s/pFu6Ih6lnMo6rpeBkV7FO1Bwyv59zyxZS8Z23ec+v7+TZ/iE=
   bucket: popcode.org
   skip_cleanup: true
-  local-dir: static
+  local-dir: dist
   acl: public_read
   on:
     repo: popcodeorg/popcode

gulpfile.js

@@ -5,6 +5,7 @@
 /* eslint-disable import/no-nodejs-modules */
 
 const fs = require('fs');
+const path = require('path');
 const https = require('https');
 const gulp = require('gulp');
 const yargs = require('yargs');
@@ -26,9 +27,9 @@ const webpackConfiguration = require('./webpack.config');
 
 const browserSync = BrowserSync.create();
 const srcDir = 'src';
-const baseDir = 'static';
-const distDir = `${baseDir}/compiled`;
-const stylesheetsDir = `${srcDir}/css`;
+const distDir = 'dist';
+const stylesheetsDir = path.join(srcDir, 'css');
+const staticDir = path.join(srcDir, 'static');
 const bowerComponents = 'bower_components';
 
 const cssnextBrowsers = [];
@@ -49,14 +50,24 @@ gulp.task('env', () => {
   }
 });
 
+gulp.task('static', () => gulp.
+  src(path.join(staticDir, '**/*')).
+  pipe(gulp.dest(distDir))
+);
+
 gulp.task('fonts', () => gulp.
   src([
-    `${bowerComponents}/inconsolata-webfont/fonts/inconsolata-regular.*`,
-    `${bowerComponents}/fontawesome/fonts/fontawesome-webfont.*`,
-    `${bowerComponents}/roboto-webfont-bower/fonts/` +
-      'Roboto-{Bold,Regular}-webfont.*',
+    path.join(
+      bowerComponents,
+      'inconsolata-webfont/fonts/inconsolata-regular.*'
+    ),
+    path.join(bowerComponents, 'fontawesome/fonts/fontawesome-webfont.*'),
+    path.join(
+      bowerComponents,
+      'roboto-webfont-bower/fonts/Roboto-{Bold,Regular}-webfont.*'
+    ),
   ]).
-    pipe(gulp.dest(`${distDir}/fonts`))
+    pipe(gulp.dest(path.join(distDir, 'fonts')))
 );
 
 gulp.task('css', () => {
@@ -67,8 +78,8 @@ gulp.task('css', () => {
 
   return gulp.
     src([
-      `${bowerComponents}/normalize-css/normalize.css`,
-      `${stylesheetsDir}/**/*.css`,
+      path.join(bowerComponents, 'normalize-css/normalize.css'),
+      path.join(stylesheetsDir, '**/*.css'),
     ]).
     pipe(concat('application.css')).
     pipe(sourcemaps.init({loadMaps: true})).
@@ -92,11 +103,12 @@ gulp.task('js', ['env'], () => {
   return pify(webpack)(productionWebpackConfig);
 });
 
-gulp.task('build', ['fonts', 'css', 'js']);
+gulp.task('build', ['static', 'fonts', 'css', 'js']);
 
 gulp.task('syncFirebase', async () => {
-  const data =
-    await pify(fs).readFile(`${__dirname}/config/firebase-auth.json`);
+  const data = await pify(fs).readFile(
+    path.resolve(__dirname, 'config/firebase-auth.json')
+  );
   const firebaseSecret = process.env.FIREBASE_SECRET;
   if (!firebaseSecret) {
     throw new Error('Missing environment variable FIREBASE_SECRET');
@@ -120,23 +132,23 @@ gulp.task('syncFirebase', async () => {
   });
 });
 
-gulp.task('dev', ['browserSync', 'fonts', 'css'], () => {
-  gulp.watch(`${stylesheetsDir}/**/*.css`, ['css']);
-  gulp.watch(`${baseDir}/*`).on('change', browserSync.reload);
+gulp.task('dev', ['browserSync', 'static', 'fonts', 'css'], () => {
+  gulp.watch(path.join(staticDir, '/**/*'), ['static']);
+  gulp.watch(path.join(stylesheetsDir, '**/*.css'), ['css']);
+  gulp.watch(path.join(distDir, '*')).on('change', browserSync.reload);
 });
 
-gulp.task('browserSync', () => {
+gulp.task('browserSync', ['static'], () => {
   const compiler = webpack(webpackConfiguration);
   compiler.plugin('invalid', browserSync.reload);
   browserSync.init({
     server: {
-      baseDir,
+      baseDir: distDir,
       middleware: [webpackDevMiddleware(
         compiler,
         {
           lazy: false,
           stats: 'errors-only',
-          publicPath: `/${webpackConfiguration.output.publicPath}`,
         }
       )],
     },

package.json

@@ -149,7 +149,7 @@
     "lint": "eslint --ext .js,.jsx --plugin react src test && stylelint src/**/*.css",
     "fixlint": "eslint --ext .js,.jsx --plugin react --fix src test",
     "toc": "doctoc README.md --github --title '## Table of Contents'",
-    "preview": "rm -rvf static/compiled && gulp build --production && static static"
+    "preview": "rm -rvf dist && gulp build --production && static dist"
   },
   "devDependencies": {
     "babel-cli": "^6.23.0",

src/components/Pop.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Neutral from '../../static/images/pop/neutral.svg';
-import Thinking from '../../static/images/pop/thinking.svg';
-import Horns from '../../static/images/pop/horns.svg';
+import Neutral from '../static/images/pop/neutral.svg';
+import Thinking from '../static/images/pop/thinking.svg';
+import Horns from '../static/images/pop/horns.svg';
 
 const variants = {
   neutral: Neutral,

src/components/Sidebar.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import {t} from 'i18next';
 import classnames from 'classnames';
 import partial from 'lodash/partial';
-import WordmarkVertical from '../../static/images/wordmark-vertical.svg';
+import WordmarkVertical from '../static/images/wordmark-vertical.svg';
 
 class Sidebar extends React.Component {
   _renderHiddenComponents() {

src/css/application.css

@@ -625,7 +625,7 @@ body {
 }
 
 .pop-throbber__image {
-  background: url('../images/pop/thinking.svg') center no-repeat;
+  background: url('./images/pop/thinking.svg') center no-repeat;
   height: 100%;
 }