How to deploy a nx workspace (angular + nestjs) easily with ZEIT Now?

What is the purpose of this article?

In this article we will create a nx workspace with angular webapp and nestjs api. I will provide a easy way to deploy this full stack project with ZEIT Now.

What is nx?

Nx is a set of extensible dev tools for monorepos, which helps you develop like Google, Facebook, and Microsoft.
It has first-class support for many frontend and backend technologies. So we will use nx to create a full stack application in the next sections.

What is ZEIT Now?

Zeit Now is a cloud platform for serverless deployment. It's an incredibly simple, easy to use platform that allows you to deploy anything from static websites to server/serverless application instantly, scale automatically, all with minimal configuration.
This includes front-end applications (Angular/React/Vue/etc), or any backend of your choosing - Go, Node.js, Python and everything in-between!
NestJS is a Node.js framework after all, so how can we take advantage of Now, and deploy our applications ?

Create a full stack nx workspace

Open a terminal and run this command to create a new workspace :

npx create-nx-workspace@latest

Wen asked provide the same answers as following :

C:\Users\khali\devto>npx create-nx-workspace@latest
npx: installed 167 in 17.821s
? Workspace name (e.g., org name)     myorg
? What to create in the new workspace angular-nest      [a workspace with a full stack application (Angular + Nest)]
? Application name                    myapp
? Default stylesheet format           SASS(.scss)  [ http://sass-lang.com   ]
Creating a sandbox with Nx...

Serve the newly created application

In the same terminal run this commands to serve the api :

cd myorg
ng serve api

Open another terminal and do the same for the angular app :

cd myorg
ng serve myapp

open http://localhost:4200 to see both the frontend and backend working.

Setting up Zeit Now

Install the Now CLI

Since everything work good locally, we will deploy now our application using Zeit Now. So exit the the two terminal and run the following command to install Zeit Now globally.

npm i -g now

Make sure you're logged into the Now CLI (or create an account before logging in).
Type in the terminal :

now login

You will be asked to enter your email.
Follow the instructions until you get the confirmation :

C:\Users\khali\devto\myorg>now login
> We sent an email to [e-mail]. Please follow the steps provided
  inside it and make sure the security code matches Delightful Zonkey.
√ Email confirmed
> Congratulations! You are now logged in. In order to deploy something, run `now`.

C:\Users\khali\devto\myorg>

Configuring Zeit Now for Our application

Typically with Now, deployments are as simple as typing now in your terminal.

At the root of your application, create a now.json file and add the JSON code below.

{
    "version": 2,
    "name": "myapp",
    "builds": [
      { "src": "/dist/apps/api/main.js", "use": "@now/node" },
      { "src": "/dist/apps/myapp/*", "use": "@now/static" }
    ],
    "routes": [
      { "src": "/api/(.*)", "dest": "/dist/apps/api/main.js" },
      { "handle": "filesystem" },
      { "src": "/assets/(.*)", "dest": "/dist/apps/myapp/assets/$1"},
      { "src": "/(.*).(js|css|ico)", "dest": "/dist/apps/myapp/$1.$2" },
      { "src": "/(.*)", "dest": "/dist/apps/myapp/index.html" }
    ]
  }

Building & Deploying

Now that we have everything setup - let's Deploy it to Now!

NestJS is a TypeScript-based Node.js framework, so we're going to need to make sure we build it for Production (via ng build) and then we can let Now do its thing (via now) !!

    ng build --prod myapp && ng build --prod api && now --prod

We wait until Now finish doing the magic :

C:\Users\khali\devto\myorg>ng build --prod myapp && ng build --prod api && now --prod
...
...
> Deploying ~\devto\myorg under khalillou
> Using project myapp
> Synced 1 file [843ms]
> https://myapp-pscusvfx7.now.sh [3s]
> Ready! Deployment complete [25s]
- https://myapp-ten-henna.now.sh
- https://myapp.khalillou.now.sh [in clipboard]

C:\Users\khali\devto\myorg>

Open the link given by Now, and you get the same result as locally but now deployed on the cloud.

You can find the Github code example here :
https://github.com/khalilou88/nx-workspace-now

Comments

[IMarty]

Very Good Article ! Any setup to enable the autodeploy so that it automatically deploy when I push?

[Carlos Roso]

Might be too late, but I found this comment in a GH thread that proposes a combination of vercel.json and GitHub Actions.

I was able to deploy an API and Frontend from within an NX monorepo using that approach, plus a lot more configurations. I plan to write a post about that but, for now, that's a good starting point.

[Jonathan Gamble]

How do you get Vercel to build this? It looks like you're building locally, and I'm not sure this works today.