From 45fc38077f49f1922db979fb686a1fdf7d11de90 Mon Sep 17 00:00:00 2001
From: Shane Keulen <shane.keulen@gmail.com>
Date: Tue, 13 Sep 2016 17:36:23 -0400
Subject: [PATCH] Reads CDN_URL to populate webpack publicPath

Previously we only allowed settings the pathname via the "homepage" key
in package.json

Allows user to configure the full base URL via a $CDN_URL env
variable

Development has the same behaviour.
---
 config/webpack.config.dev.js  | 21 ++++++++++++++++++++-
 config/webpack.config.prod.js | 13 ++++++++++---
 scripts/build.js              | 20 +++++++++++++++++++-
 scripts/start.js              |  6 ++++++
 4 files changed, 55 insertions(+), 5 deletions(-)

diff --git a/config/webpack.config.dev.js b/config/webpack.config.dev.js
index 34bda5590a3..041c1c61318 100644
--- a/config/webpack.config.dev.js
+++ b/config/webpack.config.dev.js
@@ -18,6 +18,25 @@ var WatchMissingNodeModulesPlugin = require('../scripts/utils/WatchMissingNodeMo
 var paths = require('./paths');
 var env = require('./env');
 
+// We use "homepage" field to infer "public path" at which the app is served.
+// You may also use the environment variable CDN_URL to set the homepage to an absolute url
+// this is useful if you are storing your bundle/assets on a different domain
+// Webpack needs to know it to put the right <script> hrefs into HTML even in
+// single-page apps that may serve index.html for nested URLs like /todos/42.
+// We can't use a relative path in HTML because we don't want to load something
+// like /todos/42/static/js/bundle.7289d.js. We have to know the root.
+
+var publicPath;
+if (process.env.CDN_URL) {
+  publicPath = process.env.CDN_URL;
+} else {
+  var homepagePath = require(paths.appPackageJson).homepage;
+  publicPath = homepagePath ? url.parse(homepagePath).pathname : '';
+}
+if (!publicPath.endsWith('/')) {
+  publicPath += '/';
+}
+
 // This is the development configuration.
 // It is focused on developer experience and fast rebuilds.
 // The production configuration is different and lives in a separate file.
@@ -64,7 +83,7 @@ module.exports = {
     // containing code from all our entry points, and the Webpack runtime.
     filename: 'static/js/bundle.js',
     // In development, we always serve from the root. This makes config easier.
-    publicPath: '/'
+    publicPath: publicPath 
   },
   resolve: {
     // This allows you to set a fallback for where Webpack should look for modules.
diff --git a/config/webpack.config.prod.js b/config/webpack.config.prod.js
index c03b6ef272f..8efe744c39f 100644
--- a/config/webpack.config.prod.js
+++ b/config/webpack.config.prod.js
@@ -25,14 +25,21 @@ if (env['process.env.NODE_ENV'] !== '"production"') {
 }
 
 // We use "homepage" field to infer "public path" at which the app is served.
+// You may also use the environment variable CDN_URL to set the homepage to an absolute url
+// this is useful if you are storing your bundle/assets on a different domain
 // Webpack needs to know it to put the right <script> hrefs into HTML even in
 // single-page apps that may serve index.html for nested URLs like /todos/42.
 // We can't use a relative path in HTML because we don't want to load something
 // like /todos/42/static/js/bundle.7289d.js. We have to know the root.
-var homepagePath = require(paths.appPackageJson).homepage;
-var publicPath = homepagePath ? url.parse(homepagePath).pathname : '/';
+
+var publicPath;
+if (process.env.CDN_URL) {
+  publicPath = process.env.CDN_URL;
+} else {
+  var homepagePath = require(paths.appPackageJson).homepage;
+  publicPath = homepagePath ? url.parse(homepagePath).pathname : '';
+}
 if (!publicPath.endsWith('/')) {
-  // If we don't do this, file assets will get incorrect paths.
   publicPath += '/';
 }
 
diff --git a/scripts/build.js b/scripts/build.js
index e60b554466f..5abaf7de5a6 100644
--- a/scripts/build.js
+++ b/scripts/build.js
@@ -124,11 +124,22 @@ function build(previousSizeMap) {
     var openCommand = process.platform === 'win32' ? 'start' : 'open';
     var homepagePath = require(paths.appPackageJson).homepage;
     var publicPath = config.output.publicPath;
-    if (homepagePath && homepagePath.indexOf('.github.io/') !== -1) {
+    if (process.env.CDN_URL) {
+      // "homepage": "http://mywebsite.com/project"
+      console.log('The project was built assuming it is hosted at ' + chalk.green(publicPath) + '.');
+      console.log('You can control this with the ' + chalk.green('homepage') + ' field in your '  + chalk.cyan('package.json') + '.');
+      console.log();
+      console.log('Alternatively, you may change the absolute URL for all files by setting a CDN_URL environment variable');
+      console.log();
+      console.log('The ' + chalk.cyan('build') + ' folder is ready to be deployed.');
+      console.log();
+    } else if (homepagePath && homepagePath.indexOf('.github.io/') !== -1) {
       // "homepage": "http://user.github.io/project"
       console.log('The project was built assuming it is hosted at ' + chalk.green(publicPath) + '.');
       console.log('You can control this with the ' + chalk.green('homepage') + ' field in your '  + chalk.cyan('package.json') + '.');
       console.log();
+      console.log('Alternatively, you may change the absolute URL for all files by setting a CDN_URL environment variable');
+      console.log();
       console.log('The ' + chalk.cyan('build') + ' folder is ready to be deployed.');
       console.log('To publish it at ' + chalk.green(homepagePath) + ', run:');
       console.log();
@@ -145,6 +156,8 @@ function build(previousSizeMap) {
       console.log('The project was built assuming it is hosted at ' + chalk.green(publicPath) + '.');
       console.log('You can control this with the ' + chalk.green('homepage') + ' field in your '  + chalk.cyan('package.json') + '.');
       console.log();
+      console.log('Alternatively, you may change the absolute URL for all files by setting a CDN_URL environment variable');
+      console.log();
       console.log('The ' + chalk.cyan('build') + ' folder is ready to be deployed.');
       console.log();
     } else {
@@ -154,9 +167,14 @@ function build(previousSizeMap) {
         // "homepage": "http://mywebsite.com"
         console.log('You can control this with the ' + chalk.green('homepage') + ' field in your '  + chalk.cyan('package.json') + '.');
         console.log();
+        console.log('Alternatively, you may change the absolute URL for all files by setting a CDN_URL environment variable');
+        console.log();
       } else {
         // no homepage
         console.log('To override this, specify the ' + chalk.green('homepage') + ' in your '  + chalk.cyan('package.json') + '.');
+        console.log();
+        console.log('Alternatively, you may change the absolute URL for all files by setting a CDN_URL environment variable');
+        console.log();
         console.log('For example, add this to build it for GitHub Pages:')
         console.log();
         console.log('  ' + chalk.green('"homepage"') + chalk.cyan(': ') + chalk.green('"http://myname.github.io/myapp"') + chalk.cyan(','));
diff --git a/scripts/start.js b/scripts/start.js
index 32f20c25fcf..88dd82ac7ed 100644
--- a/scripts/start.js
+++ b/scripts/start.js
@@ -101,6 +101,12 @@ function setupCompiler(port, protocol) {
       console.log();
       console.log('  ' + chalk.cyan(protocol + '://localhost:' + port + '/'));
       console.log();
+      if (process.env.CDN_URL) {
+        console.log('with an *absolute* file path of ' + config.output.publicPath);
+      } else {
+        console.log('using relative paths');
+      }
+      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();