DEV Community: Jp Lazaro

C# 14 - Null Conditional Assignment in .NET10

Jp Lazaro — Sat, 17 Jan 2026 09:18:35 +0000

Most common error that developers encounter is NullException. A NullReferenceException is a runtime error in C# that occurs when we try to access a member (such as a method, property, or field) on a variable that is null as shown in the image below

In this blog you will know how C# 14 can help you to safely use your object properties and members without dealing with crashing and assure you will have a safe value assignment.

In C# 14 we can now use “?”

I have a small program that uses a Person class to get person information like name , age and gender. We will asign a null value to the Person john variable to show case the new feature of C# 14 Null Conditional Assignment.

OLD WAY
We use if / if else to check if the variable value is not null and use it for operation and we use it’s member for operation.

C# 14
we can now safely use value from any member of a variable without caring if it is null and having null checks everything we need to use them.

In the image below , I have changed few line of codes, as you noticed we are still getting the null exception

Let’s modify the code to add “?” beside the varaiable name observe the yellow mark in below image. the NullReferenceExceptionError gone already .

Since we are able to get the value of property without worrying about it’s nullability value we can set also a value to it without worrying about any error

I really love this update from .NET C# 14 it clearly expresses intent: update the object only if it exists, without adding extra control flow or risking a null-reference crash. It reduces boilerplate, keeps the code readable, and makes optional behavior explicit in a single line.

create Linux Virtual Machine on Azure in one minute

Jp Lazaro — Mon, 20 Oct 2025 09:50:58 +0000

In this blog post, you will learn how to create virtual machine on Azure. There are many ways to create a VM on Azure. You can create VM through Azure CLI or directly on Azure Portal.

Azure CLI

Login your azure account and select azure subscription az login
Create a new resource group. If you have existing resource group you can use that as well later. To create new Azure resource group you need to pass in a name and location az group create --name rg1 --location eastus
Create a new Virtual Machine you need to pass in the name, image,admin-username, admin-password and authentication-type

az vm create \
--resource-group rg1 \
--name vm-01 \
--image UbuntuLTS \
--admin-username defaultuser \
--admin-password "Y0urP@ssw0rd!" \
--authentication-type password

Verify if the VM resources has been created. You should see Virtual machine named vm-01

az resource list --resource-group rg1

5.Enable ssh port(22) and RDP port (3389)

az vm open-port --port 22 --resource-group rg1 --name vm-01
az vm open-port --port 3389 --resource-group rg1 --name vm-01

6.Now, we can access our Virtual Machine and let's try to remote it but first, we need to get the public IP Address of the VM.

az vm list-ip-addresses \
--name vm-01 --resource-group rg1 \
--query "[].virtualMachine.network.publicIpAddresses[0].ipAddress" \
--output tsv

then try to SSH

ssh username@public-ip-address
ssh defaultuser@<Azure VM-public ip>

7.Optionally you can setup a Remote Desktop Protocol server in your VM. We can use xrdp as RDP server on linux and install xfce4 as a lightweight desktop environment.

sudo apt update
sudo apt install xfce4 xfce4-session xrdp
echo xfce4-session > ~/.xsession
sudo systemctl enable xrdp
systemctl start xrdp
systemctl status xrdp

Now you can access your VM using any Remote Desktop Client like Windows App on mac, Remote Desktop on Windows or Remmina on Linux.

Utilizing Neon Serverless PostgresDB using .NET8 via Entity FrameworkCore + NpgSQL

Jp Lazaro — Wed, 09 Apr 2025 15:49:55 +0000

In this blog, we will integrate Neon Database in .NET Console App using Entity Framework Core and NpgSQL. We will generate database tables via Entity Framework migrations without writing any SQL Queries or manually creating it from the Neon portal. Also, we will be connecting to the database using EFCore as well and preview the data using .NET LINQ Queries.

We will also going to create , update, delete data from our Neon Database table. We will use Visual Studio 2022 for the demo. Note that this blog will not be covering the other .NET concepts like Repository Pattern in .NET and we will be directly going to communicate with Neon to focus mainly on data access.

Prerequisites

Basic knowledge of C# .NET
Experience in C# LINQ statements and expressions
Familiarity on Entity Framework

You will learn how to

