Deploying serverless React application using s3

Hello! Have you ever thought of deploying a react app without server? Well in this blog I will walk you through the steps for doing it using AWS s3.

  • Login into your aws console with your credentials.
  • In the services menu search s3 and choose the S3.1-s3-1.png
  • Click on the ‘Create bucket’ button.

  • Give a name for the bucket and choose the region.2-create-bucket
  • Click on the ‘Create’ button.
  •  You could see the created bucket in the list of buckets.
  • Now, go back to your terminal where the react app lives and ensure that you have aws client in your machine else download it by this command in terminal
pip install awscli --upgrade --user
  • And set your aws credentials using
aws configure
  • Now in your react app (assuming you have already build your app for production use) and run this command in the terminal.
    aws s3 sync your-build-folder/ s3://$bucket --acl public-read
  • ‘$bucket’ refers to the bucket name.
  • Wait for files to get uploaded to s3
  • Go back to aws console and click on bucket/ refresh the contents of the bucket. Make sure you see all the files needed for the react app.3.1-bucket-upload-view
  • Now, Go to ‘Properties’ menu and choose ‘Static website hosting’.7-static-done
  • You can see the endpoint and if you hit the particular url the app will open.Ensure to copy it.6-change-index
  • Specify the index and error document as ‘index.html’ (Since all the routing is handled by react-router or any other router you use in the app.
  • Click Save and in the new tab paste the link you copied.
  • Wow!!! you should see your react-app running.
  • Great! you have deployed your serverless react application.

Note: you won’t have SSL for the site and no custom domain. If you are looking for SSL and using custom domain follow my next blog.

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s