score:2

Accepted answer

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

score: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.


Related Query

More Query from same tag