Create .NET C# Console Application
Install Nugget Dependencies
Configure DatabaseContext for Neon Postgres
Generate tables dynamically using EntityFrameworkCore + NpgSQL + NpgSQL.EntityFrameworkCore to Neon Database
Create, read,update,delete data using C# .NET to Neon Database Table

Create New Console App

First, let’s create our new .NET Console Application in Visual Studio 2022. Open Visual Studio 2022 in your local computer, if not installed you can download from this link https://visualstudio.microsoft.com/ . It will take some time to install . Once installed open the Visual Studio 2022. Click the create a new project button.

A new window will show up "create your new project"

Search for “Console” and click the “Console App C# ” follow the white arrow then click next button

Enter the name of your project . In our case, i will name it as “NeonEFCoreDemo” then click next

Select .NET 8.0 as framework. Do not check / select the enable container support as we will not be using docker in this blog. Check the do not use top-level statements. Click create button

Now our C# Console Application has been created

Install Nugget Dependencies

Let’s install our dependencies. Go to Project > Manage Nugget Packages..

Manage Nugget Packages will show up, as you can see in the installed tab we do not have any packages installed. so now, let’s install the packages that we will be needing. Click Browse to search.

Search for “Microsoft.EntityFrameworkCore” in my case it is version 9.0.4 and click install.

Once installed you will see something like this. “Uninstall” button has been enabled. If you observe in the solution explorer > NeonEFCoreDemo > Dependencies > Packages it is there! it means it has been added to our project.

Let’s install these required packages as well:

Microsoft.EntityFrameworkCore.Design
Microsoft.EntityFrameworkCore.Tools
NpgSQL
NpgSQL.EntityFrameworkCore.PostgreSQL
Microsoft.Extensions.Configuration.Json

Microsoft.EntityFrameworkCore.Design

this package allows us to create our database table and update the structure of if via migrations(using ‘Add-Migration’ and ‘Update-Database’ command ) behind the scenes .
It generate tables based on your Model Classes. To make it simple it will help us to sync the structure of our tables columns without worrying the database infrastructure side whatever changes we have, we change only to code level and it will sync after we do the migration.

Microsoft.EntityFrameworkCore.Tools

this package works as enabler of command line tools for us to execute Entity Framework related commands like Add-Migration Update-Database from the Package Manager Console or dotnet CLI

NpgSQL

