Streamline Your Development Process Using AWS Amplify's Deployment Environment
Tags: aws, react, cicd, productivity
Published: 2023-05-08 16:25:24

As a software team, it's crucial to have a streamlined process for testing and deploying new features. With AWS Amplify, deploying and testing your application becomes easy by creating separate environments for pull requests and ensuring seamless integration into the main software branch.

The development team can generate separate testing environments where work can be evaluated before going live without affecting production.

In this article, we will explore using AWS Amplify to deploy a React application and setting up a deployment environment for pull requests.

## Prerequisite

- Make sure to have Node/NPM installed on your computer. To install,[click here for a guide (https://nodejs.org/en/download).

- Verify you have Node.js installed by using the following terminal command - type node -v .

- Basic understanding of JavaScript / ReactJs

- Understanding of Version Control systems i.e. Github, Gitlab, Bitbucket, etc.

- An AWS account where you can access Amplify

To complete this course, you will need a React application hosted on a remote repository. To expedite the process, I will assume that you already have a React project hosted on your preferred source code repository hosting site. In this case, we will be using GitHub.

If not, you can take a look at [create-react-app](https://create-react-app.dev/docs/getting-started/) docs and [push to a remote GitHub repository](https://docs.github.com/en/migrations/importing-source-code/using-the-command-line-to-import-source-code/adding-locally-hosted-code-to-github).


![Hosted React app on GitHub](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rqvdzbwh684l9kmf8dio.png)


Now that we're done with housekeeping, so let's hop over to AWS Amplify to connect to our git repository and launch the application.

On the Amplify dashboard, we are going to be clicking on - **"Amplify Hosting Option"**. 


![AWS Amplify dashboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e0uc35ym1677y9vsaqdb.png)


After which, we will connect our source code repository, as stated earlier, I am using Github, so I will be selecting Github and giving it the necessary permissions to the code repository. 


![source code repository selection](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lh1wnnlr6igze92ko8tp.png)


![Granting AWS Amplify necessary permission](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o6texkzwlwrhvtmdlg3l.png)


Once the necessary permissions are granted, Amplify will display a list of permitted project repositories. From here, we can select the application we want to deploy, choose the branch, and set any necessary environment variables. After that, we can click on **Save & Deploy** to initiate the deployment process.

![AWS Amplify  settings page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9y9va0n8lil3mczgqnhy.png)


Now Amplify will start building and after a couple of minutes, you'll be presented with the deployed app link. 
If you modify your code and push it into the master branch, it will rebuild and re-deploy your app automatically.


![Completed Deployment portal page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9ddr7q8dbc4wt4j9y76f.png)

Finally, let's configure Amplify to work with branches created on the repository, once this is done we can have a deployment link for each branch before merging a pull request. To do this, click on **Preview** located on the right side of the options panel and enable it by selecting **Enable Preview**.

![Previews Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ayqnm1163v4o87dgz9rz.png)


Once, that is done, we can test by creating a new branch, making some code changes, and raising a PR against the main. 


![New Brach deployed](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/il24hirseiepc2o5cdp8.png)

As demonstrated, AWS Amplify enables the creation of a new deployment link for PR branches, allowing for testing in a separate environment before merging with the main branch. This tool can greatly enhance your development process, and I hope this article has been helpful in showcasing its capabilities. 

If you have any questions or contributions, please let me know in the comments below. Don't forget to like and share. Thank you for reading!