From 3e37e10d787f2596b00a15a482b26845e42616f5 Mon Sep 17 00:00:00 2001 From: Mat Brown Date: Sun, 2 Jul 2017 21:02:08 -0400 Subject: [PATCH] Serve all static assets from the same root directory MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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. --- .gitignore | 2 +- .travis.yml | 2 +- gulpfile.js | 50 +++++++++++------- package.json | 2 +- src/components/Pop.jsx | 6 +-- src/components/Sidebar.jsx | 2 +- src/css/application.css | 2 +- {static => src/static}/images/favicon.ico | Bin .../static}/images/large-spinner.gif | Bin {static => src/static}/images/minimize.png | Bin {static => src/static}/images/pop/horns.svg | 0 {static => src/static}/images/pop/neutral.svg | 0 .../static}/images/pop/thinking.svg | 0 {static => src/static}/images/popout.png | Bin {static => src/static}/images/spinner.gif | Bin .../static}/images/wordmark-vertical.svg | 0 {static => src/static}/images/wordmark.svg | 0 {static => src/static}/index.html | 4 +- webpack.config.js | 3 +- 19 files changed, 42 insertions(+), 31 deletions(-) rename {static => src/static}/images/favicon.ico (100%) rename {static => src/static}/images/large-spinner.gif (100%) rename {static => src/static}/images/minimize.png (100%) rename {static => src/static}/images/pop/horns.svg (100%) rename {static => src/static}/images/pop/neutral.svg (100%) rename {static => src/static}/images/pop/thinking.svg (100%) rename {static => src/static}/images/popout.png (100%) rename {static => src/static}/images/spinner.gif (100%) rename {static => src/static}/images/wordmark-vertical.svg (100%) rename {static => src/static}/images/wordmark.svg (100%) rename {static => src/static}/index.html (83%) diff --git a/.gitignore b/.gitignore index bbdef7350d..d4fd225342 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,4 @@ -static/compiled +dist node_modules npm-debug.log bower_components diff --git a/.travis.yml b/.travis.yml index f053dce168..68f6bb5323 100644 --- a/.travis.yml +++ b/.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 diff --git a/gulpfile.js b/gulpfile.js index 1c7b70fabf..6cc7fdc201 100644 --- a/gulpfile.js +++ b/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}`, } )], }, diff --git a/package.json b/package.json index d5662ce451..9993ba542e 100644 --- a/package.json +++ b/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", diff --git a/src/components/Pop.jsx b/src/components/Pop.jsx index 7fd0211c2e..2fd687eaf3 100644 --- a/src/components/Pop.jsx +++ b/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, diff --git a/src/components/Sidebar.jsx b/src/components/Sidebar.jsx index 833246edbf..cda7d17334 100644 --- a/src/components/Sidebar.jsx +++ b/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() { diff --git a/src/css/application.css b/src/css/application.css index ca36a3cd43..709227505b 100644 --- a/src/css/application.css +++ b/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%; } diff --git a/static/images/favicon.ico b/src/static/images/favicon.ico similarity index 100% rename from static/images/favicon.ico rename to src/static/images/favicon.ico diff --git a/static/images/large-spinner.gif b/src/static/images/large-spinner.gif similarity index 100% rename from static/images/large-spinner.gif rename to src/static/images/large-spinner.gif diff --git a/static/images/minimize.png b/src/static/images/minimize.png similarity index 100% rename from static/images/minimize.png rename to src/static/images/minimize.png diff --git a/static/images/pop/horns.svg b/src/static/images/pop/horns.svg similarity index 100% rename from static/images/pop/horns.svg rename to src/static/images/pop/horns.svg diff --git a/static/images/pop/neutral.svg b/src/static/images/pop/neutral.svg similarity index 100% rename from static/images/pop/neutral.svg rename to src/static/images/pop/neutral.svg diff --git a/static/images/pop/thinking.svg b/src/static/images/pop/thinking.svg similarity index 100% rename from static/images/pop/thinking.svg rename to src/static/images/pop/thinking.svg diff --git a/static/images/popout.png b/src/static/images/popout.png similarity index 100% rename from static/images/popout.png rename to src/static/images/popout.png diff --git a/static/images/spinner.gif b/src/static/images/spinner.gif similarity index 100% rename from static/images/spinner.gif rename to src/static/images/spinner.gif diff --git a/static/images/wordmark-vertical.svg b/src/static/images/wordmark-vertical.svg similarity index 100% rename from static/images/wordmark-vertical.svg rename to src/static/images/wordmark-vertical.svg diff --git a/static/images/wordmark.svg b/src/static/images/wordmark.svg similarity index 100% rename from static/images/wordmark.svg rename to src/static/images/wordmark.svg diff --git a/static/index.html b/src/static/index.html similarity index 83% rename from static/index.html rename to src/static/index.html index f771ab0b80..8945d05fe7 100644 --- a/static/index.html +++ b/src/static/index.html @@ -4,7 +4,7 @@ Popcode | HTML, CSS, and JavaScript editor for students - + @@ -14,6 +14,6 @@
- + diff --git a/webpack.config.js b/webpack.config.js index ed44d0ca78..9ea0c00ecb 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -65,8 +65,7 @@ function directoryContentsExcept(directory, exceptions) { module.exports = { entry: './src/application.js', output: { - path: path.resolve(__dirname, './static/compiled'), - publicPath: 'compiled/', + path: path.resolve(__dirname, './dist'), filename: 'application.js', sourceMapFilename: 'application.js.map', },