
## Introduction

[Wasp](https://wasp-lang.dev/) is a full-stack web framework built to provide a modern take on a Rails-like development experience. Built on top of React, Node.js, and Prisma, Wasp provides the components and structure you need to create well-architected, and feature-rich web experiences.

In this tutorial, we will show how to create and deploy a Wasp application to Koyeb. The application will consist of a server component and a frontend and will be backed by a PostgreSQL database. We will use a Dockerfile to define containers for the two application layers and deploy them using Koyeb's [Dockerfile build feature](/docs/build-and-deploy/build-from-git#the-dockerfile-build-process).

You can consult the [repository for this guide](https://github.com/koyeb/example-wasp) to follow along on your own. You can deploy the Wasp server process by clicking the [Deploy to Koyeb button](/docs/build-and-deploy/deploy-to-koyeb-button) below:

[![Deploy to Koyeb](https://www.koyeb.com/static/images/deploy/button.svg)](https://app.koyeb.com/deploy?name=example-wasp-server&type=git&repository=koyeb%2Fexample-wasp&branch=main&builder=dockerfile&target=server-production&instance_type=nano&env%5BDATABASE_URL%5D=CHANGE_ME&env%5BJWT_SECRET%5D=CHANGE_ME&env%5BWASP_SERVER_URL%5D=CHANGE_ME&env%5BWASP_WEB_CLIENT_URL%5D=CHANGE_ME&ports=8000%3Bhttp%3B%2Fapi)

Be sure to modify all of the environment variable values to reflect your own data. You can consult this guide if you need additional information on appropriate values.

Once the server is deployed, you can deploy the frontend with the following deploy button:

[![Deploy to Koyeb](https://www.koyeb.com/static/images/deploy/button.svg)](https://app.koyeb.com/deploy?name=example-wasp-web-app&type=git&repository=koyeb%2Fexample-wasp&branch=main&builder=dockerfile&target=web-app-production&instance_type=nano&env%5BREACT_APP_API_URL%5D=CHANGE_ME&ports=8000%3Bhttp%3B%2F)

Again, be sure to modify the environment variable configuration to match your information.

## Requirements

To successfully follow and complete this guide, you need:

- A [Koyeb account](https://app.koyeb.com) to provision the PostgreSQL database and to build and deploy the Wasp application components.
- [Node.js](https://nodejs.org/en/download) and the `npm` package manager installed on your local computer.

## Steps

To complete this guide and deploy a Wasp application, you'll need to follow these steps:

1. [Install Wasp on your local computer](#install-wasp-on-your-local-computer)
2. [Create a new Wasp project](#create-a-new-wasp-project)
3. [Provision a PostgreSQL database on Koyeb](#provision-a-postgre-sql-database-on-koyeb)
4. [Configure the Wasp project to use the PostgreSQL database](#configure-the-wasp-project-to-use-the-postgre-sql-database)
5. [Create a Dockerfile](#create-a-dockerfile)
6. [Push the project to GitHub](#push-the-project-to-git-hub)
7. [Deploy the Wasp backend service to Koyeb](#deploy-the-wasp-backend-service-to-koyeb)
8. [Deploy the Wasp web app to Koyeb](#deploy-the-wasp-web-app-to-koyeb)

## Install Wasp on your local computer

To get started, you'll need to install Wasp on your local computer.

You can download and run the installation script by typing the following. This guide was written to target Wasp version `v0.13.2`. If you are using a different version of Wasp, the functionality and specifically the [Dockerfile creation process](#create-a-dockerfile) may be different:

```bash
curl -sSL https://get.wasp-lang.dev/installer.sh | sh -s -- --version 0.13.2
```

The installation script will download the given Wasp release and install it on your system. You may be prompted to modify one of your shell configuration files to add the Wasp installation directory to your `PATH`.

You can check that the installation was successful by typing:

```bash
wasp version
```

The output should tell you the current version information and provide instructions on how to upgrade or switch to a different version if desired.

## Create a new Wasp project

Now that the Wasp CLI is installed, you can use it to create a new project. We will use a [todo app starter template](https://wasp-lang.dev/docs/project/starter-templates#todo-app-w-typescript) for our project so that we can show how to deploy an application with a database, frontend, and backend.

Create a new project from the template by typing:

```bash
wasp new example-wasp -t todo-ts
```

Navigate into the newly generated project directory and follow the instructions to run the database migrations on the new application:

```bash
cd example-wasp
wasp db migrate-dev
```

It will indicate that the database file cannot be found and create a new one. You may be prompted to enter a name for the new migration.

Once the database is initialized, start the development server by typing:

```bash
wasp start
```

Wasp will build the project and serve it using a basic web server. If you navigate to `http://localhost:3000` in your web browser, you will be redirected to the application's login page. Click the link to sign up for a new account and enter account details. Once authenticated, you'll be taken to a basic todo list application.

If, instead, you navigate to `http://localhost:3001`, you can access the server process.

Press <kbd>CTRL</kbd>-<kbd>C</kbd> to stop the development server when you are finished.

## Provision a PostgreSQL database on Koyeb

Wasp uses a local SQLite during development as a quick and easy way to get started without much overhead. However, for production deployments, Wasp requires a PostgreSQL database. We will use [Koyeb's PostgreSQL service](https://www.koyeb.com/docs/databases) which includes a free tier that we can use to get started.

To deploy a new PostgreSQL database, on the **Overview** tab of the [Koyeb control panel](https://app.koyeb.com/), click **Create Database Service**. Choose a name for the service and choose the region closest to you or your users.

Once the database is provisioned, click the **copy icon** associated with `psql` to save the connection details for later.

## Configure the Wasp project to use the PostgreSQL database

Now that we have an external PostgreSQL database, we can modify our project configuration to use it.

Start by creating an environment file to store the database credentials. The server process is the only component that needs to access the database. It automatically consults variables stored in a `.env.server` file.

Create a `.env.server` file and set `DATABASE_URL` to the connection string you copied from the Koyeb database. Append `?ssl_mode=require` to the end of the connection string since the database requires a secure connection:

```env /<YOUR_DATABASE_CONNECTION_STRING>/
DATABASE_URL=<YOUR_DATABASE_CONNECTION_STRING>?ssl_mode=require
```

Next, open the `main.wasp` file in your project root. In the main `app` configuration, add a `db` key to set the database type to PostgreSQL:

```javascript
app exampleWasp {
  db: {  // [!code ++]
    system: PostgreSQL,  // [!code ++]
  },  // [!code ++]
  wasp: {
    version: "^0.13.0"
  },
  title: "example-wasp",

  auth: {
    userEntity: User,
    methods: {
      usernameAndPassword: {}, // This is a very naive implementation, use 'email' in production instead
      //google: {}, // https://wasp-lang.dev/docs/integrations/google
      //gitHub: {}, // https://wasp-lang.dev/docs/integrations/github
      //email: {} // https://wasp-lang.dev/docs/guides/email-auth
    },
    onAuthFailedRedirectTo: "/login",
  }
}

. . .
```

Remove the existing SQLite migrations and reset the development environment by running `wasp clean`:

```bash
rm -r migrations/
wasp clean
```

Now, rerun the migrations against the PostgreSQL database. Wasp will connect using the details found in the `.env.server` file:

```bash
wasp db migrate-dev
```

Once the migration is complete, you can restart the development server to confirm that everything still functions as expected with PostgreSQL:

```bash
wasp start
```

Again, visit `http://localhost:3000` in your web browser to access the frontend and `http://localhost:3001` to connect to the server process.

Press <kbd>CTRL</kbd>-<kbd>C</kbd> to stop the development server when you are finished.

## Create a Dockerfile

To deploy Wasp to Koyeb, we'll need to build two container images, one with the API backend and another for the static files that serve as the frontend.

Wasp includes a `wasp dockerfile` command that generates a `Dockerfile` automatically that can be used to package build artifacts into a container image. Unfortunately, this process requires you to build the project before you can use the `Dockerfile` and we do not want to store our build output in version control.

Koyeb can build container images from a `Dockerfile` during the deployment process, so we will create our own `Dockerfile` based on the generated one that performs the build as a separate stage and then copies the artifacts to a production images.

Create a `Dockerfile` in the project root directory with the following contents:

```dockerfile
FROM node:20 AS base

# Build the project to generate the .wasp/build output
FROM base AS wasp-builder
WORKDIR /wasp
ADD . .
RUN curl -sSL https://get.wasp-lang.dev/installer.sh | sh
RUN /root/.local/bin/wasp build

# Build the server
FROM base AS server-builder
RUN apt update && apt install --yes build-essential python3 libtool autoconf automake && rm -rf /var/lib/apt/lists/*
WORKDIR /app
COPY --from=wasp-builder /wasp/.wasp/build/src ./src
COPY --from=wasp-builder /wasp/.wasp/build/package.json .
COPY --from=wasp-builder /wasp/.wasp/build/package-lock.json .
COPY --from=wasp-builder /wasp/.wasp/build/server .wasp/build/server
COPY --from=wasp-builder /wasp/.wasp/build/sdk .wasp/out/sdk
# Install npm packages, resulting in node_modules/.
RUN npm install && cd .wasp/build/server && npm install
COPY --from=wasp-builder /wasp/.wasp/build/db/schema.prisma .wasp/build/db/
RUN cd .wasp/build/server && npx prisma generate --schema='../db/schema.prisma'
# Building the server should come after Prisma generation.
RUN cd .wasp/build/server && npm run bundle

# Build the web app
FROM wasp-builder AS web-app-builder
ARG REACT_APP_API_URL
ENV REACT_APP_API_URL=$REACT_APP_API_URL
RUN npm ci
WORKDIR /wasp/.wasp/build/web-app
RUN npm ci && REACT_APP_API_URL=$REACT_APP_API_URL npm run build

# Run the server component
FROM base AS server-production
RUN apt update && apt install --yes python3 && rm -rf /var/lib/apt/lists/*
ENV NODE_ENV production
WORKDIR /app
COPY --from=server-builder /app/node_modules ./node_modules
COPY --from=server-builder /app/.wasp/out/sdk .wasp/out/sdk
COPY --from=server-builder /app/.wasp/build/server/node_modules .wasp/build/server/node_modules
COPY --from=server-builder /app/.wasp/build/server/bundle .wasp/build/server/bundle
COPY --from=server-builder /app/.wasp/build/server/package*.json .wasp/build/server/
COPY --from=server-builder /app/.wasp/build/server/scripts .wasp/build/server/scripts
COPY --from=wasp-builder /wasp/.wasp/build/db/ .wasp/build/db/
EXPOSE ${PORT}
WORKDIR /app/.wasp/build/server
ENTRYPOINT ["npm", "run", "start-production"]

# Run the web-app
FROM joseluisq/static-web-server AS web-app-production
ARG PORT
ENV SERVER_PORT=$PORT
COPY --from=web-app-builder /wasp/.wasp/build/web-app/build /public
```

This `Dockerfile` uses a [multi-stage build](https://docs.docker.com/build/building/multi-stage/) to perform various steps in different contexts. Let's take a look at the stages it defines and what they do:

- `wasp-builder`: This stage installs Wasp and runs the build process to generate the build artifacts. Parts of the output produced by this command will be copied over to subsequent stages.
- `server-builder`: This stage builds the Wasp backend code. It begins by installing some system-level dependencies and then copying over the components the server requires from the `wasp-builder` stage. It runs two separate `npm install` commands to install all of the project dependencies, generates the database schema, and then bundles the server project files.
- `web-app-builder`: This stage builds the front end web app. Because the generated files are static, we need to pass in the URL where the backend will be deployed as `REACT_APP_API_URL` during this process. Again, we perform two `npm install` commands (one for the larger project and one for the front end specifically) and build the web app project.
- `server-production`: This stage runs the server process. It installs some system-level runtime dependencies and then copies all of the required build artifacts from the `server-builder` and `wasp-builder` stages. It then runs the server process in production mode.
- `web-app-production`: This stage uses a static web server to serve the web app files generated by the `web-app-builder` stage.

Using this `Dockerfile`, we can build runnable container images for our project by building the `server-production` and `web-app-production` targets. These will contain everything we need to run our application in production.

## Push the project to GitHub

We now have everything we need to build and run our Wasp application in production. Next we need to commit our changes to git and push them to a GitHub repository.

When we initialized a new project, Wasp automatically generated an appropriate `.gitignore` file. Initialize a new git repository in the project root directory by typing:

```bash
git init
```

Once you're ready, add the project files to the staging area and commit them. [Create a new GitHub repository](https://github.com/new) and then run the following commands to commit and push changes to your GitHub repository:

```bash /<YOUR_GITHUB_USERNAME>/ /<YOUR_REPOSITORY_NAME>/
git add :/
git commit -m "Initial commit"
git remote add origin git@github.com:<YOUR_GITHUB_USERNAME>/<YOUR_REPOSITORY_NAME>.git
git branch -M main
git push -u origin main
```

**Note:** Make sure to replace `<YOUR_GITHUB_USERNAME>` and `<YOUR_REPOSITORY_NAME>` with your GitHub username and repository name.

## Deploy the Wasp backend service to Koyeb

Now that the project code is on GitHub, we can deploy our components to Koyeb. We will start by deploying the server backend.

On the **Overview** tab of the [Koyeb control panel](https://app.koyeb.com/), click **Create Web Service** to begin:

1. Select **GitHub** as the deployment method.
2. Select your Wasp project repository repository. Alternatively, you can enter our public [Wasp example repository](https://github.com/koyeb/example-wasp) into the **Public GitHub repository** field at the bottom of the page: `https://github.com/koyeb/example-wasp`.
3. In the **Builder** section, select **Dockerfile**. Click the **Override** toggle associated with **Target** and enter `server-production` in the field.
4. In the **App and Service names** section at the bottom, choose a name for your App and Service. Your App name will be a component of the public URL for your Service, using the following format: `https://<YOUR_APP_NAME>-<YOUR_KOYEB_ORG>.koyeb.app`.
5. In the **Exposed ports** section, change the **Path** for the configured port from `/` to `/api`.
6. In the **Environment variables** section, click **Bulk edit** to enter multiple environment variables at once. In the text box that appears, paste the following:

   ```
   DATABASE_URL=
   WASP_SERVER_URL=
   WASP_WEB_CLIENT_URL=
   JWT_SECRET=
   ```

   Set the variable values to reference your own information as follows:

   - `DATABASE_URL`: Use the value you from your `.env.server` file. This should be the PostgreSQL connection string with `?ssl_mode=require` appended to the end.
   - `WASP_SERVER_URL`: This is the URL where the server backend will be deployed, including the `/api` path. Set it using the following format: `https://<YOUR_APP_NAME>-<YOUR_KOYEB_ORG>.koyeb.app/api`.
   - `WASP_WEB_CLIENT_URL`: This is the URL where the web frontend will be deployed. We will deploy the web frontend to the web root (`/`), so fill this in using the following format: `https://<YOUR_APP_NAME>-<YOUR_KOYEB_ORG>.koyeb.app`.
   - `JWT_SECRET`: This is the JSON web token (JWT) used during authentication. Set this to a randomly generated string. You can generate an appropriate string by typing `openssl rand -base64 24` in your terminal.

7. Click **Deploy**.

Koyeb will pull the GitHub repository and build the `server-production` target of the `Dockerfile` within.

Once the deployment is healthy, visit your Koyeb Service's subdomain (you can find this on your Service's detail page). It will have the following format:

```
https://<YOUR_APP_NAME>-<KOYEB_ORG_NAME>.koyeb.app/api
```

You will see the "hello world" message from the server backend.

## Deploy the Wasp web app to Koyeb

With the backend service deployed, we can now create a new Service for the web application.

On the **Apps** tab of the [Koyeb control panel](https://app.koyeb.com), click on the Wasp server backend App. In the upper-right corner, click **Create Service** to create a new Service within the same application domain.

1. Select **GitHub** as the deployment method.
2. Select your Wasp project repository repository. Alternatively, you can enter our public [Wasp example repository](https://github.com/koyeb/example-wasp) into the **Public GitHub repository** field at the bottom of the page: `https://github.com/koyeb/example-wasp`.
3. In the **Builder** section, select **Dockerfile**. Click the **Override** toggle associated with **Target** and enter `web-app-production` in the field.
4. In the **Environment variables** section, click **Add variable** to add the following variable:

   - `REACT_APP_API_URL`: Set this to the URL for your backend service. This should be the same value you used for `WASP_SERVER_URL` in the backend configuration. It will have the following format: `https://<YOUR_APP_NAME>-<YOUR_KOYEB_ORG>.koyeb.app/api`.

5. Click **Deploy**.

Koyeb will pull the GitHub repository and build the `web-app-production` target of the `Dockerfile` within.

Once the deployment is healthy, visit the web application's Koyeb subdomain (you can find this on your Service's detail page). It will have the following format:

```
https://<YOUR_APP_NAME>-<KOYEB_ORG_NAME>.koyeb.app/
```

As before, you will be redirected to the application's login page. Click to link to sign up to create a new account. After authenticating, you will be able to access the todo list functionality as before.

## Conclusion

In this guide, we demonstrated how to build and deploy a Wasp application to Koyeb. We started with one of Wasp's templates to create a working, full-stack web application backed by a database. We migrated the application's configuration from a local SQLite database to an external PostgreSQL database to prepare for deployment. Afterwards, we created a multi-stage `Dockerfile` to build and configure our various application layers. Finally, we deployed the backend and web app to Koyeb by targeting different stages in the `Dockerfile`.

This tutorial covers the basics of how to manage a Wasp project and deploy to a production environment. As you continue to develop your projects, be sure to check out the [Wasp documentation](https://wasp-lang.dev/docs) to learn how to integrate new features, work with the data model, and leverage the development framework to make your life easier.


Deploy your full-stack web apps across continents and run on an edge network of 250 locations.

Global serverless deployments

Learn how to build and deploy applications written with Wasp, a Rails-like framework for React, Node.js, and Prisma.

Using Wasp to Build Full-Stack Web Applications on Koyeb

Deploy your gRPC Rust applications across continents in minutes. No credit card required.

Faster global gRPC Rust deployments

At Koyeb, we focus on creating a powerful platform for running global real-time applications. To run your application in our platform, create an account for free.

Build and Deploy a gRPC-Web App Using Rust Tonic and React


**Koyeb provides developers the fastest way to deploy full stack applications and APIs globally. Want to deploy your MERN stack application globally in minutes? [Sign up](https://app.koyeb.com/) today and deploy 2 services for free forever!**

## Introduction

Search capabilities help users find what they are looking for as fast as possible.
While traditional searches return exact matches, a **full-text search provides an added level of flexibility** when querying data because it returns results that contain some or all of the words from a query.

Thankfully, certain managed database providers like MongoDB offer a built-in full-text search feature. In this guide, we are going to enhance the blog application we created in the first part of this mini MERN series -
[Get started with the MERN stack: Build a blog with MongoDB Atlas](/tutorials/get-started-with-the-mern-stack-build-a-blog-with-mongodb-atlas) -
by adding full-text search with Atlas Search.

Since we deployed the application on Koyeb in the [first guide](/tutorials/get-started-with-the-mern-stack-build-a-blog-with-mongodb-atlas),
we will benefit from the platform's built-in continuous deployment. All we have to do is push our commits, and Koyeb will automatically
build and deploy the latest version of our application.

## Requirements

To successfully follow and complete this second and final part of the MERN series, you need:

- Built the app by following the first guide of the MERN series [Get started with the MERN stack: Build a blog with MongoDB Atlas](/tutorials/get-started-with-the-mern-stack-build-a-blog-with-mongodb-atlas)
- A local environment with [Yarn](https://yarnpkg.com/) and [Node.js](https://nodejs.org/en/download/) installed
- A [MongoDB Atlas](https://www.mongodb.com/cloud/atlas/register) account for your managed MongoDB database
- A [GitHub account](https://github.com/) to version and deploy your application code on Koyeb
- A [Koyeb account](https://app.koyeb.com/) running the application

## Steps

To successfully follow this guide, you need to follow these steps:

1. [Set up Atlas Search](#set-up-atlas-search)
   - [Upload the sample data](#upload-the-sample-data)
   - [Create a search index](#add-search-index)
   - [Build the aggregation pipeline to filter the posts: using $search, $limit and $project](#create-the-aggregation-pipleline-to-filter-the-posts-using-search-limit-and-project)
2. [Enhance the search API](#enhance-the-search-api-endpoint)
3. [Add Search UI in the React app](#add-search-ui-in-the-react-app)
4. [Deploy on Koyeb for built-in continuous deployment](#deploy-on-koyeb-for-built-in-continuous-deployment)

## Set up Atlas search

### Upload the sample data

In order to take advantage of the Atlas search capabilities, we first need better sample data for our blog. Luckily, there are several online resources for this. I decided to use government blog posts shared on the platform [Data.world](https://data.world/opm/open-government-blog).
I cleaned the sample data, so it would seamlessy integrate into our web app. Instead of downloading the JSON file from the website, you can take it directly from my [GitHub](https://github.com/samuxyz/mongo-blog-sample-data).

The first step to upload this data is to create a new database and collection using the [Mongo Atlas dashboard](). From the dashboard:

- Go to your database deployments
- Click on the "browse collections" tab
- Click on the left button "Create Database"
- Enter the new database and collection names. For example, I named my collection `posts`.

To upload the JSON collection from your local device you need install the package "mongodb-database-tools". The following documentation provides easy steps for the most common OS:

- [Mac OS](https://www.mongodb.com/docs/database-tools/installation/installation-macos/)
- [Windows](https://www.mongodb.com/docs/database-tools/installation/installation-windows/)
- [Linux](https://www.mongodb.com/docs/database-tools/installation/installation-linux/)

In the terminal, run the following command:

```bash
mongoimport --uri mongodb+srv://USERNAME:PASSWORD@CLUSTERNAME.<>.mongodb.net/DB_NAME --collection COLLECTION_NAME --type json --file SAMPLE_DATA_PATH --jsonArray
```

Make sure to substitute the following:

- The connection string with `USERNAME` and `PASSWORD` with your personal user credentials.

  **Note**: You can retrieve your connection string by clicking the "Connect" button next to your MongoDB cluster name. Select the "Connect your application" option and copy your database connection string to a safe place for later use.

- `DB_NAME` and `COLLECTION_NAME` with the name of the database you created and `post` as the collection name
- `SAMPLE_DATA_PATH` with the path to the index.json file on your laptop

If everything is set up correctly, you should see a successful message like `10 document(s) imported successfully. 0 document(s) failed to import.` Head to the MongoDB Atlas dashboard again and open the collection, you should see the new sample data for our blog!

### Create a search index

The blog search function will query the database for keywords within the title of a post. This means we are going to do a full-text search on the title and enable the autocomplete operators.

For this, we need to create a full-text search index on the title field. From the MongoDB dashboard for your cluster:

- Click on the "Search" tab
- Click "Create Search Index"
- Select JSON editor and "Next"

Replace the default definition with the following code:

```json
{
  "mappings": {
    "dynamic": false,
    "fields": {
      "title": [
        {
          "foldDiacritics": true,
          "maxGrams": 15,
          "minGrams": 2,
          "tokenization": "edgeGram",
          "type": "autocomplete"
        }
      ]
    }
  }
}
```

You can see that we are creating an index of type "autocomplete" on the "title" field of our collection.

There are several configuration options available in the autocomplete data type, such as tokenization strategy and diacritic folding. A complete explanation can be found on the official Atlas Search [documentation](https://www.mongodb.com/docs/atlas/atlas-search/define-field-mappings/#std-label-bson-data-types-autocomplete), but for the purpose of the tutorial we are using the following options:

- `foldDiactrics`: When true, diactricts are included in the index.
- `maxGrams` and `minGrams`: Respectively maximum and minimum number of characters per indexed sequence.
- `tokenization`: edgeGram tokenizer tokenizes input from the left side, or "edge", of a text input into n-grams of given sizes.

Name your search index for easy reference and select your database and collection collection, then click "Next".

After you reviewed your newly created index, click on "Create Search Index" where you will be redirected to the "Search" tab.
The index creation takes about a minute and when it is ready, its status will automatically change to "Active".

### Build the aggregation pipleline to filter the posts: using $search, $limit and $project

In your MongoDB Collection, click on the tab "Aggregation". We are going to create and test your query. The amazing part of the aggregation UI is that, for every stage in the pipeline, they show you the result directly form the posts collection.

![MongoDB Dashboard](/static/images/tutorials/add-full-text-search-with-mongodb-atlas-and-mern/mongodb-search-dashboard.png)

Our aggregation pipeline is composed of 3 stages/parameters:

1. `$search`: We define the index to use, the autocomplete option, the field and the query itself.
2. `$limit`: We can decide to limit the result number.
3. `$project`: What kind of fields to return for each post entry.

Whenever we add a stage, the aggregation pipeline will run and return the result in real-time.

### Using $search

The first step is to use `$search`. The `search` operator lets you perform full-text searches. Find and click on it in the dropdown menu. A basic syntax structure will show up for you to populate:

```js
{
    'index': 'title_autocomplete',
    'autocomplete': {
      'query': 'open gov',
      'path': 'title',
    }
  }
```

- Assign to `index` the name of the index we have just created.
- Since we are using the autocomplete option, replace `text` with `autocomplete`.
- `query` can be an example of a search query for now.
- `path` is the field to search upon.

Once done, you should see the UI to automatically query the collection and return the list of blog posts that satisfy the conditions above.

### Using $limit

Using `$limit`, we can simply return a subset of the result by returning only the top posts. In the aggregation UI choose `$limit` and enter 5 for example.
You should see the number of posts be limited to 5!

### Using $project

With `$project`, we can tell the query to return a subset of the posts fields. Choose `$project` in the dropdown and add the following code:

```js
'_id': 1,
'title': 1,
'author': 1,
'createdAt': 1,
```

The value of "1" tells the pipeline that we want to include specific fields. Based on the query, we want to return the `post _id`, `title`, `author` and `createdAt`. These are the only 4 values we need to show on the blog homepage.

For fun practice, you can go ahead and tweak the values of each stage and see how they affect the final result.

Finally, Atlas UI provides a handy function to quickly export the aggregation with the right syntax of several languages, Node.js included.
Under the "aggregation" tab and beside the "collation" button, click on the export pipeline and choose Node.js. Here is the resulting aggregation code:

```js
{
         '$search': {
           'index': 'title_autocomplete',
           'autocomplete': {
             'query': 'open gov',
             'path': 'title',
           }
         }
       }, {
         '$limit': 5
       }, {
         '$project': {
           '_id': 1,
           'title': 1,
           'author': 1,
           'createdAt': 1,
         }
       }
```

Notice that we still have a hard-coded "open gov" value for "query". In our backend endpoint, we are going to replace it with a dynamic search value coming from the search bar that we are building in the client.

## Enhance the search API endpoint

Return to the server code. We currently have a GET endpoint `/api/blogs` that queries the database and returns the full list of blog posts. We are going to extend its capabilities by:

- Adding a search query parameters which contains the query from the client search bar
- Adding extra logic when the search parameter exists

### Run the aggregation

When a user reaches the blog homepage, the search bar is empty so that the very first API call will not send any search parameter, the endpoint will return the whole list of posts and
typing on the search bar will trigger subsequent API calls including the extra `search` params. In our case, the endpoint will not return the whole list of posts but instead will use the aggregation function on mongoose to search for the right posts.

Here is the new code for the first API endpoint in `/routes/posts.js`:

```js
/* GET posts */
router.get('/', async (req, res, next) => {
  // We look for a query parameter "search"
  const { search } = req.query
  let posts
  if (search) {
    // If search exists, the user typed in the search bar
    posts = await Post.aggregate([
      {
        $search: {
          index: 'title_autocomplete',
          autocomplete: {
            query: search, // noticed we assign a dynamic value to "query"
            path: 'title',
          },
        },
      },
      {
        $limit: 5,
      },
      {
        $project: {
          _id: 1,
          title: 1,
          author: 1,
          createdAt: 1,
        },
      },
    ])
  } else {
    // The search is empty so the value of "search" is undefined
    posts = await Post.find().sort({ createdAt: 'desc' })
  }

  return res.status(200).json({
    statusCode: 200,
    message: 'Fetched posts',
    data: { posts },
  })
})
```

With this change, we have now added search capabilities to our Node server.

## Add Search UI in the React app

The second to last step of the tutorial is to add the search bar to the homepage of our client.
As we are using `react-boostrap`, all we need to do is import `Form` and `FormControl` components. Then, we are going to attach an action listener on "onChange" events to call our backend whenever a user inputs anything in the search bar.

Open `home.js` inside `/client/src/pages` and add the following code:

```js
import { useEffect, useState } from 'react'
import Container from 'react-bootstrap/Container'
// Here we import the new components for the seach bar
import Form from 'react-bootstrap/Form'
import FormControl from 'react-bootstrap/FormControl'
import Image from 'react-bootstrap/Image'
import ListGroup from 'react-bootstrap/ListGroup'
import { Link } from 'react-router-dom'

import formatDate from '../lib/formatDate'
import http from '../lib/http'

const Home = () => {
  const [posts, setPosts] = useState([])
  useEffect(() => {
    async function fetchData() {
      const { data } = await http.get('/api/posts')
      setPosts(data.data.posts)
    }
    fetchData()
  }, [])
  /* We are creating a new function that calls the API endpoint
     and passing the search value as a query parameter
  */
  const searchPost = async (e) => {
    const searchValue = e.target.value
    const { data } = await http.get(`/api/posts?search=${searchValue}`)
    // The subset of posts is added to the state that will trigger a re-render of the UI
    setPosts(data.data.posts)
  }

  return (
    <>
      <Container className="my-5" style={{ maxWidth: '800px' }}>
        <Image
          src="avatar.jpeg"
          width="150"
          style={{ borderRadius: '50%' }}
          className="d-block img-fluid mx-auto"
        />
        <h2 className="text-center">Welcome to the Digital Marketing blog</h2>
        // Let's add the search bar under the subheader
        <Form>
          <FormControl
            type="search"
            placeholder="Search"
            className="me-5"
            aria-label="Search"
            onChange={searchPost} // onChange will trigger "search post"
          />
        </Form>
      </Container>
      <Container style={{ maxWidth: '800px' }}>
        <ListGroup variant="flush" as="ol">
          {posts.map((post) => {
            return (
              <ListGroup.Item key={post._id}>
                <div className="fw-bold h3">
                  <Link to={`/posts/${post._id}`} style={{ textDecoration: 'none' }}>
                    {post.title}
                  </Link>
                </div>
                <div>
                  {post.author} - <span className="text-secondary">{formatDate(post.createdAt)}</span>
                </div>
              </ListGroup.Item>
            )
          })}
        </ListGroup>
      </Container>
    </>
  )
}

export default Home
```

Thanks to this new code, we added search capabilities to our blog with only a bit more than 10 lines of code!

### Render posts content as HTML

The last code change in the client is a pure UI enhancement in the `post.js` page that handles the new format of a post content. When we imported the dataset from data.world, the content contains some HTML code for symbols such as commas, semicolons, etc.
Open `post.js` inside `/client/src/pages` and change the following line of code:

```html
from
<div className="h4 mt-5">{post.content}</div>
to
<div className="h4 mt-5" dangerouslySetInnerHTML="{{__html:" post.content}}></div>
```

By injecting HTML, we are going to show the symbols used in the content in the correct format.

## Deploy on Koyeb for built-in continuous deployment

Finally, you just have to commit your changes with git and Koyeb will trigger a redeployment of the app with the new search functionality!

![MERN blog with full-text search](/static/images/tutorials/add-full-text-search-with-mongodb-atlas-and-mern/blog-homepage.png)

## Conclusion

Congratulations for finishing the second and last part of the MERN tutorial!

In this second part, we successfully indexed our posts collection to make use of Atlas Search capabilities. We also created an aggregation pipeline with autocomplete to add search functionalities to your blog. During the pipeline creation, we played with `$search`, `$limit` and `$project` to create a basic aggregation that satisfies our requirements.
Then, we tweaked our server and client code to allow users to query the blog's database and search for posts by title.

If you want, you can read more about MongoDB Atlas Search and its different features and capabilities [here](https://www.mongodb.com/basics/full-text-search).

The last step was deploying the newest code, which was easy because it was once again handled by Koyeb. Koyeb is making it extremely simple for developers: Just commit your code and Koyeb will trigger the redeployment.

If you would like to read more Koyeb tutorials, checkout out our [tutorials collection](/tutorials). Have an idea for a tutorial you'd like us to cover? Let us know by joining the conversation over on the **[Koyeb community platform](https://community.koyeb.com/)**!


This is the second part of our mini MERN series. In this guide, we showcase how to add search capabilities to the MERN blog we created in part one using MongoDB Atlas Search.

Add full-text search with MongoDB Atlas and MERN

Discover how to use Remix and Tailwind to build a reactive frontend. This guide covers how to build a Hacker News clone application and deploy it on the Koyeb Serverless Platform for native global load balancing, autoscaling, autohealing, auto HTTPS (SSL) encryption, and more with zero configuration.

Use Remix and Tailwind to build a Hacker News clone

Discover the MERN stack by learning how to build a blog application using MongoDB Atlas, Express, React, and Node. Then, learn how to deploy your MERN stack on the Koyeb Serverless Platform. This guide is the first in a mini-series on the MERN stack.