= How to Use AWS Amplify to deploy a React Application =
== A guide to deploying React Applications with AWS Amplify ==
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 
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.
After successful authorization, you can select which repository you want to deploy and select the branch AWS Amplify should use for production builds.
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 
**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 
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.
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. 
**Domains Management**page, select **Actions **View DNS Records**
Altogether, the custom resource record will look like the following:
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: 
Lastly, letâÃÂÃÂs add a
**Synthetic Record** to set up a subdomain forward: Subdomain: enter Domain URL: www. 
= 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!
