DEV Community: Khadga shrestha

Deploy a React Application to Elastic Beanstalk using GitHub Actions and Provision with Terraform

Khadga shrestha — Wed, 09 Jul 2025 16:38:37 +0000

In this article, we'll explore how to provision an AWS Elastic Beanstalk application using Terraform and deploy a containerized React application using GitHub Actions.

Prerequisites

Terraform CLI installed.
AWS CLI configured with valid credentials. Refer to this guide for AWS CLI setup.

To verify your AWS credentials, use the following command:

aws sts get-caller-identity

Terraform Configuration
After successfully setting up AWS credentials, let's create the required Terraform scripts.

Define Variables (variables.tf)
We define necessary variables in the variables.tf file as follows:

variable "aws_region" {
  description = "The AWS region to deploy resources in"
  type        = string
  default     = "us-east-1"
}

variable "application_name" {
  description = "The name of the Elastic Beanstalk application"
  type        = string
  default     = "react-app"
}

IAM Roles and Profiles (iam.tf)
Elastic Beanstalk requires an EC2 instance profile and a service role. Define these resources in iam.tf:

resource "aws_iam_role" "eb_ec2_role" {
  name = "aws-elasticbeanstalk-ec2-role"
  assume_role_policy = jsonencode({
    Version = "2012-10-17"
    Statement = [
      {
        Effect = "Allow"
        Principal = { Service = "ec2.amazonaws.com" }
        Action = "sts:AssumeRole"
      }
    ]
  })
}

resource "aws_iam_instance_profile" "eb_ec2_profile" {
  name = "aws-elasticbeanstalk-ec2-profile"
  role = aws_iam_role.eb_ec2_role.name
}

resource "aws_iam_role_policy_attachment" "eb_ec2_managed_policy" {
  role       = aws_iam_role.eb_ec2_role.name
  policy_arn = "arn:aws:iam::aws:policy/AWSElasticBeanstalkWebTier"
}

These resources attach the necessary permissions required by Elastic Beanstalk.

Security Group (sg.tf)
We also need a security group allowing HTTP traffic. Define this in sg.tf:

resource "aws_security_group" "this" {
  name        = "react-app-allow-http"
  description = "Allow HTTP inbound traffic and all outbound traffic"
  vpc_id      = data.aws_vpc.default.id
  tags = {
    Name = "react-app-sg"
  }
}

resource "aws_vpc_security_group_ingress_rule" "allow_http" {
  security_group_id = aws_security_group.this.id
  cidr_ipv4         = "0.0.0.0/0"
  from_port         = 80
  to_port           = 80
  ip_protocol       = "tcp"
}

Elastic Beanstalk Application (ebs.tf)
Define your Elastic Beanstalk application and environment in ebs.tf:

resource "aws_elastic_beanstalk_application" "this" {
  name        = var.application_name
  description = "This is a React application deployed on AWS Elastic Beanstalk"
}

resource "aws_elastic_beanstalk_environment" "this" {
  name                = var.environment_name
  application         = aws_elastic_beanstalk_application.this.name
  solution_stack_name = var.solution_stack_name

  setting {
    namespace = "aws:autoscaling:launchconfiguration"
    name      = "InstanceType"
    value     = var.instance_type
  }

  setting {
    namespace = "aws:autoscaling:launchconfiguration"
    name      = "SecurityGroups"
    value     = aws_security_group.this.id
  }
}

Additional configuration options can be customized within the settings block.

Deploying Terraform Configuration
To provision your resources, execute:

terraform plan
terraform apply

You can define outputs in Terraform to display created resources.

output "ebs_application_name" {
  description = "The name of the Elastic Beanstalk application"
  value       = aws_elastic_beanstalk_application.this.name
}

output "ebs_environment_name" {
  description = "The name of the Elastic Beanstalk environment"
  value       = aws_elastic_beanstalk_environment.this.name
}

Deploying the Application with GitHub Actions
After provisioning resources, set up deployment via GitHub Actions. Add your AWS credentials as secrets (AWS_REGION, AWS_ACCESS_KEY_ID, AWS_SECRET_ACCESS_KEY) in your repository.

Create a workflow (.github/workflows/deploy.yml):

name: EBS Deployment
on:
  push:
    branches:
      - main

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v4

      - name: Build Docker image and run unit tests
        run: |
          docker image build . -t react-app-dev -f Dockerfile.dev
          docker container run -e CI=true react-app-dev npm run test

      - name: Generate deployment package
        run: zip -r deploy.zip . -x '*.git*'

      - name: Deploy to Elastic Beanstalk
        uses: einaregilsson/beanstalk-deploy@v22
        with:
          aws_access_key: ${{ secrets.AWS_ACCESS_KEY_ID }}
          aws_secret_key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          application_name: dockerize-react-app
          environment_name: react-app-env
          version_label: ${{ github.sha }}
          region: ${{ secrets.AWS_REGION }}
          deployment_package: deploy.zip
          use_existing_version_if_available: true

