Webpacker: CDN assets not working since 3.2.0

Created on 16 Jan 2018 · 7Comments · Source: rails/webpacker

I am having issues with imported assets not being embedded with their proper CDN links since 3.2.0. The asset is being imported like this on top:

import ContentImg from '../images/content.svg';

It shows up properly in dev but when pushing to staging the assets do not attach the proper CDN link associated with it. I also tried setting __webpack_public_path__ on top of the file to the cdn root but to no luck.

I have tried using url-loader as well but it just ends up breaking the assets in dev as well.

I believe it is because of #1107 that is causing this issue now, is there something that I need to change to support CDN imports again in 3.2.0?

Source

navied

👍4

Most helpful comment

Great! I was able to get it to work with 1 by doing this:

const fileLoader = environment.loaders.get('file')
fileLoader.use[0].options.publicPath = 'https://mycdnsubdomain.fictional-cdn.com/packs/'

Are we able to access what is in config.action_controller.asset_host here?

EDIT:

I was able to make it less "static" by just bringing back some of the code that was removed from #1107

Came up with this:

const { environment } = require('@rails/webpacker')
const env = process.env.NODE_ENV || 'development'
const { resolve } = require('path')
const { safeLoad } = require('js-yaml')
const { readFileSync } = require('fs')
const filePath = resolve('config', 'webpacker.yml')
const appConfig = safeLoad(readFileSync(filePath), 'utf8')[env]
const config = appConfig

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

const formatPublicPath = (host = '', path = '') => {        
  let formattedHost = removeOuterSlashes(host)      
  if (formattedHost && !/^http/i.test(formattedHost)) {     
    formattedHost = `//${formattedHost}`        
  }     
  const formattedPath = removeOuterSlashes(path)        
  return `${formattedHost}/${formattedPath}/`       
}

const fileLoader = environment.loaders.get('file')
fileLoader.use[0].options.publicPath = formatPublicPath(process.env.WEBPACKER_ASSET_HOST, config.public_output_path)

module.exports = environment

It looks a bit messy but it does work, bringing back the old code in some form might end up being a better solution

navied on 16 Jan 2018

👍8 ❤2

All 7 comments

@navied It should work if you configure Rails to use CDN.

```rb
config.action_controller.asset_host = 'mycdnsubdomain.fictional-cdn.com'
````

gauravtiwari on 16 Jan 2018

@gauravtiwari Yup! That is already set to the CDN url, all my JS assets within the manifest.json works fine with the proper CDN url attached it is only images that are being imported within my react component that are not being attached with a CDN url.

navied on 16 Jan 2018

Ahh right, will try to reproduce later and report back but in meantime you could try either:

// config/webpack/environment.js

const fileLoader = environment.loaders.get('file')
fileLoader.use[0].options.publicPath = process.env.SOME_CDN

// OR
// THIS SHOULD BE AT THE TOP BEFORE ALL IMPORTS/PACKS THAT USED IMAGES/FONTS
 __webpack_public_path__ = process.env.SOME_CDN
// rest of your application entry

gauravtiwari on 16 Jan 2018

Great! I was able to get it to work with 1 by doing this:

const fileLoader = environment.loaders.get('file')
fileLoader.use[0].options.publicPath = 'https://mycdnsubdomain.fictional-cdn.com/packs/'

Are we able to access what is in config.action_controller.asset_host here?

EDIT:

I was able to make it less "static" by just bringing back some of the code that was removed from #1107

Came up with this:

const { environment } = require('@rails/webpacker')
const env = process.env.NODE_ENV || 'development'
const { resolve } = require('path')
const { safeLoad } = require('js-yaml')
const { readFileSync } = require('fs')
const filePath = resolve('config', 'webpacker.yml')
const appConfig = safeLoad(readFileSync(filePath), 'utf8')[env]
const config = appConfig

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

const formatPublicPath = (host = '', path = '') => {        
  let formattedHost = removeOuterSlashes(host)      
  if (formattedHost && !/^http/i.test(formattedHost)) {     
    formattedHost = `//${formattedHost}`        
  }     
  const formattedPath = removeOuterSlashes(path)        
  return `${formattedHost}/${formattedPath}/`       
}

const fileLoader = environment.loaders.get('file')
fileLoader.use[0].options.publicPath = formatPublicPath(process.env.WEBPACKER_ASSET_HOST, config.public_output_path)

module.exports = environment

It looks a bit messy but it does work, bringing back the old code in some form might end up being a better solution

navied on 16 Jan 2018

👍8 ❤2

https://github.com/rails/webpacker/issues/1186#issuecomment-358110765 worked for us, maybe it would be a good thing to bring back some of the code as @navied suggested

johannesluedke on 23 Jan 2018

👍2

@gauravtiwari any update on this? Is there a work around for this or will I'll need to do something like https://github.com/rails/webpacker/issues/1186#issuecomment-358110765?