Reads CDN_URL to populate webpack publicPath

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.

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 += '/';
 }
 

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(','));

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();