Automating React application deployment to AWS Elastic Beanstalk with CircleCI

Automating the deployment of React applications offers several benefits, including reducing human error, improving code consistency across various development environments, and saving significant time. Using CircleCI to automate deployment helps teams set up a continuous deployment pipeline that ensures newer versions of applications are automatically updated when code is committed to a code base.

In this tutorial, you will learn how to deploy React applications to AWS Elastic Beanstalk - a service well-suited for deploying and scaling web applications. You will also learn how to automate the deployment process using CircleCI as a Continous Integration/Continous Deployment (CI/CD) tool.

Prerequesite

To follow along with this article, you will need:

1. An AWS account.
2. AWS CLI installed.
3. AWS Elastic Beanstalk CLI installed.
4. A CircleCI account.
5. Node.js version 14 or higher.
6. A knowledge of React.
7. A GitHub account.

Creating a basic React application

This tutorial uses a simple React application. To get started, create a folder for your React app using this command:

mkdir aws-react-circleci-app

Next, enter the folder directory using this command:

cd aws-react-circleci-app

Now in the project directory, create your React app using Vite by entering this command in your terminal:

npm create vite@latest .

This command will prompt you to:

1. Select a framework: choose React.

1. Select a variant: choose Javascript.

Install your React application by running this command:

npm install

The installation process will take a couple of minutes, after which you will have a simple React application.

To run your React application in your browser, enter this command in your terminal:

npm run dev

The above command will provide you with a local URL. Press the CTRL key and click the URL to open the React app in your browser.

With your React application now successfully created, ensure it is version-controlled with Git by pushing it to a GitHub repository.

Configure AWS access

With your React application successfully created, it is time to begin the deployment process to AWS Elastic Beanstalk. However, to get started, you need to create an AWS user with programmatic access.

To do this, start by logging in to your AWS account.

Next, go to Services -> All services -> IAM (Identity and Access Management).

Within you IAM dashboard, click on Users -> Create user.

Enter the user details and click Next to continue to the Set permissions page.

On the Set permissions page, click Attach policies directly. In the permissions policies section, search and select these policies:

• AdministratorAccess-AWSElasticBeanstalk: This policy will grant you access to manage and deploy your React application on AWS Elastic Beanstalk.
• AmazonS3FullAccess: This policy will allow you to store and manage your React build files during the deployment process.

Click Next to continue to the Review and create page.

On the Review and create page, review your selections and click Create user to finish up.

This will take you to a page that contains a list of users for your AWS account. To grant your newly created user programmatic access, click on the user.

Next, click on the Create access key button.

Pick the Command Line Interface (CLI) option and click Next to continue.

Finally, review your access key and click Download .csv file to download the access key for future purposes.

To ensure seamless deployment of your React application to Elastic Beanstalk, it is good practice to configure your local AWS CLI with the necessary permissions.

To do this, go to your terminal and enter this command:

aws configure

You will be prompted to enter your:

• AWS Access Key ID.
• AWS Secret Access Key.
• Default region name.
• Default output format: you can leave it blank.

With all these successfully configured, you can now prepare your React application for deployment.

Preparing React app for deployment

AWS Elastic Beanstalk is designed to handle the deployment of server-based applications such as those built with Node.js, as it requires a running process that listens for HTTP requests. However, a React application-especially one built with Vite lacks this as it is a static site that does not include a backend server by default.

To successfully deploy your React application to Elastic Beanstalk, you need to create a custom server using Express to serve the static file from the build directory.

To do this, start by installing Express using this command:

npm install express@4

In the root of your project directory, create a server.cjs file and update its content with the following:

const express = require('express');
const path = require('path');

const app = express();
const PORT = process.env.PORT || 3000;  

app.use(express.static(path.join(__dirname, 'dist')));

app.get('*', (req, res) => {      
  res.sendFile(path.join(__dirname, 'dist', 'index.html'));
}
);

app.listen(PORT, () => {
  console.log(`Server is running on http://localhost:${PORT}`);
}               
);

The above configuration shows a server built with Express.

