= How to Use AWS Amplify to deploy a React Application =

== A guide to deploying React Applications with AWS Amplify ==

![ ](httpsmiro.medium.com/max/1400/1*pKiBeVwoxaHc_QlhIpVgSA.gif)

Since I started consulting as a Software Engineer, I’ve wanted to put together a portfolio website that showcases the

personaland professionalprojects I’ve worked on. This winter break, I spent time designing, developing, and deploying my portfolio site, and in this article, I will walk you through how I deployed it with AWS Amplify. You can view the website at dan-murphy.com and the code on GitHub.

= A Brief Background =

Most of my professional work entails building data-driven applications and streamlining data pipelines. To accomplish these tasks, I regularly use Python and Ruby and incorporate JavaScript for any frontend work. In an effort to become more comfortable with React, I decided to use the framework to build my portfolio website.

= Setting up the Application =

The first step I took was deciding how to structure the application. I utilized

create-react-app as a base template for my directories, and then re-structured the application with a few additional folders. The finalized setup looks like this:

src

 components

│archives

│extras

│data

│imgs

 pages

│contents

│data

 styles

 tests

 fixtures

Some of the notable changes are the

**components**

, and

**pages**

directories.

**styles**

,

: This is where I store all of the components for the application. By storing the components in a centralized folder, it is easier to reuse and refactor my code and more intuitive for others to understand. Some of the components that make up my portfolio website are

components

Header,

Footer, and

ProjectSidebar.

: This is where I build the distinct pages for the application. I import the needed components from the

pages

folder and then aggregate them to design the page. Here is an example of how I did this for the

components home page:

: This is where I define global CSS styles for the application. I love to use

styles

styled-componentsfor individual components, but I have also found It useful to build global styles that are available to each page.

Lastly, to map requests to the correct pages, we use

react-router-dom. The routes are defined in the

App.js file as shown below:

This will map

HomePage,

/projects requests to

ProjectsPage,

/about requests to

AboutPage, and

/bookshelf requests to

BookPage. Now that the development of the application is complete, we need to deploy it so that others can use it!

/requests to

= Deploying With AWS Amplify =

== Overview ==

There are several ways to deploy a React website, but I’ve found that one of the simplest is to use

**AWS Amplify Amplify is described as the “fastest and easiest way to build mobile and web apps that scale.” To accomplish this, AWS extrapolates all of the complications of setting up a server, installing dependencies, and creating a production build of your website, allowing you to focus solely on building an intuitive UX. To learn more about what AWS Amplify offers for data-driven applications (specifically, websites with a **frontend** and **backend check out their documentation.

== Connecting your Repository ==

To host your web app on AWS Amplify, you first need to connect the repository containing your source code. To do this, you can navigate to the

*AWS Amplify* *Getting Started* **Host My Web App and click **Connect app repo *page, scroll to*page, scroll to ![ ](httpsmiro.medium.com/max/1400/1*2OLIf9dDvf2ZDqjhXUXuGw.png)

Then, you’ll be redirected to a separate page where you can connect the repository containing your source code. For this example, I will choose GitHub, but AWS Amplify also supports BitBucket, GitLab, AWS CodeCommit, and even deploying without a Git provider.

![ ](httpsmiro.medium.com/max/1400/1*Dq8nN8mntiNegYIXarbtAw.png)

After successful authorization, you can select which repository you want to deploy and select the branch AWS Amplify should use for production builds.

![ ](httpsmiro.medium.com/max/1400/1*OOlYA6q2eCplw4hW2IQP8Q.png)

After that, click

**Next** and AWS will ask you to configure your *build* and *test* settings. The base template that AWS provides is shown below.

version: 1

frontend:

phases:

preBuild:

commands:

- npm install build:

commands:

- npm run build

artifacts:

baseDirectory: build

files:

- 

cache:

paths:

- node_modules

Additionally, under the

**advanced settings** toggle, you can set environment variables and a custom build container.

Finally, after reviewing the settings for your application, click

**Save and Deploy **and **AWS will begin configuring and deploying your application. When AWS is done deploying, you can navigate to the Amplify home page and see your newly-deployed applicationAWS will begin configuring and deploying your application. When AWS is done deploying, you can navigate to the Amplify home page and see your newly-deployed application.

Now, let’s customize the URL using

**AWS Amplify domain management

== Adding a Custom Domain ==

To get started adding a custom domain, navigate to the left sidebar and select

**domain management ![ ](httpsmiro.medium.com/max/1400/1*fo8ZsKK7c3QvAwpjzMXcWg.png)

**domain management**setting.

Then, select

**add domain **configure domain **enter your domain name (as shown below), and click**enter your domain name (as shown below), and click ![ ](httpsmiro.medium.com/max/1400/1*e57WryLPTPC7Ro-_d5XAgQ.png)

After this, you can set up any redirects that are necessary for your domain. For example, in the following example, I create a redirect from httpsdan-murphy.com to httpswww.dan-murphy.com.

![ ](httpsmiro.medium.com/max/1400/1*yvEwLJmVK41H7ZPqDLB9Tg.png)

Finally, after your custom domain is correctly configured, AWS will provide you with a

**Validation Certificate You can also view this certificate in the AWS Certificate Manager console.

== Adding a CNAME Record ==

The last step in configuring your custom domain is adding a CNAME record. In the following example I use Google Domains, but the fundamental concepts remain the same across different domain registrars.

First, scroll down to

**Custom Resource Records** in Google Domains. Create a *CNAME *record that points all subdomains to the AWS Amplify domain: Name: enter the subdomain name. If the subdomain is www.domain.com, enter . If it is www app.domain.com,enter app. Data: On the domain managementpage, click Actionsand then select View DNS Records. Then, enter the the AWS Amplify domain available under Configure DNS provider. ![ ](httpsmiro.medium.com/max/1400/1*SSRoAAkYjf5dT2rD-kmEQw.png)

**Domains Management**page, select **Actions **View DNS Records**

Altogether, the custom resource record will look like the following:

![ ](httpsmiro.medium.com/max/1400/1*bZh8t77JswwonKCFyp7tog.png)

Next, add one more

*CNAME* record that points to the AWS Certificate Manager validation server. The validated AWS Certificate Manager handles TLS for your application: Name: enter the validation server’s subdomain. If the DNS record for verifying ownership of your domain is _1234.example.com, enter only _1234. Data: enter the ACM validation certificate. If the validation server is _1234.abcdefg.acm-validations.aws., enter _1234.abcdefg.acm-validations.aws.

All the information for your Validation Certificates is found in the AWS Certificate Manager console. After the second

*CNAME* is added, your custom records should look like this: ![ ](httpsmiro.medium.com/max/1400/1*79yex2fObLiK0Q0f0X4zeA.png)

Lastly, let’s add a

**Synthetic Record** to set up a subdomain forward: Subdomain: enter Domain URL: www. ![ ](httpsmiro.medium.com/max/1400/1*xi6ivE7Vsfz9AheFAHxPZQ.png)

= Wrapping Up =

Overall, in this article, we learned how to structure React Applications and deploy them with AWS Amplify. First, we discussed how to modularize a react application into

*components* *pages* folders. Then, we learned about **AWS Amplify** and how to deploy static and data-driven applications with it. Finally, we learned about using **AWS Amplify Domain Management** and **Google Domains **to customize the domain of our application. **and**and

If you have any questions, concerns, or feedback on this article or my portfolio site, feel free to comment or email me at

*[email protected]*. Thanks for reading!