5

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.

Kamilski81
  • 14,409
  • 33
  • 108
  • 161
  • what is `PUBLIC_URL` here and why do you think it might help? – Dan O May 11 '20 at 19:57
  • https://create-react-app.dev/docs/advanced-configuration: Create React App assumes your application is hosted at the serving web server's root or a subpath as specified in package.json (homepage). Normally, Create React App ignores the hostname. You may use this variable to force assets to be referenced verbatim to the url you provide (hostname included). This may be particularly useful when using a CDN to host your application. – Kamilski81 May 11 '20 at 22:57

2 Answers2

2

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

Penny Liu
  • 15,447
  • 5
  • 79
  • 98
SethGoodluck
  • 380
  • 3
  • 14
0

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.

vicacid
  • 509
  • 4
  • 6