How I Use Terraform to Deploy My AWS Amplify React Project

Published in

Stackademic

4 min readApr 1, 2024

As a Software Engineer, I would like to deploy my AWS Amplify React project using Terraform so that I can automate my workflow and eliminate any manual intervention during deployment.

AWS Amplify is a powerful tool that can help you build and deploy full-stack applications with ease

Terraform is a very powerful tool that allows you to define your infrastructure configurations in code using a declarative configuration language. Terraform enables you to automate the provision and management of your AWS Amplify resources. Once your changes are defined in the declarative configuration language, Terraform will apply the changes automatically reducing any manual or human intervention.

I will be walking you through the process of achieving this task using Terraform. This is an assumption that you already have an understanding of Terraform and AWS.

Step 1

Set up your environment for running Terraform; you can use any CICD tool such as Jenkins, GitHub Actions, Spinnaker, CircleCI, GitLab, Makefile, or any tool that you are mostly comfortable; with running your Terraform project. I will be doing a follow-up article on how to use GitHub Actions for running your Terraform Project.

Step 2

Prerequisite: You need to have AWS CLI running on your workstation. This will enable you to authenticate with AWS.

Step 3

I will be creating a reactjs app for this tutorial using the command below for the article. This is the code that will be deployed on AWS Amplify.

npx create-react-app example_reactjs_amplify

The code can be found here https://github.com/ExitoLab/example_reactjs_amplify

Step 4

The script below creates the AWS Amplify App, the branch to deploy from, and the domain on AWS. You will have to define the values for the variables in a separate file called variables.tf and values.tfvars. Since we have enable_branch_auto_build as true this will automatically deploy the amplify app once it detects that new code has been added to the reactjs project; what this means is that once you push a new line of code to the main branch it will automatically redeploy your Amplify app.

resource "aws_amplify_app" "hello_world_amplify" {
  name       = var.app_name
  repository = var.repository #This will be your reactjs project

  access_token             = var.access_token
  enable_branch_auto_build = true

  # The default build_spec added by the Amplify Console for React.
  build_spec = <<-EOT
    version: 0.1
    frontend:
      phases:
        preBuild:
          commands:
            - yarn install
        build:
          commands:
            - yarn run build
      artifacts:
        baseDirectory: build
        files:
          - '**/*'
      cache:
        paths:
          - node_modules/**/*
  EOT

  # The default rewrites and redirects added by the Amplify Console.
  custom_rule {
    source = "/<*>"
    status = "404"
    target = "/index.html"
  }

  environment_variables = {
    Name           = "hello-world"
    Provisioned_by = "Terraform"
  }
}

resource "aws_amplify_branch" "amplify_branch" {
  app_id            = aws_amplify_app.hello_world_amplify.id
  branch_name       = var.branch_name
  enable_auto_build = true
}

resource "aws_amplify_domain_association" "domain_association" {
  app_id                = aws_amplify_app.hello_world_amplify.id
  domain_name           = var.domain_name
  wait_for_verification = false

  sub_domain {
    branch_name = aws_amplify_branch.amplify_branch.branch_name
    prefix      = var.branch_name
  }

}

Step 5

In the variables.tf file, you will define the values for the variables. The file should include the following code:

variable "token" {
  type        = string
  description = "github token to connect github repo"
  default     = "Your Gitub Token"
}

variable "repository" {
  type        = string
  description = "github repo url"
  default     = "The link to your repo comes here"
}

variable "app_name" {
  type        = string
  description = "AWS Amplify App Name"
  default     = "hello-world"
}

variable "branch_name" {
  type        = string
  description = "AWS Amplify App Repo Branch Name"
  default     = "main"
}

variable "domain_name" {
  type        = string
  default     = "awsamplifyapp.com" #change this to your custom domain
  description = "AWS Amplify Domain Name"
}

Step 6

The output will be defined in the output.tf file. Your output file will be similar to the one below.

output "amplify_app_id" {
  value = aws_amplify_app.hello_world_amplify.id
}

These outputs will be generated from the outputs.tf file and this will provide you with all the necessary information on how to access your AWS Amplify app.

Step 7

You can now run the following command to apply your changes

terraform init
terraform plan -var-file=values.tfvar
terraform apply -var-file=values.tfvar

terraform init this command will initialize your Terraform working directory by downloading any necessary modules/ plugins defined in your configuration files.

terraform plan this command will create an execution plan based on your Terraform configuration.

terraform apply this command executes the changes proposed in the execution plan generated by the terraform plan

Step 8

After the terraform apply command has successfully applied your configuration changes. You can now verify that your Amplify resource has been created successfully by visiting the AWS Management Console.

Next steps: Once the deployment is completed after running Terraform apply. You can now check the app by looking at the URL with https which is visible in the above screenshot.

Below is a screenshot of the AWS Amplify reactjs app

In Conclusion, I do hope you find this article useful. It explains the process of deploying React on AWS Amplify using Terraform. Please, follow this link below to check the complete code on GitHub. https://github.com/ExitoLab/example_aws_amplify_terraform.git. My next article will be using GitHub Actions to deploy terraform project on AWS . I will be deploying the terraform code for the AWS Amplify app using GitHub Actions.

Stackademic 🎓

Thank you for reading until the end. Before you go:

Please consider clapping and following the writer! 👏
Follow us X | LinkedIn | YouTube | Discord
Visit our other platforms: In Plain English | CoFeed | Venture | Cubed
More content at Stackademic.com