S3 Amazon Static Website with React?

Question

I built a website using ReactJs, and to see the website, I generally do npm start and go to localhost:3000 via a browser.

I now want to host this website on S3, but without an EC2 instance. My understanding is that npm is a process, so it is server-side, and therefore, I would need to purchase compute to actually deploy my website.

I found this tutorial that does not mention paying for EC2 instance compute time: https://www.fullstackreact.com/articles/deploying-a-react-app-to-s3/

However, they still use NPM which makes me confused.

My question is: is it possible to use React if I were to only use Static S3 Website, without compute, and if so - how do I bypass NPM process?

React - component in seperate script does not work

In the above post, user tried to make a hello-world app in react, but all of the answers point them in the direction of making a server serve the content. I thought react is a front-end thing and can run without server-side processes. Is this true? Can someone explain why node.js is necessary or is paired with react, and whether is is possible to use react on s3 without ec2 compute?

Austin Greco · Accepted Answer · 2017-08-31 20:34:30Z

5

It's possible to host a static react site entirely on s3. In this case, you would use node/npm only as build tools and to run your development server (localhost:3000).

npm would download your dependencies and you'd use node or gulp or webpack to build the assets into static files.

Then you would upload the files to s3 where it would serve the static files.

If you have some backend node code, then you would need to use ec2 or some other type of host. But if it's entirely static javascript, then there's no need for a node server.

Here are some links that might help explain in more detail:

answered Aug 31, 2017 at 20:34

Austin Greco

33.6k6 gold badges60 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Aamir Faried Over a year ago

I just wanna add one thing here, for backend node code you can use Lambda functions and get advantage of serverless world :)

Munib Over a year ago

@AamirFaried really nice suggestion :)

ericat · Accepted Answer · 2017-08-31 22:12:03Z

1

Try Gatsby! Here: https://www.gatsbyjs.org/

From the Github page: "Blazing fast static site generator for React"

Once you've generated your static pages, you can deploy on S3, Github pages...the choice is yours!

answered Aug 31, 2017 at 22:12

ericat

3012 silver badges3 bronze badges

Comments

Xavier Reyes Ochoa · Accepted Answer · 2019-03-30 17:30:18Z

You can skip EC2 for your case. Here is why:

1) S3 Bucket + CloudFront (CDN) is really fast for static files serving. The React minified app is a group of static files which works best here. For the build of those minified files, I recommend using a CI/CD process or build them locally and just upload them to S3.

2) EC2 requires more work to setup, it consumes resources, it is not necessary for static files or React (unless you are using ReactDOMServer for dynamic content serving), and Node.js is not recommended for static files (Node.js get's blocked since it is single threaded so it is a best practice to keep static files away from it).

Here is a good article on the topic using Angular as an example: https://www.quora.com/Should-I-use-AWS-EC2-to-host-an-Angular-web-app-or-AWS-S3

Collectives™ on Stack Overflow

S3 Amazon Static Website with React?

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related