Deploying Static React app on AWS S3 -Route53 Domain and email setup Workmail,Dos and Donts

Introduction

Welcome again to my data articles.We will be going through how to deploy on AWS S3 and mistakes you should avoid.

Architecture

To start with you all know that deploying static websites on AWS s3 is seamlessly easy but sometimes it can be daunting because of several issues that might cause your website not to work.

We will start with the architecture on how to deploy your app then go on to explain dos and don'ts for you not to be disappointed at the end.

The above architecture shows how you deploy app, your users access the content from Route 53, how the domain routes to CloudFront, and then to AWS S3. Also, remember the certificate manager for your SSL.
To explain each of the services:

1. Route 53 - Domain name Service (you can buy your domain here and use it anywhere) I love this service compared to others. 2.AWS S3 - Hosting our static website.AWS S3 is an object storage service that offers scalability, data availability, security, and performance. It is designed to store and retrieve any amount of data from anywhere on the web. 3.AWS CLoudfront - content delivery network (CDN) service that securely delivers data, videos, applications, and APIs to customers globally with low latency and high transfer speeds. 4.AWS Workmail - a managed email and calendaring service in the cloud designed to provide a secure, scalable, and cost-effective solution for businesses.
2. Certificate Manager: - service that lets you easily provision, manage, and deploy public and private Secure Sockets Layer/Transport Layer Security (SSL/TLS) certificates for use with AWS services and your internal connected resources.

Once you push your code either by CI/CD or through AWS CLI to s3 everything else starts the process until the user gets to view your site.

Setting Up workmail to use to email your clients.

In order to create an email with your domain we use AWS wokmail service which is what i usually use.

Process:

• search for AWS Workmail in the console.
• Create an organization( preferably your name or brand)
• create emails/users in the organization, specifying the domain you are creating user with.
• Then you will get a link to the organization and you will enter the email and password you created and start sending emails.Here is the preview:

Login

Email

Dos and Donts While Deploying on S3

DOs

1. Ensure the react routers are working:
   • Use Browserouter,
   • Use the "Link" tag instead of anchor tag "a" for your navigation through pages.
   • Use "to" to redirect instead of "normal href". These are the reasons your app wont work well in production especially in S3.
2. Setup Bucket Policy and allows static web hosting. 3.Configure Index and Error Documents. 4.Implement Content Delivery(Cloudfront)

Donts

1.Avoid Public Write Access:

Restrict public write access to your S3 bucket.Only allow public read access for the necessary files.

2.Dont use s3 for dynamic content which requires server-side.

3.Avoid manual uploads of content as it may cause errors use CLI or CI/CD.

Conclusion

In conclusion we have gone through the whole process of deploying and app and also setting up workmail and the dos and donts while implementing this process.
Thank you and Happy learning.