Universal rendering reaction with CDN and Heroku

Question

An attempt to set up a server-side (universal, isomorphic) visualized response application that is deployed through CircleCI using Heroku for the node / express application and Cloudfront as a CDN.

I am having problems with a concept of how this will work. The flow seems fairly straightforward, with the exception of a few parts. When we deploy our embedded assets to a CDN, such as CloudFront, how do we connect them to our index.html file, which lives on Heroku? (This index file is built and maintained from the Heroku node application as a base for server-side rendering). But I want it to refer to CDN assets, not Heroku assets. (CircleCi launches webpack and does Heroku after deploying it as well)

Has anyone come across this before?

Answer 1

You can use something like https://github.com/kossnocorp/assets-webpack-plugin to create a .json file that has the directory / names of your inline and hashed web package files, then you can use this file .json to determine how your tags will look on the html server created.

• create your client-side package using webpack and create a .json file with hashed file names
• create a package on the server side. it reads the above .json file and enters the correct file names into the script values ​​in ur html
• deploy to heroin / upload to cdn