Snippet

Full Application

MongoDB

Partner

Student

Community

Introductory

Advanced

Nic Raboy

As I mentioned in a [previous tutorial](https://www.mongodb.com/developer/languages/javascript/add-comments-section-eleventy-website-mongodb-netlify/#develop-api-endpoints-with-netlify-functions-and-the-mongodb-atlas-data-api), I'm a big fan of Netlify and the services they offer developers—my favorite of their services being their static website hosting and serverless functions. When combining the two, you can deploy a complex website or web application with a back end, without ever worrying about infrastructure or potentially complex API design.

So how does that work with a database like MongoDB?

If you've ever dabbled with serverless functions before, you might be aware that they are not always available for consumption. Many serverless functions exist for a defined amount of time and then are shut down until they are executed again. With this in mind, the connection to a database might not always be available like it would be in an application built with [Express Framework](https://expressjs.com/), for example. You could establish a connection every time a function is called, but then you risk too many connections, which might overload your database.

So what do you do?

In this tutorial, we're going to see how to build and deploy a simple web application using [Netlify Functions](https://www.netlify.com/products/functions/) and [MongoDB Atlas](https://www.mongodb.com/atlas). For this particular tutorial, we'll be using the Node.js driver for MongoDB, but both Netlify and MongoDB support the use of other languages and drivers as well.

## The requirements

There are a few things that must be ready to go prior to starting this tutorial.

- Node.js 15+ must be installed.
- A [MongoDB Atlas](https://cloud.mongodb.com) cluster must be deployed and configured with proper user roles and network rules.
- You must have a Netlify account.
- You must have the [Netlify CLI](https://docs.netlify.com/cli/get-started/) installed and configured.

Everything we do in this tutorial can be done for free. You can use the free forever tier of MongoDB Atlas, which is an M0 sized cluster. You can also use the free plan that Netlify offers.

It's worth mentioning that if you prefer a completely serverless experience, MongoDB Atlas also offers serverless instances—a fully serverless database that scales elastically with demand. We won't be exploring serverless instances in this tutorial, but if you'd like to learn more, [check out this article](https://www.mongodb.com/blog/post/embrace-benefits-serverless-development-atlas).

If you need help getting started with your MongoDB Atlas cluster, check out this [previous tutorial](https://www.mongodb.com/developer/article/5-different-ways-deploy-free-database-mongodb-atlas/) I wrote on the subject.

## Create a new Netlify project with the Netlify CLI

To keep this tutorial simple and easy to understand, we're going to work from a new project. While you don't necessarily need to use the CLI to get the job done, it will be easier for this example.

Assuming the Netlify CLI is installed, execute the following command to create a new project:

```bash
netlify sites:create
```

For this example, we won't be using the continuous integration features that you'd get when connecting GitHub and similar. Make sure to follow the instructions that the CLI presents you with from the above command.

We won't be creating any particular project files until we progress through the tutorial.

## Create a Netlify Function that interacts with MongoDB

The star of this tutorial is going to be around properly including MongoDB Atlas in your Netlify Function. As previously mentioned, you have to take into consideration the state of the function to prevent attempting to access a database without a connection or establishing too many connections.

With that in mind, we can do the following with the Netlify CLI:

```bash
netlify functions:create --name get_movies
```

Follow the instructions when prompted. For this example, we'll be using JavaScript rather than TypeScript or Golang. While not too important because we'll be making significant changes after, select **hello_world** as the function template that you want to use.

Since we'll be using the MongoDB Node.js driver, we need to install it into our project. From the command line, execute the following at the root of the project:

```javascript
npm install mongodb
```

Netlify serverless functions will be able to access NPM modules at the root of the project.

If you kept the default function path, open the **netlify/functions/get_movies.js** file and add the following JavaScript code:

```javascript
const { MongoClient } = require("mongodb");

const mongoClient = new MongoClient(process.env.MONGODB_URI);

const clientPromise = mongoClient.connect();

const handler = async (event) => {
    try {
        const database = (await clientPromise).db(process.env.MONGODB_DATABASE);
        const collection = database.collection(process.env.MONGODB_COLLECTION);
        // Function logic here ...
    } catch (error) {
        return { statusCode: 500, body: error.toString() }
    }
}

module.exports = { handler }
```

So what is happening in the above code?

The first thing we're doing is creating a new MongoDB client using a URI string that we're storing within our environment variables. While you could hard code this URI, your best bet is to keep it in an environment variable because we'll be using them in a later step of this tutorial.

Probably the most interesting line here is the following:

```javascript
const clientPromise = mongoClient.connect();
```

If you've ever worked with the MongoDB Node.js driver before, you've probably used this with an `await` or similar. We don't want to block our function in the global area. This area before the `handler` function will be executed only when the function starts up. We know that the function won't necessarily shut down after one execution. With this knowledge, we can use the same client for as long as this particular function exists, reducing how many connections exist.

Inside the `handler` function, we can attempt to resolve our client promise, get a handle to the database we want to use, and get a handle to the collection we want to use. For this example, we are storing the database name and collection name in an environment variable.

Let's expand upon our function to actually do something useful. Change the JavaScript code to look like the following:

```javascript
const { MongoClient } = require("mongodb");

const mongoClient = new MongoClient(process.env.MONGODB_URI);

const clientPromise = mongoClient.connect();

const handler = async (event) => {
    try {
        const database = (await clientPromise).db(process.env.MONGODB_DATABASE);
        const collection = database.collection(process.env.MONGODB_COLLECTION);
        const results = await collection.find({}).limit(10).toArray();
        return {
            statusCode: 200,
            body: JSON.stringify(results),
        }
    } catch (error) {
        return { statusCode: 500, body: error.toString() }
    }
}

module.exports = { handler }
```

For this particular function, we are using our connection to find all documents in our collection, limiting the result set to 10 documents, and returning the data to whatever executed the function. Our example is technically around movies documents, but our code doesn't really reflect anything that specific.

## Consume the Netlify Function from an HTML file with JavaScript

So we've got a serverless function for querying our MongoDB Atlas database. Let's tie it together with some of the other Netlify offerings, particularly the website hosting.

At the root of our Netlify project, create an **index.html** file with the following markup:

```html
<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <h1>MongoDB with Netlify Functions</h1>
        <ul id="movies"></ul>
        <script>
            (async () => {
                let results = await fetch("/.netlify/functions/get_movies").then(response => response.json());
                results.forEach(result => {
                    const listItem = document.createElement("li");
                    listItem.innerText = result.title;
                    document.getElementById("movies").appendChild(listItem);
                });
            })();
        </script>
    </body>
</html>
```

We don't need to worry about doing anything fancy from a UI perspective in this example.

In the above HTML and JavaScript, we are setting a placeholder unordered list element. In the JavaScript, we are fetching from our serverless function, looping through the results, and adding each of our items as list items to the unordered list. Since we're assuming that we're using movie data, we are only adding the title of the movie object to the list.

Again, nothing fancy, but it proves that our function works.

## Deploy the Netlify Function with website to the cloud

We have a function, we have a website, and we're pretty much ready to deploy. Before we do that, let's make sure everything works locally.

Using the Netlify CLI, execute the following from the root of your project:

```bash
netlify dev
```

The above command should serve the function and site locally, and then open a browser for you. If you run into problems, you might check the following:

- Did you remember to set your environment variables first?
- Is your local IP address added to your MongoDB Atlas cluster?

To be honest, those two items got me, so I thought it was worth noting them.

Assuming you got everything working in your local environment, we can focus on the deployment to Netlify.

The first thing we'll want to do is create our environment variables. This can be done within the Netlify online dashboard or directly with the Netlify CLI. For this example, we'll use the CLI.

From the command line, execute the following:

```bash
netlify env:set MONGODB_URI YOUR_URI_HERE
netlify env:set MONGODB_DATABASE sample_mflix
netlify env:set MONGODB_COLLECTION movies
```

The above command sets three environment variables. You'll want to swap the URI with that of your own cluster. You can get this information within the MongoDB Atlas dashboard. 

![Connect to MongoDB Atlas](https://mongodb-devhub-cms.s3.us-west-1.amazonaws.com/atlas_connection_string_9af60c0553.png "Connect to MongoDB Atlas")

The other two variables, which represent the database and collection, are using the sample dataset. You can change them to whatever you want.

With the variables in place, we can deploy the project. From the command line, execute the following command:

```bash
netlify deploy
```

It might take a bit of time for the build process to kick in remotely, but when it's done, you should have a very basic website that consumes information from a Netlify Function.

It's worth noting that you still need to add proper network access rules to MongoDB Atlas to allow connections from a Netlify Function.

## Conclusion

You just saw how to use [Netlify Functions](https://www.netlify.com/products/functions/) with the [MongoDB Node.js driver](https://www.mongodb.com/docs/drivers/node/current/) to create a website with a serverless back end.

Remember, when working with serverless functions, you have to be aware that your functions may not always be available to reuse a connection. You also have to be aware that connecting to a database directly within a function handler might establish too many connections. When done properly, you'll have a powerful serverless function that can take full advantage of MongoDB.

If you're interested in another serverless function example, check out my tutorial titled [Add a Comments Section to an Eleventy Website with MongoDB and Netlify](https://www.mongodb.com/developer/languages/javascript/add-comments-section-eleventy-website-mongodb-netlify/) for more ideas.

Learn how to build and deploy a web application that leverages MongoDB and Netlify Functions for a serverless experience.

Developing a Web Application with Netlify Serverless Functions and MongoDB

Stanimira Vlaeva

Abirami Sukumaran

## Plea and the Pledge: Truly Serverless

As modern application developers, we’re juggling many priorities: performance, flexibility, usability, security, reliability, and maintainability. On top of that, we’re handling dependencies, configuration, and deployment of multiple components in multiple environments and sometimes multiple repositories as well. And then we have to keep things secure and simple. Ah, the nightmare!

This is the reason we love serverless computing. Serverless allows developers to focus on the thing they like to do the most—development—and leave the rest of the attributes, including infrastructure and maintenance, to the platform offerings. 

In this read, we’re going to see how Cloud Run and MongoDB come together to enable a completely serverless MEAN stack application development experience. We'll learn how to build a serverless MEAN application with [Cloud Run](https://cloud.google.com/run/) and [MongoDB Atlas](https://www.mongodb.com/atlas), the multi-cloud application data platform by MongoDB.

### Containerized deployments with Cloud Run

All serverless platform offer exciting capabilities: 

* Event-driven function (not a hard requirement though)
* No-infrastructure maintenance
* Usage-based pricing
* Auto-scaling capabilities

Cloud Run stands out of the league by enabling us to: 

* Package code in multiple stateless containers that are request-aware and invoke it via HTTP requests
* Only be charged for the exact resources you use
* Support any programming language or any operating system library of your choice, or any binary

Check this link for more features in full [context](https://cloud.google.com/run/?utm_source=google&utm_medium=cpc&utm_campaign=japac-IN-all-en-dr-skws-all-pkws-trial-b-dr-1009882&utm_content=text-ad-none-none-DEV_c-CRE_529584319423-ADGP_Hybrid%20%7C%20SKWS%20-%20PHR%20%7C%20Txt%20~%20Compute%20~%20Cloud%20Run_Global%20gap%20analysis-KWID_43700065767178853-aud-970366092687%3Akwd-677335471899&userloc_1007768-network_g&utm_term=KW_cloud%20run&gclid=Cj0KCQjw1tGUBhDXARIsAIJx01lcrrpCE3MLqe4k3MiQdd8ibvGmXduL9kLXELPjodjSu7Gipc5ODYwaAlBkEALw_wcB&gclsrc=aw.ds).

However, many serverless models overlook the fact that traditional databases are not managed. You need to manually provision infrastructure (vertical scaling) or add more servers (horizontal scaling) to scale the database. This introduces a bottleneck in your serverless architecture and can lead to performance issues.

### Deploy a serverless database with MongoDB Atlas

MongoDB launched serverless instances, a new fully managed, serverless database deployment in Atlas to solve this problem. With serverless instances you never have to think about infrastructure — simply deploy your database and it will scale up and down seamlessly based on demand — requiring no hands-on management. And the best part, you will only be charged for the operations you run. To make our architecture truly serverless, we'll combine Cloud Run and MongoDB Atlas capabilities.

## What's the MEAN stack?

The [MEAN stack](https://www.mongodb.com/mean-stack) is a technology stack for building full-stack web applications entirely with JavaScript and JSON. The MEAN stack is composed of four main components—MongoDB, Express, Angular, and Node.js.

* **MongoDB** is responsible for data storage. 
* **Express.js** is a Node.js web application framework for building APIs.
* **Angular** is a client-side JavaScript platform.
* **Node.js** is a server-side JavaScript runtime environment. The server uses the MongoDB Node.js driver to connect to the database and retrieve and store data. 

![MEAN stack](https://mongodb-devhub-cms.s3.us-west-1.amazonaws.com/mean_stack_e791a7354e.PNG)

## Steps for deploying truly serverless MEAN stack apps with Cloud Run and MongoDB

In the following sections, we’ll provision a new MongoDB serverless instance, connect a MEAN stack web application to it, and finally, deploy the application to Cloud Run.

### 1. Create the database

Before you begin, get started with [MongoDB Atlas on Google Cloud](https://console.cloud.google.com/marketplace/product/mongodb/mdb-atlas-self-service).

![MongoDB Atlas on Google Cloud subscription page](https://mongodb-devhub-cms.s3.us-west-1.amazonaws.com/mongodb_atlas_on_google_cloud_e3bcc0b537.JPG)

Once you sign up, click the “Build a Database” button to create a new serverless instance. Select the following configuration:

![Create new serverless instance in MongoDB Atlas configuration page
](https://mongodb-devhub-cms.s3.us-west-1.amazonaws.com/create_new_serverless_instance_9134772726.JPG)

Once your serverless instance is provisioned, you should see it up and running.

![Database deployments page in MongoDB Atlas
](https://mongodb-devhub-cms.s3.us-west-1.amazonaws.com/database_deployments_page_5309d13fb4.JPG)

Click on the “Connect” button to add a connection IP address and a database user.

For this blog post, we’ll use the “Allow Access from Anywhere” setting. MongoDB Atlas comes with a set of security and access features. You can learn more about them in the [security features documentation article](https://www.mongodb.com/docs/atlas/setup-cluster-security/).

Use credentials of your choice for the database username and password. Once these steps are complete, you should see the following:

![Screen showing 'You are ready to connect' in MongoDB Atlas
](https://mongodb-devhub-cms.s3.us-west-1.amazonaws.com/ready_to_connect_e06352f53b.JPG)

Proceed by clicking on the “Choose a connection method” button and then selecting “Connect your application”.

![Screen showing the connection string for MongoDB Atlas
](https://mongodb-devhub-cms.s3.us-west-1.amazonaws.com/connection_string_mongodb_atlas_c28ea136ce.JPG)

Copy the connection string you see and replace the password with your own. We’ll use that string to connect to our database in the following sections.

### 2. Set up a Cloud Run project

First, sign in to [Cloud Console](http://console.cloud.google.com/), create a new project, or reuse an existing one.

Remember the Project Id for the project you created. Below is an image from [https://codelabs.developers.google.com/codelabs/cloud-run-hello#1](https://codelabs.developers.google.com/codelabs/cloud-run-hello#1) that shows how to create a new project in Google Cloud.

!['Create a new project' configuration page in Google Cloud. The project id is highlighted.
](https://mongodb-devhub-cms.s3.us-west-1.amazonaws.com/create_new_project_605bbeec53.JPG)

Then, enable Cloud Run API from [Cloud Shell](https://cloud.google.com/shell):

* Activate Cloud Shell from the Cloud Console. Simply click Activate Cloud Shell.

![Google Cloud Shell Editor loading page
](https://mongodb-devhub-cms.s3.us-west-1.amazonaws.com/google_cloud_shell_editor_18236232e8.JPG)

* Use the below command:

*gcloud services enable run.googleapis.com*

We will be using Cloud Shell and [Cloud Shell Editor](https://cloud.google.com/shell/docs/editor-overview#:~:text=Cloud%20Shell%20comes%20with%20a,and%20is%20based%20on%20Theia.) for code references. To access Cloud Shell Editor, click Open Editor from the Cloud Shell Terminal:

![Google Cloud Shell Code Editor
](https://mongodb-devhub-cms.s3.us-west-1.amazonaws.com/google_cloud_shell_code_editor_51ed2f16ca.JPG)

Finally, we need to clone the MEAN stack project we’ll be deploying. 

We’ll deploy an employee management web application. The REST API is built with Express and Node.js; the web interface, with Angular; and the data will be stored in the MongoDB Atlas instance we created earlier.

Clone the project repository by executing the following command in the Cloud Shell Terminal:

`git clone` [https://github.com/mongodb-developer/mean-stack-example.git](https://github.com/mongodb-developer/mean-stack-example.git)

In the following sections, we will deploy a couple of services—one for the Express REST API and one for the Angular web application. 

### 3. Deploy the Express and Node.js REST API

First, we’ll deploy a Cloud Run service for the Express REST API. 

The most important file for our deployment is the Docker configuration file. Let’s take a look at it:

**mean-stack-example/server/Dockerfile**

```
FROM node:17-slim
 
WORKDIR /usr/app
COPY ./ /usr/app
 
# Install dependencies and build the project.
RUN npm install
RUN npm run build
 
# Run the web service on container startup.
CMD ["node", "dist/server.js"]
```

The configuration sets up Node.js, and copies and builds the project. When the container starts, the command “node dist/server.js” starts the service.

To start a new Cloud Run deployment, click on the Cloud Run icon on the left sidebar:

![Select the 'Cloud Run' icon from the left sidebar
](https://mongodb-devhub-cms.s3.us-west-1.amazonaws.com/select_new_cloud_run_e2c48b457a.JPG)

Then, click on the Deploy to Cloud Run icon:

![Select the 'Deploy to Cloud Run' icon from the opened pane
](https://mongodb-devhub-cms.s3.us-west-1.amazonaws.com/select_deploy_to_cloud_run_c90b1dc8f6.JPG)

Fill in the service configuration as follows:

* Service name: node-express-api
* Deployment platform: Cloud Run (fully managed)
* Region: Select a region close to your database region to reduce latency
* Authentication: Allow unauthenticated invocations

Under Revision Settings, click on Show Advanced Settings to expand them:

* Container port: 5200
* Environment variables. Add the following key-value pair and make sure you add the connection string for your own MongoDB Atlas deployment:

`ATLAS_URI:mongodb+srv:/<username>:<password>@sandbox.pv0l7.mongodb.net/meanStackExample?retryWrites=true&w=majority`

For the Build environment, select Cloud Build.

Finally, in the Build Settings section, select:

* Builder: Docker
* Docker: mean-stack-example/server/Dockerfile

Click the Deploy button and then Show Detailed Logs to follow the deployment of your first Cloud Run service!

After the build has completed, you should see the URL of the deployed service:

![Screenshot displaying the message 'Deployment completed successfully!' and the deployment URL.
](https://mongodb-devhub-cms.s3.us-west-1.amazonaws.com/deployment_completed_successfully_31bcb13b6f.JPG)

Open the URL and append ‘/employees’ to the end. You should see an empty array because currently, there are no documents in the database. Let’s deploy the user interface so we can add some!

### 4. Deploy the Angular web application

Our Angular application is in the client directory. To deploy it, we’ll use the Nginx server and Docker.

> Just a thought, there is also an option to use Firebase Hosting for your [Angular application deployment](https://www.youtube.com/watch?v=jVPHsolXgLk) as you can serve your content to a CDN (content delivery network) directly.

Let’s take a look at the configuration files:

**mean-stack-example/client/nginx.conf**

```
events{}
 
http {
 
   include /etc/nginx/mime.types;
 
   server {
       listen 8080;
       server_name 0.0.0.0;
       root /usr/share/nginx/html;
       index index.html;
 
       location / {
           try_files $uri $uri/ /index.html;
       }
   }
}
```

In the Nginx configuration, we specify the default port—8080, and the starting file—`index.html`.

**mean-stack-example/client/Dockerfile**

```
FROM node:17-slim AS build
 
WORKDIR /usr/src/app
COPY package.json package-lock.json ./
 
# Install dependencies and copy them to the container
RUN npm install
COPY . .
 
# Build the Angular application for production
RUN npm run build --prod
 
# Configure the nginx web server
FROM nginx:1.17.1-alpine
COPY nginx.conf /etc/nginx/nginx.conf
COPY --from=build /usr/src/app/dist/client /usr/share/nginx/html
 
# Run the web service on container startup.
CMD ["nginx", "-g", "daemon off;"]
```

In the Docker configuration, we install Node.js dependencies and build the project. Then, we copy the built files to the container, configure, and start the Nginx service.

Finally, we need to configure the URL to the REST API so that our client application can send requests to it. Since we’re only using the URL in a single file in the project, we’ll hardcode the URL. Alternatively, you can attach the environment variable to the window object and access it from there.

**mean-stack-example/client/src/app/employee.service.ts**

```
@Injectable({
 providedIn: 'root'
})
export class EmployeeService {
 // Replace with the URL of your REST API
 private url = 'https://node-express-api-vsktparjta-uc.a.run.app'; 
…
```

We’re ready to deploy to Cloud Run! Start a new deployment with the following configuration settings:

* Service Settings: Create a service
* Service name: angular-web-app
* Deployment platform: Cloud Run (fully managed)
* Authentication: Allow unauthenticated invocations

For the Build environment, select Cloud Build.

Finally, in the Build Settings section, select:

* Builder: Docker
* Docker: mean-stack-example/client/Dockerfile

Click that Deploy button again and watch the logs as your app is shipped to the cloud! When the deployment is complete, you should see the URL for the client app:

![Screenshot displaying the message 'Deployment completed successfully!' and the deployment URL for the Angular service.
](https://mongodb-devhub-cms.s3.us-west-1.amazonaws.com/deployment_completed_successfully_notice_6602368f53.JPG)

Open the URL, and play with your application!

![](https://mongodb-devhub-cms.s3.us-west-1.amazonaws.com/employees_demo_1_da0a6342ba.gif)

### Command shell alternative for build and deploy

The steps covered above can alternatively be implemented from Command Shell as below:

Step 1: Create the new project directory named “mean-stack-example” either from the Code Editor or Cloud Shell Command (Terminal):

*mkdir mean-stack-demo
cd mean-stack-demo*

Step 2: Clone project repo and make necessary changes in the configuration and variables, same as mentioned in the previous section.

Step 3: Build your container image using Cloud build by running the command in Cloud Shell:

*gcloud builds submit --tag gcr.io/$GOOGLECLOUDPROJECT/mean-stack-demo*

$GOOGLE_CLOUD_PROJECT is an environment variable containing your Google Cloud project ID when running in Cloud Shell.

Step 4: Test it locally by running: 
docker run -d -p 8080:8080 gcr.io/$GOOGLE_CLOUD_PROJECT/mean-stack-demo 
and by clicking Web Preview, Preview on port 8080.

Step 5: Run the following command to deploy your containerized app to Cloud Run:

*gcloud run deploy mean-stack-demo --image 
gcr.io/$GOOGLECLOUDPROJECT/mean-stack-demo --platform managed --region us-central1 --allow-unauthenticated --update-env-vars DBHOST=$DB_HOST*

a. –allow-unauthenticated will let the service be reached without authentication.

b. –platform-managed means you are requesting the fully managed environment and not the Kubernetes one via Anthos.
 
c. –update-env-vars expects the MongoDB Connection String to be passed on to the environment variable DBHOST.
Hang on until the section on Env variable and Docker for Continuous Deployment for Secrets and Connection URI management.

d. When the deployment is done, you should see the deployed service URL in the command line.

e. When you hit the service URL, you should see your web page on the browser and the logs in the Cloud Logging Logs Explorer page. 

![Service logs displayed in the Cloud Logging Logs Explorer page
](https://mongodb-devhub-cms.s3.us-west-1.amazonaws.com/services_logs_2085273e8a.JPG)

### 5. Environment variables and Docker for continuous deployment

If you’re looking to automate the process of building and deploying across multiple containers, services, or components, storing these configurations in the repo is not only cumbersome but also a security threat. 

1. For ease of cross-environment continuous deployment and to avoid security vulnerabilities caused by leaking credential information, we can choose to pass variables at build/deploy/up time.
    
    *--update-env-vars* allows you to set the environment variable to a value that is passed only at run time. In our example, the variable DBHOST is assigned the value of $DB_HOST. which is set as *DB_HOST = ‘<<ENCODED CONNECTION URI>>’*.

    Please note that unencoded symbols in Connection URI (username, password) will result in connection issues with MongoDB. For example, if you have a $ in the password or username, replace it with %24 in the encoded Connection URI.

2. Alternatively, you can also pass configuration variables as env variables at build time into docker-compose (*docker-compose.yml*). By passing configuration variables and credentials, we avoid credential leakage and automate deployment securely and continuously across multiple environments, users, and applications.

## Conclusion

MongoDB Atlas with Cloud Run makes for a truly serverless MEAN stack solution, and for those looking to build an application with a serverless option to run in a stateless container, Cloud Run is your best bet. 

## Before you go…

Now that you have learnt how to deploy a simple MEAN stack application on Cloud Run and MongoDB Atlas, why don’t you take it one step further with your favorite client-server use case? Reference the below resources for more inspiration:

* Cloud Run HelloWorld: [https://codelabs.developers.google.com/codelabs/cloud-run-hello#4](https://codelabs.developers.google.com/codelabs/cloud-run-hello#4)
* MongoDB - MEAN Stack: [https://www.mongodb.com/languages/mean-stack-tutorial](https://www.mongodb.com/languages/mean-stack-tutorial)

If you have any comments or questions, feel free to reach out to us online: [Abirami Sukumaran](http://www.linkedin.com/in/abiramisukumaran) and [Stanimira Vlaeva](https://twitter.com/StanimiraVlaeva).

In this blog, we'll see how Cloud Run and MongoDB come together to enable a completely serverless MEAN stack application development experience.

Serverless MEAN Stack Applications with Cloud Run and MongoDB Atlas

Joel Lord

Search is now a fundamental part of applications across all industries—but especially so in the world of retail and e-commerce. If your customers can’t find what they’re looking for, they’ll go to another website and buy it there instead. The best way to provide your customers with a great shopping experience is to provide a great search experience. As far as searching goes, Atlas Search, part of  MongoDB Atlas, is the easiest way to build rich, fast, and relevance-based search directly into your applications. In this tutorial, we’ll make a website that has a simple text search and use Atlas Search to integrate full-text search capabilities, add autocomplete to our search box, and even promote some of our products on sale. 

## Pre-requisites

You can find the complete source code for this application on [Github](https://github.com/joellord/content-catalog). The application is built using the [MERN stack](https://www.mongodb.com/mern-stack). It has a Node.js back end running the express framework, a MongoDB Atlas database, and a React front end.

## Getting started

First, start by cloning the repository that contains the starting source code.

```bash
git clone https://github.com/mongodb-developer/content-catalog
cd content-catalog
```

In this repository, you will see three sub-folders:

* `mdbstore`: contains the front end
* `backend`: has the Node.js back end
* `data`: includes a dataset that you can use with this e-commerce application

### Create a database and import the dataset

First, start by creating a free MongoDB Atlas cluster by following the [instructions from the docs](https://www.mongodb.com/docs/atlas/tutorial/deploy-free-tier-cluster/). Once you have a cluster up and running, find your [connection string](​​https://www.mongodb.com/docs/guides/atlas/connection-string/). You will use this connection string with `mongorestore` to import the provided dataset into your cluster.

>You can find the installation instructions and usage information for `mongorestore` from the [MongoDB documentation](https://www.mongodb.com/docs/database-tools/mongorestore/). 

Use your connection string without the database name at the end. It should look like `mongodb+srv://user:password@cluster0.xxxxx.mongodb.net`

```bash
cd data
mongorestore <CONNECTION_STRING>
```

This tool will automatically locate the BSON file from the dump folder and import these documents into the `items` collection inside the `grocery` database.

You now have a dataset of about 20,000 items to use and explore.

### Start the Node.js backend API

The Node.js back end will act as an API that your front end can use. It will be connecting to your database by using a connection string provided in a `.env` file. Start by creating that file.

```bash
cd backend
touch .env
```

Open your favourite code editor, and enter the following in the `.env` file. Change <CONNECTION_STRING> to your current connection string from MongoDB Atlas.

```
PORT=5050
MONGODB_URI=<CONNECTION_STRING>
```

Now, start your server. You can use the `node` executable to start your server, but it’s easier to use `nodemon` while in development. This tool will automatically reload your server when it detects a change to the source code. You can find out more about installing the tool from [the official website](https://nodemon.io/).

```bash
nodemon .
```

This command will start the server. You should see a message in your console confirming that the server is running and the database is connected.

### Start the React frontend application

It’s now time to start the front end of your application. In a new terminal window, go to the `mdbstore` folder, install all the dependencies for this project, and start the project using `npm`.

```bash
cd ../mdbstore
npm install
npm start
```

Once this is completed, a browser tab will open, and you will see your fully functioning store. The front end is a React application. Everything in the front end is already connected to the backend API, so we won’t be making any changes here. Feel free to explore the source code to learn more about using React with a Node.js back end.

### Explore the application

Your storefront is now up and running. A single page lets you search for and list all products. Try searching for `chicken`. Well, you probably don’t have a lot of results. As a matter of fact, you won't find any result. Now try `Boneless Chicken Thighs`. There’s a match! But that’s not very convenient. Your users don’t know the exact name of your products. Never mind possible typos or mistakes. This e-commerce offers a very poor experience to its customers and risks losing some business. In this tutorial, you will see how to leverage Atlas Search to provide a seamless experience to your users.

## Add full-text search capabilities

The first thing we’ll do for our users is to add full-text search capabilities to this e-commerce application. By adding a [search index](https://www.mongodb.com/docs/atlas/atlas-search/create-index/), we will have the ability to search through all the text fields from our documents. So, instead of searching only for a product name, we can search through the name, category, tags, and so on.

Start by creating a search index on your collection. Find your collection in the MongoDB Atlas UI and click on Search in the top navigation bar. This will bring you to the Atlas Search Index creation screen. Click on Create Index.

![The Create Search Index UI in Atlas](https://mongodb-devhub-cms.s3.us-west-1.amazonaws.com/create_search_index_ui_be0dc64467.png)

From this screen, click Next to use the visual editor. Then, choose the newly imported data—‘grocery/items’, on the database and collection screen. Accept all the defaults and create that index.

While you’re there, you can also create the index that will be used later for autocomplete. Click Create Index again, and click Next to use the visual editor. Give this new index the name `autocomplete`, select ‘grocery/items’ again, and then click Next.

On the following screen, click the Refine Index button to add the autocomplete capabilities to the index. Click on the Add Field button to add a new field that will support autocomplete searches. Choose the `name` field in the dropdown. Then toggle off the `Enable Dynamic Mapping` option. Finally, click Add data type, and from the dropdown, pick autocomplete. You can save these settings and click on the Create Search Index button. You can find the detailed instructions to set up the index in this [tutorial](https://www.mongodb.com/docs/atlas/atlas-search/tutorial/autocomplete-tutorial/).

![The UI with the necessary settings](https://mongodb-devhub-cms.s3.us-west-1.amazonaws.com/ui_with_necessary_settings_f9a0c5c7c5.png)

Once your index is created, you will be able to use the $search stage in an aggregation pipeline. The $search stage enables you to perform a full-text search in your collections. You can experiment by going to the Aggregations tab once you’ve selected your collection or [using Compass](https://www.mongodb.com/docs/atlas/compass-connection/), the MongoDB GUI.

The first aggregation pipeline we will create is for the search results. Rather than returning only results that have an exact match, we will use Altas Search to return all similar results or close to the user search intent. 

In the Aggregation Builder screen, create a new pipeline by adding a first $search stage.

![The Aggregation Builder in Compass](https://mongodb-devhub-cms.s3.us-west-1.amazonaws.com/aggregation_builder_compass_47cc8fe897.png)

You use the following JSON for the first stage of your pipeline.

```javascript
{
  index: 'default',
  text: {
    query: "chicken",
    path: ["name"]
  }
}
```

And voilà! You already have much better search results. You could also add other [stages](https://www.mongodb.com/docs/manual/reference/operator/aggregation-pipeline/) here to limit the number of results or sort them in a specific order. For this application, this is all we need for now. Let’s try to import this into the API used for this project.

In the file _backend/index.js_, look for the route that listens for GET requests on `/search/:query`. Here, replace the code between the comments with the code you used for your aggregation pipeline. This time, rather than using the hard-coded value, use `req.params.query` to use the query string sent to the server.

```javascript
    /** TODO: Update this to use Atlas Search */
    results = await itemCollection.aggregate([
      { $search: {
          index: 'default',
          text: {
            query: req.params.query,
            path: ["name"]
          }
        }
      }
    ]).toArray();
    /** End */
```


The old code used the `find()` method to find an exact match. This new code uses the newly created Search index to return any records that would contain, in part or in full, the search term that we’ve passed to it.

If you try the application again with the word “Chicken,” you will get much more results this time. In addition to that, you might also notice that your searches are also case insensitive. But we can do even better. Sometimes, your users might be searching for more generic terms, such as one of the tags that describe the products or the brand name. Let’s add more fields to this search to return more relevant records. 

In the `$search` stage that you added in the previous code snippet, change the value of the path field to contain all the fields you want to search.

```javascript
    /** TODO: Update this to use Atlas Search */
    results = await itemCollection.aggregate([
      { $search: {
          index: 'default',
          text: {
            query: req.params.query,
            path: ["name", "brand", "category", "tags"]
          }
        }
      }
    ]).toArray();
    /** End */
```

Experiment with your new application again. Try out some brand names that you know to see if you can find the product you are looking for. 

Your search capabilities are now much better, and the user experience of your website is already improved, but let’s see if we can make this even better.

## Add autocomplete to your search box

A common feature of most modern search engines is an autocomplete dropdown that shows suggestions as you type. In fact, this is expected behaviour from users. They don’t want to scroll through an infinite list of possible matches; they’d rather find the right one quickly. 

In this section, you will use the Atlas Search autocomplete capabilities to enable this in your search box. The UI already has this feature implemented, and you already created the required indexes, but it doesn’t show up because the API is sending back no results. 

Open up the aggregation builder again to build a new pipeline. Start with a $search stage again, and use the following. Note how this $search stage uses the `autocomplete` stage that was created earlier.

```javascript
{
  'index': 'autocomplete', 
  'autocomplete': {
    'query': "chic", 
    'path': 'name'
  }, 
  'highlight': {
    'path': [
      'name'
    ]
  }
}
```

In the preview panel, you should see some results containing the string “chic” in their name. That’s a lot of potential matches. For our application, we won’t want to return all possible matches. Instead, we’ll only take the first five. To do so, a $limit stage is used to limit the results to five. Click on Add Stage, select $limit from the dropdown, and replace `number` with the value `5`.

![The autocomplete aggregation pipeline in Compass](https://mongodb-devhub-cms.s3.us-west-1.amazonaws.com/autocomplete_aggregation_pipeline_compass_6cc4aa24fe.png)

Excellent! Now we only have five results. Since this request will be executed on each keypress, we want it to be as fast as possible and limit the required bandwidth as much as possible. A $project stage can be added to help with this—we will return only the ‘name’ field instead of the full documents. Click Add Stage again, select $project from the dropdown, and use the following JSON.

```javascript
{
  'name': 1, 
  'highlights': {
    '$meta': 'searchHighlights'
  }
}
```

Note that we also added a new field named `highlights`. This field returns the metadata provided to us by Atlas Search. You can find much information in this metadata, such as each item's score. This can be useful to sort the data, for example.

Now that you have a working aggregation pipeline, you can use it in your application.

In the file _backend/index.js_, look for the route that listens for GET requests on `/autocomplete/:query`. After the `TODO` comment, add the following code to execute your aggregation pipeline. Don’t forget to replace the hard-coded query with `req.params.query`. You can [export the pipeline](https://www.mongodb.com/docs/compass/current/export-query-to-language/) directly from Compass or use the following code snippet.

```javascript
    // TODO: Insert the autocomplete functionality here
    results = await itemCollection.aggregate([
      {
        '$search': {
          'index': 'autocomplete', 
          'autocomplete': {
            'query': req.params.query, 
            'path': 'name'
          }, 
          'highlight': {
            'path': [
              'name'
            ]
          }
        }
      }, {
        '$limit': 5
      }, {
        '$project': {
          'name': 1, 
          'highlights': {
            '$meta': 'searchHighlights'
          }
        }
      }
    ]).toArray();
    /** End */
```

Go back to your application, and test it out to see the new autocomplete functionality. 

![The final application in action](https://mongodb-devhub-cms.s3.us-west-1.amazonaws.com/final_application_in_action_79650c4cc7.png)

And look at that! Your site now offers a much better experience to your developers with very little additional code. 

## Add custom scoring to adjust search results

When delivering results to your users, you might want to push some products forward. Altas Search can help you promote specific results by giving you the power to change and tweak the relevance score of the results. A typical example is to put the currently on sale items at the top of the search results. Let’s do that right away.

In the _backend/index.js_ file, replace the database query for the `/search/:query` route again to use the following aggregation pipeline.

```javascript
    /** TODO: Update this to use Atlas Search */
    results = await itemCollection.aggregate([
      { $search: {
          index: 'default',
          compound: {
            must: [
              {text: {
                query: req.params.query,
                path: ["name", "brand", "category", "tags"]
              }},
              {exists: {
                path: "price_special",
                score: {
                  boost: {
                    value: 3
                  }
                }
              }}
            ]
          }
        }
      }
    ]).toArray();
    /** End */
```

This might seem like a lot; let’s look at it in more detail. 

```javascript
      { $search: {
          index: 'default',
          compound: {
            must: [
              {...},
              {...}
            ]
          }
        }
      }
```

First, we added a `compound` object to the `$search` operator. This lets us use two or more operators to search on. Then we use the `must` operator, which is the equivalent of a logical `AND` operator. In this new array, we added two search operations. The first one is the same `text` as we had before. Let’s focus on that second one.

```javascript
{
exists: {
  path: "price_special",
  score: {
    boost: {
      value: 3
    }
  }
}
```

Here, we tell Atlas Search to boost the current relevance score by three if the field `price_special` exists in the document. By doing so, any document that is on sale will have a much higher relevance score and be at the top of the search results. If you try your application again, you should notice that all the first results have a sale price.

## Add fuzzy matching

Another common feature in product catalog search nowadays is fuzzy matching. Implementing a fuzzy matching feature can be somewhat complex, but Atlas Search makes it simpler. In a `text` search, you can add the `fuzzy` field to specify that you want to add this capability to your search results. You can tweak this functionality using [multiple options](https://www.mongodb.com/docs/atlas/atlas-search/text/#fuzzy-examples), but we’ll stick to the defaults for this application.

Once again, in the _backend/index.js_ file, change the `search/:query` route to the following.

```javascript
    /** TODO: Update this to use Atlas Search */
    results = await itemCollection.aggregate([
      { $search: {
          index: 'default',
          compound: {
            must: [
              {text: {
                query: req.params.query,
                path: ["name", "brand", "category", "tags"],
                fuzzy: {}
              }},
              {exists: {
                path: "price_special",
                score: {
                  boost: {
                    value: 3
                  }
                }
              }}
            ]
          }
        }
      }
    ]).toArray();
    /** End */
```

You’ll notice that the difference is very subtle. A single line was added.

```javascript
fuzzy: {}
```

This enables fuzzy matching for this `$search` operation. This means that the search engine will be looking for matching keywords, as well as matches that could differ slightly. Try out your application again, and this time, try searching for `chickn`. You should still be able to see some results.

A fuzzy search is a process that locates web pages that are likely to be relevant to a search argument even when the argument does not exactly correspond to the desired information.

## Summary

To ensure that your website is successful, you need to make it easy for your users to find what they are looking for. In addition to that, there might be some products that you want to push forward. Atlas Search offers all the necessary tooling to enable you to quickly add those features to your application, all by using the same MongoDB Query API you are already familiar with. In addition to that, there’s no need to maintain a second server and synchronize with a search engine. 

All of these features are available right now on [MongoDB Atlas](https://www.mongodb.com/cloud/atlas/register). If you haven’t already, why not give it a try right now on our free-to-use clusters?

In this tutorial, we’ll make a website that has a simple text search and use Atlas Search to promote some of our products on sale.

Tutorials

Featured Tutorials

Developing a Web Application with Netlify Serverless Functions and MongoDB

Serverless MEAN Stack Applications with Cloud Run and MongoDB Atlas

Building an E-commerce Content Catalog with Atlas Search

Tutorials by Programming Language

Tutorials by Technology

Tutorials by Product

All Tutorials