*Published from [Publish Studio](https://www.publishstudio.one)*

In this tutorial, let's learn how to connect a Postgres database to a tRPC express backend using Drizzle ORM. I have also created a simple frontend for our finance tracker application. You can copy frontend code from the repo [here](https://github.com/itsrakeshhq/finance-tracker/tree/main/frontend).

![finance tracker](https://cdn.hashnode.com/res/hashnode/image/upload/v1726497893372/dbe342f1-cf88-4b06-baff-3dbc80f16b71.png)

This is part 2, read part 1 here: [Let's Build a Full-Stack App with tRPC and Next.js 14](https://blog.itsrakesh.com/lets-build-a-full-stack-app-with-trpc-and-nextjs-14)

## Backend

If you don't have Postgres installed locally, please do or you can also use a hosted database.

Once you have Postgres ready, add `DATABASE_URL` to your `.env`:

```bash
DATABASE_URL=postgres://postgres:password@localhost:5432/myDB
```

### Setting up db with drizzle

To set up drizzle, start off by installing these packages:

```bash
yarn add drizzle-orm pg dotenv
yarn add -D drizzle-kit tsx @types/pg
```

Now, all you have to do is connect drizzle to the DB. To do that, create `src/utils/db.ts` file and configure drizzle:

```typescript
import { drizzle } from "drizzle-orm/node-postgres";
import pg from "pg";
const { Pool } = pg;

export const pool = new Pool({
  connectionString: process.env.DATABASE_URL,
  ssl: process.env.NODE_ENV === "production",
});

export const db = drizzle(pool);
```

That's it! Our db setup is ready. We can now create tables and interact with our db using drizzle ORM.

### Create the first module

Regarding the project structure, there are mainly two types:

1. Modules: Divide features into different modules and keep all related files together. Popular frameworks like NestJs and Angular use this structure.

```bash
.
└── feature/
    ├── feature.controller.ts
    ├── feature.routes.ts
    ├── feature.schema.ts
    └── feature.service.ts
```

2. Separate folders based on the purpose:

```bash
.
├── controllers/
│   ├── feature1.controller.ts
│   └── feature2.controller.ts
├── services/
│   ├── feature1.service.ts
│   └── feature2.service.ts
└── models/
    ├── feature1.model.ts
    └── feature2.model.ts
```

I personally prefer modules because it just makes sense (*plz stop using 2nd one*).

Now, let's create our first module called `transaction`. This is our core feature. Start by creating `src/modules/transaction/transaction.schema.ts` file. This is where we define transaction schema using drizzle.

The great thing about using drizzle to write schemas is it lets us use typescript. So you don't have to learn a new syntax and ensure type safety for your schemas.

To record a transaction (txn), the most basic things we need are:

- txn amount
- txn type - credit or debit
- description - a simple note to refer to later
- tag - a category like shopping/travel/food, and so on.

First, let's create enums for txn type and tag:

```ts
import {
  pgEnum,
} from "drizzle-orm/pg-core";

export const txnTypeEnum = pgEnum("txnType", ["Incoming", "Outgoing"]);
export const tagEnum = pgEnum("tag", [
  "Food",
  "Travel",
  "Shopping",
  "Investment",
  "Salary",
  "Bill",
  "Others",
]);
```

Then, let's create the schema:

```ts
import {
  integer,
  pgTable,
  serial,
  text,
  timestamp,
} from "drizzle-orm/pg-core";

export const transactions = pgTable("transactions", {
  id: serial("id").primaryKey(),
  amount: integer("amount").notNull(),
  txnType: txnTypeEnum("txn_type").notNull(),
  summary: text("summary"),
  tag: tagEnum("tag").default("Others"),
  createdAt: timestamp("created_at").defaultNow(),
  updatedAt: timestamp("updated_at")
    .defaultNow()
    .$onUpdate(() => new Date()),
});
```

As you can see, we simply wrote typescript code and created a table!

### Run migrations

One final step before we can start interacting with our db is to apply changes to our database so that all the tables will be created. To do that we have to run migrations. Drizzle has this amazing tool called `drizzle-kit` which handles migrations for us, so all we have to do is run a command.

Before doing that we have to create a file called `drizzle.config.ts` in the project root, which includes all the information about the database and schemas.

```ts
import "dotenv/config";
import { defineConfig } from "drizzle-kit";

export default defineConfig({
  schema: "./src/**/*.schema.ts",
  out: "./drizzle",
  dialect: "postgresql",
  dbCredentials: {
    url: process.env.DATABASE_URL!,
    ssl: process.env.NODE_ENV === "production",
  },
});
```

With that ready, run the below command:

```bash
yarn dlx drizzle-kit push
```

That's it! Now we can start interacting with db and write our business logic.

### Business logic

Let's add logic to add new transactions.

If you already don't know:

- Service - where we interact with DB and write most of the business logic
- Controller - handle request/response

Create `transaction/transaction.service.ts` and write logic to add new transactions to db:

```ts
import { TRPCError } from "@trpc/server";
import { db } from "../../utils/db";
import { transactions } from "./transaction.schema";

export default class TransactionService {
  async createTransaction(data: typeof transactions.$inferInsert) {
    try {
      return await db.insert(transactions).values(data).returning();
    } catch (error) {
      console.log(error);

      throw new TRPCError({
        code: "INTERNAL_SERVER_ERROR",
        message: "Failed to create transaction",
      });
    }
  }
}
```

Another benefit of using drizzle ORM is it provides type definitions for different CRUD methods like `$inferInsert`, `$inferSelect` so there is no need to define the types again. Here, by using `typeof transactions.$inferInsert` we don't have to provide values for fields like primary key, and fields with default values like `createdAt`, and `updatedAt`, so typescript won't throw an error.

Drizzle also has extensions like [drizzle-zod](https://orm.drizzle.team/docs/zod) which can be used to generate zod schemas. Another headache was prevented by drizzle 🫡. So open `transaction.schema.ts` and create zod schema for insert operation:

```ts
import { createInsertSchema } from "drizzle-zod";

export const insertUserSchema = createInsertSchema(transactions).omit({
  id: true,
  createdAt: true,
  updatedAt: true,
});
```

Let's use this in the controller, create `transaction/transaction.controller.ts`:

```ts
export default class TransactionController extends TransactionService {
  async createTransactionHandler(data: typeof transactions.$inferInsert) {
    return await super.createTransaction(data);
  }
}
```

Now, all that remains is to expose this controller through an endpoint. For that, create `transaction/transaction.routes.ts`. Since we are using tRPC, to create an endpoint, we have to define a procedure:

```ts
import { publicProcedure, router } from "../../trpc";
import TransactionController from "./transaction.controller";
import { insertUserSchema } from "./transaction.schema";

const transactionRouter = router({
  create: publicProcedure
    .input(insertUserSchema)
    .mutation(({ input }) =>
      new TransactionController().createTransactionHandler(input)
    ),
});

export default transactionRouter;
```

If you remember from part 1, we created a reusable `router` that can be used to group procedures and `publicProcedure` which creates an endpoint.

Finally, open `src/routes.ts` and use the above `transactionRouter`:

```ts
import transactionRouter from "./modules/transaction/transaction.routes";
import { router } from "./trpc";

const appRouter = router({
  transaction: transactionRouter,
});

export default appRouter;
```

That's it! The backend is ready. This is the final backend structure:

```shell
.
├── README.md
├── drizzle
│   ├── 0000_true_junta.sql
│   └── meta
│       ├── 0000_snapshot.json
│       └── _journal.json
├── drizzle.config.ts
├── package.json
├── src/
│   ├── index.ts
│   ├── modules/
│   │   └── transaction/
│   │       ├── transaction.controller.ts
│   │       ├── transaction.routes.ts
│   │       ├── transaction.schema.ts
│   │       └── transaction.service.ts
│   ├── routes.ts
│   ├── trpc.ts
│   └── utils/
│       ├── db.ts
│       └── migrate.ts
├── tsconfig.json
└── yarn.lock
```

### Challenge for you

Before proceeding to frontend integration, as a challenge, create an endpoint for getting all transactions.

## Frontend

It's time to integrate the created endpoints in our frontend. Since this is not a frontend tutorial, I'll let you just copy the code from the repo.

All I've changed is:

- Set up [shadcn/ui](https://ui.shadcn.com/)
- Change `src/components/modules/dashboard/index.tsx`

Also, as you observe, I'm using a modules-like structure here too. If you also like this structure, you can learn more from my previous projects [Publish Studio](https://github.com/RakeshPotnuru/publish-studio) and [My One Post](https://github.com/RakeshPotnuru/myonepost)

In part 1, we queried data using built-in tRPC react-query.

```tsx
...
  const { data } = trpc.test.useQuery();

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

So, if you already know react-query, there's isn't much to learn except with tRPC we don't have to create `queryFn` or `mutationFn` because we directly call backend methods.

This is how mutations are used:

```tsx
...
  const { mutateAsync: createTxn, isLoading: isCreating } =
    trpc.transaction.create.useMutation({
      onSuccess: async () => {
        form.reset();
        await utils.transaction.getAll.invalidate();
      },
    });
    
  const addTransaction = async (data: z.infer<typeof formSchema>) => {
    try {
      await createTxn(data);
    } catch (error) {
      console.error(error);
    }
  };
...
```

## See In Action

![completed tutorial](https://cdn.hashnode.com/res/hashnode/image/upload/v1735130595854/b606326a-c2aa-4b98-ac92-295dc1dfa02a.gif)

---

I hope you like this tutorial. Feel free to extend the functionality. In the next article, I'll share how to add authentication.

---

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

---

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

Setting Up Drizzle & Postgres with tRPC and Next.js App 

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)

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

_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 🚀!

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

As you continue to develop your software, you must also continue to integrate it with previous code and deploy it to servers. Manually doing this is a time-consuming process that can occasionally result in errors. So we need to do this in a continuous and automated manner, which is what you will learn in this article.

## Let's Get Started

## The Problem

Consider our [productivity app](https://github.com/itsrakeshhq/productivity-app). There are numerous steps we must complete, from building the application to pushing it to the docker hub. First, we must run tests with a command to determine whether all tests are passed or not; if all tests are passed, we build docker images and then push those images to Docker Hub. If your application is extremely complex, you may need to take additional steps. Now, we're doing everything manually, which takes time and can lead to mistakes.

![waiting for deployment without devops](https://i.imgur.com/iWAmMm4.jpg)

## The Solution

To address this problem, we can create a CI/CD **Pipeline**. So, whenever you add a feature or fix a bug, this pipeline is triggered, which automatically performs all of the steps from testing to deploying.

## What is CI/CD and Why it's Important?

**C**ontinuous **I**ntegration and **C**ontinuous **D**eployment is a series of steps performed to automate software integration and deployment. CI/CD is the heart of DevOps.

![ci cd steps](https://i.imgur.com/aKWTNVq.png)

From development to deployment, our MERN app goes through four major stages: testing, building docker images, pushing to a registry, and deploying to a cloud provider. All of this is done manually by running various commands. This must be done every time a new feature is added or a bug is fixed. However, this will significantly reduce developer productivity, which is why CI/CD is required to automate this process. (In this article, we will cover till pushing to the registry.)


![ci cd meme](https://i.imgur.com/g2omESy.png)

## What is "GitHub Actions"?

A CI/CD server is required to run a CI/CD pipeline; this is where all of the steps written in a pipeline run. There are numerous services available on the market, including Jenkins, Travis CI, Circle CI, GitLab CI/CD, AWS CodePipeline, Azure DevOps, and Google Cloud Build. I chose GitHub Actions because it is natively integrated with Git, works well with GitHub, and is extremely simple to use. It is also sufﬁcient for small/medium-sized applications such as ours. For more complex applications, you can use any of the other services listed above.

### How do GitHub Actions work?

GitHub actions is not a CI/CD platform, CI/CD is one of its use cases. 

#### **Events**

Workflows are triggered by events such as pull requests, pushed, PR merged, the issue created, and a few others. For example, you can trigger a workflow running a bot that says "Thanks for opening the issue, our maintainers will review it." whenever an issue is created.

#### **Workflows**

Workflows are YAML files that contain all of the instructions that are executed after an event is triggered. Workflow files are typically kept in the `.github/workflows/` directory.

#### **Jobs**

Jobs is a group set of steps called a job. Each workflow must include at least one job. A job is a set of steps that must be executed in a virtual environment.

#### **Runners**

This is my favorite feature of GitHub Actions. Runners are virtual environments where jobs are carried out. You can either use [GitHub-hosted runners](https://docs.github.com/en/actions/using-github-hosted-runners/about-github-hosted-runners#supported-runners-and-hardware-resources) that contains pre-installed packages or host your own.

![how gitHub actions work](https://i.imgur.com/eZ7QG96.png)

## Adding a CI/CD Pipeline to the MERN App

### 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.
- Basic YAML understanding.
- GitHub account.

To begin, we must define pipeline configurations in a YAML file. Where should I save this YAML file? - If you're familiar with GitHub, you've probably heard of the `.github` directory, which is a special directory used for GitHub-specific items such as issue templates, pull request templates, workflow files, and so on. So we must place our pipeline file in the `workflows` folder, which is located in the `.github` folder.

Go ahead and create a YAML file and name it something like `pipeline.yml` or `pipeline.yaml`. Your folder structure should now look like this:

```bash
.
└── my-project/
    ├── .github/
    │   └── workflows/
    │       └── pipeline.yml
    ├── client/
    ├── server/
    └── docker-compose.yml
```

First, we have to mention the name of the workflow.

```yaml
name: Build and Deploy
```

Then, mention a trigger - on commit/on push/on pull request, etc.., along with branches.

```yaml
on:
  push:
    branches:
      - main
```

Since our application uses some environment variables while running tests, we have to set environment variables in the YAML file that will be used by workflow steps.

But, first, let's add environment variables in the GitHub repository. To do so, go to repository **Settings** -> expand **Secrets and variables** -> **Actions**.

![path to add secrets in github repo](https://i.imgur.com/G71Wb4s.png)

Click on **New repository secret** and add the following secrets.

![add secrets in github repo](https://i.imgur.com/D74IiLM.png)

Now in the YAML file, you can access them like this:

```yaml
env:
  MONGODB_URI: ${{ secrets.MONGODB_URI }}
  TOKEN_KEY: ${{ secrets.TOKEN_KEY }}
  EMAIL: ${{ secrets.EMAIL }}
  PASSWORD: ${{ secrets.PASSWORD }}
```

Let's get to the interesting part!
These are the only steps we have to perform with GitHub Actions. As simple as that.

![ci cd pipeline steps](https://i.imgur.com/GHZLpCe.png)
Start by adding jobs, let's add a job called `build-and-deploy`.

```yaml
jobs:
  build-and-deploy:
    # This is telling GitHub to run the workflow on the latest version of Ubuntu.
    runs-on: ubuntu-latest
```

### Adding Continuous Integration

In this job, let's add steps to pull code from the repo and run some tests.

```yaml
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
```

- `name` - You can provide a name for each step.
- `uses` - Set which action to use. `checkout` is a pre-defined action provided by GitHub that checks out a repo
- `working-directory` - Set working directory. This is where all the commands mentioned in that step will run.
- `run` - Run commands. You can run multiple commands by putting `|` (**pipe**). Learn more about YAML in [this](https://youtu.be/IA90BTozdow) YouTube tutorial.

Now if you push these changes to GitHub. It will automatically run your workflow. You can see the running workflow in the **Actions** tab of your GitHub repository.

Click on the commit and then the job to see the running steps.

![Continuous Integration](https://i.imgur.com/OjgmKGY.png)


### Adding Continuous Deployment

Now it's time to build docker images and push them to the docker hub.

```yaml
# 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}} .

      # 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}} .

      # Login to Docker Hub using credentials from repository secrets
      - name: Login 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}}
```

- Before pushing to the docker hub we need to log into the hub. That's why there's a step before pushing images. With `with` we can use secrets directly without setting them in the environment.
- `github.run_number` - This is because it's a good practice to give a unique identifier for every image on the hub. And this environment variable (`run_number`) will be generated automatically by GitHub Actions.

![Continuous Deployment](https://i.imgur.com/9hNnVtX.png)

![images pushed to dockerhub](https://i.imgur.com/cC41kWD.png)

Here's the complete YAML file.

```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@v2

      # 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}} .

      # 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}} .

      # Login to Docker Hub using credentials from repository secrets
      - name: Login to Docker Hub
        uses: docker/login-action@v1
        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}}

```

## Resources

Learn more about CI/CD and GitHub Actions.

- [GitHub Actions 101](https://www.showwcase.com/series/492/github-actions-101) written series by Victoria Lo.
- [Introduction to GitHub Actions CI/CD](https://youtu.be/62N8UiWUdQo) by Kunal Kushwaha.
- [CI/CD Tutorials](https://youtube.com/playlist?list=PLy7NrYWoggjzSIlwxeBbcgfAdYoxCIrM2) YouTube playlist by TechWorld with Nana.

---

In the next article, we will learn how to deploy to a cloud service provider (Generally the last step in a CI/CD pipeline).

---

![a world with ci cd meme](https://i.imgur.com/4WsGAH1.jpg)

---

Build strong pipelines. Don't be like this 💀 - https://youtu.be/M_jjG9K5KEo

---

Subscribe to the newsletter for more, seriously!

Automate MERN App Deployment with GitHub Actions CI/CD

Are you tired of long development cycles and hesitant to push new features to production? Feature flags may be the solution you're looking for. In this blog post, we'll explore how feature flags can streamline your development process, reduce the risk of errors, and give you more control over the features you release to your users. From testing new features to rolling out changes to a select group of users, feature flags can help you do it all. Keep reading to learn how you can start using feature flags in your development workflow today.

## Let's Get Started

## What are Feature Flags?

Feature flags are a way to control what features your users see. You can use them to experiment with new features, collect data and make sure things are working correctly before you roll them out to everyone.

Consider feature flags to be switches. You can use feature flags to turn on and off features of your product in the same way that you would turn on and off lights using a switch. You don't have to rewire your house to toggle the light, and you don't have to make code changes to toggle features with feature flags.

With feature flags, you may test your features on a small group of users. If all goes well and you and that small group of people are satisfied with the new feature, you can make it available to the general public. This enables you to develop your product smarter than ever before 😎. Also, this style of software development is usually less expensive than traditional software development.

## What is ConfigCat?

![ConfigCat](https://i.imgur.com/gS9XZqh.png)

[ConfigCat](https://configcat.com) is a feature flag management service and LaunchDarkly alternative. It allows software engineers/developers to remotely control the behavior of their applications without needing to redeploy the code. This means that new features can be tested and rolled out to production gradually, and bugs can be fixed without having to take the entire application offline. With ConfigCat, developers can use feature flags to implement a continuous deployment process, enabling them to release new features and updates faster, with less risk.

Not only that, but you can also create batches of users to target specific users. You can create groups if, for example, you wish to disable a feature for users in a specific country or only enable beta users to access certain features.

## ConfigCat Vs LaunchDarkly

Both ConfigCat and LaunchDarkly are feature flag management services that allow developers to remotely control the behavior of their applications without needing to redeploy the code. Some of the key differences are:

### LaunchDarkly pricing Vs ConfigCat

- **Freemium** - ConfigCat's generous forever free plan with unlimited team size, monthly active users, and connected instances is one of the main reasons to choose them over LaunchDarkly.
- **Team Size** - ConfigCat provides unlimited team size for all plans, but LaunchDarkly charges per seat.
- ConfigCat costs by the number of feature flags, whereas LaunchDarkly charges by the number of monthly active users (only client side).
- Furthermore, ConfigCat offers its pro plan for free to students and has a custom pricing plan for teachers.
ConfigCat's pricing plan is honestly more appealing to me than LaunchDarkly's.

### Privacy and Security

- ConfigCat includes security features (2FA, SSO, SAML, and Active Directory) in all of their plans, whereas LaunchDarkly requires a fee and most security features are only available in the pro and enterprise subscriptions. And LaunchDarkly has no data governance.

Find out more differences [here](https://configcat.com/launchdarkly-vs-configcat/).

## See it in Action

Let's learn how to add feature flags in a React project and manage them with ConfigCat. For this, I built a sample React project or you can try with your own project.

### Prerequisites

- Sign up for a free [ConfigCat account](https://app.configcat.com/signup). (If you are a student you can opt for [pro plan](https://configcat.com/student/))
- Basics of React are good to have but not necessary.

### The Project

Our sample application is a very simple note-taking app.

![Keeper app project demo](https://i.imgur.com/BDw5z7Y.gif)

- Clone/download the project from the [GitHub](https://github.com/itsrakeshhq/feature-flags-demo)
- Familiarize yourself with the project.
- Install the dependencies with this command.

```bash
yarn
```

- Start the project.

```bash
yarn start
```

- Open a browser and navigate to http://localhost:3000.

### Creating feature flags in ConfigCat

Open the ConfigCat dashboard to begin creating feature flags. An example feature flag called `isMyFirstFeatureEnabled` has been provided for you. You can either delete it by clicking the `X` or leave it alone.
Click **+ ADD FEATURE FLAG**.

![ADD FEATURE FLAG](https://i.imgur.com/SVZqHa1.jpg)


Give your flag a name, use `isTitleFeatureEnabled` for the key, set the initial values to "On," and then click **ADD FEATURE FLAG**. A flag will be created.

![Configure flag](https://i.imgur.com/MK1NQiq.jpg)

### Configure React app

First, install the [`configcat-react`](https://configcat.com/docs/sdk-reference/react/) npm package.

```bash
yarn add configcat-react
```

Launch your editor and open the project. Create a `.env` file in the project's root directory and include this environment variable. You can obtain the SDK key from the ConfigCat dashboard by clicking the **VIEW SDK KEY** button in the upper-right corner.

```bash
REACT_APP_CONFIGCAT_SDK_KEY=YOUR_CONFIGCAT_SDK_KEY
```

Open the `index.js` file which is located in the `/src` folder. Wrap the `</App>` component with `ConfigCatProvider`

```javascript
<ConfigCatProvider
    sdkKey={process.env.REACT_APP_CONFIGCAT_SDK_KEY}
    pollingMode={PollingMode.AutoPoll}
    options={{ pollIntervalSeconds: 30 }}
  >
    <App />
</ConfigCatProvider>
```

- [`pollingMode`](https://configcat.com/docs/advanced/caching/) - Polling is a method for retrieving setting values from ConfigCat. `PollingMode. Autopoll` was used in this case. In this mode, ConfigCat SDK automatically downloads the most recent values and keeps them in the cache. We set `pollIntervalSeconds` to `30`, which means ConfigCat downloads the most recent values every 30 seconds. This will be demonstrated in a moment.
Now we can use feature flags in our project.

### Feature flags usage

#### 1. Title feature

If you tried the project, when you add a new note, you give it a title. Because a note may not require a title, we decided to test it with beta users. We will eventually extend out to all users based on feedback and usage from beta users.

To do so, let's first add a feature flag to the title input. This title input is located in [`/src/components/CreateArea.jsx`](https://github.com/itsrakeshhq/feature-flags-demo/blob/main/src/components/CreateArea.jsx) file and at line [41](https://github.com/itsrakeshhq/feature-flags-demo/blob/15fff674547b1fde06b2cfe6588b1d7e6a1a1022/src/components/CreateArea.jsx#L41-L47). 

```javascript
...
import { useFeatureFlag } from "configcat-react";
...

function CreateArea(props) {
	...
	const {
		value: isTitleFeatureEnabled,
		loading: isTitleFeatureEnabledLoading,
	} = useFeatureFlag("isTitleFeatureEnabled", false);
	...
	
	return (
	...
		{!isTitleFeatureEnabledLoading && isTitleFeatureEnabled && (
			<input
				onChange={handleChange}
				name="title"
				placeholder="Title"
				value={inputText.title}
				autoComplete="off"
			/>
		)}
	...
	)
}
```

- What we did above is really straightforward. Using the `useFeatureFlag` hook, we first obtained the `isTitleFeatureEnabled` flag values and used them while rendering the UI. So we simply hide and expose the UI, which is good.

All you have to do now is toggle flags on the ConfigCat dashboard. Changes will be reflected within 30 seconds.

![Title feature](https://i.imgur.com/2PTZXhQ.gif)

#### 2. Delete feature

Let's say we are adding a delete feature to notes. But we first want to release it in one country and gradually roll it out to other countries. Let's learn how to use target rules but first add a feature flag. I already created a flag in the ConfigCat dashboard with the key `isDeleteFeatureEnabled`. So go ahead and create this flag. 

The delete button and its implementation are located in [`/src/components/Note.jsx`](https://github.com/itsrakeshhq/feature-flags-demo/blob/main/src/components/Note.jsx) file. 

```javascript
...
import { useFeatureFlag } from "configcat-react";
...

function CreateArea(props) {
	...
	const userObject = {
	    identifier: "643564",
	    email: "rakesh@example.com",
	    country: "Japan",
    };
  
	const {
		value: isDeleteFeatureEnabled,
		loading: isDeleteFeatureEnabledLoading,
	} = useFeatureFlag("isDeleteFeatureEnabled", false, userObject);

	function handleClick() {
		if (!isDeleteFeatureEnabled) {
			return;
		}
		props.deleteNote(props.id);
	}
	...
	
	return (
	...
		{!isDeleteFeatureEnabledLoading && (
	        <button onClick={handleClick} disabled={!isDeleteFeatureEnabled}>
	          <DeleteIcon />
	        </button>
	     )}
	...
	)
}
```

- Here, we not only hide and expose UI but also disable the delete functionality.
- In the above code, you see [`userObject`](https://configcat.com/docs/advanced/user-object/). You need to pass this object to make the target rules to work. Usually, we get this data from the backend; however, because this is only an example, I hard-coded values.

![Delete feature](https://i.imgur.com/QvvBjNY.gif)

#### Creating target rules

As the name suggests, target rules are the rules used to [target specific users](https://configcat.com/docs/advanced/targeting/). Let's create our first target rule.
Click **ADD NEW TARGETING RULE**. Select **Country** from the first dropdown, **IS ONE OF (cleartext)** from the second dropdown, and fill in the next text field with the countries where you want to release this feature.

![Create target rule](https://i.imgur.com/BOCy3O5.jpg)

To test this out, change the country in `userObject` and see.

## Resources

Learn more about ConfigCat and feature flags from these resources,

- ConfigCat [blog](https://configcat.com/blog/)
- ConfigCat [SDK references](https://configcat.com/docs/sdk-reference/overview/)

## Conclusion

Feature flags (sometimes loosely and erroneously referred to as feature toggle switches) are becoming a crucial component of modern software development. Whether you're a developer trying to make your code more modular, or a product manager looking to experiment more quickly, it's likely that feature flags can help you. The general concept is simple: for any given feature, a flag—either on or off—signals whether that functionality should be included in the application or not. Depending on the use case, that flag can be set by several different actors in the development process: the product owner who's vetting new features based on business value, a QA engineer who wants to exercise different test scenarios or an end user who wants to give their feedback on an upcoming version.

---

Subscribe to the newsletter for more.

How Feature Flags Can Help You Ship Faster and Smarter?

Are you tired of spending hours messing with crontabs and installing packages in an attempt to run your app locally? Are you sick of always missing a dependency that doesn't allow you to run the app and therefore you have to debug it for hours trying to find what's wrong? Then you've come to the right place. In this article,  you will learn how to make use of Docker to develop and ship your software faster and easier.

## Let's Get Started

![Docker illustration](https://i.imgur.com/euE1662.gif)

## The Problem

For me, the easiest way to understand a technology is to know the problem it solves. So why should we care? Why do we need Docker? Aren't we doing well with our application? (Productivity app). It is fully operational, we have deployed it, and it is accessible over the internet. I don't see any issues here - what do you think? 🤔

Your developer friend now wants to add more features to it. So he/she clones your GitHub repository and attempts to install it locally on his machine. Assume you are using Windows and your friend is using Linux; your machine has the 16th version of Node and your friend, for some reason, is using an older version of Node. Your project is fully compatible with your system and is operational. It could work on your friend's computer or not. Unfortunately, it did not work due to an outdated node version. Your friend is unaware of this and spends a significant amount of time attempting to find out what went wrong. He calls and says your project isn't working, yet it is at your end. Finally, you two fought and realized what went wrong. But you can't get that lost time back 😔.

![It works on my computer meme](https://i.imgur.com/KVHHiQb.png)


## The Solution

Fortunately, there is a simple solution to this issue. What if I told you that you could give your computer to that friend without actually handing it to them? You can send your friend a magic file with configurations that worked on your system. Then, using a tool, your friend can unlock the power of this magical file and successfully run your project on his PC.

This tool is called **Docker**, and the magic file is called **Dockerfile**, which we will discuss later in this article.

![How docker was born meme](https://i.imgur.com/zNv7NBk.png)


### What is Docker?

![Docker](https://i.imgur.com/4Pr8Txx.gif)

Docker is a containerization solution that allows you to package your entire software and run it from anywhere. In a file called Dockerfile, developers define project dependencies, instructions, and other variables. We can create an image and then a container using that Dockerfile.

### Three main components of Docker

Let's learn some important basic components of docker.

#### **1. Images**

A Docker image is a sealed package that contains the source code files for your project. It is immutable, which means that once built, the files in that image cannot be altered. You must rebuild the image to update files. These images are created using instructions written in Dockerfile, which we will learn more about later in this tutorial.

#### **2. Containers**

Images are read-only which means you can't run them. To run applications, we use **containers**. Containers are runnable instances of images.

#### **3. Volumes**

We have two problems here,

To begin with, data saved in containers will be lost once they are stopped. But, there may be times when we need data to persist and be shared between containers.

Secondly, we are aware that docker images are read-only. However, in development, we frequently edit files. Every time we make a modification, we must rebuild the image. This will significantly reduce developer productivity and is a time-consuming process. 

We can use **volumes** to overcome these problems. Docker volumes are a way to store data outside of a container's filesystem. They allow data to persist even if the container is deleted, and can also be used to share data between multiple containers.

## Virtualization Vs Containerization

Before Docker, developers did this with Virtual Machines.

**Virtualization** involves creating a virtual version of a physical machine, including the operating system, on top of a host operating system. This allows multiple virtual machines to run on the same physical hardware, each with its operating system and resources. Examples of virtualization software include VMware and VirtualBox.

**Containerization**, on the other hand, involves packaging an application and its dependencies together in a container. Containers are lightweight and fast, and they share the host operating system kernel, making them more efficient than virtual machines. Example of containerization software - Docker.

![Virtualization Vs Containerization](https://i.imgur.com/xUU4M8O.png)

But because virtual machines utilize a lot of resources and often time consumes developers started using Docker.

![VM vs Docker meme](https://i.imgur.com/mO4wZAt.jpg)

## Some Important Terms

A few terms you need to need to know before we start using Docker.

### Docker Engine/Daemon

Docker daemon is similar to your brain (not exactly like a brain). It handles API requests as well as the management of Docker containers, images, volumes, and networks.

### Docker hub

![Docker hub](https://i.imgur.com/iGcAyFk.jpg)


[Docker Hub](https://hub.docker.com) is a public registry where docker images can be found. While creating images, you can push them to Docker Hub so that others can use them.

### Docker CLI

Docker CLI is a tool that may be used to create/delete images, run/stop/kill containers, create/delete volumes, pull images from the Docker registry, and much more.

## Let's Dockerize

### Prerequisites

- Download [Docker Desktop](https://docs.docker.com/get-docker/)
- 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.

## Dockerizing React Application

### Dockerfile

Let's start by learning more about Dockerfile. A Dockerfile is a set of instructions for creating a Docker image. Imagine every instruction as a layer.

In the root of the `/client` folder, create a file named `Dockerfile` without any extension.

This is what a basic Dockerfile for React application consists of:

```bash
# Layer 1: Telling Docker to use the node:17-alpine image as the base image for the container.
FROM node:17-alpine

# Layer 2: Telling Docker to create a directory called `app` in the container and set it as the working directory.
WORKDIR /app

# Layer 3: Copying the package.json file from the root of the project to the `app` directory in the container.
COPY package.json .

# Layer 4: Installing the dependencies listed in the package.json file.
RUN npm install

# Layer 5: Copying all the files from the root of the project to the `app` directory in the container.
COPY . .

# Layer 6: Telling Docker that the container will listen on port 3000.
EXPOSE 3000

# Layer 7: Telling Docker to run the `npm start` command when the container is started.
CMD ["npm", "start"]
```

- Layer 1 - Begin by specifying a base image. We already know that React makes use of NodeJs. Consider a container to be a brand-new computer. To run the React app on that Computer, you must first install node. (node uses alpine (a Linux distribution) as its base image.)
- Layer 2 - Docker creates a folder called `app` in that machine after installing node so that docker will utilize that folder to follow the rest of the instructions. We can alternatively specify the root directory (`/`), however, this will cause problems with docker-generated files.
- Layer 3 - Next, docker copies the `package.json` file to the `/app` folder.

💡**Big Brain Time:** Why not copy all the files? This is a time-saving technique used by developers. There is a concept known as [Layer caching](https://youtu.be/nMpndIyaBU) where Docker uses a cached layer when rebuilding the image if that layer does not change. If you copy all of the files before installing dependencies, Docker will re-install dependencies whenever you make a modification to your files and rebuild the image.

- Layer 4 - Install the dependencies specified in `package.json` by running the command `npm install`.
- Layer 5 - Copy the rest of the files.
- Layer 6 - Tell docker that the container will listen on port `3000`.
- Layer 7 - Tell Docker the command to execute after the container has started. We can't put `RUN npm start` here since the image can't run the app because it's read-only.

### .dockerignore file

When we copy files to Docker, we don't want it to copy unnecessary files like `README.md` or large folders like `node_modules`. So we can create a file called `.dockerignore` and define which files you don't want to be copied.

```bash
Dockerfile
.dockerignore
node_modules
npm-debug.log
README.md
.git
yarn-error.log
```

### Create Image

It is now time to build the image. Run the following command in the terminal.

```bash
docker build -t clientapp . 
```

![Image created](https://i.imgur.com/ImKh2Dx.png)

- As you can see above our image is ready.
- `-t` means tag. We can give our image a tag to later use as a reference to run the container and delete the image.
- `.` indicates the directory that contains Dockerfile.

Now you can push this image to the docker hub and let others use it.

### Create Container

Okay, let's see how to run this image to create a container that will run our application.

You can run this image with the following command,

```bash
docker run --name clientapp_c -p 3000:3000 -d clientapp
```

- `--name` tag allows us to specify a name for our container.
- `-p` tag allows us to map the container port `3000` to our local computer port, allowing us to view the application in our local browser. (Remember that each container is a brand new computer, thus we need to tell Docker to map that port to our local PC port.)
- `-d` helps run the container in detached mode means the container will run in the background, so we can use the terminal to do other tasks.

![Container created](https://i.imgur.com/yVnSrFj.png)

- See, the container has been created and running on port `3000`. You can click on that container and see the logs also.

![client app running](https://i.imgur.com/sjtljC7.jpg)


Important commands:

```bash
docker stop CONTAINER_NAME # stops the running container
docker start CONTAINER_NAME # starts the container (Make sure a container is created first)
```

### Create Volumes

I previously mentioned that because images are read-only, we must rebuild them whenever we make changes to source code files or install new dependencies and want to see live changes. However, this is a time-consuming procedure. Fortunately, there is a solution. We can use **Volumes** to store data (files, etc.) permanently and map the volumes to containers. As a result, any changes we make will be reflected in the container.

Now the command becomes:

```bash
docker run --name clientapp_c -p 3000:3000 -v D:\Blog\blogs data\full stack mern app\tutorial\client:/app -v /app/node_modules clientapp
```

![Volume created](https://i.imgur.com/4Y4AaZ0.png)

This command grew in length. But don't worry, I'll show you how to put this command into a single file and run the container with a simple command later in this article.

### Hot reload for React apps in docker

## Dockerizing NodeJs Application

In the same way, try to dockerize the NodeJs app.

Since React depends on NodeJs and this is a NodeJs application Dockerfile will be almost similar.

```bash
FROM node:17-alpine

# We use nodemon to restart the server every time there's a change
RUN npm install -g nodemon

WORKDIR /app

COPY package.json .

RUN npm install

COPY . .

EXPOSE 5000

# Use script specified in package,json
CMD ["npm", "run", "dev"]
```

Before you build the image you need to make a small change in `package.json`. Update the dev script. ([Why?](https://github.com/remy/nodemon#application-isnt-restarting))

```json
 "dev": "nodemon -L server.js"
```

Build the image.

```bash
docker build -t serverapp .
```

Run the image to build the container.

```bash
docker run --name serverapp_c -p 5000:5000 -v D:\Blog\blogs data\full stack mern app\tutorial\server:/app -v /app/node_modules serverapp
```

![server app running](https://i.imgur.com/7AFewpK.jpg)

- See, the server app running.

## Docker Compose

We currently have two applications that must be managed separately. If your friend wants to try your project, even with Docker, he or she will have to set up two applications, build Docker images, and do everything separately. Furthermore, the commands are lengthy. What if you could start your entire project with a single, short command? 🤯

Let me introduce you to **Docker Compose**. You can use docker-compose to define and execute numerous containers with a single command. To accomplish this, we would first create a YAML file in which we configure all of the services.

### Let's do this

### Combine the folders

Because we define both our `client` and `server` apps in a single YAML file, we must place both app directories in the same folder. So make a folder for the project and place the `client` and `server` directories in it.

Create a file called `docker-compose.yml` in the project folder. This is the folder structure:

```bash
. 
└── my-project/ 
├── client/ 
├── server/ 
└── docker-compose.yml
```

What goes in this file?

```yaml
# The version of the docker-compose.
version: "3.8"
# Telling docker-compose to build the client and server images and run them in containers.
services:
  client:
    # Telling docker-compose to build the client image using the Dockerfile in the client directory.
    build: ./client
    # Giving the container a name.
    container_name: clientapp_c
    # Mapping the port 3000 on the host machine to the port 3000 on the container.
    ports:
      - "3000:3000"
    # Mapping the client directory on the host machine to the /app directory on the container.
    volumes:
      - ./client:/app
      - ./app/node_modules
    # Allows you to run container in detached mode.
    stdin_open: true
    tty: true
  server:
    # Telling docker-compose to build the client image using the Dockerfile in the server directory.
    build: ./server
    container_name: serverapp_c
    ports:
      - "5000:5000"
    volumes:
      - ./server:/app
      - ./app/node_modules
```

- I left comments as an explanation.

## Pushing to Docker Hub

If you want people to be able to use your image, you may put docker images on docker hub and let them get it from there. Or if you are building something that can be used as base image for other projects.

1. Go to [dockerhub](https://hub.docker.com/) and sign up/log in to your account.
2. Click on **Create a Repository**.
3. Give your repo a name, and description set private or public, and then click **Create**.

![creating repository](https://i.imgur.com/uoftgC1.jpg)

4. Open the repo and terminal. Delete previous images.
5. Build new image with name `<hub-username>/<repo-name>[:<tag>]`. Tag is optional here, however, if you are pushing multiple images to the same repo, include one. (⚠️ Make sure you are in the correct directory before running the command.)

```bash
docker build -t rakeshpotnuru/productivity-app-demo:client .
```

Do the same for the server image.

```bash
docker build -t rakeshpotnuru/productivity-app-demo:server .
```

6. If this is your first time pushing, make sure you're logged in to Docker.

```bash
docker login
```

7. Push the image as the last step.

```bash
docker push rakeshpotnuru/productivity-app-demo:client
```

and

```bash
docker push rakeshpotnuru/productivity-app-demo:server
```

8. Now, if you go to your repository on the docker hub, you will see your images.

![images pushed to dockerhub](https://i.imgur.com/cip4FQ6.jpg)

9. Since these images are public, anyone can pull them and use them.

```bash
docker pull rakeshpotnuru/productivity-app-demo:client
```

## Resources

I merely scratched the tip of the iceberg. These resources can help you learn more about Docker:

- [Docker Crash Course](https://youtube.com/playlist?list=PL4cUxeGkcC9hxjeEtdHFNYMtCpjNBm3h7) playlist by **The Net Ninja**.
- [Docker Tutorial for Beginners](https://youtu.be/17Bl31rlnRM) by **Kunal Kushwaha**. (See this video for Docker theory.)

---

What do you think about Docker? Leave a comment.

---

I hope you understand why we need Docker and how to use it. Subscribe to the newsletter for more stuff like this.

Dockerizing Your MERN Stack App: A Step-by-Step Guide

I previously shared several open-source tools, productivity tools, and full-stack tools that help developers be more productive. We go even further in this article. With the rise of smartphones, most of the work that was previously done on desktop computers can now be done on smartphones. So I shared some of the best mobile apps for _developers_ to help them be more productive.

## Let's get started

## 1. [API Tester](https://apitester.org/)

![api tester mobile app](https://i.imgur.com/lAMFpbW.png)

API Tester is a powerful tool that allows you to easily test and debug your APIs from mobile. It covered most of the features of a desktop API testing application.

Main features of this app:

-   Test any type of API - REST, GraphQL, WebSocket, SOAP, etc.
-   Simply import requests and collections with cURL or files from your device. Also from other API tools like Postman, Swagger, etc.
-   You can run all requests at once, save variables for later use and integrate with Shortcuts & Widgets.
-   Learn more [here](https://apitester.org/).

Available on:
- [Play Store](https://play.google.com/store/apps/details?id=apitester.org)
- [App Store](https://apps.apple.com/us/app/api-tester-debug-requests/id1575521212)

## 2. DevBytes

![DevBytes mobile app](https://i.imgur.com/j2mg6C9.png)

As a developer, you must continually keep up with the latest technology news. Most people, however, do not have the time to research and read lengthy posts/articles/news. DevBytes researches and offers you popular computer programming news in less than **64 words**. Not only do you get news, but you can also learn new coding concepts using explainers and code samples, find job opportunities, and participate anonymously in public polls to offer your thoughts.

Available on:
- [Play Store](https://play.google.com/store/apps/details?id=com.candelalabs.devbytes)

## 3. [Macrodroid](https://www.macrodroid.com/)

![Macrodroid](https://i.imgur.com/PoVEq7a.png)
One thing that Android mobile users love about Android is freedom.  They can do whatever they want. You can accomplish even more using Macrodroid. Macrodroid is one of the greatest device automation tools for Android. You can auto-skip YouTube advertisements, auto-swipe in TikTok, do something when anything happens, and the possibilities are unlimited.

Available on:
- [Play Store](https://play.google.com/store/apps/details?id=com.arlosoft.macrodroid)

## 4. [Expo Go](https://expo.dev/client)

![Expo Go](https://i.imgur.com/RmATHUz.png)

Expo Go will be really useful if you are a React Native developer or want to study React Native. Rather than installing Android Studio and configuring everything locally for development. Simply utilize Expo Go to see live changes and effortlessly share your project with everyone. Simply create a react-native project with expo configurations, scan the QR code from the terminal, and you're done. The project will be accessible via the Expo Go mobile app. Any code changes you make will be reflected immediately on Expo Go.

Available on:
- [Play Store](https://play.google.com/store/apps/details?id=host.exp.exponent)
- [App Store](https://itunes.apple.com/app/apple-store/id982107779)

## 5. [Replit](https://replit.com/)

![Replit](https://i.imgur.com/SEEmxSg.png)
Code from anywhere and do everything you'd normally do on a desktop, such as coding the entire project, sharing, and hosting. Everything is done through your phone. Replit includes everything you need to develop your project, including CPU, storage, and RAM. You can interact with the terminal, have a file system, and more.

Available on:
- [Play Store](https://play.google.com/store/apps/details?id=com.replit.app)
- [App Store](https://apps.apple.com/us/app/replit-code-anything/id1614022293)

---

There are thousands of mobile apps available that boost developer productivity. I simply provided some that I utilize. As a developer, what is your favorite mobile app? Please share in the comments.

Top Mobile Apps for Developers: Boost Your Productivity

It was the 18th of October 2021, and I published [my first article](https://dev.to/itsrakesh/how-to-compile-different-languages-source-code-files-a7g) on dev.to. I literally have no idea how to write a technical article then. But I kept doing it learning from other tech writers. Since then, I had an amazing experience with writing. In this article, I'm going to share my journey, how writing helped me, tips to help you get started writing, and more.

## Let's get started

## How it Started - Inspiration & Motivation

![well well well gif](https://i.imgur.com/Vwpb9vu.gif)

To be honest, the reason why I got into writing is due to both influence and my own reasons. I wanted to start writing to establish an online presence and hone my skills. And then there were some great people in tech who always advised that every developer should write. So, I'm like, "Why don't I give it a try?". That's the best decision in my life.

What motivated me to keep writing? - Since that day, I've challenged myself to write an article every week (or 4 per month). I used to get zero reactions and maybe 10-20 views at first, but I didn't mind because I was writing for myself. Then, thanks to dev.to 🙏, they helped me by sharing my articles on their social media platforms. People gradually began to enjoy my articles, which kept me motivated.

> Whatever inspired me to begin writing, I have no regrets!

## Opportunities I Got Along the Way

Writing is an endless journey. The benefits accrue along the way, rather than at the end (actually there is no end). One thing to remember is that you should never expect anything in return for your contribution. Be happy with whatever you receive. Spoiler alert: There will always be potential benefits.

Here are some great opportunities I got:

- Author at freeCodeCamp - Millions of people read the articles on freeCodeCamp. I am honored to be able to contribute to the [freeCodeCamp publication](https://www.freecodecamp.org/news/). I write whenever I have time.
Read my articles: [freecodecamp.org/news/author/rakesh](https://www.freecodecamp.org/news/author/rakesh)
- Creator at Aviyel - [Aviyel](https://aviyel.com/) supports the growth of Open Source communities. I've contributed to a few Open Source projects by writing articles.
Read them [here](https://aviyel.com/search?term=itsrakesh&root=blog).
- Freelance opportunities - Received a lot of long-term freelance writing opportunities from Ed-Tech startups and various companies.
Read them [here](https://blog.itsrakesh.co/external-articles).
- Collaborations - So far, I've received more than ten paid collaboration offers.

> “Its the not the destination, it’s the journey.”

## Achievements

- Got nominated for Noonies awards - The Noonies are HackerNoon's annual tech awards. This year (2022), I received nominations in three categories for the first time: 1) [HACKERNOON CONTRIBUTOR OF THE YEAR- MONGODB](https://www.noonies.tech/2022/programming/2022-hackernoon-contributor-of-the-year-mongodb), 2) [HACKERNOON CONTRIBUTOR OF THE YEAR- API](https://www.noonies.tech/2022/programming/2022-hackernoon-contributor-of-the-year-api) and 3) [NO NO NO NODEJS](https://www.noonies.tech/2022/programming/2022-no-no-no-nodejs). Unfortunately, I did not win 😔. But being nominated and finishing second in two categories was a huge accomplishment for me.
- Became one of the [top contributors](https://www.freecodecamp.org/news/freecodecamp-2022-top-contributors/) in freeCodeCamp News publication.

![top contributor](https://i.imgur.com/zC36Num.png)

- Few articles got featured on [Daily.dev](https://daily.dev/)

![articles featured on daily.dev](https://i.imgur.com/eFQ4PsS.png)


## My Top 10 Articles

These are the top 10 articles loved by my readers.

1. [Web design principles with examples](https://blog.itsrakesh.co/web-design-principles-1p2k)
2. [Best productivity tools for web developers](https://blog.itsrakesh.co/best-productivity-tools-for-web-developers-1e7g)
3. [How I built my portfolio website](https://blog.itsrakesh.co/how-i-built-my-portfolio-website)
4. [Auto-generate your NodeJs app + Admin-UI 😳](https://blog.itsrakesh.co/auto-generate-your-nodejs-app-admin-ui)
5. [Web 2.0 architecture Vs Web 3.0 architecture](https://blog.itsrakesh.co/web-20-architecture-vs-web-30-architecture)
6. [8 best opensource projects you should try out](https://blog.itsrakesh.co/8-best-opensource-projects-you-should-try-out)
7. [[PART 2] 8 best open source projects you should try out](https://blog.itsrakesh.co/part-2-8-best-open-source-projects-you-should-try-out)
8. [Let’s learn, build and sell an API](https://blog.itsrakesh.co/lets-learn-build-and-sell-an-api)
9. [Most active Developer Communities you should join in 2022](https://blog.itsrakesh.co/most-active-developer-communities-you-should-join-in-2022)
10. [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)

## Stats

Do you like numbers? I got you!

- Total words were written - 89,180
- Views (all platforms combined) - 265,453

## My Tips

- Everyone should write, no matter what their background is. 
- Don't worry about grammar or fancy words; devs don't mind as long as the meaning is clear. Honestly, with the tools like _Quillbot_ and _Grammarly_ this won't be a problem for you.
- I didn't wait for the perfect moment to begin writing. 
- No one will criticize you, and everyone is free to express their views.
- Think about creating value over gaining views and likes.
- Quality > Quantity

## Whom to follow

Follow the right people. There will be a lot of clickbait people copying top posts. These people may have thousands of followers, but that does not make them valuable.

Some people I recommend following to be a better writer:

- [@getpaidwrite](https://twitter.com/getpaidwrite) - Username might seem clickbaity 😜, but content is outstanding.
- [@david_perell](https://twitter.com/david_perell)
- [@rakesh_at_tweet](https://twitter.com/rakesh_at_tweet) - I also share my thoughts and opinions about writing.

Some great writers in tech:

- [Victoria Lo](https://twitter.com/lo_victoria2666)
- [Tapas Adhikary](https://twitter.com/tapasadhikary)

## What's next?

In just one year, I've accomplished a lot. I'm looking forward to all of the opportunities that will come my way in the future. As you are aware, writing is an endless journey, and I intend to continue writing for as long as I am able. I've been not able to write much for the last few months due to offline college for the first time, now I set my priorities and will try to be consistent again.

## A Big Thank You

None of this is possible without your constant support 🙏. It's because of you I never gave up. It's you that made all my efforts worth it.

![thank you](https://i.imgur.com/UgtdgNd.png)

One Year of Writing: A Look Back and a Look Forward

Post requests are the most common types of requests that we perform on the internet and it is very useful in our day-to-day work life. These methods are those which are used to transfer data from a web browser to the server. In this article, I will teach you how to test post requests using API Tester mobile app.

## Let's get started

## What is API Tester?

Smartphones are becoming smarter all the time, and their use is increasing. Developers are now figuring out how to make their lives easier with smartphones. There are already many mobile apps available that eliminate the need for desktops/laptops for minor tasks. **Termius**, for example, is a popular SSH client that allows you to connect to servers while on the go from your mobile device.

![API tester logo](https://i.imgur.com/qLJMQzR.png)

[**API Tester**](https://apitester.org/) is a mobile app that allows you to test APIs without requiring a PC. (Available on [App Store](https://apps.apple.com/us/app/api-tester-debug-requests/id1575521212), [Play Store](https://play.google.com/store/apps/details?id=apitester.org) & [AppGallery](https://appgallery.huawei.com/app/C107072573))

![api tester mobile app](https://i.imgur.com/lAMFpbW.png)

Main features of this app:

- Test any type of API - REST, GraphQL, WebSocket, SOAP, etc.
- Simply import requests and collections with cURL or files from your device. Also from other API tools like Postman, Swagger, etc.
- You can run all requests at once, save variables for later use and integrate with Shortcuts & Widgets.
- Learn more [here](https://apitester.org/)

## Types of POST Requests and How to Test Them with API Tester?

We are going to use [JSONPlaceholder](https://jsonplaceholder.typicode.com/) API for this tutorial. JSONPlaceholder is a free API for testing purposes.

> **Note:**
> This API does not support file upload test requests or XML as a body type. As a result, only use the sections below as a guide.

### POST with JSON Data

This type of POST request is used when you have JSON data that needs to be sent to the server. For example, if you want to create an account on your website and store the user's name, email address, and password in their database, then this is the right type of test for you. You can also use this type of test if you want to update an existing record in a database or send feedback to your customer service team.

#### application/json

Sending JSON data to your server is done by sending a POST request with the Content-Type: application/json header. This tells the server that you’re sending JSON data and it should be processed accordingly.

- Open the API Tester mobile app and tap the **New Request** or **+** icon in the top-right corner.

![create new request](https://i.imgur.com/R58rrGZ.png)

- You can rename your request by tapping **...** in the top-right corner -> **Rename**.

![rename request](https://i.imgur.com/gYBVFAA.png)

- Enter the request URL. Select **Raw** in the **Body** section. Then, ensure that **Content Type** is set to **application/json**.

![enter url and select raw](https://i.imgur.com/RCCu8pL.png)

- Tap **Post Data** to write data in JSON format, then close the window by tapping the **X** in the top-right corner.

![write json data](https://i.imgur.com/JVI5XKP.png)

- It is now time to send the request. To do so, tap the run button in the upper-right corner.

![send request](https://i.imgur.com/HYhvwsX.png)

- Following that, you can view the response in the **Response** tab. This **Response** tab displays the response as well as the status code, response time, and response size 🤩.

![response](https://i.imgur.com/IfS10bY.png)

- By tapping on those metrics, you can also see response headers.

### POST with Form Data

This type of POST request is used when you have form data that needs to be sent as part of your request. For example, when someone makes a purchase on your website and wants to submit their credit card information through a form with name/value pairs such as "Name" = "John Smith", "Card Number" = "24653354689", etc., then this type of test will let you simulate that behavior accurately (assuming your form has those specific fields).

#### send a form

The POST request with form data is used when you need to send a form as part of your request. This type of test will allow you to simulate that behavior accurately (assuming your form has the appropriate fields).

- In the **Body** section, select **FormData**. Then tap **Add Param** and select **Text**.

![form data](https://i.imgur.com/x3hmuqe.png)

#### upload a file

When you need to upload a file as part of your request, this test will let you simulate that behavior accurately.

- To upload a file, repeat the above steps but select **File** instead of **Text**. Then you can browse your mobile file system for files.

### POST with URL encoded (application/x-www-form-urlencoded)

When you need to POST data encoded as application/x-www-form-urlencoded, then this type of test will let you simulate that behavior accurately. This is common when sending data from a form on an HTML page or other client-side technology.

This is similar to **FormData** except that you cannot upload files and the data is URL encoded.

- Simply select the **URLEncoded** option in the **Body** section to start using it.

### POST with XML

When you need to POST data encoded as XML, this test will let you simulate that behavior accurately.

- To send XML data, select **application/xml** as the **Content Type** with **Raw** as the **Body** type. Then enter XML data in the **Post Data** window.

![xml as body](https://i.imgur.com/6SkZMkg.png)

### POST with file upload (binary request)

This method can be used to test POST requests with binary file attachments. This is a good option if your request body requires a binary file. The disadvantages of this type are that you can only send one file per request and no other data can be sent with it.

- Select **Binary** from the **Body** section and then select and upload a file from your mobile file system.

![file upload](https://i.imgur.com/6VWU8mk.png)

## Global variables

Values are sometimes used repeatedly. For example, the same base URL in each request, API keys, and so on. What if we could create once and reuse these values elsewhere? Here is where global variables come into play. We can define variables once and then use them wherever they are needed.

Let's see how it works. Assume we use the same base URL in each request. This base URL can be saved in a global variable and later used in our requests.

- Tap on **...** on top -> **Global Variables**.

![global variables](https://i.imgur.com/KnU3lFz.png)

- Tap **Add Variable**. Fill in the variable name in the **key** field (for example, `baseURL`) and the value in the **value** field.

![add variable](https://i.imgur.com/YNTsVOm.png)

- Open any request and replace `https://jsonplaceholder.typicode.com` with `{{baseURL}}`.

![use variable](https://i.imgur.com/XwB97lP.png)

## Conclusion

API Tester is a great tool for testing API requests, as it can easily test every type of request that a desktop API tool could perform. In this article, we looked at different types of POST requests and how to run them through API Tester. If you find yourself making many POST requests to third-party APIs using cURL or collections from other API tools, there may be a better way to test your endpoints using API Tester.

All types of POST Requests with API Tester mobile app

Only by writing tests can you understand the significance of testing. No coding Bootcamp or course, as far as I know, teaches you how to write tests. Writing tests may not be necessary for demo projects or coursework projects, but it is critical for real-world applications. So, in this **Part 3** of the "[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)" series, I'll demonstrate how to write tests for ReactJs components and ExpressJs RESTAPI.

## Let's get started

## What is testing?

During the testing stage of software development, the application's actual outcomes are compared to those that were expected. Before deploying your application, this phase is used to ensure that everything is functioning as it should. Beginner developers frequently believe that writing tests are a time-consuming and unimportant process. But they are ignorant of the fact that testing actually buys you a lot of time in the long run. You can think of testing as a one-time investment.

Software development uses a variety of testing methods, including Unit Testing, Integration Testing, Beta Testing, Regression Testing, and others. We will learn about **Unit Testing** in this lesson and how to create tests for applications built with ReactJs and NodeJs.

## What is Unit Testing?

As the name implies, unit testing involves testing individual pieces of code or an application. For instance, in REST API, we are able to create distinct tests for each endpoint, and in a ReactJs application, we can test each component separately.

Let's begin creating tests for our "Productivity Tracker" application. (If you don't know what this is, read the previous article - [Adding Authentication to full stack MERN web application](https://blog.itsrakesh.co/adding-authentication-to-full-stack-mern-web-application))

## Writing tests in NodeJs application with Jest and SuperTest

>Note: I recommend setting up a separate database for testing purposes. But for this tutorial, it's not necessary.

### Step 1: Separate application and server

First, we have to separate the server from the application because we are using SuperTest to test the application, not the server.

So create an `app.js` file in the root and paste this code.

```javascript
const express = require("express");
const cors = require("cors");

const ActivityRouter = require("./routes/activity.route");
const AuthRouter = require("./routes/auth.route");

const app = express();

/* Telling the application to use the express.json() middleware. This middleware will parse the body of
any request that has a Content-Type of application/json. */
app.use(express.json());

/* Allowing the frontend to access the backend. */
app.use(cors());

/* This is a route handler. It is listening for a GET request to the root route of the application.
When it receives a request, it will send back a response with the string "Hello World!". */
app.get("/", (req, res) => {
  res.send("Hello World!");
});

/* Telling the application to use the ActivityRouter for any requests that start with "/api". */
app.use("/api", ActivityRouter);

/* Telling the application to use the AuthRouter for any requests that start with "/api/auth". */
app.use("/api/auth", AuthRouter);

module.exports = app;
```

... and in `server.js`.

```javascript
const express = require("express");
const mongoose = require("mongoose");

const app = require("./app");

/* Loading the environment variables from the .env file. */
require("dotenv").config();

const PORT = process.env.PORT || 5000;
const MONGODB_URI = process.env.MONGODB_URI || "mongodb://localhost/todoapiDB";

/* Connecting to the database and then starting the server. */
mongoose
  .connect(MONGODB_URI, { useNewUrlParser: true })
  .then(() => {
    app.listen(PORT, console.log("Server stated on port 5000"));
  })
  .catch((err) => {
    console.log(err);
  });
```

### Step 2: Install packages

To start writing tests, you need three npm packages: `jest`, `supertest`, and `cross-env`.

```bash
npm i --save-dev jest supertest cross-env
```

**jest**: Jest is a framework for testing JavaScript code. Unit testing is its main usage of it.
**supertest**: Using Supertest, we can test endpoints and routes on HTTP servers.
**cross-env**: You can set environmental variables inline within a command using cross-env.

### Step 3: Add test script

Open your `package.json` file and add the test script to the scripts.

```json
"scripts": {
    "test": "cross-env NODE_ENV=test jest --testTimeout=5000",
    "start": "node server.js",
    "dev": "nodemon server.js"
},
```

In this case, `testTimeout` is set to `5000` because it's possible for certain requests to take a while to complete, and `cross-env` is being used to set environment variables and `jest` to run test suites.

### Step 4: Start writing tests

First, create a folder called `tests/` at the application's root, and then create a file there called `activity.test.js`. Jest searches for the folder `tests/` at the project's root when you do `npm run test`. As a result, you must place your test files in the `tests/` folder.

Next, import the `supertest` and `mongoose` packages into the test file.

```javascript
const mongoose = require("mongoose");
const request = require("supertest");
```

Import `dotenv` to load environment variables, and import `app.js` as that is where our application starts.

```javascript
const mongoose = require("mongoose");
const request = require("supertest");

const app = require("../app");

require("dotenv").config();
```

You'll need to connect and disconnect the database before and after each test (because we don't require the database once testing is complete).

```javascript
/* Connecting to the database before each test. */
beforeEach(async () => {
  await mongoose.connect(process.env.MONGODB_URI);
});

/* Closing database connection after each test. */
afterEach(async () => {
  await mongoose.connection.close();
});
```

Now write your first unit test.

```javascript
describe("GET /api/activities", () => {
  it("should get all the activities", async () => {
    const token = await request(app).post("/api/auth/login").send({
      email: process.env.EMAIL,
      password: process.env.PASSWORD,
    });

    const response = await request(app)
      .get("/api/activities")
      .set({
        Authorization: "bearer " + token.body.token,
        "Content-Type": "application/json",
      });

    expect(response.statusCode).toBe(200);
    expect(response.body.length).toBeGreaterThan(0);
  });
});
```

In the above code,

- We use `describe` to describe the unit test. Even though it is not required, it will be useful to identify tests in test results.
- In `it`, we write the actual test code. Write the expected result in the first argument, and then in the second argument, write a callback function that contains the test code.
- In the callback function, the request is sent to the endpoint first, and the expected and actual responses are then compared. The test passes if both answers match, else, it fails.

>Note: Since we have authenticated routes in our application, we need to get the token by logging in to the application and using that token to access the route.

You can write tests for all the endpoints in the same manner.

```javascript
describe("POST /api/activity", () => {
  it("should add an activity to the database", async () => {
    const token = await request(app).post("/api/auth/login").send({
      email: process.env.EMAIL,
      password: process.env.PASSWORD,
    });

    const response = await request(app)
      .post("/api/activity")
      .send({
        name: "Jogging",
        time: "3:00 PM",
      })
      .set({
        Authorization: "bearer " + token.body.token,
        "Content-Type": "application/json",
      });

    expect(response.statusCode).toBe(201);
  });
});
```

Then run `npm run test` to run the test suites (suite - test file).

![test results](https://i.imgur.com/To2e3Ab.png)

## Writing tests in ReactJs application with React Testing Library

In the same way, let's write tests for React applications. For this, we will be using [React Testing Library](https://testing-library.com/).

>The [`@testing-library`](https://www.npmjs.com/org/testing-library) family of packages helps you test UI components in a user-centric way.

### Step 1: Install packages

To start writing tests in React, you need React Testing Library. But these packages come pre-installed with _create-react-app_ (CRA). If you haven't used CRA you can install them like this.

```bash
npm install --save-dev @testing-library/react @testing-library/jest-dom @testing-library/user-event
```

### Step 2: Create test files

It's a good practice to create a test file for every component.

We have 2 components that need to be tested - `<App />` and `<Login />`. So create `App.test.js` and `Login.test.js` in the `src/` folder. **But for now create only the `App.test.js` file.**

### Step 3: Start writing tests

Write your first test.

In the `App.jsx` file add the `data-testid={"app-header-heading"}` attribute to the main heading element. Later, while writing tests we can refer to this element with this id.

```html
<h1 data-testid="app-header-heading">Productivity Tracker</h1>
```

Now, open the `App.test.js` file and paste the below code.

```javascript
import { render, screen } from "@testing-library/react";

import App from "./App";

/* This is a test that is testing the App component. 
 * It is testing that the heading is correct. */
describe("App", () => {
  it("should have exact heading", () => {
    /* Rendering the App component. */
    render(<App />);

    /* Getting the element with the test id of "app-header-heading". */
    const mainHeading = screen.getByTestId("app-header-heading");

    /* Checking that the innerHTML of the element with the test id of "app-header-heading" is equal to
    "Productivity Tracker". */
    expect(mainHeading.innerHTML).toBe("Productivity Tracker");
  });
});
```

In the above code,

- We first imported the required packages - `render` and `screen` from `@testing-library/react` and then imported the component that needs to be tested.
- To describe the unit test, we use the same syntax as in express. Most React developers, by convention, put the component name in the first argument. The actual test is written as a callback function in the second argument.
- In `it`, we write the actual test code. Write the expected result in the first argument, and then in the second argument, write a callback function that contains the test code.
- Rest of the code is self-explanatory and you can also understand from the comments. We are expecting the App component should contain a heading called "Productivity Tracker".

This is the general flow of writing a test for a React component:

- Render the component -> Write elements you want to interact with -> Interact with those elements -> Assert that the outcomes are as expected.

Now run the `npm test` command. You will see the results.

![App component test results](https://i.imgur.com/YsivONe.png)

Please refer to official docs to learn more about React Testing Library and write your own tests.

---

As a challenge, try to implement the "Add activity" flow.
In the next article, we will learn some DevOps stuff.

---

Also read,

- Part 1: [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)
- Part 2: [Adding Authentication to full stack MERN web application](https://blog.itsrakesh.co/adding-authentication-to-full-stack-mern-web-application)

Feel free to ask your doubts in the comments.

How to write tests in full-stack MERN web application

This article is part 2 of "[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)". In that tutorial, we created an application called **Productivity Tracker** that allows you to log your daily activities. However, there is a problem with our app. Can you figure it out 👀? Your hint is in the title of this article. In this tutorial, let's see the problem and how to tackle it.

## Let's get started
⚠️ **Warning:** _Authentication used in this tutorial is not secure. I don't recommend using this authentication method for real projects._
### The Problem

Since your application is currently available online, anyone can use it and add activities to your database. That is not good, is it? Here, authentication steps in to save the day. To prevent unauthorized access to your app, add authentication.

![authenticate](https://i.imgur.com/zC7aHTo.png)

## Adding Authentication

We had to develop front-end and back-end authentication separately because we separated the two. Once more, for the sake of simplicity, we'll build basic authentication without the use of any libraries.

### Backend authentication
We need to implement backend authentication and authorize some routes.

#### Authentication vs Authorization

These two words can be confusing to you. **Authentication** is allowing someone with credentials to access our application and **Authorization** is giving access to resources to authorized people. 

![authentication vs authorization](https://i.imgur.com/XLQMJqX.png)

In our scenario, authorization grants access to resources like creating activities and fetching activities whereas authentication entails logging into the application.

#### Introduction to JWT

> JSON Web Token (JWT) is a compact URL-safe means of representing claims to be transferred between two parties. The claims in a JWT are encoded as a JSON object that is used as the payload of a JSON Web Signature (JWS) structure or as the plaintext of a JSON Web Encryption (JWE) structure, enabling the claims to be digitally signed or integrity protected with a Message Authentication Code (MAC) and/or encrypted.

In simple terms, JWT is used is to verify that the user has permission to perform an action.

Let's implement **login authentication** with JWT.

Since you are the only person using your application you don't need a signup functionality and you can store `EMAIL` and `PASSWORD` in the `.env` file.

- Open the `.env` file and add these three variables.

```bash
TOKEN_KEY=somesecrettoken
EMAIL=youremail
PASSWORD=yourpassword
```

_Here `TOKEN_KEY` can be any random string. It is used by JWT._

- Open up a terminal and install the `jsonwebtoken` package.

```bash
npm i jsonwebtoken
```

- Open `controllers` folder and create `auth.controller.js` file. Copy and paste the below code.

```javascript
const jwt = require("jsonwebtoken");

require("dotenv").config();

const EMAIL = process.env.EMAIL;
const PASSWORD = process.env.PASSWORD;

/* If the email and password are correct, then return a token. */
const login = (req, res) => {
  /* Destructuring the email and password from the request body. */
  const { email, password } = req.body;

  if (email === EMAIL && password === PASSWORD) {
    /* Creating a token. */
    const token = jwt.sign({ email }, process.env.TOKEN_KEY, {
      expiresIn: "2h",
    });
    return res.status(200).json({
      statusCode: 200,
      msg: "Login successful",
      token,
    });
  }
  return res.status(401).json({
    statusCode: 401,
    msg: "Invalid Credentials",
  });
};

module.exports = {
  login,
};
```

The code above checks to see if the email address and password match, and if they do, it generates a token and sends it to the front end to implement front-end authentication.

- Open the `routes` folder create `auth.routes.js` and register a new route for login.

```javascript
const express = require("express");

const { login } = require("../controllers/auth.controller");

const router = express.Router();

router.post("/login", login);

module.exports = router;
```

- Lastly, in `server.js`, use the registered route.

```javascript
...
const AuthRouter = require("./routes/auth.route");
...

...
app.use("/api/auth", AuthRouter);
...
```

We successfully implemented authentication. Now only authenticated people can access our application. But authenticated people can still access our resources and add activities because we haven't authorized those routes.

Let's create a middleware to authorize these routes.
```bash
GET /api/activities

POST /api/activity
```

- In the project root, create a folder called `middleware`, and in that folder create the `auth.js` file. Copy and paste the below code.

```javascript
const jwt = require("jsonwebtoken");

require("dotenv").config();

/* It checks if the token is valid and if it is, it decodes it and attaches the decoded token to the request object */
const verifyToken = (req, res, next) => {
  const token = String(req.headers.authorization)
    .replace(/^bearer|^jwt/i, "")
    .replace(/^\s+|\s+$/gi, "");

  try {
    if (!token) {
      return res.status(403).json({
        statusCode: 403,
        msg: "A token is required for authentication",
      });
    }
    /* Verifying the token. */
    const decoded = jwt.verify(token, process.env.TOKEN_KEY);
    req.userData = decoded;
  } catch (err) {
    return res.status(401).json({
      statusCode: 401,
      msg: "Invalid Token",
    });
  }
  return next();
};

module.exports = verifyToken;
```

We created a middleware function called `verifyToken()` to verify the token sent by the front end through the header. If verification is successful then the user can access the above routes.

- Now open `activity.route.js` and modify the code like this.

```javascript
...
router.get("/activities", auth, getActivities);

router.post("/activity", auth, addActivity);
...
```

That's it! Backend authentication is done 🎉.

### Frontend authentication

It's time to implement front-end authentication.

- First, let's create a login page.
- In `src` folder create `Login.jsx` and `Login.css` files. Copy and paste the below code in `Login.jsx` file and use [this](https://github.com/itsrakeshhq/productivity-app/blob/main/client/src/Login.css) in `Login.css`.

```javascript!
import React from "react";

import "./Login.css";

const Login = () => {
  /* When the user submits the form, prevent the default action, grab the email and password from the form, send a POST request to the backend with the email and password, and if the response is successful, store the token in local storage and reload the page. */
  const handleSubmit = async (event) => {
    event.preventDefault();
    const { email, password } = event.target;

    const response = await fetch(
      `${process.env.REACT_APP_BACKEND_URL}/auth/login`,
      {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          email: email.value,
          password: password.value,
        }),
      }
    );

    const data = await response.json();
    localStorage.setItem("token", data.token);
    window.location.reload();
  };

  return (
    <div className="login">
      <h1>Login</h1>
      <form onSubmit={handleSubmit}>
        <span>
          <label htmlFor="email">Email:</label>
          <input type="email" id="email" name="email" />
        </span>
        <span>
          <label htmlFor="password">Password:</label>
          <input type="password" id="password" name="password" />
        </span>
        <button type="submit">Login</button>
      </form>
    </div>
  );
};

export default Login;
```

This will render the login page.

![login page](https://i.imgur.com/oLYR4UN.png)

The `handleSubmit()` gets the email and password from the form, makes a `POST` request, and sends email and password values for verification. After that server verifies and sends back a token that we can use to access resources.

Here we are using [`localStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) to store the value in the browser permanently so that we won't get logged out after closing the application or browser.

- Open the `index.js` file and add this logic. If there is a token in `localStorage` render `App.jsx` otherwise `Login.jsx`.

```javascript
...
const token = localStorage?.getItem("token");

root.render(
    <React.StrictMode>
    {token ? <App /> : <Login />}
    </React.StrictMode>
);
...
```

- Now in the `App.jsx` file, we need to send `token` through the header, so that backend will verify it and gives access to the routes.

```javascript
...
useEffect(() => {
    const fetchData = async () => {
      const result = await fetch(
        `${process.env.REACT_APP_BACKEND_URL}/activities`,
        {
          headers: {
            Authorization: `Bearer ${token}`, // <----------- HERE
          },
        }
      );
      const data = await result.json();
      setActivities(data);
    };
    fetchData();
}, [token]);
...

...
const addActivity = async (event) => {
    event.preventDefault();

    const newActivity = {
      name: event.target.activity.value,
      time: event.target.time.value,
    };

    await fetch(`${process.env.REACT_APP_BACKEND_URL}/activity`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Authorization: `Bearer ${token}`, // <---------- HERE
      },
      body: JSON.stringify(newActivity),
    });

    event.target.activity.value = "";
    event.target.time.value = "";
    window.location.reload();
};
...
```

Done ✅! We implemented both frontend and backend authentication. Now only you can access your application 🥳 (as long as you don't share your credentials 👀).

Source code: [productivity-app](https://github.com/itsrakeshhq/productivity-app)

---

In the next article, we will learn how to write tests for frontend and backend 😍.

---

Follow for more 💯.

What you want to read?