Inject ASSET_HOST in runtime, instead of compile time

[simoniong]

Hi, all:

I am trying to migrate my whole asset from asset pipeline into webpack.
I have a issue while using CDN with webpacker, which do not happen in asset pipeline.

This is one of my scss file

.header-content {
  background: url('../images/background.png') repeat center center;
}

while compile asset, I was using a staging env, which is fine, one of env variable is ASSET_HOST or WEBPACK_ASSET_HOST in latest master branch, which point to my staging CDN. and it compile to:

.header-content {
  background: url(https://staging-cdnhost.com/packs/images/background-9a30e6c6c75344e5bd217bbe9720ef3e.png) repeat center center;
}

Everything is correct here, but can we compile to a relative path so that we can inject ASSET_PATH within rails system in run time?

BTW: I have a use case here: my app is building within a docker image and I only build images once for both staging & production, so while building this image, and run assets:precompile, RAILS_ENV is point to production. this is working as asset pipeline only refer to config.action_controller.asset_host for CDN in different env, but in webpacker, seems CDN host is injected in compile time, and can not changed in run time.

Is there anyway to change the behaviour?

[guilleiguaran]

can you unset WEBPACK_ASSET_HOST ?

That should be enough to get relative paths in the manifest and then you can use these along with config.action_controller.asset_host to set your CDN host.

[guilleiguaran]

Oh, I see the problem, in here we are assuming a WEBPACKER_ASSET_HOST for the user, I don't think this looks like the expected behavior.

[guilleiguaran]

Another side effect of this is that the assets compiled by Webpacker can't be used in emails if you have a different asset host for Action Mailer.

Since the manifest already includes URLs with host, config.action_mailer.asset_host isn't taken into consideration when generating the URL for assets in mail views.

[simoniong]

After having a quick look at generated manifest.js file, seems host name is not included, so rails know how to inject CDN domain correctly into the assets under pack folder in runtime.

but is it possible we can do the same things in the any scss file using url to reference images or font file? Just like asset pipeline does, by using helper like image-url / font-url provided by sass-rails, I don't know if it it possible...please correct me if i am wrong.

[joshuaflanagan]

As mentioned in the Webpack documentation for Public Path, you can set the effective public path at runtime by setting the global variable __webpack_public_path__.

However, that will only work if the file-loader (or url-loader) is not given a publicPath option. As soon as you specify a publicPath to those loaders, that path will be hardcoded into the compiled output. If you do not specify publicPath, the compiled output will contain code like __webpack_public_path__ + 'myfile.png' (see the source).

Webpacker currently passes the publicPath option to these loaders, killing any chance of modifying it via the global variable at runtime.

I did a proof of concept to show that you can set the asset host at runtime by deleting that option, although changing the built-it loader config is a little awkward. Feel free to use my demo repo for reproducing/testing a fix, or copy the solution to your own apps until webpacker has a fix. I got the runtime resolution working in this commit : joshuaflanagan/webpacker-demo@6fec15b.

[aadityataparia]

@gauravtiwari After this fix I am facing another problem:
bin/rails assets:precompile adds asset_host to urls in scss, but bin/webpack does not. Is there any solution to keep it consistent?

I haven't checked with webpack-dev-server though.

[summera]

FYI I was able to get webpacker to work with __webpack_public_path__ by using the configuration I detailed in #2269 (comment)