Deploying Node.js microservices to ZEIT ▲ Now

Deploying Node.js microservices to ZEIT ▲ Now

<strong>ZEIT 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.</strong>

ZEIT 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

Installation

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

$ 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:

$ 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

Successful login from Terminal


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, 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:

$ 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!

$ cd microservice
$ now

Deploying to Now and running our microservice

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.

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

index.js


now.json

It’s the deployment 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.

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

now.json


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 to create a full serverless project.

For our next trick, we will create a Nuxt.js 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 😉.

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

create-nuxt-app

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:

$ mkdir api
$ touch api/bands.js

api/bands.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

{
  "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.

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

Originally published by Julián Duque at https://dev.to

Learn More

☞ The Complete Node.js Developer Course (2nd Edition)

☞ Learn and Understand NodeJS

☞ Node JS: Advanced Concepts

☞ GraphQL: Learning GraphQL with Node.Js

☞ Angular (Angular 2+) & NodeJS - The MEAN Stack Guide

☞ Beginner Full Stack Web Development: HTML, CSS, React & Node

☞ Node with React: Fullstack Web Development

☞ MERN Stack Front To Back: Full Stack React, Redux & Node.js

node-js microservices

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How to Hire Node.js Developers And How Much Does It Cost?

A Guide to Hire Node.js Developers who can help you create fast and efficient web applications. Also, know how much does it cost to hire Node.js Developers.

Microservices with Node.JS and React.JS

11,010 students enrolled. Build, deploy, and scale an E-Commerce app using Microservices built with Node, React, Docker and Kubernetes

Hire Node.JS Developers | Skenix Infotech

We are providing robust Node.JS Development Services with expert Node.js Developers. Get affordable Node.JS Web Development services from Skenix Infotech.

Hands on with Node.Js Streams | Examples & Approach

The practical implications of having Streams in Node.js are vast. Nodejs Streams are a great way to handle data chunks and uncomplicate development.

Node.js Performance: Node.js vs. Io.js

You may already be aware that Raygun uses Node.JS for our API nodes that receive your precious crash reporting data (we also do node.js crash reporting if you’re interested). We’ve peaked in the past at more than 110,000 requests per second coming...