Using React JS and Deploying It with Amazon S3

React JS is one of the most widely-used JavaScript libraries for building dynamic user interfaces. Combined with Amazon S3, a scalable and cost-effective object storage service, developers can create and deploy web applications with ease. In this blog post, we'll guide you through creating a simple React application and deploying it on Amazon S3.

Setting Up React JS

Let's start by creating a basic React application. First, you'll need Node.js and npm installed. If you don't have them, you can download them here.

1. Create a new React application using Create React App:

npx create-react-app my-app
cd my-app

Start your development server to see the app in action:

npm start

Now, you'll have a local development server running, and you can navigate to http://localhost:3000 in your browser to see your new React app.

Writing Some React Code

Let's create a simple React component to display a greeting message. Modify your src/App.js to look like this:

import React from 'react';

function App() {
  return (
    

      
Hello from React and Amazon S3!
    
  );
}

export default App;

Building the Project

Before deploying, you'll need to build your project. Run the following command in your project directory:

	npm run build

This will create a build folder containing the production-ready version of your application.

Setting Up Amazon S3

Now let's move on to deploying our app using Amazon S3.

1. Create an S3 Bucket: Log in to your AWS Console, navigate to the S3 service, and create a new bucket with public access enabled.

2. Configure Bucket for Static Website Hosting: Select the newly created bucket, navigate to the "Properties" tab, and enable the "Static website hosting" option.

3. Upload Your Build Files: Go to the "Upload" section, and upload the contents of the build folder created earlier.

4. Set Bucket Policy: In the "Permissions" tab, add the following bucket policy to allow public access:

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "PublicReadGetObject",
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::YOUR_BUCKET_NAME/*"
    }
  ]
}

Replace YOUR_BUCKET_NAME with the actual name of your bucket.

1. Access Your Website: You can now access your website using the endpoint provided in the "Static website hosting" section of your bucket's properties.

Conclusion

Using React JS with Amazon S3 provides an efficient way to build and deploy scalable web applications. By following the steps in this guide, you should have a simple React application up and running on S3. Happy coding!