this package is a .NET data provider that allows .NET applications (like those using C# or ASP.NET) to interact with PostgreSQL databases. It allows us to connect to a PostgreSQL database/server and execute SQL commands, retrieve data, and perform other database operations from your .NET application.

NpgSQL.EntityFrameworkCore.PostgreSQL

this package integrates PostgresSQL with EntityFramework . Meaning , we are able to work with data using LINQ queries, migrations, and data models with PostgreSQL and working on object oriented manner.

Microsoft.Extensions.Configuration.Json

this package allows you to read configuration data from JSON files, such as appsettings.json or any other JSON file. We will be using this module to get the connection string from appsettings.json to our console app.

Finally we are able to install all the dependencies that we need to integrate smoothly to Neon Database. To verify go to installed tab or NeonEFCoreDemo > Dependencies > Packages

Create Neon Tables using Entity Framework Core Migrations

Create Models

In the Solution Explorer, let’s create a new folder called “Models”

then let’s create Todo model. right click add > new item > Todo.cs

This Todo will have two property 1 is ID, and 2nd is Title which is string

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace NeonEFCoreDemo.Models
{
    public class Todo
    {
        public int Id { get; set; } 

        public string Title { get; set; }

    }
}

let’s create another model called hobby

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace NeonEFCoreDemo.Models
{
    public class Hobby
    {
        public int Id { get; set; } 

        public string Title { get; set; }

    }
}

Create appSettings.json

As you can see in our application, there is no appsettings.json available. let’s create that file and name as “appsettings.json”

In appsettings.json paste the following code. In the DefaultConnection you need to pass in your actual connection string from the Neon Portal

{
  "ConnectionStrings": {
    "DefaultConnection": ""
  }
}

To get your database connection string go to console.neon.tech and login your account then
select your project > NeonEFCoreDemo > Connect to your database > click connect

This window will show up, click the drop down connection string to .NET

then copy the connection string and paste it to your appsettings.json

{
  "ConnectionStrings": {
    "DefaultConnection": "pastehere"
  }
}

After that, in the solution explorer right click on appsettings.json and click properties.

Change the Copy to Output Directory from “Do not Copy” to “Copy always”

Create AppDbContext

After copying the connectiong string to appSettings.json. Now let’s create the AppDbContext, this file will enable the entire functionality of Entity Framework.

Add > New Item> AppDbContext.cs . In the AppDbContext.cs file copy paste the code below.

AppDbContext inherits to DbContext which is a class from EF.
DbSet maps your database tables to specific Model which is called entities. In our case we have Todos table that represents Todo data type same goes to Hobby. AppDbContext implements override OnConfiguring - it is a EF method as well that fires when setting up the connection to the database. Inside the onConfiguring we called the UseNpSQL which is the package used to enable .NET + Postgres integration and we are passing the connection string value from the appsettings.json.

using Microsoft.EntityFrameworkCore;
using NeonEFCoreDemo.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Microsoft.Extensions.Configuration; 

namespace NeonEFCoreDemo
{
    public class AppDbContext : DbContext
    {
        private readonly IConfiguration configuration;
        public AppDbContext() : base()
        {

            configuration = new ConfigurationBuilder()
             .SetBasePath(Directory.GetCurrentDirectory())
             .AddJsonFile("appsettings.json")
             .Build();

        }

        public DbSet<Todo> Todos { get; set; }

        protected override void OnConfiguring(DbContextOptionsBuilder options)
        {
            options.UseNpgsql(configuration.GetConnectionString("DefaultConnection"));
        }
    }
}

Generate Tables on Neon using EF Migrations

As you can see here in my Neon console, as of the moment we do not have tables yet.

Now let’s generate using Entity Framework Migrations, In Visual Studio , open the Package Manager Console

Go to Tools > Nuget Package Manager > Package Manager Console

This window will show up

Let’s run the command

Add-Migration initializeDB

It will generate migration folder and files

Now let’s update our database and run the update-database command

Update-Database

Finally! We are able to generate the tables on our Neon project.

But the hobbies table is not there. Let’s add it to our database. Let’s go back to AppDbContext.cs. As you can see here there is no hobby in the DBSet only Todos has, so this was the reason why EF does not include the Hobby. Let’s Add it.

After adding it, it will look like this. Save it.

Now let’s do another migration. Open the Package Manager Console execute the

Add-Migration command but this time we need to change a little bit. Let’s use Add-Migration addHobbyTable then update database

Add-Migration addHobbyTable

Update-Database

It will look like this

Now let’s verify if the changes was reflected to our Neon console.

There you go! we are able to update our database structure very fast using the Entity Framework Core Migrations. We can directly sync it from our code level to database infrastructure.

Adding data to Neon Table

In program.cs, let’s create a new Todo object with name “eating”

Then let’s create instance of AppDbContext called context

Then use context.Todos.Add method to add the todo object to Todos table in the database
Then call SaveChanges() and that’s it! Let’s run the app

Now let’s verify the changes in Neon console

  var todo = new Todo()
  { 
      Title = "Eating",
  };

  var context = new AppDbContext();
  context.Todos.Add(todo); 
  context.SaveChanges();

  Console.WriteLine("");
  Console.Read();

There you go! As you can see the data that we have added has been added

Update record from Neon Table

Now let’s update the “eating” to “eating fruits” . We have to change the code again. Delete all the codes inside the main method and paste the below code

var context = new AppDbContext();  
var todo = context.Todos.Where(x=>x.Id == 1).FirstOrDefault();
todo.Title = "Eating Fruits";
context.SaveChanges();

Console.WriteLine("");
Console.Read();

Let’s verify, See now the changes

Delete record from Neon Table

Now let’s delete the “eating fruits” data . To delete you have to get the data first using .Where method then use the context.Todos.Remove(todo) method and pass in the todo object that you need to remove

var context = new AppDbContext();  
var todo = context.Todos.Where(x=>x.Id == 1).FirstOrDefault();
context.Todos.Remove(todo);
context.SaveChanges();

Console.WriteLine("");
Console.Read();

Let’s verify, Now it is gone

Add bulk data to Neon Table

Now let’s add collection of data to Neon database table

 var todos = new List<Todo>();
 todos.Add(new Todo {
    Title = "Watch Netflix"
 });
 todos.Add(new Todo
 {
     Title = "Watch VivaMax"
 }); todos.Add(new Todo
 {
     Title = "Watch Disney+"
 });

 var context = new AppDbContext();
 context.Todos.AddRange(todos);
 context.SaveChanges();

 Console.WriteLine("");
 Console.Read();

Let’s verify, See now the changes . Also noticed that the ID field has been automatically incrementing

Display data from Neon Table

Now let’s print the collection of data from Neon database table to Console

 var context = new AppDbContext();
 var todos = context.Todos.ToList();

 foreach (var todo in todos)
 {
     Console.WriteLine($" {todo.Title} "); 
 } 
 Console.Read();

Let’s run the application see

Conclusion

Finally we are able to create database tables via .NET way.
We are also able to perform basic CRUD operation using entity framework.
Thank you for reading, if you find this blog interesting please comment. It helps me to write more blogs like this.

Deploy your Blazor App to Azure App Service

Jp Lazaro — Tue, 25 Mar 2025 10:13:07 +0000

In this blog, you will learn how to deploy your Blazor App to Azure App Service from scratch.

Create new project

Search “Blazor”, Select “Blazor Web App”

name your project name as “MyBlazorApp” and click Next

In this page, let’s leave the additional information as it is. However, if you want to change something feel free.

Now, our project “MyBlazorApp” has been created.

Let’s run the application.

Alright, let’s change the “Hello World” text to “Hello Azure App Service”
Go to Components > Pages > Home.razor

Home.razor, let’s change the text of h1 “Hello world” to “Hello Azure App Service“

Let’s run again the app and see the changes

Now let’s setup Azure App Service and deploy our Blazor App to Azure
Go to Build > Publish “MyBlazorApp”

A pop up will show up, asking where do you want to publish your application?
In our case, we will select “Azure” as we want to deploy it in Azure App Service
Select Azure > click Next button

click Azure App Service (linux) , click next button

Next step is to login your Azure Subscription Account, In my case i have already logon to my Azure subscription. Once you login you will see this window.

You can click create a new instance to create new if you do not have yet. You can also use azure cli or Azure portal to create your instance. In our case let’s click “Create a new instance”

New instance window will show up

Let’s change the name of our App service from “MyBlazorApp…. to “as-myblazorapp”

“as” means azure app service, so we can distinguish and identify easily the type of our azure services.

Create a new resource group click “New”

name it as “rg-myblazorapp” - rg means “Resource Group”

Let’s create our new Hosting Plan too click “New”

name it as “asp-myblazorapp” asp means “Azure service plan” abbreviation . Click okay to continue

so here is our Azure Service App instance details, before clicking create , you can review. Once you have reviewed your details you can click “Create” button to proceed with the enablement of instance

Now, Azure is now provisioning your Azure App Service, you can see the loading icon on the bottom left side of the window and wait for it to finish.

Alright! Now you can see your resource group, and Azure App service listed

click finish and close the window.

To check if your instance has been created successfully, go to Azure Portal . In the azure portal you will see “rg-myblazorapp” resource group has been created for you.

Let’s click the resource group and view the App service, so as you can see here as-myblazorapp (Azure App Service) as been created too and asp-myblazorapp (Azure App Service Plan)

Now let’s go back to Visual Studio open the publish window.

As you can see in your publish profile, there is an Azure App Service profile created for you.

You can also see the hosting details of your Azure App Service here, containing the Account, Subscription key, your resource group that we have created and the resource itself Azure App service named “as-myblazorapp”.

Now, let’s preview the site URL before publishing our Blazor App , click the site link

Now, we can see that our instance is now up and running on the cloud.

Let’s deploy our Blazor Web App
To deploy, let’s use the profile that we have created. Click publish

Wait for it to finish

Once published you will see “Publish succeeded” message . To preview your application - click Navigate.

Finally! our Blazor App is now up and running on the cloud.

That's it, please let me know your thoughts!
Thank you for reading. Have a nice day! :)

