Applications served from cdn on different host

[SeeThruHead]

I'm in the process of converting our companies internal boilerplate into something that uses create-react-app.

We load all of our applications into html rendered by rails views in our application. Js/css/etc built by webpack is served via cdn.

In our boilerplate we look in the env for CDN_URL and set that as publicpath. This cdn url is provided in local dev by a .env file (loaded via dotenv module) and during deploys by the build server.

In trying to keep with 12 factor app methodology we don't commit these urls to the codebase.

Seems like publicpath is only currently modifiable by editing package.json.

Would it be possible to use something like REACT_APP_STATIC_URL (or any other, better name) in order to construct the publicpath for webpack?

[drobannx]

I have a similar issue. I need the resulting index.html to have its link and script tags point to a url that has a CDN url prefixed to the fingerprinted assets. Right now I see no way of achieving this without abusing the homepage property in package.json by doing //https://pathToCDN.com

Would it be possible to do something like CDN_URL=https://pathToCDN.com npm run build? Or is there another route in order to achieve this that I am missing?

[SeeThruHead]

I'm in the process of forking create-react-app to handle a few things specific to my companies needs, which includes this feature. (I've implemented it as process.env.HOMPAGE) currently. I could make a pr for this if it's coherent with create-react-app's scope and philosophy.

[skyuplam]

I need the same stuff as well. I have made a small change to the build script and added publicPath to the package.js file as a workaround. 😈

Ref: Webpack Config - -publicpath

[gaearon]

I’m open to merging support for CDN_URL env variable.

[SeeThruHead]

Working on it

[mcallistersean]

I solved a similar problem where I needed absolute urls in development builds.
Without modifying the webpack config used by create-react-app it is possible to inject the publicPath at runtime by using a global variable.
I added a file (publicPath.js) with this content to the src folder:

// eslint-disable-next-line
__webpack_public_path__ = 'http://127.0.0.1:3000/';

and imported it right at the top of the index.js.

import "./publicPath";

import React from 'react';
....

It's kind of important that it is imported before any other file and just defining the variable insidethe index.js also does not work because all imports are hoisted to the top of the file.