Angular NX and 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

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.

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

--

--

--

Among other things | 🚀 Software Engineer 👨‍💻 passionated ❣ about Angular, Node, RxJS and DataViz. Toppings that do my life & code easier 🏖 and less 🍝 🚀 |

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

CSS to clear distinguish “O” and “0”

Top 10 Frequently made mistakes while working with Angular 2+

Server side vs. Client side Rendering in ReactJS

Zapier Webhooks + Google Sheets + Cotter: Send Additional Fields Data to Your Google Sheets using…

Simple Web Apps using Basic CSS and JavaScript

terminal

From AngularJS to Vue.js, CommonJS and Jest

Password Manager with AppleScript — Part 1

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Karim

Karim

Among other things | 🚀 Software Engineer 👨‍💻 passionated ❣ about Angular, Node, RxJS and DataViz. Toppings that do my life & code easier 🏖 and less 🍝 🚀 |

More from Medium

How to fix “ng: command not found” in angular

How to fix

Angular Best Practices: Foundation For Performant Angular Apps

Building Autocomplete Search Component from Scratch: Angular

Import and export data in CSV in Angular.