Containerize your NodeJS App using Docker and deploy it to Azure Container Apps

Jp Lazaro — Sat, 08 Mar 2025 08:28:49 +0000

In this blog you will be able to learn the following

Containerize your node app using Dockerfile
Build and create your own image using docker
Setup your Azure Services like resource group, Azure Container Registry, Azure Container Env and Azure Container Apps
Setup your Azure Container Registry and Setup Access Keys
Deploy your image to Azure Container Registry
Create your Azure container app via Azure CLI

Create a folder and open it in VS code

Open terminal and initialize node project

It will generate package.json

Let’s install express.js

Let’s create express API

Configure package.json to run the app

Lets run the app

Create dockerfile

Create docker ignore

Next step is installing docker desktop in our local computer.
Once installed, let's open it, and explore

These are the containers available in your computer. As you can see there are no containers yet.

These are the images available in your computer. As you can see there are no images yet.

These are the image builds available in your computer. As you can see there are no image builds yet.

Now let's build our new image using docker command :

docker build -t azdockernode .

Check the docker desktop > Builds : you will see it is now building your image

Once completed it will be available in Images list in your docker desktop

Let's install Azure CLI
Download the installer from the official website of microsoft

az login

Create resource group

 az group create  --name myrg1 --location eastus

Create Azure Container Registry

