Merge pull request #39 from ProjectSpectero/staging

MVP Release (0.1)

build/build.js

@@ -32,7 +32,7 @@ rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
       process.exit(1)
     }
 
-    console.log(chalk.cyan('  Build complete.\n'))
+    console.log(chalk.cyan('  Build for app.spectero.com (PRODUCTION) complete.\n'))
     console.log(chalk.yellow(
       '  Tip: built files are meant to be served over an HTTP server.\n' +
       '  Opening index.html over file:// won\'t work.\n'

build/development.js

@@ -0,0 +1,32 @@
+require('./check-versions')()
+
+process.env.NODE_ENV = 'development'
+
+var ora = require('ora')
+var rm = require('rimraf')
+var path = require('path')
+var chalk = require('chalk')
+var webpack = require('webpack')
+var config = require('../config')
+var webpackConfig = require('./webpack.development.conf')
+
+var spinner = ora('building for DEVELOPMENT...')
+
+spinner.start()
+
+rm(path.join(config.development.assetsRoot, config.development.assetsSubDirectory), err => {
+  if (err) throw err
+  webpack(webpackConfig, function (err, stats) {
+    spinner.stop()
+    if (err) throw err
+    process.stdout.write(stats.toString({
+      colors: true,
+      modules: false,
+      children: false,
+      chunks: false,
+      chunkModules: false
+    }) + '\n\n')
+
+    console.log(chalk.cyan('  Build for dev.spectero.com (DEVELOPMENT) complete.\n'))
+  })
+})

build/staging.js

@@ -27,6 +27,6 @@ rm(path.join(config.staging.assetsRoot, config.staging.assetsSubDirectory), err
       chunkModules: false
     }) + '\n\n')
 
-    console.log(chalk.cyan('  Build for staging complete.\n'))
+    console.log(chalk.cyan('  Build for staging.spectero.com (STAGING) complete.\n'))
   })
 })

build/webpack.base.conf.js

@@ -1,4 +1,5 @@
 'use strict'
+require('babel-polyfill')
 const path = require('path')
 const utils = require('./utils')
 const config = require('../config')
@@ -24,6 +25,7 @@ const createLintingRule = () => ({
 module.exports = {
   context: path.resolve(__dirname, '../'),
   entry: {
+    polyfill: 'babel-polyfill',
     app: './src/main.js'
   },
   output: {

build/webpack.development.conf.js

@@ -0,0 +1,146 @@
+'use strict'
+const path = require('path')
+const utils = require('./utils')
+const webpack = require('webpack')
+const config = require('../config')
+const merge = require('webpack-merge')
+const baseWebpackConfig = require('./webpack.base.conf')
+const CopyWebpackPlugin = require('copy-webpack-plugin')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
+const env = require('../config/development.env.js')
+
+const webpackConfig = merge(baseWebpackConfig, {
+  module: {
+    rules: utils.styleLoaders({
+      sourceMap: config.development.productionSourceMap,
+      extract: true,
+      usePostCSS: true
+    })
+  },
+  devtool: config.development.productionSourceMap ? config.development.devtool : false,
+  output: {
+    path: config.development.assetsRoot,
+    filename: utils.assetsPath('js/[name].[chunkhash].js'),
+    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
+  },
+  plugins: [
+    // http://vuejs.github.io/vue-loader/en/workflow/production.html
+    new webpack.DefinePlugin({
+      'process.env': env
+    }),
+    new UglifyJsPlugin({
+      uglifyOptions: {
+        compress: {
+          warnings: false,
+          drop_debugger: true,
+          drop_console: false
+        }
+      },
+      sourceMap: config.development.productionSourceMap,
+      parallel: true
+    }),
+    // extract css into its own file
+    new ExtractTextPlugin({
+      filename: utils.assetsPath('css/[name].[contenthash].css'),
+      // Setting the following option to `false` will not extract CSS from codesplit chunks.
+      // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
+      // It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`,
+      // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
+      allChunks: true,
+    }),
+    // Compress extracted CSS. We are using this plugin so that possible
+    // duplicated CSS from different components can be deduped.
+    new OptimizeCSSPlugin({
+      cssProcessorOptions: config.development.productionSourceMap
+        ? { safe: true, map: { inline: false } }
+        : { safe: true }
+    }),
+    // generate dist index.html with correct asset hash for caching.
+    // you can customize output by editing /index.html
+    // see https://github.com/ampedandwired/html-webpack-plugin
+    new HtmlWebpackPlugin({
+      filename: config.development.index,
+      template: 'index.html',
+      inject: true,
+      minify: {
+        removeComments: true,
+        collapseWhitespace: true,
+        removeAttributeQuotes: true
+        // more options:
+        // https://github.com/kangax/html-minifier#options-quick-reference
+      },
+      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
+      chunksSortMode: 'dependency'
+    }),
+    // keep module.id stable when vendor modules does not change
+    new webpack.HashedModuleIdsPlugin(),
+    // enable scope hoisting
+    new webpack.optimize.ModuleConcatenationPlugin(),
+    // split vendor js into its own file
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'vendor',
+      minChunks (module) {
+        // any required modules inside node_modules are extracted to vendor
+        return (
+          module.resource &&
+          /\.js$/.test(module.resource) &&
+          module.resource.indexOf(
+            path.join(__dirname, '../node_modules')
+          ) === 0
+        )
+      }
+    }),
+    // extract webpack runtime and module manifest to its own file in order to
+    // prevent vendor hash from being updated whenever app bundle is updated
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'manifest',
+      minChunks: Infinity
+    }),
+    // This instance extracts shared chunks from code splitted chunks and bundles them
+    // in a separate chunk, similar to the vendor chunk
+    // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'app',
+      async: 'vendor-async',
+      children: true,
+      minChunks: 3
+    }),
+
+    // copy custom static assets
+    new CopyWebpackPlugin([
+      {
+        from: path.resolve(__dirname, '../static'),
+        to: config.development.assetsSubDirectory,
+        ignore: ['.*']
+      }
+    ])
+  ]
+})
+
+if (config.development.productionGzip) {
+  const CompressionWebpackPlugin = require('compression-webpack-plugin')
+
+  webpackConfig.plugins.push(
+    new CompressionWebpackPlugin({
+      asset: '[path].gz[query]',
+      algorithm: 'gzip',
+      test: new RegExp(
+        '\\.(' +
+        config.development.productionGzipExtensions.join('|') +
+        ')$'
+      ),
+      threshold: 10240,
+      minRatio: 0.8
+    })
+  )
+}
+
+if (config.development.bundleAnalyzerReport) {
+  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
+  webpackConfig.plugins.push(new BundleAnalyzerPlugin())
+}
+
+module.exports = webpackConfig

