Use CDN for chunks as well #1084

TheRusskiy · 2017-12-12T12:37:23Z

Right now asset_host setting seems to only affect the main JS file.
The main JS pack file is loading from CDN correctly:
https://cdn.mysite.com/packs/admins-fb39652d413e925cd086.js
but then it requests a chunk and it ignores the CDN setting:
https://www.mysite.com/packs/0-d21df208925975fc5ed1.chunk.js

The text was updated successfully, but these errors were encountered:

TheRusskiy · 2017-12-12T12:39:43Z

Are this issue and #1080 the same ones?

gauravtiwari · 2017-12-12T13:18:11Z

Yes, sounds similar. Lets fix it 👍

gauravtiwari · 2017-12-15T13:38:38Z

So this one looks a bit tricky because webpack seems to trying to load the assets asynchronously and assuming the url to be the current document url. If we supply full public path into the webpack build then Rails will try to add the path with it's asset_host too, which will result in duplication.

A workaround is to include following in a file where chunks are declared:

// app/javascript/helpers/public-path.js

const removeOuterSlashes = string =>
   string.replace(/^\/*/, '').replace(/\/*$/, '')

__webpack_public_path__ = `${removeOuterSlashes(process.env.WEBPACKER_ASSET_HOST)}/packs` // whatever the public output path is

// packs/application.js

import '../helpers/public-path'
//... rest of the imports

TheRusskiy · 2017-12-15T14:11:46Z

@gauravtiwari in order for this to work do I need to try with master branch? ( so #1107 is included)

gauravtiwari · 2017-12-15T14:20:10Z

Yes please although it should work with 3.0.2 as well 👍

TheRusskiy · 2017-12-16T15:51:25Z

@gauravtiwari I am getting a pretty weird behaviour now.
On initial page load (I have an SPA) the first chunk is loaded from the normal host, when I navigate to a different page and webpack loads another chunk it does it from the CDN.
So it's:
initial page load
https://cdn.mysite.com/packs/admins-e330b16d30c53aaf59b9.js
https://www.mysite.com/packs/0-2ae1b2669d9cdd1c9988.chunk.js
navigating to another SPA page
https://cdn.mysite.com/packs/1-1abbd151f1f6e4e9a7ba.chunk.js

p.s. also I made it ${removeOuterSlashes(process.env.WEBPACKER_ASSET_HOST)}/packs/ instead of ${removeOuterSlashes(process.env.WEBPACKER_ASSET_HOST)}/packs (extra slash in the end.
p.p.s using 3.2.0

I have

if (process.env.NODE_ENV === "production") {
  require("common/helpers/publicPath")
}

as a first line in my pack file.
Is it somehow possible that webpack is loading the first chunk before reading this line?

gauravtiwari · 2017-12-16T18:34:37Z

@TheRusskiy Have you setup CDN for rails?

# production.rb
config.action_controller.asset_host = 'http://example.com'

TheRusskiy · 2017-12-16T23:27:46Z

@gauravtiwari yes :-)

gauravtiwari · 2017-12-16T23:38:42Z

Does this chunk file: https://www.mysite.com/packs/0-2ae1b2669d9cdd1c9988.chunk.js

if (process.env.NODE_ENV === "production") {
  require("common/helpers/publicPath")
}

has this import at the top? If you have multiple packs you would need to include it in all packs. Or you can make a pack just for public path and put at the top, somewhere in the <head></head>

//packs/public-path.js

if (process.env.NODE_ENV === "production") {
  require("common/helpers/publicPath")
}

<head>
<%= javascript_pack_tag 'public-path' %>
</head>

TheRusskiy · 2017-12-17T00:33:23Z

@gauravtiwari
That chunk doesn't have it. The "main" file has it.
Tried including "public path" chunk before the other one per your suggestion - same problem.
Also tried doing window.__webpack_public_path__ = ... (added explicit window), inspected in the browser, the property is set but no effect.

TheRusskiy · 2017-12-17T02:10:56Z

Webpack should be doing all of this for us already.
All we need to do is to set publicPath https://github.com/rails/webpacker/blob/master/package/environment.js#L71
In the end I did this in production.js

const host = "https://cdn.mysite.com"
const config = require("@rails/webpacker/package/config")
config.publicPath = `${host}/packs/`
const environment = require("./environment")
module.exports = environment.toWebpackConfig()

Which is very hacky but gets the job done.
Is there some API we can use to make this a bit prettier?

gauravtiwari · 2017-12-17T11:22:08Z

@TheRusskiy Yes, setting like this will apply CDN at compile time and not runtime, which means you might get duplicate CDN URLs (one from Rails and one from webpack compile).

const environment = require("./environment")
const { config } = require("@rails/webpacker")

const host = "https://cdn.mysite.com" // process.env.ASSET_HOST
environment.config.publicPath = `${host}/${config.public_output_path}/`

module.exports = environment.toWebpackConfig()

TheRusskiy · 2017-12-17T12:06:33Z

isn't

const config = require("@rails/webpacker/package/config")
config.publicPath = `${host}/packs/`

just override to

environment.config.publicPath = `${host}/${config.public_output_path}/`

?

I don't see publicPath changing in other places.

gauravtiwari · 2017-12-17T12:10:38Z

You don't want to mutate original config object but instead environment specific webpack config.

config.publicPath = `${host}/packs/`

this mutates internal config object, not the webpack config object.

This changes production specific option for webpack:

environment.config.publicPath = `${host}/${config.public_output_path}/`

navied · 2017-12-21T05:12:06Z

Not sure if this is related by since upgrading to 3.2.0 image assets that are within the manifest.json are not being added with the proper CDN url attached with it. I can only assume it is related to #1107

Edit: Noticed this issue was posted before 3.2.0 was released might make sense to turn this into it's own issue.

nddery · 2018-01-22T16:02:51Z

We've tried updating __webpack_public_path__ per the original comment by @gauravtiwari but it didn't had any repercussion, our dynamic imports were still not using the CDN url. What ended up working for us was to update the output.publicPath webpack option like so (on 3.0.2) :

// config/webpack/production.js
const { assetHost } require('@rails/webpacker')

if (process.env.WEBPACKER_ASSET_HOST) {
  environment.config.set('output.publicPath', assetHost.publicPathWithHost)
}

We then upgraded to 3.2.0, which removed assetHost.publicPathWithHost, and had to replace the publicPath with the following:

// config/webpack/production.js
const { config } = require('@rails/webpacker')

if (process.env.WEBPACKER_ASSET_HOST) {
  const publicPath = `${process.env.WEBPACKER_ASSET_HOST}/${config.public_output_path}/`
  environment.config.set('output.publicPath', publicPath)
}

Not sure what the exact difference between ASSET_HOST and WEBPACKER_ASSET_HOST is - seems like the former is the actual environment variable while the latter is the one from Rails (config.action_controller.asset_host).

It's also been mentioned that this would result in duplication, not sure what is meant exactly but this.

I also noticed that in 3.0.2 the file loader used to include the publicPath with publicPathWithHost, but that is not the case anymore in 3.2.0 (and at some point before the URL loader did the same I believe). We aren't using the file loaded at this point but I can only assume it'll lead to some issues, like the ones mentioned by @navied above. (edit that's the issue at #1186)

ernsheong · 2018-07-27T09:24:22Z

Changing ASSET_HOST in configuration.js to WEBPACKER_ASSET_HOST seems to do it for me.

Change from:

const output = {
  path: resolve("public", settings.public_output_path),
  publicPath: formatPublicPath(env.ASSET_HOST, settings.public_output_path)
};

To:

const output = {
  path: resolve("public", settings.public_output_path),
  publicPath: formatPublicPath(env.WEBPACKER_ASSET_HOST, settings.public_output_path)
};

New split chunks API New file loader option for adding static extensions Basic node modules compilation apart from app code CDN support - #1084 Perhaps someone can help with this one?

gauravtiwari · 2018-12-15T13:52:52Z

Please try the latest RC, this is now fixed.

gauravtiwari added the bug label Dec 13, 2017

gauravtiwari removed the bug label Dec 15, 2017

gauravtiwari added enhancement help wanted labels Jan 14, 2018

gauravtiwari mentioned this issue Dec 2, 2018

Stable webpacker 4.0 release #1823

Merged

5 tasks

gauravtiwari closed this as completed Dec 15, 2018

kpelelis mentioned this issue Jan 29, 2019

CDN host for staging environments #1922

Closed

summera mentioned this issue Sep 4, 2019

Ability to set publicPath "On The Fly" #2269

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Use CDN for chunks as well #1084

Use CDN for chunks as well #1084

TheRusskiy commented Dec 12, 2017

TheRusskiy commented Dec 12, 2017

gauravtiwari commented Dec 12, 2017

gauravtiwari commented Dec 15, 2017

TheRusskiy commented Dec 15, 2017

gauravtiwari commented Dec 15, 2017

TheRusskiy commented Dec 16, 2017 •

edited

Loading

gauravtiwari commented Dec 16, 2017

TheRusskiy commented Dec 16, 2017

gauravtiwari commented Dec 16, 2017

TheRusskiy commented Dec 17, 2017

TheRusskiy commented Dec 17, 2017

gauravtiwari commented Dec 17, 2017

TheRusskiy commented Dec 17, 2017

gauravtiwari commented Dec 17, 2017

navied commented Dec 21, 2017 •

edited

Loading

nddery commented Jan 22, 2018 •

edited

Loading

ernsheong commented Jul 27, 2018 •

edited

Loading

gauravtiwari commented Dec 15, 2018

Use CDN for chunks as well #1084

Use CDN for chunks as well #1084

Comments

TheRusskiy commented Dec 12, 2017

TheRusskiy commented Dec 12, 2017

gauravtiwari commented Dec 12, 2017

gauravtiwari commented Dec 15, 2017

TheRusskiy commented Dec 15, 2017

gauravtiwari commented Dec 15, 2017

TheRusskiy commented Dec 16, 2017 • edited Loading

gauravtiwari commented Dec 16, 2017

TheRusskiy commented Dec 16, 2017

gauravtiwari commented Dec 16, 2017

TheRusskiy commented Dec 17, 2017

TheRusskiy commented Dec 17, 2017

gauravtiwari commented Dec 17, 2017

TheRusskiy commented Dec 17, 2017

gauravtiwari commented Dec 17, 2017

navied commented Dec 21, 2017 • edited Loading

nddery commented Jan 22, 2018 • edited Loading

ernsheong commented Jul 27, 2018 • edited Loading

gauravtiwari commented Dec 15, 2018

TheRusskiy commented Dec 16, 2017 •

edited

Loading

navied commented Dec 21, 2017 •

edited

Loading

nddery commented Jan 22, 2018 •

edited

Loading

ernsheong commented Jul 27, 2018 •

edited

Loading