az acr create  --resource-group myrg1  --name myrg1acr1 --sku Basic  --location eastus

You can now see your ACR in your resource group

Now, let's setup the access key so we can publish our local image later on.

Click the admin button

it will generate username and password, later we will use this credentials to push our image to this azure container registry

Let's login our ACR in terminal

We need to tag our local image to Azure container registry

docker tag azdockernode myrg1acr1.azurecr.io/azdockernode

We need to tag our local image to Azure container registry

docker tag azdockernode myrg1acr1.azurecr.io/azdockernode

Now let's push our image to the Azure Container Registry

docker push  myrg1acr1.azurecr.io/azdockernode

To verify the completion of push. You can go to azure portal > myrg1acr1 (your Azure container registry)> repository

Next step is to create Azure Container Apps Environment

az containerapp env create   
--name mycontainerenv1 
--resource-group myrg1
--location eastus

Finally, lets create the container app

az containerapp create 
--name mycontainerapp1 
--resource-group myrg1 
--image myrg1acr1.azurecr.io/azdockernode 
--environment mycontainerenv1 
--cpu 1 
--memory 2Gi 
--target-port 3000 
--ingress external 
--registry-server myrg1acr1.azurecr.io
--registry-username myrg1acr1 
--registry-password <<PASSWORD FROM Azure Container Registry Admin>>

once successful you will see some json like this

We can verify again in the Azure Portal if it's created

Finally, you made it!
Thank you for reading!

Working with Tuples in C# .NET

Jp Lazaro — Fri, 07 Mar 2025 11:14:53 +0000

What is Tuple?

Is a data structure, that allows you to group a fixed set of elements of different data types in single container or unit.

Key Features

Grouping elements or types in a single unit

The primary purpose of Tuple is to group types in single unit for faster and efficient way of processing

Multiple / Different types

Processing different types in your functions/method is quite difficult, using Tuples it enables us to use multiple or different types at once. This helps processing much easier and processing data and returning it all in a single unit.

Performance

Compare to class , using tuple is quite fast than class when grouping data is concern

Initializing a tuple

To initiate a tuple in C#, follow the syntax below and example

Syntax
var variableName = new Tuple<T1, T2, ..., TN>(v1,v2,..,v3);

Example
var person = new Tuple<string, int, string>("John Laz", 40, "Singapore");

Accessing Tuple

In order to process a data for your specific use case. You have to access your tuple and get the values of it. To access the value of tuple you have to follow the below syntax. You can use the .Item1 , .Item2 where n is the index of the data.

Syntax

var getTupleData_data1 = variableName.Item1;
var getTupleData_data2 = variableName.Item2;
var getTupleData_data3 = variableName.Item3;

Example

var person = new Tuple<string, int, string>("John Laz", 40, "Singapore");
var getName = person.Item1;
var getAge = person.Item2;
var getCountry = person.Item3;

In C# 7 and above

you can use the below syntax to initialize a tuple. As you can see
in the example below C# is able to understand that you are assigning a tuple to the person variablewithout telling C# that the data is tuple

Syntax

var variableName = (v1,v2,..,v3);

Example

var person = ("John Laz", 40, "Singapore");
var getName = person.Item1;

