Let's Build a Full-Stack App with tRPC and Next.js 14

Are you a typescript nerd looking to up your full-stack game? Then this guide is for you. The traditional way to share types of your API endpoints is to generate schemas and share them with the front end or other servers. However, this can be a time-consuming and inefficient process. What if I tell you there's a better way to do this? What if I tell you, you can just write the endpoints and your frontend automatically gets the types?

🥁 Let me introduce you to [tRPC](https://trpc.io/) - a better way to build full-stack typescript apps.

## What is tRPC?

To understand tRPC, it's important to first know about RPC (Remote Procedure Call). RPC is a protocol for communication between two services, similar to REST and GraphQL. With RPC, you directly call procedures (or functions) from a service.

tRPC stands for TypeScript RPC. It allows you to directly call server functions from the client, making it faster and easier to connect your front end to your back end.

![tRPC in action](https://assets.publishstudio.one/65d9b9d4c3338678c9d3e0ac/48239931-b600-4e6c-b11d-7fabbe89266d_Video%20to%20GIF%20converter.gif?w=1080&q=75)

(tRPC in action 👆: [source](https://trpc.io/#try-it-out))

As you can see, you immediately get feedback from the client as you edit the endpoint.

Things I like about tRPC:

- It's like an SDK - you directly call functions.
- Perfect for monorepos.
- Autocompletion
- and more...

Let's build a full-stack application to understand tRPC capabilities.

> Note: To use tRPC both your server and client should be in the same directory (and repo).

## The Project

We are going to build a **Personal Finance Tracker** app to track our *income*, and *expenses* and set *goals*. I will divide this guide into a series to keep it interesting. Today, let's setup the backend (tRPC with ExpressJs adapter), and front end (Next.Js app router).

Start off by creating a folder for the project.

```shell
mkdir finance-tracker && cd finance-tracker
```

## Backend - tRPC with ExpressJs adapter

You can use tRPC standalone adapter but if you like to use a server framework, tRPC has [adapters](https://trpc.io/docs/server/adapters) for most of them. Note that tRPC is a communication protocol (like REST) and not a server.

Create a folder called `server` inside the project folder and initialize the project.

```shell
mkdir backend && cd backend && yarn init
```

### Setup Typescript

> Note: If you are using yarn v4 you have to create `yarnrc.yml` and put this `nodeLinker: node-modules`.

Install deps:

```shell
yarn add typescript tsx
```

`tsx` - Used to run typescript directly in `nodejs` without the need to compile to javascript.

```shell
yarn add --dev @types/node
```

Create `tsconfig.json` and copy this.

```json
// tsconfig.json
{
	"compilerOptions": {
		/* Language and Environment */
		"target": "ESNext" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
		"lib": [
			"ESNext"
		] /* Specify a set of bundled library declaration files that describe the target runtime environment. */,
		
		/* Modules */
		"module": "ESNext" /* Specify what module code is generated. */,
		"moduleResolution": "node" /* Specify how TypeScript looks up a file from a given module specifier. */,
		"rootDir": "src" /* Specify the root folder within your source files. */,
		"outDir": "dist" /* Specify an output folder for all emitted files. */,
		"esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */,
		"forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,
		
		/* Type Checking */
		"strict": true /* Enable all strict type-checking options. */,
		"skipLibCheck": true /* Skip type checking all .d.ts files. */
	},
	"include": ["src/**/*"],
	"exclude": ["node_modules"]
}
```

### Project setup

Install deps:

```shell
yarn add @trpc/server cors dotenv express superjson zod
```

```shell
yarn add --dev @types/cors @types/express nodemon cross-env
```

Open `package.json` and  add these.

```json
{
	"scripts": {
		"build": "NODE_ENV=production tsc",
	    "dev": "cross-env NODE_ENV=development nodemon --watch '**/*.ts' --exec node --import tsx/esm src/index.ts",
	    "start": "node --import tsx/esm src/index.ts"
	},
	"type": "module",
	"main": "src/index.ts",
	"files": [
	    "dist"
	]
}
```

Create `.env`

```
PORT=4000
```

Add these to `.gitignore`

```
node_modules/
dist
.env
```

Let's start by creating `trpc.ts` inside `src`. This is the bare minimum required to create API endpoints with tRPC:

```ts
// src/trpc.ts

import { initTRPC, type inferAsyncReturnType } from "@trpc/server";
import type { CreateExpressContextOptions } from "@trpc/server/adapters/express";
import SuperJSON from "superjson";

/**
 * Creates the context for tRPC by extracting the request and response objects from the Express context options.
 */
export const createContext = ({
  req,
  res,
}: CreateExpressContextOptions) => ({});
export type Context = inferAsyncReturnType<typeof createContext>;

/**
 * The tRPC instance used for handling server-side requests.
 */
const t = initTRPC.context<Context>().create({
  transformer: SuperJSON,
});

/**
 * The router object for tRPC.
 */
export const router = t.router;
/**
 * Exported constant representing a tRPC public procedure.
 */
export const publicProcedure = t.procedure;
```

First, we created tRPC context which can be accessed by routes. You can pass whatever you want to share with your routes. The best example will be passing `user` object, so we can access user information in routes.

Next, we initialized tRPC with `initTRPC`. In this, we can use a transformer like `superjson` - which is used to serialize JS expressions. For example, if you pass Date, it will be inferred as Date instead of string. So it's perfect for tRPC since we tightly couple frontend and backend.

After that, we defined a [router](https://trpc.io/docs/server/routers) with which we can create endpoints.

Finally, we created a reusable [procedure](https://trpc.io/docs/server/procedures) called `publishProcedure`. `procedure` in tRPC is just a function that the frontend can access. Think of them like endpoints. The procedure can be a **Query**, **Mutation,** or **Subscription**. Later we will create another reusable procedure called `protectedProcedure` that will allow only authorized user access to certain endpoints.

Let's create an endpoint. I like to keep all the routes inside a dedicated routes file. So create `routes.ts` and create an endpoint.

```ts
// src/routes.ts

import { publicProcedure, router } from "./trpc";

const appRouter = router({
  test: publicProcedure.query(() => {
    return "Hello, world!";
  }),
});

export default appRouter;
```

Here, `test` is a query procedure. It's like `GET` a request.

Now, let's create `index.ts` to create express app.

```ts
// src/index.ts

import { createExpressMiddleware } from "@trpc/server/adapters/express";
import cors from "cors";
import "dotenv/config";
import type { Application } from "express";
import express from "express";
import appRouter from "./routes";
import { createContext } from "./trpc";

const app: Application = express();

app.use(cors());

app.use("/health", (_, res) => {
  return res.send("OK");
});

app.use(
  "/trpc",
  createExpressMiddleware({
    router: appRouter,
    createContext,
  })
);

app.listen(process.env.PORT, () => {
  console.log(`✅ Server running on port ${process.env.PORT}`);
});

export type AppRouter = typeof appRouter;
```

If you have worked with ExpressJs before, then you should be familiar with this code. We created a server and exposed it on a specified `PORT`. To expose tRPC endpoints to the express app, we can use `createExpressMiddleware` function from the tRPC express adapter.

Now, we can access all the routes we are going to create in `routes.ts` from base endpoint `/trpc`.

To test it out, start the server by running `yarn dev` and go to `http://localhost:4000/trpc/test`. You will see the output:

```json
{
  "result": {
    "data": {
      "json": "Hello, world!"
    }
  }
}
```

That's it, our backend is ready. Now let's create a frontend with Next.Js to consume the endpoint we just created.

## Frontend - Next.Js with App Router

Go back to the project root and create a Next.Js project with these settings:

```shell
yarn create next-app@latest
```

```shell
What is your project named? frontend
Would you like to use TypeScript? Yes
Would you like to use ESLint? No
Would you like to use Tailwind CSS? Yes
Would you like to use `src/` directory? Yes
Would you like to use App Router? (recommended) Yes
Would you like to customize the default import alias (@/*)? No
What import alias would you like configured? @/*
```

Move into the folder:

```shell
cd frontend
```

The final folder structure will be:

```
.
└── finance-tracker/
    ├── frontend
    └── backend
```

Let's integrate tRPC in our frontend:

Install deps: (make sure to add `yarnrc.yml` file)

```shell
yarn add @trpc/react-query superjson zod @trpc/client @trpc/server @tanstack/react-query@4.35.3 @tanstack/react-query-devtools@4.35.3
```

tRPC is a wrapper around [react-query](https://tanstack.com/query/latest), so you can use all your favorite features from react-query.

First, put the backend url in env. Create `.env.local` and put:

```
NEXT_PUBLIC_TRPC_API_URL=http://localhost:4000/trpc
```

Create tRPC react client:

```ts
// src/utils

import { createTRPCReact } from "@trpc/react-query";
import { AppRouter } from "../../../backend/src/index";

export const trpc = createTRPCReact<AppRouter>();
```

Here, we created a tRPC client for react with `createTRPCReact` provided by tRPC and imported from previously created `AppRouter` which contains all routes information.

Now, let's create a tRPC provider, so our whole app can access the context, I prefer to put all the providers in one place to make the entry file more readable:

```tsx
// src/lib/providers/trpc.tsx

"use client";

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
import { httpBatchLink, loggerLink } from "@trpc/client";
import superjson from "superjson";

import { trpc } from "@/utils/trpc";

if (!process.env.NEXT_PUBLIC_TRPC_API_URL) {
  throw new Error("NEXT_PUBLIC_TRPC_API_URL is not set");
}

export const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 1000 * 60 * 2,
      refetchOnWindowFocus: false,
      retry: false,
    },
  },
});

const trpcClient = trpc.createClient({
  transformer: superjson,
  links: [
    loggerLink({
      enabled: () => process.env.NODE_ENV === "development",
    }),
    httpBatchLink({
      url: process.env.NEXT_PUBLIC_TRPC_API_URL,
    }),
  ],
});

export function TRPCProvider({
  children,
}: Readonly<{ children: React.ReactNode }>) {
  return (
    <trpc.Provider client={trpcClient} queryClient={queryClient}>
      <QueryClientProvider client={queryClient}>
        {children}
        <ReactQueryDevtools position="bottom-left" />
      </QueryClientProvider>
    </trpc.Provider>
  );
}
```

If you are familiar with react-query, then this is not new to you. As an extra step, we just wrapped `QueryClientProvider` with the tRPC provider.

Similar to the backend we are using `superjson` as the transformer. `loggerLink` helps us debug network requests directly in the console. You can learn more about `links` the array [here](https://trpc.io/docs/v10/client/links).

Create `index.tsx` inside `providers` to export all the individual providers from a single file:

```tsx
// src/lib/providers/index.tsx

import { TRPCProvider } from "./trpc";

export function Providers({
  children,
}: Readonly<{ children: React.ReactNode }>) {
  return <TRPCProvider>{children}</TRPCProvider>;
}
```

Finally, wrap the app with providers, the best place to do this is in the root layout:

```tsx
// src/app/layout.tsx

import { Providers } from "@/lib/providers";
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Finance Tracker",
  description: "Track your finances",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <Providers>{children}</Providers>
      </body>
    </html>
  );
}
```

Let's test the integration, edit `page.tsx`:

```tsx
// src/app/page.tsx

"use client";

import { trpc } from "@/utils/trpc";

export default function Home() {
  const { data } = trpc.test.useQuery();

  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      {data}
    </main>
  );
}
```

Here, we imported the `trpc` client that we created above and you get all the auto completions from it.

If you start both backend and frontend and go to `http://localhost:3000` in your browser, you can see it working.

Now, if make any changes to your API, you get changes in the front end instantly. For example, change the spelling of `test` API to `hello` and see `page.tsx` throwing error. This ultimately improves your development experience and makes building typescript apps awesome.

---

This is all you need to get started with tRPC and Next.Js. In the next article, we'll integrate the database and create some CRUD operations.

---

Project source code can be found [here](https://github.com/itsrakeshhq/finance-tracker).

---

[Socials](https://rksh.link/links)

_Published from [Publish Studio](https://publishstudio.one)_

It’s been a really long time since I last published an article here. I’ve been inactive due to some personal career reasons. But I’m back now with so many exciting things I learned last year and can’t wait to share them with you. 

## Quick Intro

First of all, say “Hi” to [Publish Studio](https://publishstudio.one/), a platform I’ve building for the past few months. If you are a content writer, then you should definitely check it out. And if you are someone who has an audience on multiple blogging platforms and need an easy way to manage your content across platforms, then you should 100% give it a try.

Currently, Publish Studio is in beta, so please join the waitlist. I would appreciate your feedback on any issues before making it generally available.

Join waitlist: <https://publishstudio.one>

![1.png](https://assets.publishstudio.one/65d9b9d4c3338678c9d3e0ac/941f62fd-8d26-4d18-92be-8849da4b24a9_1.png)

## Main Features

### 1\. Rich Text Editing

Elevate your content with rich text editing. It provides you with robust formatting tools to refine your writing and make it visually appealing.

![2.png](https://assets.publishstudio.one/65d9b9d4c3338678c9d3e0ac/80db58e7-ad38-43fc-a40c-0fe67a1d6b6d_2.png)

### 2\. Dictation

Simplify your content creation process with the dictation feature. Speak naturally, and let the platform transcribe your words accurately into text. It's a convenient tool that saves time and effort, allowing you to focus on expressing your ideas effectively.

### 3\. Tone Analysis

Gain insights into the emotional tone of your content with the tone analysis feature. It helps you understand how your writing resonates with your audience, enabling you to fine-tune your messaging accordingly. Whether you aim for a casual or formal tone, the analysis tool assists you in crafting content that connects authentically.

![6.png](https://assets.publishstudio.one/65d9b9d4c3338678c9d3e0ac/ecf67c5a-796c-4e6d-a646-6781b2962750_6.png)

### 4\. Import Content

If you got your stuff scattered everywhere, you can bring them all together into the platform with the import feature, making it easy to consolidate your content library in one place.

![5.png](https://assets.publishstudio.one/65d9b9d4c3338678c9d3e0ac/c75bc671-1510-470d-8da5-ba90b5f6d678_5.png)

### 5\. Integrated Media Tools

Integrated media tools! With access to gems like Pexels, Unsplash, Imagekit, and Cloudinary right on the platform.

![4.png](https://assets.publishstudio.one/65d9b9d4c3338678c9d3e0ac/e36ff07d-8678-4316-ac2e-147124e1cfed_4.png)

### 6\. Export Content

A small but helpful feature. Export your content in different file formats.

### 7\. Publish to Multiple Platforms

_I want to clear up any confusion that might come in the future. Publishing to multiple platforms is one of the **core features** of Publish Studio but it’s **not the only goal**._

With Publish Studio, publishing to multiple platforms is a breeze! Spread your content far and wide with just a few clicks.

![3.png](https://assets.publishstudio.one/65d9b9d4c3338678c9d3e0ac/954e71ae-0b63-4269-b4e3-0fc3f42ed3bb_3.png)

### 8\. Schedule Posts

You don’t have to publish right away. With the schedule feature, you're the master of your content calendar. Plan ahead, set the dates, and let Publish Studio do the rest.

### 9\. Writing Stats

Curious about your writing habits? Dive into your writing stats and discover your creative superpowers!

…and a lot more already planned but need a little time and your big support ❤️.

---

This is just the start with more features coming in the future.

---

Onwards and upwards 🚀.

Introducing Publish Studio: Power Digital Content Creation

In the previous article "[Automate MERN App Deployment with GitHub Actions CI/CD](https://blog.itsrakesh.co/automate-mern-app-deployment-with-github-actions-cicd)", we learned till pushing images to the docker hub. So far, you've done an excellent job! But that isn't enough; we now require a server that runs our containers 24 hours a day, seven days a week, and should be accessible to anyone with an internet connection. It is not a good idea to set up your own server 😅. So we'll need to rent a server. Who will give us a rented server and how to set it up are what you will learn in this article.

## Let's Get Started

### Prerequisites

- Get source code from [here](https://github.com/itsrakeshhq/productivity-app) if haven't followed previous tutorials in this series.
- Read previous articles in this series so that you won't get confused.
- [AWS account](https://aws.amazon.com/).
- All the AWS services we use in this tutorial are free but you need a credit/debit card to create an account.

Before we proceed, note that our super simple [productivity-app](https://github.com/itsrakeshhq/productivity-app) doesn't need AWS. This is just for learning purposes.

![aws over-engineering meme](https://i.imgur.com/VKCpD0t.png)

> ⚠️ **Warning:** Don't forget to turn off any running instances, and environments as soon as you finish this tutorial to avoid getting billed.


## What is AWS?

As I mentioned in the beginning, we need someone who will let us rent a server and that is what AWS is about. Not physically like a room and bunch of boxes but on the cloud means you can rent servers from anywhere in the world.

This is how it looks like if you set up your own servers physically 😂:

![managing own servers meme](https://i.imgur.com/y6yuFGh.jpg)

If you haven't been living under a rock, you've probably heard of AWS. It is an abbreviation for **A**mazon **W**eb **S**ervices. [AWS](https://aws.amazon.com) (by [Amazon](https://www.aboutamazon.com)) offers a wide range of cloud computing services, such as computing, storage, database, analytics, machine learning, networking, mobile, developer tools, security, and enterprise applications. for all of your requirements, eliminating the need for you to set up your own servers. It provides a flexible and scalable infrastructure that can be tailored to each user's unique requirements, and it is widely regarded as one of the leading cloud platforms available today. [Google Cloud](https://cloud.google.com) (by [Google](https://about.google)) and [Azure](https://azure.microsoft.com) (by [Microsoft](https://www.microsoft.com/en-in/about)) are both major competitors to AWS.

> **Big Brain Time 💡:** If you are following from the beginning, in the first article "[Let's build and deploy a full stack MERN web application](https://blog.itsrakesh.co/lets-build-and-deploy-a-full-stack-mern-web-application)", we deployed our frontend application on Netlify and backend on Heroku. Those are fine but most companies need IaaS (Infrastructure as a Server) over PaaS (Platform as a Server).

### Infrastructure as a Service (IaaS) VS Platform as a Service (PaaS)

This image clearly shows the difference between Iaas and PaaS:

![IaaS vs PaaS](https://i.imgur.com/hxJweuS.png)


## Setting up NGINX

**NGINX** is a popular web server that is frequently used as a load balancer, reverse proxy, and HTTP cache. Consider it a traffic controller that manages traffic across multiple servers based on how busy a server is.

As a reverse proxy, NGINX serves as a go-between for the client and the server. When you (the client) send a request to the server, it is routed through the reverse proxy and then to the web server. This reverse proxy is useful in several ways: it can distribute requests across multiple servers, cache frequently-requested content, reduce response time, and protect against malicious requests.

If you want to learn more about NGINX, I would recommend reading "[The NGINX Handbook](https://www.freecodecamp.org/news/the-nginx-handbook/)" written by Farhan Hasin Chowdhury on freeCodeCamp.

Okay! Why do we care? Instead of deploying frontend and backend separately, we can simply use a load balancer like NGINX to combine both the frontend and backend into one web server, which can then distribute incoming requests to the appropriate server based on the type of request and server load. This simplifies the deployment process and helps to ensure better performance and scalability of the application.

![nginx](https://i.imgur.com/Oj6v2o7.png)
### Configuring NGINX

Open the project in your code editor. In the root, create a folder called `nginx`.

In that folder, create a file called `nginx.conf` and paste this code.

```bash
# Defining a server group called `client` that has one server in it called `client` on port `3000`.
upstream client {
    server client:3000;
}

# Defining a server group called `server` that has one server in it called `server` on port `5000`.
upstream server {
    server server:5000;
}

# Listening on port 80 and redirecting requests to the client and server.
server {
    listen 80;
    listen [::]:80;

    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;

    location / {
        proxy_pass http://client;
    }

    location /server {
        rewrite /server/(.*) /$1 break;
        proxy_pass http://server;
    }
}
```

- The `upstream` directive is used to define the server groups, one for the `client` on port `3000` and another for the `server` on port `5000`.
- The `server` directive is used to define the server that listens on port `80` for incoming requests. The `listen` directive specifies the port and the `proxy_http_version`, `proxy_set_header`, and `proxy_cache_bypass` directives are used to configure the proxy settings.
- The `location` directive is used to define the URL paths that are redirected to each server group. The first `location /` directive redirects all requests to the `client` server group. The second `location /server` directive matches any request with the path `/server` and uses the `rewrite` directive to remove `/server` from the path before redirecting to the `server` server group using the `proxy_pass` directive.

Even I'm using NGINX for the first time, so please read the article I mentioned above to clearly understand how to write NGINX config files.

Now, create Dockerfile in that same folder and paste this.

```bash
FROM nginx:stable-alpine

RUN rm /etc/nginx/conf.d/*

COPY ./nginx.conf /etc/nginx/conf.d/

CMD [ "nginx", "-g", "daemon off;" ]
```

## Setting up AWS

We are going to use three AWS services:
1) Elastic Beanstalk - A fully-managed service that makes it easy to deploy applications.
2) EC2 - Elastic Compute is a computing service that offers scalable computing capacity. You can quickly start a virtual machine with your preferred configurations such as operating system, software, storage, and more.
3) S3 Bucket - A highly scalable storage service. All of your app data will be stored here.

Only Elastic Beanstalk needs to be configured; the other two will be configured automatically.

So, go ahead and log in to your [AWS management console](https://console.aws.amazon.com).

### Create a user

To begin, we must create a user who will manage cloud resources. Because we're automating the deployment with GitHub Actions, we need a way for Actions to modify our resources, such as deploying code to AWS, and that's what this user is for. Make sure to grant the appropriate permissions.

In the search bar, type "IAM" (Identity and Access Management) and click on **Users** under **Access management**.

![AWS IAM](https://i.imgur.com/xTnam3t.png)

Click on **Add users** and give your user a name -> click **Next**.

![create user in IAM](https://i.imgur.com/0mmciD5.png)

In **Set permissions** select **Attach policies directly** -> check **AdministratorAccess-AWSElasticBeanstalk** -> click **Next** -> finally click **Create user**.

![set permissions for user](https://i.imgur.com/oXbNEfG.png)

### Create and configure an application in Elastic Beanstalk

Again in the search bar, type "Elastic Beanstalk". 

Click **Create Application**.

![AWS Elastic Beanstalk](https://i.imgur.com/jEPepl7.png)

Give your application a name, leave **Application tags** blank, select "Docker" as **Platform**, and leave the rest default. Click **Create application**.

![create application in elastic beanstalk](https://i.imgur.com/czjDHkd.png)

Congrats 🎊! Your application has been created. You can visit it by clicking the URL shown in the application environment. This is a sample application provided by EB.

![sample application](https://i.imgur.com/O4Qjpxu.png)

### Configure environment variables

Before we deploy our application we need to add environment variables in EB.

To do so, go to the application **Configuration page** and click **Edit** under the **Software** category.

![adding environment variables](https://i.imgur.com/WS6gC3I.png)

Scroll to the very bottom of the page -> under **Environment variables** and add the following env variables.

```bash
REACT_APP_BACKEND_URL = /server
MONGODB_URI = your MongoDB URI
TOKEN_KEY = random string
EMAIL = email
PASSWORD = password
```

That's it! It's now time to add the deployment step to our CI/CD pipeline.

## Deploying MERN App on AWS with CI/CD

Open `pipeline.yml` and add this step right below pushing images to the docker hub step.

```yaml
      # This is the step that is deploying the application to Elastic Beanstalk.
      - name: Deploy to Elastic Beanstalk
        uses: einaregilsson/beanstalk-deploy@v21
        with:
          aws_access_key: ${{ secrets.AWS_ACCESS_KEY_ID }}
          aws_secret_key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          application_name: ${{ secrets.EB_APP_NAME }}
          environment_name: ${{ secrets.EB_ENV_NAME }}
          region: ${{ secrets.EB_REGION }}
          version_label: "version-${{ github.run_number }}"
          deployment_package: docker-compose.yml
```

- Here we are using a pre-defined GitHub action [`einaregilsson/beanstalk-deploy@v21`](https://github.com/einaregilsson/beanstalk-deploy) so that we don't need to write from scratch. There's nothing needed to explain, it's pretty straightforward. 
- Add `AWS_ACCESS_KEY_ID`, `AWS_SECRET_ACCESS_KEY` to GitHub secrets. You can get these from the IAM dashboard. Just click on the user you created and go to the **Security credentials** tab and copy from there. 
- `EB_APP_NAME` is your EB application name and `EB_ENV_NAME` is your application environment name (ends with "-env" in my case it is "Productivityapp-env").
- `EB_REGION` is the region assigned to you.

![elastic beanstalk region](https://i.imgur.com/hyWFcdG.png)

Because docker-compose cannot read GitHub environment variables, we are now creating a second image with the word 'latest' at the end of the image tag instead of `github.run_number`. This is the final YAML file. (You can build a single image if you want, just remove the tag with `github.run_number`)

```yaml
# The name of the workflow.
name: Build and Deploy

# Run the workflow when code is pushed to the main branch
on:
  push:
    branches:
      - main

# Set environment variables
env:
  MONGODB_URI: ${{ secrets.MONGODB_URI }}
  TOKEN_KEY: ${{ secrets.TOKEN_KEY }}
  EMAIL: ${{ secrets.EMAIL }}
  PASSWORD: ${{ secrets.PASSWORD }}

# This is the workflow that is being run.
jobs:
  build-and-deploy:
    # This is telling GitHub to run the workflow on the latest version of Ubuntu.
    runs-on: ubuntu-latest
    steps:
      # Checkout the code from the GitHub repository
      - name: Checkout code
        uses: actions/checkout@v3

      # Install dependencies and run tests for the client application
      - name: Install and Test Client
        working-directory: ./client
        run: |
          npm install
          npm run test

      # Install dependencies, export environment variables to be used by application and run tests for the server application
      - name: Install and Test Server
        working-directory: ./server
        run: |
          npm install
          export MONGODB_URI=$MONGODB_URI
          export TOKEN_KEY=$TOKEN_KEY
          export EMAIL=$EMAIL
          export PASSWORD=$PASSWORD
          npm run test

      # Build a Docker image for the client application
      - name: Build Client Docker Image
        working-directory: ./client
        # Build image with tag rakeshpotnuru/productivity-app:client
        run: |
          docker build -t rakeshpotnuru/productivity-app:client-${{github.run_number}} -t rakeshpotnuru/productivity-app:client-latest .

      # Build a Docker image for the server application
      - name: Build Server Docker Image
        working-directory:
          ./server
          # Build image with tag rakeshpotnuru/productivity-app:server
        run: |
          docker build -t rakeshpotnuru/productivity-app:server-${{github.run_number}} -t rakeshpotnuru/productivity-app:server-latest .

      # Build a Docker image for the NGINX reverse proxy
      - name: Build NGINX Docker Image
        working-directory: ./nginx
        # Build image with tag rakeshpotnuru/productivity-app:nginx
        run: |
          docker build -t rakeshpotnuru/productivity-app:nginx-${{github.run_number}} -t rakeshpotnuru/productivity-app:nginx-latest .

      # Login to Docker Hub using credentials from repository secrets
      - name: Log in to Docker Hub
        uses: docker/login-action@v2
        with:
          username: ${{ secrets.DOCKER_USERNAME }}
          password: ${{ secrets.DOCKER_PASSWORD }}

      # Push the Docker images to Docker Hub
      - name: Push Docker Images to Docker Hub
        run: |
          docker push rakeshpotnuru/productivity-app:client-${{github.run_number}}
          docker push rakeshpotnuru/productivity-app:server-${{github.run_number}}
          docker push rakeshpotnuru/productivity-app:nginx-${{github.run_number}}
          docker push rakeshpotnuru/productivity-app:client-latest
          docker push rakeshpotnuru/productivity-app:server-latest
          docker push rakeshpotnuru/productivity-app:nginx-latest

      # This is the step that is deploying the application to Elastic Beanstalk.
      - name: Deploy to Elastic Beanstalk
        uses: einaregilsson/beanstalk-deploy@v21
        with:
          aws_access_key: ${{ secrets.AWS_ACCESS_KEY_ID }}
          aws_secret_key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          application_name: ${{ secrets.EB_APP_NAME }}
          environment_name: ${{ secrets.EB_ENV_NAME }}
          region: ${{ secrets.EB_REGION }}
          version_label: "version-${{ github.run_number }}"
          deployment_package: docker-compose.yml
```

### deployment_package

There are two ways you can provide a package for deployment package - 1. Zip file or 2. docker-compose file. Since we are pushing images to the docker hub we will use the `docker-compose.yml` file.

Rename the previous `docker-compose.yml` file as `docker-compose.dev.yml` and create a new `docker-compose.yml` file. Paste this code.

```yaml
version: "3.8"

services:
  nginx:
    image: rakeshpotnuru/productivity-app:nginx-latest
    restart: always
    depends_on:
      - client
      - server
    ports:
      - "80:80"

  client:
    image: rakeshpotnuru/productivity-app:client-latest
    environment:
      - CHOKIDAR_USEPOLLING=true
      - REACT_APP_BACKEND_URL=${REACT_APP_BACKEND_URL}

  server:
    image: rakeshpotnuru/productivity-app:server-latest
    environment:
      - MONGODB_URI=${MONGODB_URI}
      - TOKEN_KEY=${TOKEN_KEY}
      - EMAIL=${EMAIL}
      - PASSWORD=${PASSWORD}
```

- Instead of re-building Docker images with Dockerfile, we pull pre-built images from Docker Hub. And those environment variables are derived from variables we previously defined in the EB application environment.

That's all! Push the code to GitHub and allow all checks in the GitHub Actions workflow to pass. You can see your application in action 🎉🚀🤩.

![login page of deployed application](https://i.imgur.com/FL09VKP.png)

![main page of deployed application](https://i.imgur.com/0GofSVJ.png)


## Terminating the Environment

![turn off aws instance meme](https://i.imgur.com/o7CYIVz.jpg)

Don't forget to terminate the environment after finishing this tutorial if you no longer use that application.

To terminate, go to **Environments** -> select the environment you want to terminate -> click **Actions** -> click **Terminate environment**. This will also terminate any instances that were created by your application.

![terminating elastic beanstalk environment](https://i.imgur.com/vQixR04.png)

---

If you've made it this far from "[Let's build and deploy a full stack MERN web application](https://blog.itsrakesh.co/lets-build-and-deploy-a-full-stack-mern-web-application)", kudos. Give yourself a shoulder pat.

---

This is not the end of the story. Many exciting articles are on the way! Subscribe to the newsletter for more - Onwards and Upwards 🚀!

Let's Build a Full-Stack App with tRPC and Next.js 14

READ LATEST ARTICLES

Let's Build a Full-Stack App with tRPC and Next.js 14

Introducing Publish Studio: Power Digital Content Creation

Deploying a MERN App to AWS Elastic Beanstalk with CI/CD

EXPLORE LATEST SNIPPETS

Step-by-Step Guide: Pushing a Docker Image to DockerHub

Host your static site with Azure Static Web Apps in 3 steps

What is the difference between Private and Public blockchain

What fields you should include in a web manifest file?

Let's Build a Full-Stack App with tRPC and Next.js 14

READ LATEST ARTICLES

Let's Build a Full-Stack App with tRPC and Next.js 14

Introducing Publish Studio: Power Digital Content Creation

Deploying a MERN App to AWS Elastic Beanstalk with CI/CD

EXPLORE LATEST SNIPPETS

Step-by-Step Guide: Pushing a Docker Image to DockerHub .css-i5zjkk{width:1em;height:1em;display:inline-block;line-height:1em;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;color:var(--chakra-colors-brand-100);vertical-align:middle;}

Host your static site with Azure Static Web Apps in 3 steps

What is the difference between Private and Public blockchain

What fields you should include in a web manifest file?

Weekly

Monthly

Step-by-Step Guide: Pushing a Docker Image to DockerHub