This workflow triggers upon pushing to the main branch, creating a deployment package and deploying your application to Elastic Beanstalk. Adjust this trigger as per your requirements.

Source Code

Thank you for reading
You can find the code at here.

source code

Freezed in Flutter

Khadga shrestha — Mon, 05 Jul 2021 01:47:28 +0000

So here we need a lot of data classes while developing a flutter application. So freezed is one of the packages which is used to generate data class and union class.
Also, it can be used to serialize and deserialize the JSON data.

So let's integrate freezed in our flutter application.
First of all, let's create a flutter project using our own command

flutter create freezed_demo

After that add the following dependencies in the pubspec. yaml file

freezed: which is the actual code generator that will generate different methods and fields.
builld_runner: the tools to generate the code.
freezed_annotation: a package that contains annotations for freezed

Here we need to add *freezed * and *builld_runner * in the dev_dependencies section because it is needed while developing an app that will not be available in the production codes. And **freezed_annotation **to the dependencies section. so after that the resulting pubspec.yaml looks like

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2
  freezed_annotation: ^0.14.2

dev_dependencies:
  flutter_test:
    sdk: flutter
  build_runner: ^2.0.5
  freezed: ^0.14.2

After that run

flutter pub get

Now let's dive into defining a data class using the freezed class.
To define a class in freezed we do not need to define the properties but instead of that, we need to define factory constructor.
We need to annotate that define class to freezed. so our class looks like

import 'package:freezed_annotation/freezed_annotation.dart';
part 'user.freezed.dart';

@freezed
class User with _$User {
  const User._();

  factory User({
    required String name,
    required String email,
    @Default(true) bool isActive,
  }) = _User; 
}

Here we need to annotate the Person class with @freezed annotation and also define part of that freezed class which means the generated code(We need to run build runner for that) will be the part of the Person class. Here we can assign a default value using Default(value)
So now let's run the build_runner so that part file of the defined class will be generated.

flutter pub run build_runner build
//In case of dart only
pub run build_runner build otherwise

Now we can use the Person.

var person = Person(name: 'Khadga', email: 'admin@admin.com');
print(person.name); // Khadga
print(person.email); // admin@admin.com
print(person.isActive)//true

We can use copyWith copy the property of the object.

var newPerson=person.copyWith(name:'Sakar Subedi');
print(newPerson.name);//Sakar Subedi
print(person.email); // admin@admin.com
print(person.isActive)//true

That is how we define data class using Freezed so let's jump into the Union class.

import 'package:explore_freezed/user.dart';
import 'package:freezed_annotation/freezed_annotation.dart';

part 'result.freezed.dart';

@freezed
class Result with _$Result {
  const Result._();

  factory Result.initial() = _Initial;
  factory Result.success(User user) = _Success;
  factory Result.loading() = _Loading;
  factory Result.error([String? err]) = _Error;
}

As before after adding this code we need to run our build_runner also we can watch the code changes and generate codes. Now, look at how we can use the generated union class in our application.

 _currentState.when(
              initial: () {
               // return some widgets
              },
              success: (user) {
                // return some widgets
              },
              loading: () {
                // return some widgets
              },
              error: (err) {
                 // return some widgets
              },
  ),

Here we need to implement each subclass of the Result so that no condition will be missed.

Freezed class also used with json_serializable to deserialize the JSON data to the Data class.
so let's add json_serializable

dev_dependencies:
  flutter_test:
    sdk: flutter
  build_runner: ^2.0.5
  freezed: ^0.14.2
  json_serializable: ^4.1.3

After that, we need to add a part file for json_serializable in the data class and add the FromJson method which will deserialize the JSON data.

import 'package:freezed_annotation/freezed_annotation.dart';

part 'user.freezed.dart';

part 'user.g.dart';

@freezed
class User with _$User {
  const User._();

  factory User({
    required String name,
    required String email,
    @Default(true) bool isActive,
  }) = _User;

  factory User.fromJson(Map<String, dynamic> map) => _$UserFromJson(map);

}

Now we can use the fromJson method to deserialize data as

 var _decoded = {'name': 'Khadga Shrestha', 'email': 'admin@admin.com'};
 var _user = User.fromJson(_decoded);

That's it for now.
You can check more about freezed at https://pub.dev/packages/freezed
The code repo for this article
https://github.com/kodega2016/explore_freezed