React/webpack - How can I host react app on one server and images/fonts on another server?

user_688266 0
Viewed 482

For business reasons, I have to host my React app on one domain and serve the images/fonts from another domain (ie. S3). Not sure how I can configure the app to do this?

An example, I want to host my React app at: http://kamilski.com/#/

And then serve my static assets (images and fonts) from: http://camel.assets.s3.com/***

I don't know how to configure my create-react-app or Webpack to do this. I know that PUBLIC_URL is available but that still forces me to run the React app and assets on the same server.

create-react-app webpack reactjs
2 Answers

This isn't too bad - I do a similar thing with a couple of my apps. First, get the assets you want onto S3 using an S3 bucket.

There's a good youtube video for that here (this is about uploading from your react app, but the AWS setup is similar in some ways): https://www.youtube.com/watch?v=cDj4LPTLR3o

So once you have your aws bucket setup, you'll probably have one called "site_images" for example. At that point you can source those images from S3 like you would any other image:

https://camel.assets.s3.amazonaws.com/images/SOME-IMAGE-ON-AWS

You'd load fonts in a similar way via your css file(s) most likely with something like: 

@fontface {
  font-family: 'My Awesome Font';
  src: url('https://camel.assets.s3.amazonaws.com/fonts/SOME-FONT-ON-AWS')
}

How you do this specifically will depend on your configuration. You'll need to adjust our aws bucket for CORS which can be a bit of a snag. These links should should help you in the right direction though!

https://coderwall.com/p/ub8zug/serving-web-fonts-via-aws-s3-and-cloudfront

Amazon S3 CORS (Cross-Origin Resource Sharing) and Firefox cross-domain font loading

user_55441190

Did you try to use plugins like webpack-s3-plugin

You can define rules for all assets you need.

And of cause you'll have to eject CRA or use something kind of react-app-rewired or rescripts.

user_134252820
Related