6

Trying to set up a server-side (universal, isomorphic) rendered react app that is deployed via CircleCI using Heroku for the node/express app, and Cloudfront as the CDN.

I'm having some trouble conceptualizing how this will work. The flow seems pretty straight forward except for a few parts. Once we deploy our built assets to a CDN like CloudFront, how do we wire them up to our index.html file that lives on Heroku? (this index file is built and is served from the Heroku node app as a base for server side rendering). But I want it to contain links to the CDN assets, not the Heroku built assets. (CircleCi runs webpack and so does Heroku once it's deployed)

Has anyone ran into this before?

Jack Hanford
  • 61
  • 2
  • Here's a boilerplate I use for universal react apps. It deploys to heroku and can use cloud front. Rather than using an index.html file it deploys to heroku and the server serves the `Html.jsx` component. https://github.com/MadeInHaus/react-flux-gulp-starter – pizzarob Jul 13 '16 at 00:56
  • If the concern is how to address the files, keep versions in sync, and deal with deployment, maybe my [delivr](https://github.com/sholladay/delivr) module and related build-* modules will help you. It puts your code on S3 in a predictable, production-ready manner and then you would set up CloudFront as a simple caching proxy. – Seth Holladay Dec 27 '16 at 21:24
  • Did you figure this out? are you using webpack? – BradByte Jan 16 '17 at 21:58

1 Answers1

0

You can use something like https://github.com/kossnocorp/assets-webpack-plugin to create a .json file that has the directory / names of your built and hashed webpack files. You can then use this .json file to determine what your tags will look like in your server-side generated html.

  1. build your client side bundle with webpack and generate a .json file with the names of your hashed files
  2. build your server side bundle. it reads the above .json file and injects the correct filenames into the script values in ur html
  3. deploy to heroku / upload to cdn
Jon
  • 5,945
  • 4
  • 21
  • 31