build/webpack.prod.conf.js

@@ -10,8 +10,7 @@ const HtmlWebpackPlugin = require('html-webpack-plugin')
 const ExtractTextPlugin = require('extract-text-webpack-plugin')
 const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
 const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
-
-const env = require('../config/prod.env')
+const env = require('../config/prod.env.js')
 
 const webpackConfig = merge(baseWebpackConfig, {
   module: {

build/webpack.staging.conf.js

@@ -10,8 +10,7 @@ const HtmlWebpackPlugin = require('html-webpack-plugin')
 const ExtractTextPlugin = require('extract-text-webpack-plugin')
 const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
 const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
-
-const env = require('../config/staging.env')
+const env = require('../config/staging.env.js')
 
 const webpackConfig = merge(baseWebpackConfig, {
   module: {

config/dev.env.js

@@ -1,5 +1,6 @@
+// Configuration for your local environment
+
 const merge = require('webpack-merge')
-const prodEnv = require('./prod.env')
 const config = require('dotenv').config()
 const dotenvVars = {}
 
@@ -9,13 +10,13 @@ if (config.parsed !== undefined) {
   }
 }
 
-module.exports = merge(prodEnv, dotenvVars, {
-  NODE_ENV: '"development"',
-  APP_ENDPOINT: '"dev.spectero.com"',
-  APP_HTTPS: true,
-  APP_PORT: '""',
-  APP_VERSION: '"v1"',
-  APP_COOKIE: '"SPECTERO_APP_AUTH"',
-  DAEMON_COOKIE: '"SPECTERO_DAEMON_AUTH"',
-  IMPERSONATE_COOKIE: '"SPECTERO_APP_IMPERSONATE"'
+module.exports = merge(dotenvVars, {
+  NODE_ENV: JSON.stringify('development'),
+  APP_ENDPOINT: JSON.stringify('dev.spectero.com'),
+  APP_PROTOCOL: JSON.stringify('https'),
+  APP_PORT: JSON.stringify('null'),
+  APP_VERSION: JSON.stringify('v1'),
+  APP_COOKIE: JSON.stringify('SPECTERO_APP_AUTH'),
+  DAEMON_COOKIE: JSON.stringify('SPECTERO_DAEMON_AUTH'),
+  IMPERSONATE_COOKIE: JSON.stringify('SPECTERO_APP_IMPERSONATE')
 })

config/development.env.js

@@ -0,0 +1,22 @@
+// Configuration for dev.spectero.com
+
+const merge = require('webpack-merge')
+const config = require('dotenv').config()
+const dotenvVars = {}
+
+if (config.parsed !== undefined) {
+  for (let key in config.parsed) {
+    dotenvVars[key] = JSON.stringify(config.parsed[key])
+  }
+}
+
+module.exports = merge(dotenvVars, {
+  NODE_ENV: JSON.stringify('development'),
+  APP_ENDPOINT: JSON.stringify('dev.spectero.com'),
+  APP_PROTOCOL: JSON.stringify('https'),
+  APP_VERSION: JSON.stringify('v1'),
+  APP_PORT: JSON.stringify('null'),
+  APP_COOKIE: JSON.stringify('SPECTERO_APP_AUTH'),
+  DAEMON_COOKIE: JSON.stringify('SPECTERO_DAEMON_AUTH'),
+  IMPERSONATE_COOKIE: JSON.stringify('SPECTERO_APP_IMPERSONATE')
+})

config/index.js

@@ -73,7 +73,6 @@ module.exports = {
     // Set to `true` or `false` to always turn it on or off
     bundleAnalyzerReport: process.env.npm_config_report
   },
-
   staging: {
     // Template for index.html
     index: path.resolve(__dirname, '../dist/index.html'),
@@ -98,6 +97,36 @@ module.exports = {
     productionGzip: false,
     productionGzipExtensions: ['js', 'css'],
 
+    // Run the build command with an extra argument to
+    // View the bundle analyzer report after build finishes:
+    // `npm run build --report`
+    // Set to `true` or `false` to always turn it on or off
+    bundleAnalyzerReport: process.env.npm_config_report
+  },
+  development: {
+    // Template for index.html
+    index: path.resolve(__dirname, '../dist/index.html'),
+
+    // Paths
+    assetsRoot: path.resolve(__dirname, '../dist'),
+    assetsSubDirectory: 'static',
+    assetsPublicPath: '/',
+
+    /**
+     * Source Maps
+     */
+
+    productionSourceMap: true,
+    // https://webpack.js.org/configuration/devtool/#production
+    devtool: '#source-map',
+
+    // Gzip off by default as many popular static hosts such as
+    // Surge or Netlify already gzip all static assets for you.
+    // Before setting to `true`, make sure to:
+    // npm install --save-dev compression-webpack-plugin
+    productionGzip: false,
+    productionGzipExtensions: ['js', 'css'],
+
     // Run the build command with an extra argument to
     // View the bundle analyzer report after build finishes:
     // `npm run build --report`

config/prod.env.js

@@ -1,3 +1,5 @@
+// Configuration for app.spectero.com
+
 const merge = require('webpack-merge')
 const config = require('dotenv').config()
 const dotenvVars = {}
@@ -9,9 +11,9 @@ if (config.parsed !== undefined) {
 }
 
 module.exports = merge(dotenvVars, {
-  NODE_ENV: '"production"',
-  APP_VERSION: '"v1"',
-  APP_COOKIE: '"SPECTERO_APP_AUTH"',
-  DAEMON_COOKIE: '"SPECTERO_DAEMON_AUTH"',
-  IMPERSONATE_COOKIE: '"SPECTERO_APP_IMPERSONATE"'
+  NODE_ENV: JSON.stringify('production'),
+  APP_VERSION: JSON.stringify('v1'),
+  APP_COOKIE: JSON.stringify('SPECTERO_APP_AUTH'),
+  DAEMON_COOKIE: JSON.stringify('SPECTERO_DAEMON_AUTH'),
+  IMPERSONATE_COOKIE: JSON.stringify('SPECTERO_APP_IMPERSONATE')
 })

config/staging.env.js

@@ -1,5 +1,6 @@
+// Configuration for staging.spectero.com
+
 const merge = require('webpack-merge')
-const prodEnv = require('./prod.env')
 const config = require('dotenv').config()
 const dotenvVars = {}
 
@@ -9,13 +10,13 @@ if (config.parsed !== undefined) {
   }
 }
 
-module.exports = merge(prodEnv, dotenvVars, {
-  NODE_ENV: '"staging"',
-  APP_ENDPOINT: '"dev.spectero.com"',
-  APP_HTTPS: true,
-  APP_PORT: '""',
-  APP_VERSION: '"v1"',
-  APP_COOKIE: '"SPECTERO_APP_AUTH"',
-  DAEMON_COOKIE: '"SPECTERO_DAEMON_AUTH"',
-  IMPERSONATE_COOKIE: '"SPECTERO_APP_IMPERSONATE"'
+module.exports = merge(dotenvVars, {
+  NODE_ENV: JSON.stringify('staging'),
+  APP_ENDPOINT: JSON.stringify('app.spectero.com'),
+  APP_PROTOCOL: JSON.stringify('https'),
+  APP_VERSION: JSON.stringify('v1'),
+  APP_PORT: JSON.stringify('null'),
+  APP_COOKIE: JSON.stringify('SPECTERO_APP_AUTH'),
+  DAEMON_COOKIE: JSON.stringify('SPECTERO_DAEMON_AUTH'),
+  IMPERSONATE_COOKIE: JSON.stringify('SPECTERO_APP_IMPERSONATE')
 })