Deployment model for a reactjs website?

JavaScript
1

Hi folks!

I want to practice some webdev + deployment. I started with writing a basic webpage using ReactJS and react-router. I bundle this with parcel, and it works well enough for starters on my local machine.

So I decided I’d try to host this on AWS to get more experience with their tooling.

I bought a domain, set up AWS’s CloudFront CDN, and pointed it to an S3 bucket that contains the output of my parcel bundler.

Navigating through the website via clicking links works fine. The router works, and gets me to the page. However, if I type in the address with a URI, example duckduckgo.com/about, I get an Access Denied. In fact, even refreshing the page gets this result.

I feel like this has something to do with the routing. If I type in that addr directly, it actually tries to navigate into the S3 bucket itself (which I don’t actually want it to do, I want it to follow the react routing.)

So my question: for a website setup this way with react-routing, what is the typical deployment model? Do I have to use EC2 instances or Elastic beanstalk? S3 seemed like the optimal thing because all my pages are static content, there’s no dynamic content that needs to be fetched from a server.

Thanks in advance.

2

Go to your S3 bucket, select “Properties” tab, scroll to “Static website hosting”, click “Edit” and in " Error document - optional" field enter index.html. Save changes.
This should handle routing issues.

1 Like
3

I’ve tried that, but my setup is using a registered domain name with an amazon-cert, so I have my bucket setup to use an origin-access-identity to access the S3 objects. The “Static website hosting” option is disabled and a specific policy is setup to have the access-identity get the objects instead.

I did try switching the bucket to public access with no identity access required, but I just got access denied entirely, even on the main page. If I’m reading the AWS docs correctly, it sounds like the origin-access-id is required to use a registered domain and cert.

4

My setup is using aws cloudfront for ssl, so I’m just pointing it to my s3 bucket which has static hosting enabled :man_shrugging:
I guess you should try to ask on stackoverflow.

5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.