Reads CDN_URL to populate webpack publicPath

closes #647

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.

Author: SeeThruHead

packages/react-scripts/config/webpack.config.prod.js

@@ -24,15 +24,21 @@ if (env['process.env.NODE_ENV'] !== '"production"') {
   throw new Error('Production builds must have NODE_ENV=production.');
 }
 
-// We use "homepage" field to infer "public path" at which the app is served.
-// 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 : '/';
+// We use $CDN_URL environment variable to set the "public path" at which the
+// app is served, if no $CDN_URL is set we then look at the "homepage" field
+// in package.json. 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('/')) {
-  // If we don't do this, file assets will get incorrect paths.
   publicPath += '/';
 }
 
@@ -58,7 +64,7 @@ module.exports = {
     // We don't currently advertise code splitting but Webpack supports it.
     filename: 'static/js/[name].[chunkhash:8].js',
     chunkFilename: 'static/js/[name].[chunkhash:8].chunk.js',
-    // We inferred the "public path" (such as / or /my-project) from homepage.
+    // We use $CDN_URL or infer the "public path" (such as / or /my-project) from homepage.
     publicPath: publicPath
   },
   resolve: {

packages/react-scripts/scripts/build.js

@@ -127,7 +127,14 @@ 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) {
+      // CDN_URL: "http://cdn.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('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') + '.');