Angular NX and Vercel

A DevOp day deploying Nx Angular monorepos through Vercel

Nx is like a kind of framework for creating modern projects, its app skeleton is similar to a mono-repository. There, you can have your Front and Back end and shared all your interfaces and classes between them, that one of the top benefit I saw

Introduction

For the case of Angular monorepo for Front, among other features it comes with Jest, Cypress and EsLint by default, so it has been my favourite choice for creating new project in Angular.

Have a look to these links if you have no idea about what I am talking about

Nx: Powerful, Extensible Dev Tools

Code-sharing made easy in a full-stack app with Nx, Angular, and NestJS - Angular inDepth

Another thing I found in the last days was Vercel, a great platform for deploying software. You will be able to import your git repository and deploy instantaneously your product, once the pipeline has already finished successfully.

Develop. Preview. Ship. For the best frontend teams — Vercel

Problem

You can choose a lot of frameworks to deploy in Vercel, however there is no exists one a choice for Nx

Project Name

Connect your git repository

Options for choosing the framework

Solution

I found a way to do that, so I will put and share here my config just in case you are in a similar situation

In Project Settings choose Other for Nx and Angular

Leave this with the default options

Deployments

Logs

Just if you want to see the site

https://nx-room-homepage.vercel.app/

✍ Conclusion ✍

We see a new stack for you to show all the magic behind your full stack powers ;)

I will keep me up to date with Nx since it is gaining more space in this huge universe of techs that are appearing everyday.

Also, my first experience with Vercel that I have known through Frontend Mentor was very nice. Basically, it is so easy and fast for deploying basic projects and also for free.

I hope this article can give you fresh ideas for exploring new worlds in web development to make your days easier