Easiest and Free way to host your React App

Let’s keep things cheap & simple with AWS S3

Firstly to deploy a React project, we must have a React project. The quickest way to create one would be:

To create a build version for our application we can simply run inside our project. This will create a build folder in our project with an file that we can use to host our project. Now let’s get AWS’ S3 sorted. If you don’t have an AWS account, you would have to create one here. Once you have an account ready, search for S3 in the AWS console services and click on it.

AWS homepage

Creating a new bucket

Now on this page, we can create on the orange action button with the text “Create Button” to start creating a new bucket. We must pick a unique name for our bucket and also ensure that we uncheck all privacy settings, so the bucket is available publicly. Here’s how that looks:

Creating a new bucket

Once done, the website will send you to an overview of all your buckets. Click on the one we just created it. Here we can simply drag and drop all the contents of our react project’s build folder. AWS will ask for a confirmation after dropping the contents into the bucket.

Configuring the bucket

Now let’s head over to the “Properties” section of our bucket:

Bucket Properties Page

Here we click on “Static website hosting” and “Use this bucket to host a website”. Since we dropped the output of our react’s build script in here, the should now be in the bucket so we can use that for both the index and error documents. In a real-life project you might have a different page for a 404 case etc.

Now let’s head over to the “Permissions” section of our bucket. If you had successfully followed along and disabled public access block when creating the bucket, your screen should look like this:

Bucket Permissions Page

If not, you can just switch all these settings off now. Here, once we click on Bucket Policy, we will reach a page where we can input a new bucket policy in JSON format. Let’s enter the following JSON:

Obviously you would have to replace the section with your bucket’s name for this to work. Once that’s done your screen should look like this:

Bucket Policy

Testing

Great! We’re all done. That was so quick, bye now.

If you’ve stuck around you want to actually see your website. For this we would have to know the region where our S3 bucket is. If you are web-savvy you might have noticed that it is present in the url. If not, you can go to the AWS console home by clicking on the logo in the top left or by clicking here. To take you to this screen:

AWS Console Home

Here, you can check what region you are in as well as change it if you wish. I am in Europe(Frankfurt), but the value that we need is its region code, which for my case is .

once we have the region we can figure out the URL for our website it follows this format:

For me that looks like:

When you go to this URL you should see your website working. Any time you need to update it, you can simply run in your React project again after making the necessary changes and replace the S3 bucket’s contents with the new output in the build/ folder 😄.

That was easy! If you want to learn more about AWS, perhaps about AWS’ Serverless Architecture and using it with Node.js, check it out here!

Talking about money, tech and how to make money from tech. Bitclout: https://bitclout.com/u/angad

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store