Homepage

Author: Ives van Hoorne

Gulpfile.js

@@ -0,0 +1,33 @@
+const gulp = require('gulp');
+const postcss = require('gulp-postcss');
+const autoprefixer = require('autoprefixer');
+const cssnano = require('cssnano');
+
+const config = require('./config/paths');
+
+gulp.task('css', function() {
+  return gulp
+    .src('src/homepage/**/*.css')
+    .pipe(postcss([autoprefixer, cssnano]))
+    .pipe(gulp.dest(`${config.appBuild}/`));
+});
+
+gulp.task('javascript', function() {
+  return gulp
+    .src('src/homepage/**/*.js')
+    .pipe(gulp.dest(`${config.appBuild}/`));
+});
+
+gulp.task('html', function() {
+  return gulp
+    .src('src/homepage/**/*.html')
+    .pipe(gulp.dest(`${config.appBuild}/`));
+});
+
+gulp.task('static', function() {
+  return gulp
+    .src(`${config.staticPath}/**/*`)
+    .pipe(gulp.dest(`${config.appBuild}/`));
+});
+
+gulp.task('default', ['css', 'html', 'javascript', 'static']);

config/paths.js

@@ -30,6 +30,7 @@ module.exports = {
   appHtml: path.join(appSrc, 'index.html'),
   sandboxHtml: path.join(sandboxSrc, 'index.html'),
   appPackageJson: resolveApp('package.json'),
+  staticPath: resolveApp('public'),
   src,
   appSrc,
   sandboxSrc,

config/webpack.config.js

@@ -15,22 +15,21 @@ const __PROD__ = NODE_ENV === 'production'; // eslint-disable-line no-underscore
 
 const babelConfig = __DEV__ ? babelDev : babelProd;
 
-const getOutput = () =>
-  __DEV__
-    ? {
-        path: paths.appBuild,
-        pathinfo: true,
-        filename: 'static/js/[name].js',
-        publicPath: '/',
-      }
-    : {
-        path: paths.appBuild,
-        pathinfo: true,
-        filename: 'static/js/[name].[hash:8].js',
-        chunkFilename: 'static/js/[name].[hash:8].chunk.js',
-        sourceMapFilename: '[file].map', // Default
-        publicPath: 'https://codesandbox.io/',
-      };
+const getOutput = () => __DEV__
+  ? {
+      path: paths.appBuild,
+      pathinfo: true,
+      filename: 'static/js/[name].js',
+      publicPath: '/',
+    }
+  : {
+      path: paths.appBuild,
+      pathinfo: true,
+      filename: 'static/js/[name].[hash:8].js',
+      chunkFilename: 'static/js/[name].[hash:8].chunk.js',
+      sourceMapFilename: '[file].map', // Default
+      publicPath: 'https://codesandbox.io/',
+    };
 
 const config = {
   devtool: __DEV__ ? 'eval' : 'source-map',
@@ -41,13 +40,7 @@ const config = {
       require.resolve('./polyfills'),
       path.join(paths.sandboxSrc, 'index.js'),
     ],
-    vendor: [
-      'babel-standalone',
-      'codemirror',
-      'react',
-      'styled-components',
-      'glamor',
-    ],
+    vendor: ['babel-standalone', 'codemirror', 'react', 'styled-components'],
   },
 
   target: 'web',
@@ -157,7 +150,7 @@ const config = {
     new HtmlWebpackPlugin({
       inject: true,
       chunks: ['vendor', 'common', 'app'],
-      filename: 'index.html',
+      filename: 'app.html',
       template: paths.appHtml,
       minify: __PROD__ && {
         removeComments: true,

deploy.sh

@@ -7,8 +7,6 @@ mkdir .deliver && \
 mkdir .deliver/www && \
 docker cp $id:/app/www/ ./.deliver/ && \
 docker rm -v $id && \
-echo "Copy static files" && \
-cp -R static/ .deliver/www/ && \
 echo "Tarring build files" && \
 tar -C .deliver -zcvf .deliver/code_sandbox_client.tar.gz www && \
 echo "Cleaning remote tar" && \

favicon.ico

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "devDependencies": {
-    "autoprefixer": "^6.6.0",
+    "autoprefixer": "^6.7.7",
     "babel-core": "^6.21.0",
     "babel-eslint": "^7.1.1",
     "babel-jest": "^19.0.0",
@@ -67,8 +67,11 @@
     "babel-standalone": "^6.21.1-0",
     "codemirror": "^5.22.0",
     "color": "^0.11.4",
+    "cssnano": "^3.10.0",
     "debug": "^2.5.1",
     "glamor": "^2.20.12",
+    "gulp": "^3.9.1",
+    "gulp-postcss": "^6.4.0",
     "humps": "CompuIves/humps",
     "lodash": "^4.17.2",
     "moment": "^2.17.1",
@@ -98,7 +101,7 @@
   },
   "scripts": {
     "start": "node scripts/start.js",
-    "build": "node scripts/build.js",
+    "build": "node scripts/build.js && gulp",
     "test": "jest --env=jsdom",
     "test:watch": "jest --watch --env=jsdom",
     "lint": "eslint src"

package.json

@@ -67,7 +67,7 @@ function setupCompiler(port, protocol) {
 
   // "done" event fires when Webpack has finished recompiling the bundle.
   // Whether or not you have warnings or errors, you will get this event.
-  compiler.plugin('done', (stats) => {
+  compiler.plugin('done', stats => {
     clearConsole();
     const hasErrors = stats.hasErrors();
     const hasWarnings = stats.hasWarnings();
@@ -79,7 +79,9 @@ function setupCompiler(port, protocol) {
       console.log('  ' + chalk.cyan(protocol + '://localhost:' + port + '/'));
       console.log();
       console.log('Note that the development build is not optimized.');
-      console.log('To create a production build, use ' + chalk.cyan('npm run build') + '.');
+      console.log(
+        'To create a production build, use ' + chalk.cyan('npm run build') + '.'
+      );
       console.log();
       return;
     }
@@ -90,11 +92,11 @@ function setupCompiler(port, protocol) {
     // We use stats.toJson({}, true) to make output more compact and readable:
     // https://github.com/facebookincubator/create-react-app/issues/401#issuecomment-238291901
     var json = stats.toJson({}, true);
-    var formattedErrors = json.errors.map(message =>
-      'Error in ' + formatMessage(message)
+    var formattedErrors = json.errors.map(
+      message => 'Error in ' + formatMessage(message)
     );
-    var formattedWarnings = json.warnings.map(message =>
-      'Warning in ' + formatMessage(message)
+    var formattedWarnings = json.warnings.map(
+      message => 'Warning in ' + formatMessage(message)
     );
     if (hasErrors) {
       console.log(chalk.red('Failed to compile.'));
@@ -121,8 +123,16 @@ function setupCompiler(port, protocol) {
       });
       // Teach some ESLint tricks.
       console.log('You may use special comments to disable some warnings.');
-      console.log('Use ' + chalk.yellow('// eslint-disable-next-line') + ' to ignore the next line.');
-      console.log('Use ' + chalk.yellow('/* eslint-disable */') + ' to ignore all warnings in a file.');
+      console.log(
+        'Use ' +
+          chalk.yellow('// eslint-disable-next-line') +
+          ' to ignore the next line.'
+      );
+      console.log(
+        'Use ' +
+          chalk.yellow('/* eslint-disable */') +
+          ' to ignore all warnings in a file.'
+      );
     }
   });
 }
@@ -134,8 +144,12 @@ function openBrowser(port, protocol) {
       // on OS X Google Chrome with AppleScript
       execSync('ps cax | grep "Google Chrome"');
       execSync(
-        'osascript chrome.applescript ' + protocol + '://localhost:' + port + '/',
-        {cwd: path.join(__dirname, 'utils'), stdio: 'ignore'}
+        'osascript chrome.applescript ' +
+          protocol +
+          '://localhost:' +
+          port +
+          '/',
+        { cwd: path.join(__dirname, 'utils'), stdio: 'ignore' }
       );
       return;
     } catch (err) {
@@ -150,43 +164,59 @@ function openBrowser(port, protocol) {
 // We need to provide a custom onError function for httpProxyMiddleware.
 // It allows us to log custom error messages on the console.
 function onProxyError(proxy) {
-  return function(err, req, res){
+  return function(err, req, res) {
     var host = req.headers && req.headers.host;
     console.log(
-      chalk.red('Proxy error:') + ' Could not proxy request ' + chalk.cyan(req.url) +
-      ' from ' + chalk.cyan(host) + ' to ' + chalk.cyan(proxy) + '.'
+      chalk.red('Proxy error:') +
+        ' Could not proxy request ' +
+        chalk.cyan(req.url) +
+        ' from ' +
+        chalk.cyan(host) +
+        ' to ' +
+        chalk.cyan(proxy) +
+        '.'
     );
     console.log(
       'See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (' +
-      chalk.cyan(err.code) + ').'
+        chalk.cyan(err.code) +
+        ').'
     );
     console.log();
-  }
+  };
 }
 
 function addMiddleware(devServer) {
   // `proxy` lets you to specify a fallback server during development.
   // Every unrecognized request will be forwarded to it.
   var proxy = require(paths.appPackageJson).proxy;
-  devServer.use(historyApiFallback({
-    // Allow paths with dots in them to be loaded, reference issue #387
-    disableDotRule: true,
-    // For single page apps, we generally want to fallback to /index.html.
-    // However we also want to respect `proxy` for API calls.
-    // So if `proxy` is specified, we need to decide which fallback to use.
-    // We use a heuristic: if request `accept`s text/html, we pick /index.html.
-    // Modern browsers include text/html into `accept` header when navigating.
-    // However API calls like `fetch()` won’t generally won’t accept text/html.
-    // If this heuristic doesn’t work well for you, don’t use `proxy`.
-    htmlAcceptHeaders: proxy ?
-      ['text/html'] :
-      ['text/html', '*/*']
-  }));
+  devServer.use(
+    historyApiFallback({
+      // Allow paths with dots in them to be loaded, reference issue #387
+      disableDotRule: true,
+      // For single page apps, we generally want to fallback to /index.html.
+      // However we also want to respect `proxy` for API calls.
+      // So if `proxy` is specified, we need to decide which fallback to use.
+      // We use a heuristic: if request `accept`s text/html, we pick /index.html.
+      // Modern browsers include text/html into `accept` header when navigating.
+      // However API calls like `fetch()` won’t generally won’t accept text/html.
+      // If this heuristic doesn’t work well for you, don’t use `proxy`.
+      htmlAcceptHeaders: proxy ? ['text/html'] : ['text/html', '*/*'],
+      index: '/app.html',
+    })
+  );
   if (proxy) {
     if (typeof proxy !== 'string') {
-      console.log(chalk.red('When specified, "proxy" in package.json must be a string.'));
-      console.log(chalk.red('Instead, the type of "proxy" was "' + typeof proxy + '".'));
-      console.log(chalk.red('Either remove "proxy" from package.json, or make it a string.'));
+      console.log(
+        chalk.red('When specified, "proxy" in package.json must be a string.')
+      );
+      console.log(
+        chalk.red('Instead, the type of "proxy" was "' + typeof proxy + '".')
+      );
+      console.log(
+        chalk.red(
+          'Either remove "proxy" from package.json, or make it a string.'
+        )
+      );
       process.exit(1);
     }
 
@@ -197,15 +227,16 @@ function addMiddleware(devServer) {
     // - /sockjs-node/* (WebpackDevServer uses this for hot reloading)
     // Tip: use https://www.debuggex.com/ to visualize the regex
     var mayProxy = /^(?!\/(index\.html$|.*\.hot-update\.json$|sockjs-node\/)).*$/;
-    devServer.use(mayProxy,
+    devServer.use(
+      mayProxy,
       // Pass the scope regex both to Express and to the middleware for proxying
       // of both HTTP and WebSockets to work without false positives.
       httpProxyMiddleware(pathname => mayProxy.test(pathname), {
         target: proxy,
         logLevel: 'silent',
         onError: onProxyError(proxy),
         secure: false,
-        changeOrigin: true
+        changeOrigin: true,
       })
     );
   }
@@ -235,6 +266,7 @@ function runDevServer(port, protocol) {
     },
     // Enable HTTPS if the HTTPS environment variable is set to 'true'
     https: protocol === 'https',
+    // contentBase: paths.staticPath,
   });
 
   // Our custom middleware proxies requests to /index.html or a remote API.
@@ -254,7 +286,7 @@ function runDevServer(port, protocol) {
 }
 
 function run(port) {
-  var protocol = process.env.HTTPS === 'true' ? "https" : "http";
+  var protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
   setupCompiler(port, protocol);
   runDevServer(port, protocol);
 }
@@ -268,9 +300,9 @@ detect(DEFAULT_PORT).then(port => {
   }
 
   clearConsole();
-  var question =
-    chalk.yellow('Something is already running on port ' + DEFAULT_PORT + '.') +
-    '\n\nWould you like to run the app on another port instead?';
+  var question = chalk.yellow(
+    'Something is already running on port ' + DEFAULT_PORT + '.'
+  ) + '\n\nWould you like to run the app on another port instead?';
 
   prompt(question, true).then(shouldChangePort => {
     if (shouldChangePort) {