Fix asset host duplication

CHANGELOG.md

@@ -1,3 +1,5 @@
+## [Unreleased]
+
 ### Fixed
 - Update `.babelrc` to fix compilation issues - [#306](https://github.com/rails/webpacker/issues/306)
 
@@ -6,6 +8,8 @@
   - New app: `rails new <app> --webpack=elm`
   - Within an existing app: `rails webpacker:install:elm`
 
+- Fix asset host duplication - [#320](https://github.com/rails/webpacker/issues/320)
+
 ## [1.2] - 2017-04-27
 Some of the changes made requires you to run below commands to install new changes.
 

lib/install/config/loaders/core/assets.js

@@ -1,12 +1,39 @@
-const { env, publicPath } = require('../configuration.js')
+/* eslint no-else-return: 0 */
+
+const Url = require('url-parse')
+const { env, paths, publicPath } = require('../configuration.js')
+
+// Make sure host has slashes
+const ensureSlashes = ({ href, slashes }) => {
+  if (slashes) {
+    return `${href}/${paths.entry}/`
+  } else {
+    return `//${href}/${paths.entry}/`
+  }
+}
+
+// Compute path for internal pack assets if ASSET_HOST is supplied
+const computeAssetPath = (host) => {
+  if (!host) {
+    return `/${paths.entry}/`
+  } else {
+    return ensureSlashes(new Url(host))
+  }
+}
+
+// Get asset options based on NODE_ENV
+const assetOptions = (nodeENV) => {
+  if (nodeENV === 'production') {
+    return { publicPath: computeAssetPath(env.ASSET_HOST), name: '[name]-[hash].[ext]' }
+  } else {
+    return { publicPath, name: '[name].[ext]' }
+  }
+}
 
 module.exports = {
   test: /\.(jpg|jpeg|png|gif|svg|eot|ttf|woff|woff2)$/i,
   use: [{
     loader: 'file-loader',
-    options: {
-      publicPath,
-      name: env.NODE_ENV === 'production' ? '[name]-[hash].[ext]' : '[name].[ext]'
-    }
+    options: assetOptions(env.NODE_ENV)
   }]
 }

lib/install/config/webpack/configuration.js

@@ -10,17 +10,14 @@ const loadersDir = join(__dirname, 'loaders')
 const paths = safeLoad(readFileSync(join(configPath, 'paths.yml'), 'utf8'))[env.NODE_ENV]
 const devServer = safeLoad(readFileSync(join(configPath, 'development.server.yml'), 'utf8'))[env.NODE_ENV]
 
-// Compute public path based on environment and ASSET_HOST in production
-const ifHasCDN = env.ASSET_HOST !== undefined && env.NODE_ENV === 'production'
-const devServerUrl = `http://${devServer.host}:${devServer.port}/${paths.entry}/`
-const publicUrl = ifHasCDN ? `${env.ASSET_HOST}/${paths.entry}/` : `/${paths.entry}/`
-const publicPath = env.NODE_ENV !== 'production' && devServer.enabled ? devServerUrl : publicUrl
+// Compute public path based on environment
+const publicPath = env.NODE_ENV !== 'production' && devServer.enabled ?
+  `//${devServer.host}:${devServer.port}/${paths.entry}/` : `/${paths.entry}/`
 
 module.exports = {
   devServer,
   env,
   paths,
   loadersDir,
-  publicUrl,
   publicPath
 }

lib/install/template.rb

@@ -27,7 +27,7 @@
 "webpack-manifest-plugin babel-loader@7.x coffee-loader coffee-script " \
 "babel-core babel-preset-env babel-polyfill compression-webpack-plugin rails-erb-loader glob " \
 "extract-text-webpack-plugin node-sass file-loader sass-loader css-loader style-loader " \
-"postcss-loader autoprefixer postcss-smart-import precss resolve-url-loader"
+"postcss-loader autoprefixer postcss-smart-import precss resolve-url-loader url-parse"
 
 puts "Installing dev server for live reloading"
 run "yarn add --dev webpack-dev-server"