Another example is to define an argument in tuple. By defining an argument, you can specify the name of tuple data you are defining. This is a very good feature, so you can see what kind of data you are parsing and processing to. See example below

Syntax

where t = data type , n= type name - example "age", "country" and V= value of data type (t1 n1, t1 n2, tn nn) variableName = (v1,v2...,vn);

Example

(string name, int age, string country) person = ("John",40, "Singapore");
var getName = person.name;

Compare to using .ItemN or .Item1..2..3 it is much better to use .propertyname or person.name in the example above to clearly know what data you are processing.

Usage

Below are the common use cases that you can apply tuples

Passing multiple arguments to a function
Processing multiple arguments to a function
Returning multiple values from a function
Representing data structure for multiple data types
Representing temporary data structures

For more questions you can leave comments below
You can also follow me on youtube

https://www.youtube.com/@codewithsirjp

Deploy ReactJS App on Firebase Hosting

Jp Lazaro — Thu, 06 Feb 2025 04:41:41 +0000

In this video we will deploy reactJS app on firebase Hosting

Deploying Angular18 to Firebase Hosting

Jp Lazaro — Fri, 06 Sep 2024 14:30:56 +0000

How to deploy your Angular 18 to Firebase Hosting

Using the firebase spark plan, it is free for you to use firebase hosting to deploy your web apps on the fly. In this article i will teach you how to deploy your AngularApp to Firebase Hosting

Creating new Angular Project

Let's create a new Angular Project. To create a new Angular app use the Angular cli command

ng new FirebaseHostingDemo

Open your project in Visual Studio Code

Creating Firebase Project and Firebase WebApp

Go to https://console.firebase.google.com/ . Create new Firebase Project

Disabled Google Analytics, in this blog we will not use Google Analytics.

Wait for it to finish

Next, we need to create a new web app in Firebase. Click the highlighted icon to create web app

Enter your web app nickname, could be anything you want. In this example we called it "FirebaseHostingDemo"

Tick the checkbox "Also set up Firebase Hosting" and click "Register app"

Go back to your AngularApp install firebase using npm

npm install firebase

Initialize Firebase in your Angular App

Go back to console.firebase.com website setup. Copy the configuration to your AngularApp

In Visual Studio Code Angular App, open app.component.ts

Paste the configuration from console.firebase.com to app.component.ts

Install Firebase Tools

Go back to your vs code terminal and install

npm install -g firebase-tools

In VS Code Terminal, login your firebase account, to login simply write the command below

firebase login

Initialize Firebase to your AngularApp

Run the firebase init command to initialize firebase in your angular app

firebase init

Are you ready to proceed ? Y

Which Firebase features do you want to set up? ....

Project Setup > Use an existing Project

List of your projects will be displayed. Select your project "fir-hostingdemo-...." you want to use. In my case here is my project name

Do you want to use public directory? write "public"

Configure as SPA / single page app? Y
Setup automatic builds? N

Congratulations, Now your firebase initialization has been configured

In your AngularApp folder you should see firebase.json and .firebasessrc files created

Go back to firebase.console.com Copy the site value and public and paste it to your firebase.json

change the "public" to "public/browser" too.

Go to angular.json change the outputPath from "dist/,,," to

to public

Now run ng build, to create build files

ng build

After the build, you will see the public folder will have "browser" folders and "server".
These are the build files we will deploy to firebase hosting

Deploying AngularApp to Firebase Hosting

Let's go to Firebase Hosting . To go click "Build" > Hosting

As you can see below you have two hosting environment.

To view your website you can view the domain and preview

By default this what your website should looks like this. if you have not done any deployment / release yet.

Now we will deploy our AngularApp to firebase hosting

Finally we have sucessfully deployed our AngularApp to Firebase Hosting

If you want to change the deployment hosting target of your release you can simply change the
firebase.json file and change the site property to whatever site you want to deploy

In my firebase project i can deploy to this two hosting environment

Thank you for reading my article. Please react or comment if you have any issues.

Getting started with Tailwind + Daisy UI in Angular 18

Jp Lazaro — Mon, 08 Jul 2024 13:24:45 +0000

Installation

Visual Studio Code
https://code.visualstudio.com/
NodeJS
https://nodejs.org/en
Angular CLI
npm install @angular/cli

