Deploying Node.js microservices to ZEIT Now
Tags: node, microservices, zeit, serverless
Published: 2019-04-04 21:08:55

---
title: Deploying Node.js microservices to ZEIT ▲ Now
published: true
description: In this article we are going to see how to deploy Node.js microservices and static websites to the Now v2.0 platform by ZEIT ▲
tags: nodejs, microservices, zeit, serverless
---

[ZEIT Now](https://zeit.co/now) is a cloud platform to deploy serverless applications, one of the things I like the most about Now is their DX (Developer Experience), it makes it very pleasant to deploy microservices to the cloud.

In this article we are going to learn how to install Now and start deploying with one single command, `now`.

## Prerequisites

* Node.js 10 LTS Installed
* A terminal
* Code editor of your choice
* A ZEIT Now account, you can signup for free [here](https://zeit.co/signup)

## Installation

First, let's install `now` CLI from `npm` by running the following command:

``` bash
$ npm install -g now
```

## Login

Next, we need to identify ourselves in the platform, `now` CLI offers an easy way to do this by running:

``` bash
$ now login
```

This will ask for your email and will send you a Verification email, just by clicking on Verify will log you in the platform, it's like magic 🔮!

![Verifying Email](https://cldup.com/w7l9-mQIOU.png)
<figcaption>Verifying email</figcaption>


![Successful login from Terminal](https://cldup.com/6qew2zrzkK.png)
<figcaption>Successful login from Terminal</figcaption>


## Create your first Microservice

We are ready to start creating our first `microservice` (or serverless application, you name it).


Now provides a list of [examples](https://zeit.co/examples/), for our exercise we are going to use Node.js ⬢, but hey!, Now supports other languages and platforms too, just give it a try with the one you like the most 😉

To start witht he Node.js template let's run the following command:

``` bash
$ now init nodejs microservice
```

This will create a folder called `microservice` with the Node.js template.

**Now** is time to deploy our example to the cloud, let's go to that folder and execute `now` to see what happens!

``` bash
$ cd microservice
$ now
```

![Deploying to Now](https://cldup.com/Mitp20os7X.png)
<figcaption>Deploying to Now and running our microservice</figcaption>

![It's magic](https://media.giphy.com/media/3o7TKP9ln2Dr6ze6f6/giphy.gif)

Before continuing with our next trick, let's explore the files we are deploying:


### `index.js`

It contains a simple function with the `request` and `response` objects from Node.js, this will be executed on every request made to our microservice.

``` js
module.exports = (req, res) => {
  res.end(`Hello from Node.js on Now 2.0!`);
};
```
<figcaption>index.js</figcaption>


### `now.json`
It's the [deployment configuration](https://zeit.co/docs/v2/deployments/configuration/) file, used to specify the name of our project, the type of builders we are going to use, routes, etc. More information can be found in their [documentation](https://zeit.co/docs/v2/deployments/basics/).

``` json
{
    "version": 2,
    "name": "nodejs",
    "builds": [
        { "src": "*.js", "use": "@now/node" }
    ]
}
```
<figcaption>now.json</figcaption>

## Monorepo

What we have seen so far seems simple, but, here comes the real power of `now`, we can mix and match different microservices in a [`monorepo`](https://en.wikipedia.org/wiki/Monorepo) to create a full serverless project.

For our next trick, we will create a [Nuxt.js](https://nuxtjs.org/) static application that will be doing API requests to a Node.js microservice, both are going to be deployed to `now` using the `monorepo` approach.

Let's create a `monorepo` folder and then run `create-nuxt-app`, this will create a basic Nuxt.js application for you, just make sure to select `Axios` support in the features section, we will use it later 😉.

``` bash
$ mkdir monorepo
$ cd monorepo
$ npx create-nuxt-app www
```

![create-nuxt-app](https://cldup.com/5Bm-3oazw0.png)
<figcaption>create-nuxt-app</figcaption>

We have our frontend application almost ready, we will need to add an API to our `monorepo` project, let's create an `api` folder and add a Node.js `microservice` in there (no need to create the `now.json`, we will take care of that later).

Let's create a `bands` microservice:

``` bash
$ mkdir api
$ touch api/bands.js
```

### `api/bands.js`

``` js
module.exports = (req, res) => {
  const bands = [
    {
      name: 'Dio',
      genre: 'Heavy Metal'
    },
    {
      name: 'Anthrax',
      genre: 'Trash Metal'
    },
    {
      name: 'Tenebrarum',
      genre: 'Gothic Metal'
    }
  ]
  res.end(JSON.stringify(bands))
}
```
_yes, I like Metal 🤘_

Let's create a Deployment Configuration file to wire up our two project in the monorepo.

### `now.json`

``` json
{
  "version": 2,
  "name": "monorepo",
  "builds": [
    { "src": "www/package.json", "use": "@now/static-build" },
    { "src": "api/*.js", "use": "@now/node" }
  ],
  "routes": [
    { "src": "/api/(.*)", "dest": "/api/$1" },
    { "src": "/(.*)", "dest": "/www/$1" }
  ]
}
```
_More information about how routes work in their [documentation](https://zeit.co/docs/v2/deployments/routes/)._

Here we are creating both the API and the Web project in one single repo using two different serverless applications, one served by `@now/node` and the other built by `@now/static-build`.

Before deploying let's add the following to our `www` project:

* Add a `now-build` script to the `package.json` file as following:

```
"now-build": "API_URL=https://monorepo.julianduque.now.sh npm run generate"
```

This will setup `Axios` to discover our API endpoint in the proper URL (make sure to use your alias here), and will tell `now` how to generate a static site for Nuxt.

* Let's update our `pages/index.vue` page to execute the Bands microservice we implemented with Node.js

``` js
export default {
  components: {
    Logo
  },
  data: function () {
    return {
      bands: []
    }
  },
  methods: {
    async loadBands () {
      try {
        this.bands = await this.$axios.$get('/api/bands.js')
      } catch (err) {
        console.error(err)
      }
    }
  }
}
```

* Add a Button to the `<template>` and render the items with Vue.js

``` vue
<a v-on:click="loadBands">Load Bands</a>
<ul v-bind:key="band.name" v-for="band in bands">
  <li>{{ band.name }} - {{ band.genre }}</li>
</ul>
```

And voila! We have connected our two serverless applications in one monorepo with Now!

![Mind Blown](https://media.giphy.com/media/3o8dFn5CXJlCV9ZEsg/giphy-downsized.gif)

I hope you liked this tutorial and if you speak Spanish let me invite you to my semi-weekly Node.js show on [Twitch](https://twitch.tv/julianduque) - [Node.js ¡En Vivo!](https://www.youtube.com/user/julianduquej) 💜