• const PORT = process.env.PORT || 3000; configures your server to use the port provided by Elastic Beanstalk if available or default to port 3000.
• app.use(express.static(path.join(__dirname, 'dist'))); tells Express to serve all static files present in the dist folder that will be generated from npm run build.
• app.listen(PORT, () => { console.log(Server is running on http://localhost:${PORT}); }); starts the server and logs the URL to the browser console.

Next, go to package.json and delete this line:

 "type": "module",

Note: Deleting "type": "module", from package.json avoids module system conflicts, as your server.cjs file uses CommonJS syntax (requires) instead of ES Modules (import).

Also within the scripts object in your package.json file, add the following:

"start": "node server.cjs",

Within your project directory, create a file named Procfile and update its content:

web: node server.cjs

The above configuration sends an HTTP request to Elastic Beanstalk requesting it uses Node.js to handle the server.cjs file.

Finally, run this command in your terminal:

npm run build

The above command will generate a production-ready dist folder for your React application that in your project directory.

Initialize and deploy React application to AWS Elastic Beanstalk

With your React application now equipped with a custom server and built for production, you can deploy it to AWS Elastic Beanstalk.

To get started, initialize an AWS Elastic Beanstalk application by running this in the root of your project:

eb init

This will prompt you to:

• Select a default region by clicking a region
• Enter application name using aws-react-circleci-app (or any name you want)
• Select a platform branch by clicking Node.js 22 running on 64bit Amazon Linux 2023
• Set up an SSH instance; you can select No.

When initialization is complete, create your Elastic Beanstalk environment. Enter this command in your terminal:

eb create aws-react-circleci-env

This command creates a new Elastic Beanstalk environment named aws-react-circleci-env, sets up the necessary resources for it, and deploys your React application to it.

This will take a couple of minutes, once successful, an environment URL will be displayed on your terminal.

Note: You can choose any environment name when you run eb create.

To open your live application in the browser, enter this command:

eb open

There you go! Your React application is now successfully deployed to AWS Elastic Beanstalk.

Automating deployment with CircleCI

With your React application successfully deployed to AWS Elastic Beanstalk, you can take it a step further by automating the entire process using a CI/CD tool such as CircleCI.

Integrating CircleCI into your project will ensure that changes made to your code base are automatically deployed when you commit them to GitHub.

To get started with automating the deployment of your React application to AWS Elastic Beanstalk using CircleCI, create a .circleci folder at the root of your project directory.

Within your .circleci folder, create a config.yml file and update its content with these configurations:

version: 2.1

executors:
  node-executor:
    docker:
      - image: cimg/node:20.10

jobs:
  build-and-deploy:
    executor: node-executor
    steps:
      - checkout
      - run:
          name: Install dependencies
          command: npm install --include=dev
      - run:
          name: Build the project
          command: npm run build  
      - run:
          name: Install Python and pip
          command: |
            sudo apt-get update
            sudo apt-get install -y python3 python3-pip
      - run:
          name: Install AWS EB CLI
          command: |
            pip3 install --upgrade pip
            pip3 install awsebcli --upgrade --user
            export PATH=$HOME/.local/bin:$PATH
      - run:
          name: Deploy to AWS Elastic Beanstalk
          command: |
            export PATH=$HOME/.local/bin:$PATH
            eb deploy aws-react-circleci-env

workflows:
  version: 2
  build_and_deploy:
    jobs:
      - build-and-deploy          

The above configuration runs in a Docker container using cimg/node:20.10 image to maintain a consistent Node.js environment.

It holds a build-and-deploy job which installs necessary dependencies using npm install --include=dev command, builds the project using npm run build, installs python, aws eb cli, and ultimately deploys the React application using eb deploy aws-react-circleci-env.

Finally, head to your .gitignore file and delete the following:

dist
dist-ssr
*.local

# Elastic Beanstalk Files
.elasticbeanstalk/*
!.elasticbeanstalk/*.cfg.yml
!.elasticbeanstalk/*.global.yml

Note: Deleting the above lines from .gitignore ensures that necessary build files in the dist folder and Elastic Beanstalk configuration files are committed to GitHub, enabling consistent deployments during CircleCI automation.

Commit and push changes to GitHub.

Connecting your project to CircleCI

Now that you have your .circleci folder and config.yml configured, head to CircleCI and log in to your account.

Next, go to your project dashboard, click Set Up Project, followed by the name of your project repository, and then the Set Up Project button.

Next, select the fastest option, followed by the name of the branch holding your .circleci folder (in this tutorial, that is the main branch), then click Set Up Project to continue.

This will trigger a pipeline build that will fail as a result of your AWS credentials not being added in the project.

To trigger a successful build, go to click the Settings in the project overview page as shown.

Continue through to Environment Variables -> Add Environment Variable.

Fill in:

1. Name: AWS_ACCESS_KEY_ID.
   • VALUE: the value of your AWS access key ID saved in the downloaded CSV file from the previous section.
2. NAME: AWS_SECRET_ACCESS_KEY.
   • VALUE: the value of your secret access key saved in the downloaded CSV file from the previous section.

Finally, rerun the pipeline by committing and pushing a small change to GitHub.

Voila! The deployment of your React application is now successfully automated with CircleCI. To view your deployed application, visit your Elastic Beanstalk dashboard on the AWS website.

Conclusion

So far, you have learned how to create a basic React application and deploy it to AWS Elastic Beanstalk - a service that simplifies the scaling and deployment of web applications. You also learned how to automate the entire deployment process by using CircleCI, a popular CI/CD tool which eliminates the need for manually shipping applications.

Moving forward, incorparate all you have learned into your React projects, both new and existing ones. Also, encourage your team to deploy React applications to AWS Elastic Beanstalk, while utilizing CircleCI for continous integration and deployement. You can view the complete code for this tutorial on GitHub.