Deploy a Stream Chat API With ZEIT Now

Stream Chat provides a JS Chat SDK that you can use to build custom messaging solutions for your application. Requests from the SDK are authorized via an access token provided by a backend API. Due to the restriction of having to generate a JWT token on the backend, you will need an API that supports user authentication to manage both user and JWT creation. It should also return a Stream Chat user access token (JWT) once that user is authenticated.

In this post, we will walk you through deploying an API for Stream Chat powered by Node.js and MongoDB, with ZEIT Now.

Set Up a MongoDB Atlas Database

The project we will work with stores its data on a MongoDB database. Therefore, we will need to set up said database. We will set up an account on MongoDB Atlas and create a database from there. If you don't have a MongoDB Atlas account, go to the landing page and sign up.

Create a Cluster

The next step for us is to create a cluster. If you just signed up, it should take you to the page for creating a cluster. The following steps will guide you in creating a cluster.

1. Select the Starter Clusters and click Create a Cluster.
2. Select your preferred cloud provider and region.
3. Under Cluster Tier, select your preferred tier.
4. Under Cluster Name, enter a name for your cluster.
5. Click Create Cluster button to deploy the cluster.

Set Up User Security and Firewall Access Permission

In order to work with this cluster, we need to set which users and IP addresses can connect to it. ZEIT Now does not support static IP Addresses, and for that reason, we will set up the cluster to allow connection from anywhere. Follow this instruction to white-list connection from anywhere:

1. From your Clusters view, click Connect.
2. Under the Whitelist your connection IP address step, click Add a Different IP Address.
3. Enter 0.0.0.0/0 as the IP Address and click Add IP Address.

Now that the firewall access is configured, we need to create a user that'll be used to access the cluster. We will do that from the Connect dialog window that was opened when we set the IP address whitelist. Go to the Create a MongoDB User step and enter a username and password. When you're done, click the Create MongoDB User button to complete this action.

Create Steam Chat App

We need an API KEY and SECRET to work with Stream Chat API. If you don't have a Stream Chat App already, log in to the dashboard and create an app. You will need the KEY and SECRET when deploying and running the application. If you don't know how to create an app from the dashboard, follow the steps below to create one:

1. Login to your dashboard.
2. Click the Create App button at the upper right corner of the page.
3. Enter an app name in the option for App Name.
4. Select your preferred server location.
5. Select a deployment environment (development or production), and click Submit.

Prepare The Project

We're going to work with a project available on GitHub. It's built on Express, Mongoose, and the Stream Chat library. It supports:

1. User storage via MongoDB database
2. Mongoose schema with validation for user profiles
3. Password validation and hashing with bcrypt
4. Find or create for users within the MongoDB database
5. Token generation for existing and new users (for Stream Chat)

We will clone this project from GitHub. Open your command-line application to the directory you want to keep the project and run the commands below:

1
2
git clone https://github.com/pmbanugo/stream-chat-api.git
cd stream-chat-api

Deploying to Now

We will deploy using the Now CLI. The CLI enables instant cloud deployment and local development. We're focusing on deployment, therefore, we will use it to deploy the API to the cloud. If you don't have the CLI installed, run the command npm i -g now to install it. Once installed, run now login in the command line in order to authenticate the CLI with your credentials.

The project requires certain environment variables to be set (e.g. your Stream Chat API and Key). We do not want these variables to be directly accessible to anyone. So, we will secure them using Now Secrets.

Adding Secrets

By using Now Secrets, the data will be encrypted and stored securely, and only exposed to deployments as environment variables. The project requires environment variables for the MongoDB connection, and Stream Chat Key and Secret.

Let's add a secret for the MongoDB connection. We need the MongoDB connection string, which we will get from the Atlas dashboard. Go to your MongoDB Atlas dashboard and click the Connect button. This brings up a dialog box, select Connect Your Application and copy the connection string displayed. Replace the <password> placeholder in the connection string with your user's password. Open your command-line application and browse to your project's directory. Run the command below to set the secret (you should replace <your-monogdb-connection-string> with your connection string).

1
now secrets add mongodb-uri <your-monogdb-connection-string>

This adds a secret with the name mongodb-uri which contains your MongoDB connection string.

We will add secrets for the Stream Chat app KEY and SECRET. Run the commands below to do that.

1
2
now secrets add chat-key <your-stream-chat-api-key>
now secrets add chat-secret <your-stream-chat-api-secret>

Before running the command above, replace <your-stream-chat-api-key> and <your-stream-chat-api-secret> with your Stream Chat app KEY and SECRET respectively. You can get your app KEY and SECRET from the Stream Chat dashboard.

Provide the Environment Variables

In order to provide the project with environment variables, we will add a configuration file that instructs Now to make the secrets we set as the environment variables. Add a new configuration file now.json to the project and copy the content below to it.

1
2
3
4
5
6
7
8
9
{
  "name": "stream-chat-auth-api",
  "version": 2,
  "env": {
    "MONGODB_URI": "@mongodb-uri",
    "STREAM_API_KEY": "@chat-key",
    "STREAM_API_SECRET": "@chat-secret"
  }
}

The above file tells Now the following:

1. The name of the project is "stream-chat-auth-api"
2. The platform version the project uses is Now 2.0
3. The environment variables, env, should be accessible in the app with the value of the secret you added.

Deploy to Now

The final step for us is to deploy the app. To deploy the API, use the Now CLI command below from your terminal:

1
now

This command will deploy the project to Now and give it a domain similar to https://stream-chat-auth-api.<your-zeit-username>.now.sh. You can try out the authentication endpoint by calling https://stream-chat-auth-api.<your-zeit-username>.now.sh/api/auth with the JSON payload below:

1
2
3
4
5
6
7
8
{
  "name": {
    "first": "First Name",
    "last": "Last Name"
  },
  "email": "foo@bar.baz",
  "password": "qux"
}

When you're ready to deploy to production, you should run now --prod command. The name of the domain comes from the name property in now.json. If you want to use a different name, you can change it from this configuration file before deploying.

That's A Wrap

In this article, we showed you how to deploy a Node.js API for your Stream Chat application with ZEIT Now. ZEIT Now allows you to deploy JavaScript client applications as well as serverless functions. In this article, we deployed a Node.js API as a serverless function using the Now CLI. To do this, we

1. Installed the Now CLI
2. Added Now secrets
3. Added a configuration file (now.json) which contains the project name and environment variable to the project
4. Used the now command to deploy the API

You can download the source code for the API on GitHub.