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 me@example.com. 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
Top comments (3)
Very Good Article ! Any setup to enable the autodeploy so that it automatically deploy when I push?
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.
How do you get Vercel to build this? It looks like you're building locally, and I'm not sure this works today.