
## Introduction

[Docker Compose](https://docs.docker.com/compose/) is a popular tool for defining and managing multi-container applications. It can be used to coordinate shared resources and interfaces between different discrete components so that they can be deployed, updated, and supervised as a unit.

In this guide, we'll walk through how to deploy a Docker Compose application on Koyeb. We'll deploy a GitHub repository that contains a Docker Compose configuration file by building an image with a special Dockerfile based on a [Docker Compose image](https://github.com/koyeb/koyeb-docker-compose). The build process will copy the repository contents to an image with Docker Compose installed and then initialize the applications defined within using the conventional Docker Compose mechanisms.

You can deploy and preview the example application from this guide by clicking the [Deploy to Koyeb button](/docs/build-and-deploy/deploy-to-koyeb-button) below:

[![Deploy to Koyeb](/static/images/deploy/button.svg)](https://app.koyeb.com/deploy?name=docker-compose-on-koyeb&privileged=true&type=git&repository=github.com/koyeb/example-docker-compose&branch=main&builder=dockerfile&dockerfile=Dockerfile.koyeb)

You can consult the [repository on GitHub](https://github.com/koyeb/example-docker-compose) to find out more about the example application that this guide uses.

## Requirements

To successfully follow and complete this guide, you need:

- A [GitHub account](https://github.com/) to host your Docker Composed-based application.
- A [Koyeb account](https://app.koyeb.com) to deploy and run the preview environments for each pull request.

## Steps

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

1. [Fork the example Docker Compose repository](#fork-the-example-docker-compose-repository)
2. [Deploy the Docker Compose example application](#deploy-the-docker-compose-example-application)

## Fork the example Docker Compose repository

To demonstrate how to deploy projects that use Docker Compose on Koyeb, we will work with an example repository containing a simple [Flask](https://flask.palletsprojects.com/en/3.0.x/) application. The project defines a Dockerfile to build the main application and includes a `docker-compose.yaml` file that defines how to run the application alongside a [Redis](https://redis.io/) instance to cache results.

To get started, log into GitHub and [fork the example Docker Compose repository](https://github.com/koyeb/example-docker-compose) into your own account. If you'd like to deploy the application without any changes, you can skip this step and deploy from Koyeb's public repository in the next step instead.

The main application code is found in the `app.py` file, but for our purposes, the Docker-related files are more interesting. These three files define how to build and run the necessary images and containers: `Dockerfile`, `docker-compose.yaml`, and `Dockerfile.koyeb`.

The `Dockerfile` is very standard and doesn't require any special design for Koyeb:

```dockerfile
FROM python:3.7-alpine

WORKDIR /code
ENV FLASK_APP=app.py
ENV FLASK_RUN_HOST=0.0.0.0
RUN apk add --no-cache gcc musl-dev linux-headers
COPY requirements.txt requirements.txt
RUN pip install -r requirements.txt

EXPOSE 5000
COPY . .
CMD ["flask", "run"]
```

It packages up the application code into a container image and configures it to run on port 5000.

Likewise, the `docker-compose.yaml` file doesn't require any special consideration:

```yaml
services:
  web:
    build: .
    ports:
      - '${PORT}:5000'
  redis:
    image: 'redis:alpine'
```

The compose file automatically builds the above Dockerfile as needed. It defines a two container application setup using the image from the build above and as well as a Redis container. It runs the application container on the port defined by the `PORT` environment variable, using port 5000 as a fallback.

The only file required to bridge the gap between a standard Docker Compose configuration and a Koyeb deployment is the `Dockerfile.koyeb` file:

```dockerfile
FROM koyeb/docker-compose

COPY . /app
```

This file will be the primary director of the Koyeb build process. It creates a new image based on the [Koyeb Docker Compose image](https://hub.docker.com/r/koyeb/docker-compose) (check out the [repository for the image](https://github.com/koyeb/koyeb-docker-compose) for additional details). The only other instruction in this Dockerfile is to copy the entire repository to the `/app` directory within the image.

This works because the Koyeb Docker Compose image runs a Docker daemon that can be used to spawn containers. The image uses Docker Compose to read and apply the `docker-compose.yaml` file, which will build the main application image and then run a container from it in coordination with the Redis container, as outlined above.

## Deploy the Docker Compose example application

Now that you understand how the Docker Compose example works, you can deploy it to Koyeb to validate that the process works as expected.

To get started, open the [Koyeb control panel](https://app.koyeb.com/) and complete the following steps:

1. On the **Overview** tab, click **Create Web Service**.
2. Select **GitHub** as the deployment method.
3. In the GitHub repository list, either select your fork of the Docker Compose repository from your account's repository list or enter the public example repository in the **Public GitHub repository** field: `https://github.com/koyeb/example-docker-compose`.
4. In the **Builder** section, select **Dockerfile**. Click the **Override** toggle to enable the **Dockerfile location** field. In the field, type `Dockerfile.koyeb`.
5. Enable the **Privileged** toggle.
6. Choose a name for your App and Service, for example `koyeb-docker-compose`, and click **Deploy**.

Koyeb will clone the GitHub repository and use the `Dockerfile.koyeb` file to build a new container image for the project. Once the build is complete, a container will be started from the image to run Docker Compose. The Docker Compose process works with a Docker daemon to build or pull the necessary images and start the associated containers.

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

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

You should see the example application's response:

```
Hello World! I have been seen 1 times.
```

The number in the counter will increment as you refresh or visit the page from other devices. The persistence is provided by the Redis container, indicating that both components defined in the `docker-compose.yaml` file are operating as expected.

## Conclusion

In this tutorial, we demonstrated how to use the [Koyeb's Docker Compose image](https://hub.docker.com/r/koyeb/docker-compose) to bootstrap projects that rely on Docker Compose to orchestrate containers. With a two line `Dockerfile.koyeb` file, the Koyeb build process can build a container that runs Docker Compose for your applications, building the images and spawning the containers defined by your configuration.

This method of running Docker Compose-oriented workloads makes it straightforward to get existing projects up-and-running quickly without much modification to your existing repositories. You can use your existing orchestration tool to get started and then migrate to running independent containers on the platform when you want additional control and performance.


Deploy your Docker Compose applications on high-performance infrastructure across global locations in seconds. No credit card required.

Global and Serverless Docker Compose Apps

In this tutorial, we demonstrate how to deploy a Docker Compose project to Koyeb from a GitHub repository.

Deploy Apps Using Docker Compose on Koyeb


## Introduction

Preview environments are dynamic, temporary environments deployed from specific branches of your application in response to repository events. They are a simple way to test and collaborate on versions of your applications before deploying to production.

In this tutorial, we will explain how to automatically deploy your application using [GitHub Actions](https://github.com/features/actions) each time a pull request is made for your GitHub repository.

By the end of this guide, you will have:

- A workflow that automatically deploys the branches from your pull requests.
- A workflow that automatically deletes the preview environment when the pull request is merged or closed.

## Requirements

To successfully follow and complete this guide, you need:

- A [GitHub account](https://github.com/) to host your repositories and configure the pull request preview integration.
- A [Koyeb account](https://app.koyeb.com) to deploy and run the preview environments for each pull request.

## Steps

To complete this guide and configure preview environments to your project, you need to follow these steps:

1. [Fork the example application](#fork-the-example-application)
   - [Understanding the preview environment deployment workflow](#understanding-the-preview-environment-deployment-workflow)
   - [Understanding the preview environment cleanup workflow](#understanding-the-preview-environment-cleanup-workflow)
2. [Create a Koyeb personal access token](#create-a-koyeb-personal-access-token)
3. [Add the Koyeb personal access token as a repository secret](#add-the-koyeb-personal-access-token-as-a-repository-secret)
4. [Test the preview environment deployment](#test-the-preview-environment-deployment)
5. [Test the preview environment cleanup](#test-the-preview-environment-cleanup)

## Fork the example application

To demonstrate how to set up preview environments for a GitHub repository, we'll work with an example repository containing a basic Node.js web app built with [Express](https://expressjs.com/). The application responds to requests with a simple "hello world" message.

To get started, visit the [preview environments example repository](https://github.com/koyeb/example-preview-environments) and fork it into your account.

The main application code is found in the `app.py` file, but for our purposes, the GitHub Actions workflow files are more relevant. In the `.github/workflows` directory are two files: `deploy-preview.yaml` and `cleanup-preview.yaml`.

### Understanding the preview environment deployment workflow

The `deploy-preview.yaml` file contains the following contents:

```yaml
name: Deploy preview environment on Koyeb

on:
  pull_request:
    branches:
      - main

jobs:
  deploy_preview:
    runs-on: ubuntu-latest
    concurrency:
      group: '${{ github.head_ref }}'
      cancel-in-progress: true
    steps:
      - name: Install and configure the Koyeb CLI
        uses: koyeb-community/koyeb-actions@v2
        with:
          api_token: '${{ secrets.KOYEB_API_TOKEN }}'

      - name: Build and deploy the application to Koyeb
        uses: koyeb/action-git-deploy@v1
        with:
          git-branch: ${{ github.head_ref }}
          app-name: 'expressjs-pr-${{ github.head_ref }}'
          service-name: ${{ github.head_ref }}
          service-ports: '3000:http'
          service-routes: '/:3000'
```

Let's take a look at what this configuration describes.

After naming the workflow, the `on.pull_requests.branches` structure dictates that this workflow should only automatically trigger for pull requests events against the repositories "main" branch. If your project had a different primary branch or if you wanted to act on pull requests targeting additional branches, you could modify this value.

Next, in the `jobs` array, there's a single job called `deploy_preview` that runs the deployment. Inside it specifies that the job should be run by a Ubuntu container and it sets up a concurrency group to make sure that only one workflow is run at a time.

The actual workflow steps are fairly simple. First, it installs the [Koyeb CLI](/docs/build-and-deploy/cli/installation) using the [`koyeb-community/koyeb-actions` action](https://github.com/koyeb-community/koyeb-actions). You may notice that this step references a secret called `KOYEB_API_TOKEN`. You will have to configure this for your fork later on.

The second step builds and deploys the pull request branch on Koyeb using the [`koyeb/action-git-deploy` action](https://github.com/koyeb/action-git-deploy). The pull request branch name can be found in the `github.head_ref` context object. We use this to specify the branch to deploy and to name the Koyeb App and Service. The remaining lines configure the port and routing that the application expects.

To summarize, this workflow will automatically run whenever a pull request is created, re-opened, or updated. When triggered, it will deploy a new preview environment with the pull request branch.

### Understanding the preview environment cleanup workflow

The `cleanup-preview.yaml` file contains the following contents:

```yaml
name: Cleanup preview environments on Koyeb

on:
  pull_request:
    types:
      - closed

jobs:
  cleanup_preview:
    runs-on: ubuntu-latest
    steps:
      - name: Install and configure the Koyeb CLI
        uses: koyeb-community/koyeb-actions@v2
        with:
          api_token: '${{ secrets.KOYEB_API_TOKEN }}'

      - name: Cleanup Koyeb application
        uses: koyeb/action-git-deploy/cleanup@v1
        with:
          app-name: 'expressjs-pr-${{ github.head_ref }}'
```

This workflow is fairly similar to the last one. After naming the workflow, it targets pull requests events, but unlike last time, this workflow only triggers when a pull request is closed.

The `cleanup_preview` job installs the Koyeb CLI as before and again uses the `KOYEB_API_TOKEN` to authenticate. Afterwards, it uses the [`koyeb/action-git-deploy/cleanup` action](https://github.com/koyeb/action-git-deploy#cleaning-up-services) to delete the Koyeb app. We pass it the same App name construction used in the deployment file so that it can target the correct App.

In summary, this workflow will automatically run whenever a pull request is merged in or closed. When triggered, it will delete the preview environment based on the branch name.

## Create a Koyeb personal access token

In order to deploy and manage resources on Koyeb, your GitHub repository needs a token that authorizes it to do so.

To get started, in the [Koyeb control panel](https://app.koyeb.com/), click your user icon in the top right corner and click [**Account settings**](https://app.koyeb.com/user/settings). Click the [**Personal Access Tokens**](https://app.koyeb.com/user/settings/api) item in the left-hand menu.

Give your new token a recognizable name and a useful description and the click **Create API Access Token**. Copy the token value and store it in a safe location so that we can use it in the next step. This value cannot be retrieved later, so the token will need to be recreated if you lose it.

## Add the Koyeb personal access token as a repository secret

In your fork of the example application on GitHub, click the **Settings** tab and select **Secrets and variables** and then **Actions**. Click **New repository secret** to add a new secret.

Fill in the secret creation form with the following:

- **Name:** `KOYEB_API_TOKEN` (must match the secret value from the workflow files)
- **Value:** The Koyeb personal access token you generated as the secret value.

Click **Add secret** when you are finished.

Next, click the **Actions** tab for the forked repository. You'll see a disclaimer since about how GitHub Actions have been disabled for the fork until you evaluate the workflow files:

![Enable GitHub Actions](/static/images/tutorials/koyeb-preview-environments/enable-github-actions.png)

If you're comfortable running the workflow files defined in the repository, click **I understand my workflows, go ahead and enable them**. GitHub Actions can now run on your fork.

## Test the preview environment deployment

With the workflow files present and the Koyeb API token configured, your forked repository now has everything it needs to deploy and manage preview environments for pull requests.

To test the preview environment workflow, clone your fork from GitHub onto your local computer:

```bash
git clone git@github.com:<YOUR_GITHUB_ORG>/example-preview-environments.git
```

Move into the repository directory and switch to a new branch for your changes:

```bash
cd example-preview-environments
git switch -c change_message
```

Open the main `app.js` application file and modify the message to something different:

```js
const express = require('express')
const app = express()
const port = process.env.PORT || 3000

app.get('/', (req, res) => {
  res.send('<h1>Hello, world!</h1>') // [!code --]
  res.send('<h1>Hello, from a different branch!</h1>') // [!code ++]
})

app.listen(port, () => {
  console.log(`App listening on port ${port}`)
})
```

Save and close the file when you're finished. Next, add and commit your changes and push them up to your fork:

```bash
git add :/
git commit -m 'Change greeting message'
git push origin change_message
```

In your fork on GitHub, open a new pull request based on the new branch:

**Note:** In this scenario, remember to make the pull request against your own `main` branch instead of the `koyeb` repository you forked from.

![Open pull request on GitHub](/static/images/tutorials/koyeb-preview-environments/open-pr.png)

After a moment, you should see the GitHub Action beginning to work in the checks at the bottom of the pull request:

![Pull request checks](/static/images/tutorials/koyeb-preview-environments/pull-request-checks.png)

If you click the **Details** link associated with the check or view the **Actions** tab at the top of the repository, you can track the deployment through the GitHub Actions interface.

![GitHub deploy action](/static/images/tutorials/koyeb-preview-environments/github-deploy-action.png)

If you visit the [Koyeb control panel](https://app.koyeb.com/), you should see a new Koyeb App and Service being deployed for the pull request branch:

![Koyeb new PR deployment](/static/images/tutorials/koyeb-preview-environments/koyeb-new-pr-deployment.png)

You can follow along through the build and deployment processes to see the progress. When the deployment is live, click the **Public URL** for the service:

![Koyeb public URL](/static/images/tutorials/koyeb-preview-environments/koyeb-public-url.png)

You should see the updated message text from the pull request branch:

![Updated application message](/static/images/tutorials/koyeb-preview-environments/updated-application-message.png)

The preview environment successfully built and deployed the pull request branch.

## Test the preview environment cleanup

Next, you can test the preview environment cleanup workflow.

In your GitHub fork, close or merge the pull request (either will trigger the workflow). If you click the **Actions** tab of the repository, you should see the cleanup workflow being processed:

![Cleanup workflow processing](/static/images/tutorials/koyeb-preview-environments/cleanup-workflow-processing.png)

If you visit the [Koyeb control panel](https://app.koyeb.com/), you should see the Koyeb App and Service for your pull request branch being deleted automatically:

![Koyeb app deletion](/static/images/tutorials/koyeb-preview-environments/koyeb-app-deletion.png)

This confirms that the cleanup workflow is able to spin down our preview environments correctly.

## Conclusion

In this tutorial, we showed how you can combine GitHub Actions and Koyeb to automatically deploy and manage preview environments based on your project's pull requests. We covered how to design workflow files that target pull request events on GitHub, how to pass the correct information to Koyeb to deploy the appropriate branches, and how to delete the resources once the pull request is closed.

By using and expanding on these workflows, you can easily integrate preview environments for your pull requests into your CI/CD pipelines. This helps you test all changes in a realistic environment prior to merging them into your main production branch. You can use this as a basis for building more sophisticated implementations that comment on the pull request thread with the preview environment details, notify slack channels, and more.


Run your staging and production environments on top-notch infrastructure in your choice of global locations. No credit card required.

Best-in-class infrastructure for your staging and prod envs

This guide explains how to automate deployments on Koyeb when you create a new pull request on GitHub repository using GitHub Actions.

Deploy Preview Environments on Koyeb for GitHub Pull Requests


**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

This guide explains how to build and deploy a REST API using Koa, Prisma, and Aiven on the Koyeb serverless platform.

Deploy a Rest API using Koa, Prisma, and Aiven on Koyeb


## Introduction

Laravel is a popular, simple and flexible [PHP](/docs/deploy/php) application framework that is ideal for modern, full-stack web apps.

Laravel provides a great developer experience with its many built-in features like dependency injections, an expressive database abstraction layer, queues and scheduled jobs, unit and integration testing, and more.

In this guide, we create a basic Laravel application, push it to a GitHub repository, and deploy it on the Koyeb Serverless Platform using git-driven deployment which allows you to push your code without having to take care of the build, deployment, and run process. Koyeb handles all this for you.

By deploying your Laravel application on [Koyeb](/), you benefit from the platform's built-in autoscaling, autohealing, TLS encryption, global load balancing across our edge network, service discovery, and more.

If you want to learn how to [Dockerize and Deploy a Laravel Application to Production](/tutorials/dockerize-and-deploy-a-laravel-application-to-production), make sure to check out the linked guide.

## Requirements

To follow and complete this guide successfully, you need:

- A [Koyeb account](https://app.koyeb.com/) to deploy and run the Laravel web application
- The [Koyeb CLI](/docs/cli/installation) installed to interact with Koyeb from the command line
- A [GitHub account](https://github.com/)
- [PHP](https://www.php.net/) and [Composer](https://getcomposer.org/) installed on your machine

## Steps

To deploy a Laravel web application on the Koyeb serverless platform, you need to follow these three steps:

1. [**Create a new Laravel application**](#create-a-new-laravel-application)
2. [**Push the Laravel application to a GitHub repository**](#push-the-laravel-application-to-a-git-hub-repository)
3. [**Deploy the Laravel application on Koyeb**](#deploy-the-laravel-application-on-koyeb)

## Create a new Laravel application

To get started, we will create a new Laravel project using Composer, a PHP package manager. In your terminal, run the following command:

```
composer create-project --prefer-dist laravel/laravel laravel-on-koyeb
```

This command will create a new Laravel application in the `laravel-on-koyeb` directory and install all the dependencies required by the app to run properly.

You can launch the application in development mode by running the following command in your terminal from the `laravel-on-koyeb` directory:

```
php artisan serve
```

Open a browser window and navigate to the `http://localhost:8000` URL. You land on the Laravel welcome page.

### Generate a key for Laravel's encryption services

Generate an APP_KEY to properly secure user sessions and other encrypted data by running:

```
php artisan key:generate --show
```

Save this value in a safe place. We will pass it to Koyeb as an `ENV_VAR` when we deploy the Laravel app on the platform later.

### Add a Procfile

A `Procfile` tells Koyeb how to run your application. Create a `Profile` in your application's root directory by executing:

```
echo "web: vendor/bin/heroku-php-apache2 public/" > Procfile
```

## Push the Laravel application to a GitHub Repository

Now that we have created our Laravel application, we will create a git directory to store it. Return to your `laravel-on-koyeb` directory and initialize a new git directory for your Laravel project:

```
git init
```

### Add a .gitignore file

To keep only the necessary files in the repository, add this .gitignore file to exclude all unnecessary Laravel files.

```
curl https://raw.githubusercontent.com/github/gitignore/master/Laravel.gitignore > .gitignore
```

Execute the following command to add and commit the changes made in your files to your repository:

```
git add .
git commit -m "Laravel app initial commit"
```

Then add these changes to your remote GitHub repository for this app.

```
git remote add origin git@github.com:YOUR_GITHUB_USERNAME/laravel-on-koyeb.git
```

Rename the repository default branch to main executing:

```
git branch -M main
```

Next, push your changes to the GitHub repository by running:

```
git push -u origin main
```

You are now ready to deploy your application on Koyeb.

## Deploy the Laravel application on Koyeb

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

1. Choose **GitHub** as the deployment method.
2. Select your `laravel-on-koyeb` repository from the list.
3. In the **Environment variables** section, click the **Add variable** button to add an `APP_KEY` variable set to the value you generated in [the step above](#generate-a-key-for-laravel-s-encryption-services).
4. Choose a name for your App and Service, for example `laravel-on-koyeb`, and click **Deploy**.

You land on the deployment page of your service where you can follow the progress of your Laravel application's deployment. Koyeb is building and deploying your application. Once the build and deployment are completed, you can access your application by clicking the App URL ending with `koyeb.app` in the Koyeb control panel.

If you want to learn about how Koyeb automatically builds your Laravel applications from git, make sure to read our [**how we build from git**](/docs/apps/build-from-git) documentation.

Your Laravel application is now running on Koyeb and benefits from native autoscaling, automatic HTTPS (SSL), auto-healing, and global load-balancing across our edge network.

## Conclusion

In this guide, you learned how to deploy a Laravel application on Koyeb and benefit from its built-in continuous deployment pipeline. Each change you push to your repository will automatically trigger a new build and deployment on the Koyeb Serverless Platform.

Your changes then go live as soon as the deployment passes all necessary health checks. In case of a failure during one of your deployments, we ensure to keep the latest working deployment active so your application is always up and running.

Want more PHP resources? Check out our [PHP documentation](/docs/deploy/php) and [one-click PHP app](/deploy/php) to learn how to deploy a PHP application on Koyeb.

If you would like to read more Koyeb tutorials, check out 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 guide shows how to deploy a Laravel application on the Koyeb Serverless Platform using git-driven deployment. Git-driven deployment allows you to push your code without having to take care of the build, deployment, and run process. Koyeb handles all this for you.

Deploy a Laravel Application with Continuous Deployment on Koyeb


## Introduction

[NestJS](/docs/deploy/nestjs) is a Node.js framework to build efficient and scalable server-side applications. Nest uses and abstracts ExpressJS under the hood to ease development but keeps its API accessible to developers.
This allows you to compose and use all Express's compatible third-party modules and middlewares. In addition to Express, you can also configure Nest to use Fastify, another popular Node.js framework.
Nest is built with typescript and combines the use of object-oriented programming, functional programming, and functional reactive programming.

In this tutorial, we will create a minimalist NestJS application and showcase how to deploy the application with continuous deployment on Koyeb.
By deploying the Nest application on Koyeb using the git-driven deployment method, each time you push new changes to your GitHub repository, a new deployment will occur and be promoted once the built and health checks are completed.

Thanks to Koyeb, you will benefit from native global load-balancing across our edge network, autoscaling, automatic HTTPS (SSL), and auto-healing with zero configuration.

## Requirements

To successfully follow and complete this guide, you need:

- A local development environment with Node.js installed
- A [GitHub account](https://github.com)
- A [Koyeb account](https://app.koyeb.com) to deploy and run the Nest application

## Steps

To successfully complete this tutorial and deploy the Nest application on Koyeb Serverless Platform, you need to follow these steps:

1. [Create and configure the Nest application](#create-and-configure-the-nest-application)
2. [Push the sources to GitHub](#push-the-sources-to-git-hub)
3. [Deploy the Nest app on Koyeb](#deploy-the-nest-app-on-koyeb)

## Create and configure the Nest application

### Installing the NestJS CLI

To get started, we need to install the Nest CLI. In your terminal run the following command:

```bash
npm i -g @nestjs/cli
```

### Create a new Nest application

The Nest CLI installed, we can initialize a new Nest app running:

```bash
nest new nestjs-on-koyeb
```

The command below created a directory `nestjs-on-koyeb` containing the node modules to properly run the Nest application and a few other boilerplate files.

```bash
.
├── README.md
├── nest-cli.json
├── node_modules
├── package-lock.json
├── package.json
├── src
│   ├── app.controller.spec.ts
│   ├── app.controller.ts
│   ├── app.module.ts
│   ├── app.service.ts
│   └── main.ts
├── test
│   ├── app.e2e-spec.ts
│   └── jest-e2e.json
├── tsconfig.build.json
└── tsconfig.json
```

### Configuring the Nest application

By default, the Nest listens on port 3000. There are many cases you will want the application to listen on a different port.
Replace the line below to allow setting up the port via the `PORT` environment variable or use the port 3000 if no environment variable is provided in the `src/main.ts` file.

`main.ts` is the entry file of the application which uses the core function NestFactory to create a Nest application instance.

```typescript
await app.listen(3000) // [!code --]
await app.listen(process.env.PORT || 3000) // [!code ++]
```

Then, open and edit the `package.json` file to specify the `npm` and `node` versions to use. Here we use the Node LTS version and the latest NPM version:

```typescript
  ...
  "engines": {
    "node": "14.x",
    "npm": "7.x"
  },
  ...
```

## Push the sources to GitHub

Once the edits are performed, we can commit and push our application to a GitHub repository. When we previously ran the `nest new nestjs-on-koyeb` command, a git repository has been initialized so we don't need to run `git init` inside our application directory.

Add the Nest application sources:

```
git add .
git commit -m "Nest app initial commit"
```

Add a new remote pointing to your GitHub repository:

```
git remote add origin git@github.com:<YOUR_GITHUB_USERNAME>/<YOUR_GITHUB_REPOSITORY>.git
```

Rename the repository default branch to `main` running:

```
git branch -M main
```

Push your changes to the GitHub repository:

```
git push -u origin main
```

## Deploy the Nest app on Koyeb

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

1. Choose **GitHub** as the deployment method.
2. In the repositories selector, select the repository containing your Nest application sources.
3. In the **Builder** section, click the **Override** toggle associated with the **Run command** and enter `npm run start:prod` in the field.
4. In the **Environment variables** section, add a new entry with the name `NODE_ENV` and `production` as value.
5. Choose a name for your App and Service, for example `koyeb-nestjs-demo`, and click **Deploy**.

You land on the deployment page where you can follow the build of your Nest application. Once the build is completed, your application is being deployed and you will be able to access it via `<APP_NAME>.<ORG_NAME>.koyeb.app`.

If you want to learn about how Koyeb automatically builds your applications from git, make sure to read our [how we build from git](/docs/apps/build-from-git) documentation.

In this guide, we showcased how Koyeb simplifies the deployment of a NestJS application. With minimal effort, you have a complete, production-ready environment with native global load-balancing, TLS encryption, autoscaling, autohealing, and more to run your Nest application.

## Conclusion

Want more NestJS on Koyeb? Check out our [NestJS documentation](/docs/deploy/nestjs) to learn how to deploy a NestJS application on Koyeb.


This guide explains how to continuously deploy a NestJS application on the Koyeb serverless platform.

Continuous Deployment of a NestJS Application on Koyeb


## Introduction

[Flask](/docs/deploy/flask) is a lightweight web framework written in Python that offers developers powerful tools and features to create web applications with ease and flexibility.

This guide demonstrates how to deploy a Flask application using Gunicorn on the Koyeb Severless Platform. You will create a "Hello World" Flask application, push your code to a GitHub repository, and then deploy your application on the Koyeb platform using its git-driven deployment.

With Koyeb's git-driven deployment, your application benefits from a built-in continuous deployment pipeline because each git push you make to your repository automatically triggers a new build and deployment for your application on the Koyeb Serverless Platform.

For those who prefer deploying Docker containers, we also published a guide explaining how to dockerize and deploy a [Python Flask application on the Koyeb Serverless Platform](/tutorials/python-flask-application-deployment-on-koyeb).

## Requirements

To successfully follow and complete this guide, you need:

- A [Koyeb account](//app.koyeb.com/auth/signin) to deploy and run your Python Flask application
- [Python](//www.python.org/downloads/) installed on your computer
- A [GitHub account](//github.com/)

## Steps

To successfully create and deploy Flask application on Koyeb using git-driven deployment, you will need to follow these steps:

1. [**Create a Flask application**](#create-a-flask-application)
2. [**Create a git directory for the Flask application**](#continuously-deploy-a-flask-app-using-gunicorn-on-koyeb#create-a-git-directory-for-the-flask-application)
3. [**Deploy the Flask application on Koyeb**](#deploy-the-flask-application-on-koyeb)

## Create a Flask application

Begin by creating a directory where our application will live and moving into it by running the following commands:

```
mkdir flask-on-koyeb
cd flask-on-koyeb
```

### Create a virtual environment

Next, we will create a virtual environment, also known as virtualenv. Virtual environments allow you to create an isolated Python environment to avoid interfering with Python's system packages or other virtual environments.

To create a virtual environment, execute:

```
python3 -m venv ~/.venv/flask-app
```

This command creates a new directory `flask-app` in the ~/.venv directory. The virtualenv contains a copy of the Python interpreter, pip, the standard library, and various supporting files.

To activate the virtualenv we just created, run:

```
source ~/.venv/flask-app/bin/activate
```

The virtualenv python and pip executables are now added into your shell’s PATH.

### Install Dependencies

Next, install the dependencies required to run the application. In this case, we need Flask and Gunicorn. Flask is the lightweight Python framework we are using for this application and Gunicorn is a web server gateway interface (WSGI) server implementation used to run Python web apps. Gunicorn is a high-performing server better suited for production traffic.

```
pip install Flask Gunicorn # Install Flask and Gunicorn
pip freeze > requirements.txt # Create the requirements.txt to store the dependencies and version of each package required to run our application.
```

### Create the Flask application

In your `flask-on-koyeb` directory, create a new `app.py` file with the following:

```
from flask import Flask
app = Flask(__name__)

@app.route('/')
def hello_world():
    return 'Hello, World!'

if __name__ == "__main__":
    app.run()
```

This file is storing our Flask application code. In the snipper above, we define a route to handle `/` requests and return `Hello, World!` as a response.

Check to see if the application is working locally by running:

```
python3 app.py
```

In your browser, go to `http://localhost:5000` and you will see `Hello, World!`.

## Create a git directory for the Flask application

Now that we have created our Flask application, we will create a git directory to store it.

Initialize a new git directory for your Flask project by running the following in your terminal:

```
git init
```

To keep only the necessary files in the repository, add this .gitignore file to exclude unnecessary files.

```
curl https://raw.githubusercontent.com/github/gitignore/master/Python.gitignore > .gitignore
```

Next, execute the following command to add your files and commit the changes to your repository:

```
git add .
git commit -m "Flask app initial commit"
```

Open a new tab in your browser and go to GitHub. Create a new repository named `flask-on-koyeb` and click the _Create repository_ button. Then, go back to your terminal and add GitHub as a remote repository by running:

```
git remote add origin git@github.com:YOUR_GITHUB_USERNAME/flask-on-koyeb.git
```

Rename the repository default branch to main executing:

```
git branch -M main
```

Next, push your changes to the GitHub repository by running:

```
git push -u origin main
```

Now, you are ready to deploy your application on Koyeb.

## Deploy the Flask application on Koyeb

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

1. Choose **GitHub** as the deployment method.
2. Select the repository for your Flask application.
3. In the **Builder** section, click the **Override** toggle associated with the **Run command** and enter `gunicorn app:app` in the field.
4. Choose a name for your App and Service, for example `koyeb-flask-demo`, and click **Deploy**.

**Note:** You can add more regions, change the instance size, set environment variables, and define horizontal scaling according to your needs.

You land on the deployment page of your service where you can follow the progress of your Flask application's deployment. Koyeb will take care to build and deploy your application. Once these steps are completed, you can access your application by clicking your App URL ending with koyeb.app in the Koyeb control panel.

If you want to learn about how Koyeb automatically builds your applications from git, make sure to read our [how we build from git](/docs/apps/build-from-git) documentation.

Your Flask application is now running on Koyeb and benefits from native autoscaling, automatic HTTPS (SSL), auto-healing, and global load-balancing across our edge network.

## Conclusion

In this guide, you learned how to deploy a Flask application on Koyeb and benefit from its built-in continuous deployment pipeline. Each change you push to your repository will automatically trigger a new build and deployment on the Koyeb Serverless Platform. Your changes then go live as soon as the deployment passes all necessary health checks. In case of a failure during one of your deployments, we ensure to keep the latest working deployment active so your application is always up and running.

Other great benefits to deploying your Python Flask application on Koyeb include the platform's built-in autoscaling, automatic HTTPS (SSL), high availability, global load-balancing and edge network.

All of these features and more work out-of-the-box and from the getgo. You focus on your code while Koyeb handles all the necessary underlying infrastructure to keep your services scalable, high performing and available.

Want more Flask on Koyeb? Check out our [Flask documentation](/docs/deploy/flask) and [one-click Flask app](/deploy/flask) to learn how to deploy a Flask application on Koyeb.

Give Koyeb a try with your application! 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 guide shows how to deploy a Python Flask application using Gunicorn on the Koyeb Serverless Platform. Using Koyeb's git-driven deployment lets you benefit from the platform's built-in continuous deployment pipeline.