Create-react-app: 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.

[gaearon]

Interesting. We don’t officially support this so it might break in the future.

[mcallistersean]

Yep, it's a hack and probably should not even work.
Related to this issue: would you be interested in a pull request to the hot reloading client that connects to the server that actually served the hot reloading script instead of window.location.hostname etc. as is currently the case.
Something like what I did here: e142fbd8be84f9dce6fdc28601e48b19dc23c27f

That would make this project even easier to integrate into non-js backends.

[gaearon]

Right now I’m wary of increasing surface area for bugs. I don’t want to make this as complicated as WDS client. I still plan to make changes to it, so I intend to keep it scoped to features CRA supports, and serving JS from a different host or port is not supported right now.

[jjasonclark]

This seems a bit related to PR https://github.com/facebookincubator/create-react-app/pull/937. Adding for context.

[Timer]

Hi there! react-scripts v0.9.0 was just released which adds support for specifying a CDN url. You may read how to configure it here.

Please test it and don't hesitate to reach out if this doesn't solve your specific use case!

[gaearon]

Going to close this.