{"id":13258,"date":"2023-11-27T07:08:04","date_gmt":"2023-11-27T13:08:04","guid":{"rendered":"https:\/\/www.supportpro.com\/blog\/?p=13258"},"modified":"2024-02-18T23:34:54","modified_gmt":"2024-02-19T05:34:54","slug":"aws-amplify-in-react-application-deployment","status":"publish","type":"post","link":"https:\/\/www.supportpro.com\/blog\/aws-amplify-in-react-application-deployment\/","title":{"rendered":"AWS Amplify in React Application deployment"},"content":{"rendered":"\n
\n
\"\"<\/a><\/figure>\n<\/figure>\n\n\n\n

The digital age requires businesses and individuals to have a website. Whether you are a developer, blogger, or an entrepreneur, hosting your website securely and efficiently is essential. Let’s see how to create a static website using Amazon Amplify, one of the powerful services offered by Amazon Web Services (AWS)..<\/p>\n\n\n\n\n\n\n\n

What is Amazon Amplify?<\/p>\n\n\n\n

Amazon Amplify is a fully managed service that enables developers to easily build, deploy, and host static web applications. It simplifies the process of setting up and managing infrastructure, allowing you to focus on developing your website and providing an exceptional user experience.<\/p>\n\n\n\n

Step 1: Set Up an AWS Account<\/p>\n\n\n\n

To get started with Amazon Amplify, you need an AWS account. If you don’t already have one, visit the AWS website and create a new account https:\/\/aws.amazon.com\/. <\/p>\n\n\n\n

Once you’re logged in, you can access the AWS Management Console.<\/p>\n\n\n\n

Step 2: Create a New Amplify App<\/p>\n\n\n\n

In the AWS Management Console, search for “Amplify” and open the Amplify Console. Click on the “Get Started” button.<\/p>\n\n\n\n

Step 3: Connect Your Repository<\/p>\n\n\n\n

Amplify supports version control systems such as GitHub, Bitbucket, and AWS CodeCommit. After successful authorization, you can select which repository you want to deploy and select the branch.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n

Step 4: Configure Build Settings<\/p>\n\n\n\n

Once your repository is connected, Amplify will detect the type of project you’re hosting (e.g., React, Angular, Vue.js, or plain HTML\/CSS). It will suggest build settings based on the detected project type. Review and modify these settings as needed, ensuring they align with your website’s requirements.<\/p>\n\n\n\n

The base template that AWS provides is shown below.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

Also, under the Advanced Settings toggle, you can set environment variables and a custom-build container.<\/p>\n\n\n\n

Finally, after reviewing your application’s settings, click Save and Deploy. AWS will begin configuring and deploying your application. Once AWS is deployed, you can navigate to the Amplify home page and see your newly deployed application. The amplify endpoint will let you access the website https:\/\/main.XXXXXX.amplifyapp.com\/<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Step 5: Set Up Custom Domains and SSL<\/p>\n\n\n\n

To give your website a professional touch, you can set up a custom domain and enable SSL encryption. Amplify makes it easy to automatically add custom domains, provisions, and SSL certificates using AWS Certificate Manager (ACM). Once the endpoint is added in domain DNS the website can be accessed using your domain.<\/p>\n\n\n\n

Step 6: Continuous Deployment<\/p>\n\n\n\n

One of Amplify’s key features is its ability to enable continuous deployment. By connecting Amplify to your version control system, your website will automatically build and deploy whenever changes are pushed to the repository. This ensures that your website is always up to date.<\/p>\n\n\n\n

Step 8: Monitor and Manage<\/p>\n\n\n\n

You can monitor the performance of your website, track build logs, and manage multiple aspects of your application with Amplify’s dashboard. You can view metrics, set up alerts, and integrate with AWS CloudWatch for advanced monitoring capabilities.<\/p>\n\n\n\n

Pricing:<\/p>\n\n\n\n

You must be wondering why this is so cool and easy to deploy the website and is going to cost more. Nah, the AWS Amplify is included in the 12-month free tier <\/p>\n\n\n\n

Ie; No cost for up to: <\/p>\n\n\n\n