
Angular and Nestjs project using Nx
Steps to setup
- Initialize a new Nx workspace using the command
npx create-nx-workspace@latest
. This sets up the foundation for your project.
-
Run
npm i --force
to ensure that dependencies are installed correctly. -
Add Nx Angular capabilities to your workspace with
npm install -D @nx/angular
. -
Generate an Angular application named “web” using
npx nx g @nx/angular:app web --unitTestRunner none --e2eTestRunner none
. This creates the frontend component of your project. -
Integrate Nx Nest capabilities with
npm install -D @nx/nest
. -
Create a NestJS application named “api” that will serve as the backend of your project. Link it to the “web” frontend using
npx nx g @nx/nest:app api --frontendProject web --unitTestRunner none --e2eTestRunner none
. -
Install Angular Material with
npm i @angular/material
to enhance your frontend’s UI capabilities. -
Integrate Angular Material into your “web” project using
npx nx g @angular/material:ng-add --project=web
. -
Set up Tailwind CSS with
npx nx g @nx/angular:setup-tailwind web
. Note: Move@tailwind base
,@tailwind components
, and@tailwind utilities
to the bottom in yourstyle.scss
file for proper styling. -
Launch your frontend development server with
npx nx serve web
. -
Launch your backend development server with
npx nx serve api
.
This series of steps establishes a powerful Nx workspace for developing a full-stack Angular and NestJS application, with each step carefully configuring and connecting the necessary components and tools.