Discussion: How can we better support assets with regard to CDN uploads?

[toddw]

Better support for uploading assets to CDN

With the way webpack works, you can specify where assets will be loaded using the publicPath property. This works great when you know what the publicPath will be during build time but what about situations where you want publicPath to be configured at runtime. Let's say you use gluestick dockerize myApp and you want to specify the CDN based on where the docker image is going to be used? At TrueCar we use the same Docker image in our QA/Staging/Production environments but we change the publicPath property by using an environment variable ASSET_URL. This is the reason why you will see a call to updateWebpackAssetPath in src/cli.js. During the gluestick dockerize command we actually set the ASSET_URL to a unique string __GS_ASSET_URL__ and when you start the app we find all occurrences of that string in the src/build folder and replace it with whatever the ASSET_URL environment variable is. This way, you can configure ASSET_URL at runtime.

If you are not uploading the assets to a CDN, this approach works out fine. However, if you plan to upload the assets to a CDN, this approach does not work so well. The reason is that you would have to upload the assets after you start the app. This might work fine if your asset upload script was something you put in src/config/init.server.js but that doesn't feel like the right place to upload assets.

One way I've see the problem solved with GlueStick is to upload assets during the build process. We do this by not using the default src/config/.Dockerfile that is used when running gluestick dockerize appName but instead we copy from that file and modify it. For now all of our assets are served from the same place. In other words the ASSET_URL environment variable isn't changing across environments or this method likely wouldn't work.

Open questions

What is the right way to deal with asset uploads?
How can we do so in a way that supports the same Docker image being used in multiple environments?
Does it make sense to provide a pluggable architecture for uploading assets to common places like S3?

Possible solutions

If you are uploading to S3, and you use the aws-cli to sync files. It really isn't so bad to make the upload script something triggered in src/config/init.server.js because if the assets have already been uploaded then they will not need to be re-uploaded.

• There is a problem with running the same image in multiple environments that do tweak ASSET_URL, as you could end up overwriting an asset when run in a different environment if ASSET_URL doesn't match This actually isn't a problem because if the ASSET_URL is different then it's going to be uploaded to a different place. It shouldn't overwrite anything.

[toddw]

Thinking about this longer, it feels like moving the upload script to something triggered in src/config/init.server.js is a reasonable way to solve this and leaving GlueStick to work as is might be just fine. I'll leave the issue open for others to comment but this might not be a priority.

[toddw]

After looking into this further it seems like we might be able to just rely on using relative urls all the time with a mix of the <base …/> tag when someone wants to host assets from a CDN vs letting GlueStick serve the assets

[toddw]

nvm, base will override links, not just assets… Unless there is a way to make it so the base tag only refers to assets…

[zamotany]

Any ideas how to better solve it?? I came across this issue webpack/webpack#443 and it looks like this can be done easier by just overwriting __webpack_public_path__ in entry point, so there will be no need for doing hacky stuff with replacing variables However I'm not sure it will work in webpack 2, as this issue if for webpack 1.

[chrischen]

I use CloudFront as a CDN and it simply mirrors my primary webserver. So being able to simply set the publicPath to an absolute url (eg https://cdn.mywebsite.com/assets/) used to work well, but now when I set an absolute URL it changes it to "/https:/cdn.mywebsite.com/assets".

Alternatively before I had static asset filenames (main.js, main.css, etc), and symlinked folders to do versioning. So for example everytime gluestick generates new assets it'd go to /assets/35/main.js where "35" is the version.