Creating Angular App

Create your own project folder via cmd / manually create it.
Open that folder in visual studio code
Open new VScode terminal
In cmd / Terminal create new angular app ng new <projectname> ng new myapp
Change directory to that folder cd myapp

6.To run the newly created angular app you can write in terminal / cmd

Npm start

Congratulations you’ve created your first angular app. Now let's try to learn tailwind

Tailwind CSS

To configure tailwind css in your Angular App you have to do the following steps

1.Install Tailwind CSS
npm install -d tailwindcss

2.Initiate Tailwind.config.js
By default the tailwindcss is not available, to initiate tailwindcss you need to run the below command to generate the tailwind.config.js.
npx tailwindcss init

Open Tailwind.config.js and change the content to below [“./src/*/.{html,js}”] previously “content” do not have any value by default.

4.Go to src folder > styles.css and add the following codes in styles.css
@tailwind base; @tailwind components; @tailwind utilities;

5.Open the terminal again and input the below command
npx tailwindcss -i ./src/styles.css -o ./src/output.css --watch

After running the command, it will generate output.css file automatically. This will Map your changes on styles.css to output.css and sync them automatically when styles.css gets updated.

6.Next step is to map the output.css to your Angular App index.html. It will enables you to see your styles changes in the frontend side. Because if you did not attached the output.css you will not see your changes made in terms of styles.

Go to > src > index.html then add
<link href="./output.css" rel="stylesheet">

7.Then you go to src > app > app.component.html , remove all the html and css default content of angular and paste the code below

8.Finally! You have made it! You have created your first tailwind ui component

Let’s try to add some fun and improve our style a little bit. We will create card using Tailwind CSS. Please copy paste the below codes or manually type it for you to be familiar with the basic tailwind utility classes like shadow, background, padding, fonts etc.

In app.component.html. Then run the angular app again using npm start command and you will see this beautiful card made using Tailwind css in your Angular App running. Congratulations youre now able to use the tailwind Css styles.

Congratulations! you are now able to start learning tailwind css and learn the utility classes. If you want to learn more about tailwind and it is utility classes you can visit https://tailwindcss.com/ . Tailwind CSS is a great Css framework that you can use to style web application faster and easier and there is a lot to offer like multiple theming, easy multiple device responsive display implementations and combining utility classes to create more customizable component.

Daisy UI

What is Daisy UI?

Is a component library framework and it extends the tailwind utility classes. It provides pre built UI component like buttons, cards, modals, accordion, drawers, navigation and more. You can use these pre built component right away to your tailwind project

Why do you need to use DaisyUI?

One of the downside of tailwind css , when you are using tailwind utility classes it makes your html tag classes long as you need to use the tailwind classes all the time just to achieve your desire component look and feel. As tailwind is very flexible it is also the key feature of it . As application is getting bigger, maintaining tailwind styles is quite time consuming to maintain and update styles when needed.

Daisy UI provides a bunch of pre defined components, meaning you can just call the daisy component classes and it will apply the component style right away with little code than the tailwind classes. Daisy uses tailwind as a base meaning you can still use tailwind utility classes whenever you need. Imagine if you need to create a card you just need to call the below classes

rather than creating your own card from scratch using Tailwind utility classes, see the below image to see how long the classes looks like vs daisy classes only contains "card" and "card-title"

For me, tailwind css is more robust if you want your styles to maintain and scale anytime, you can change it and use it while daisy offers a ready based component that you can use right away. I love using daisy as it supports tailwind utility classes as well. Why just use the two together? I would say daisy has the same concept with bootstrap.

Installation

To configure daisy UI in your Angular App you have to do the following steps

Install Tailwind CSS npm install -d tailwindcss

In tailwind.config.js, add the daisy in the plugins plugins : [require(‘daisyui’),]

Now, let us use the daisy UI to our angular tailwind project. Click the below link and copy paste the dropdown html to your Angular app app.component https://daisyui.com/components/dropdown/

In Daisy ui component > dropdown page, copy the html and paste to app.component.html

If you save and run the angular app ng serve or npm start this will look like.

Congratulations! You are now using Daisy UI + Tailwind CSS in your Angular App. Daisy has bunch of components that you can use in your web app project. You can visit this link to explore more the daisy ui components .
https://daisyui.com/components/