DEV Community: Samira Awad

How to Deploy ASP.NET Applications on IIS: Complete Guide

Samira Awad — Sun, 23 Mar 2025 19:43:26 +0000

Deploying ASP.NET applications on IIS is an essential task for developers working in Windows environments. In this tutorial, I'll guide you step-by-step on how to deploy both ASP.NET Framework and ASP.NET Core applications on IIS, including setting up custom domains, SSL certificates, and more.

Prerequisites

Before starting, make sure you have the following:

IIS installed on your server or local machine.
Published ASP.NET application (either .NET Framework or .NET Core).
A custom domain (optional but recommended for production).
An SSL certificate (optional but essential for HTTPS).
Administrator permissions on the server.

Step 1: Install IIS and Required Tools

1.1 Install IIS

Open the Control Panel and select Programs > Turn Windows features on or off.
Look for Internet Information Services (IIS) and check the box to install it.
Make sure to include the following features:
- ASP.NET (for .NET Framework applications).
- ASP.NET Core Module (for .NET Core applications).
- CGI (only if you need to run additional applications).

1.2 Install .NET Runtime (Only for ASP.NET Core)

If your application is ASP.NET Core, you need to install the corresponding runtime:

Download the runtime from the official .NET website.
Install the version that matches your application.

Step 2: Publish the ASP.NET Application

2.1 Publish from Visual Studio

Open your project in Visual Studio.
Right-click on the project and select Publish.
Configure the publishing profile:
- Folder: Publish to a folder on your server.
- IIS: Publish directly to IIS if you have a publishing profile configured.

2.2 Prepare the Published Files

Copy the published files to a folder on the server (e.g., C:\Applications\MyAppASP).
Ensure the folder has read and execute permissions for the IIS_IUSRS user.

Step 3: Create a Site in IIS

3.1 Create the Site

Open IIS Manager (press Win + R and type inetmgr).
Right-click on Sites (left panel) and select Add Website.
Configure the following:
- Site name: A descriptive name (e.g., MyAppASP).
- Physical path: Select the folder where the published files are located.
- Binding: Configure the port (80 for HTTP or 443 for HTTPS) and host name (your custom domain, e.g., myapp.com).

3.2 Configure Bindings

Bindings are essential to associate a website with an IP address, port, and domain name.

In IIS Manager, select the site you just created.
In the right panel, click on Bindings.
Add a new binding for HTTPS if needed:
- Type: https or http.
- Port: 443 or 80.
- Host name: myapp.com.
- SSL certificate: Select your installed certificate.

Step 4: Configure the ASP.NET Module

4.1 For .NET Framework Applications

Ensure ASP.NET is installed in IIS.
In IIS Manager, select the website.
In the center panel, double-click on Modules.
Verify that the ASP.NET module is present and enabled.

4.2 For .NET Core Applications

Ensure the ASP.NET Core Module is installed in IIS.
In IIS Manager, select the website.
In the center panel, double-click on Modules.
Verify that the ASP.NET Core Module is present and enabled.

Step 5: Configure the Hosts File (Optional for Local Testing)

If you're testing locally and want to use a custom domain, you need to add an entry to the hosts file.

Open Notepad as an administrator.
Go to File > Open and navigate to: C:\Windows\System32\drivers\etc\hosts

Copy

Add a new line at the end of the file with the format: 127.0.0.1 myapp.com

Copy
(Replace 127.0.0.1 with your server's IP if working on a network).

Save the file.

Step 6: Configure Permissions and Security

6.1 Folder Permissions

Right-click on the application folder and select Properties.
Go to the Security tab and add the IIS_IUSRS user with read and execute permissions.

6.2 Authentication in IIS

In IIS Manager, select the website.
In the center panel, double-click on Authentication.
Enable Anonymous Authentication if needed.
If additional authentication is required, enable Windows Authentication or Basic Authentication.

Step 7: Configure SSL Certificate (Optional but Recommended)

7.1 Obtain an SSL Certificate

You can get a free certificate from Let's Encrypt or purchase a commercial one.
Install the certificate on the server.
Associate it with the HTTPS binding.

Step 8: Test the Application

Start the site in IIS (select the site and click Start in the right panel).
Open a browser and visit your application's URL (e.g., https://myapp.com).
Verify that the application loads correctly and the SSL certificate is active (green lock in the address bar).

Configure HTTP to HTTPS Redirects in IIS

When deploying an application in production, it's a good practice to redirect all HTTP traffic to HTTPS to ensure secure connections. Here's how to do it in IIS, either through the web.config file or via a reverse proxy.

Option 1: HTTP to HTTPS Redirect in `web.config`

You can configure the redirect directly in the web.config file of your ASP.NET application. This method is ideal if you're not using a reverse proxy.

Steps:

Open the web.config file of your application.
Add the following URL rewrite rules inside the <system.webServer> section:

<configuration>
<system.webServer>
 <rewrite>
   <rules>
     <rule name="HTTP to HTTPS Redirect" stopProcessing="true">
       <match url="(.*)" />
       <conditions>
         <add input="{HTTPS}" pattern="off" ignoreCase="true" />
       </conditions>
       <action type="Redirect" url="https://{HTTP_HOST}/{R:1}" redirectType="Permanent" />
     </rule>
   </rules>
 </rewrite>
</system.webServer>
</configuration>

Explanation

Option 1: HTTP to HTTPS Redirect in `web.config`

When configuring a redirect in the web.config file, the following rules are applied:

<match url="(.*)" />: Captures all URLs.
<conditions>: Checks if the request is not HTTPS ({HTTPS} = off).
<action type="Redirect" />: Redirects to the same URL but with https://.

This method is ideal if you're not using a reverse proxy and want to handle the redirect directly within your ASP.NET application.

Option 2: HTTP to HTTPS Redirect in a Reverse Proxy

If you're using a reverse proxy (like Apache, Nginx, or Azure Application Gateway), the redirect should be configured in the proxy, not in IIS. This avoids conflicts and ensures traffic is handled correctly.

Example with Nginx

Open the Nginx configuration file (e.g., /etc/nginx/nginx.conf or /etc/nginx/sites-available/default).
Add the following configuration to redirect HTTP to HTTPS:

server {
    listen 80;
    server_name myapp.com;

    # Redirect all HTTP traffic to HTTPS
    return 301 https://$host$request_uri;
}

server {
    listen 443 ssl;
    server_name myapp.com;

    # SSL configuration
    ssl_certificate /path/to/certificate.crt;
    ssl_certificate_key /path/to/private.key;

    # Pass traffic to IIS
    location / {
        proxy_pass http://localhost:80;  # Adjust the port if necessary
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

Explanation

First server block: Redirects all HTTP traffic (port 80) to HTTPS (port 443).

This ensures that any request coming over HTTP is automatically upgraded to a secure HTTPS connection.
Second server block: Handles HTTPS traffic and redirects it to IIS.

This block manages the secure traffic and ensures it is properly routed to your application.

Why Can't You Have Both Configurations at the Same Time?

If you configure the redirect in both web.config and the reverse proxy, conflicts and unexpected behaviors may occur, such as:

Double redirection: The browser might receive multiple redirect instructions, causing errors or infinite loops.
Loss of information: Headers or other request data might be lost during the redirect process, leading to broken functionality.

Recommendation

If you use a reverse proxy:

Configure the HTTP to HTTPS redirect in the proxy (e.g., Nginx, Apache) and disable any redirects in IIS. Avoid using the rewrite rule in web.config to prevent conflicts.
If you don't use a reverse proxy:

Configure the redirect in the web.config file of your application. This ensures that IIS handles the redirection directly.

Cloud, Containers, and Kubernetes: Fundamentals for Developers

Samira Awad — Wed, 23 Oct 2024 03:30:47 +0000

Introduction to Cloud and Containerization

In this article, we will explore what the cloud is and how it relates to containerization, focusing on technologies like Docker and Kubernetes. To understand these concepts effectively, we will also discuss Linux, as much of the cloud infrastructure is based on this operating system.

Linux as an Operating System

An operating system is a set of programs that allows a device to function. Examples include Windows, Linux, and macOS on computers, and Android and iOS on mobile devices. Linux, being open source, is used by many companies and individuals worldwide, resulting in various distributions tailored to different needs. Additionally, Linux dominates servers and supercomputers due to its flexibility and efficiency, primarily managed through command lines.

The Cloud: What Is It Exactly?

When we say an application stores data in the cloud, we mean that this data is on a server that the application accesses via the internet. This server is generally located in a datacenter alongside other servers from different companies, although it could also be in a private location. The physical location of the server does not matter; what is important is the remote connection and access.

In more technical terms, "cloud" also refers to the IT infrastructure that we outsource to providers like Microsoft, Amazon, or Google. These providers lease us computing resources (servers, storage, etc.) from their datacenters, allowing us to run cloud services without worrying about hardware maintenance. This offers flexibility, as we can hire servers based on demand and only pay for the time used. This model, popularized by Amazon with its Elastic Infrastructure service (which automatically increases or decreases the number of servers in minutes based on service demand), has revolutionized how we manage servers.

Linux in the Cloud and on Servers

Due to its stability, security, and efficiency, Linux is the most used operating system in the cloud and on virtual servers. Many companies have migrated their servers to the cloud, making "cloud" and "internet" practically synonymous for many. The open-source nature of Linux allows the community to audit it and quickly identify vulnerabilities, providing a significant security advantage over closed systems.

Moreover, Linux is more cost-effective as it does not require usage licenses, making it a preferred choice for companies that manage large numbers of servers. With advanced tools for remote and automated management, Linux enables efficient administration of hundreds or thousands of machines.

Servers and the Dominance of Linux

Managing and configuring servers via the command line is more efficient and allows for better remote administration compared to graphical interfaces. This is why Linux dominates in virtual servers and the cloud, compared to other operating systems.

In terms of costs, it is a more economical option as it does not require licenses, unlike its competitors, where each server needs one. Additionally, a company providing a service may have many servers. In the 2000s, it became possible to have a server with multiple virtual machines inside, whether physical or in the cloud.

Regarding security, being open source allows the community to audit it and detect vulnerabilities more rapidly, which is not possible in closed systems. In other systems, only company personnel have access to the code, and only they can identify security flaws.

It is called the cloud because, a long time ago, in network diagrams, a cloud drawing was used to represent external networks where one did not know what was happening. As the internet grew, that external network became synonymous with the internet, where "cloud" was used in computing to represent it.

From the Cloud to Containers: Docker as an Efficient Solution

The cloud has transformed how companies manage and deploy applications, allowing them to leverage scalable and flexible infrastructures without worrying about the physical maintenance of servers. However, as applications grow in complexity, the need for more efficient solutions to manage dependencies, environments, and scalability arises.

This is where containerization comes into play, a technology that has revolutionized software development and deployment in the cloud. Docker, the most popular container system, simplifies the packaging of applications with all their dependencies, ensuring they run consistently in any environment, whether local or in the cloud. Next, we will explore how Docker and containers have changed how applications are distributed, executed, and scaled in cloud infrastructure.

Software Containers

Containers are a way to distribute and run applications in isolation. They contain the application along with all its dependencies, solving common compatibility issues between environments. In traditional installations, dependencies (packages and services) are managed separately, but many computers have different versions and configurations of these dependencies, creating problems.

As a solution, containers include everything needed for the application to function correctly in any system, regardless of the environment configuration.

Problems that Containers Solve

Distribution: Imagine you develop an application that works on your computer but not on others. Locating configuration differences can be complicated and slow. Containers address this issue by packaging the application with its dependencies and configurations in an image, ensuring it works the same way on any system. The downside is that images can take up more space, especially if the application has many dependencies. This is why containers are mainly used for applications running on servers, where it is crucial that what works on the developer's computer also works on the server.
Execution: Running an application in a container is similar to running any other app, but with the advantage that containers are isolated. This means we can limit the container's access to system resources (CPU, memory, etc.), preventing it from interfering with other running applications. Although this isolation is less than that of virtual machines, it is sufficient for most cases and allows for more efficient and controlled use of resources.

Difference Between Virtual Machines and Containers

Containers: Use the same kernel of the operating system to run multiple applications, each isolated in its environment but sharing the same operating system.
Virtual Machines: Simulate a complete computer with its operating system and kernel. This provides greater isolation between applications and more information security but requires more resources.

Containers are lighter than virtual machines, and although they do not offer the same level of isolation, they are often sufficient for most applications. The most popular container system is Docker. For example, if we develop a website in a container, we can replicate the image across different servers to ensure availability. If something happens to the server where it is running, we can copy that same file (image) to another server, one that is functioning correctly, saving work.

Kubernetes: Container Orchestrator

Kubernetes is a system for orchestrating containers, helping to manage, scale, and maintain applications distributed across them. "Scaling" means increasing or decreasing the number of containers based on demand, such as in a website that experiences more traffic at certain times of the day.

This saves costs by not running containers that are not being used. We can launch more replicas when demand is higher and reduce them when it is lower. These replicas can be launched on the same server, different servers, or even on different servers in various parts of the world to be closer to the users viewing the page.

Kubernetes handles:

Launching containers when needed and stopping them when no longer required.
Balancing the load between containers by distributing user requests among several containers to optimize performance.
Running on a cluster of servers, launching applications on servers with greater availability.

Kubernetes can run on one or more servers, forming a cluster. This cluster is the set of servers available to run applications. When Kubernetes needs to run a new replica of the application (referred to as a "pod" in computing), it checks which server has availability and launches the app on that server.

We can think about how the pods running within the cluster interconnect, how they send network information to each other; there are various ways to send this information within the cluster. We can also consider how new applications, for example, new versions, can be launched without interrupting our service.

In Summary

Kubernetes is an ideal infrastructure tool for large applications, as it automates the management of multiple containers across different servers, facilitating scalability and availability. It is not recommended for small systems, as its complexity and cost do not justify the benefits.

Choosing which components to use, how they will interconnect, and how to configure them can be somewhat challenging to manage. This is why most cloud providers offer managed Kubernetes. These come preconfigured and installed with specified components, allowing us to focus solely on deploying our applications in the ready-to-use Kubernetes cluster provided by the cloud provider.

History of Kubernetes

Kubernetes is a set of software components that collectively provide this infrastructure. It was created by Google in 2015 as an open-source project under the Apache license. The name comes from Greek and means "ship's captain." One of the key decisions was to make it extensible, meaning these software components can be improved, extended, or replaced to provide better functionalities. This has led to projects that add or change Kubernetes components to offer enhanced infrastructure capabilities.

Microservices and Kubernetes

Microservices break down a large application into smaller components, where each fulfills a specific task and communicates with other parts by sending packets over the network. For example, one part of a website shows news, another shows related news, another handles comments, and another manages authentication.

In the past, it was common to have a single large site/app that encompassed everything, so if we needed the app to handle more demand and have greater availability, the entire system had to grow as a single entity. The microservices architecture allows services to be scaled individually based on their needs. For instance, the service displaying the homepage of a website may require more replicas than the authentication service due to higher traffic demand.

Kubernetes simplifies the management of microservices, as it automatically adds and removes replicas, distributes traffic, and streamlines administration.

Conclusion

The cloud offers great flexibility: with a click, we can add servers, storage space, configure backups, create databases, or enable global load balancing. However, this level of ease and elasticity comes at a cost, and it is not always the best option for all companies.

For organizations that already have the necessary infrastructure, the cloud may not be the most economical choice. But for those starting out and requiring a scalable solution, the cloud can be ideal, significantly reducing the workload. Some companies also opt for a hybrid strategy, maintaining part of their infrastructure locally while leveraging the cloud for services requiring more flexibility.

Kubernetes is a powerful tool for managing applications that use containers, especially in microservices environments. While it is a complex infrastructure, it is extremely useful for large applications requiring scalability and high availability. Cloud providers typically offer managed Kubernetes, reducing complexity and allowing developers to focus on deploying their applications.

Jobs Related to the Cloud

When a job posting mentions "cloud infrastructure," it usually refers to the ability to handle different cloud service providers and the products they offer. People working in this field utilize resources provided by providers like Amazon, Google, or Microsoft to deploy and maintain applications. For example, in a development team, the frontend manages the application that interacts with users, while the backend handles services running on the cloud infrastructure.

Those maintaining cloud services need to know how to use virtual servers, storage systems, databases, and monitoring tools, among other services provided by these providers.

If the job posting refers to "cloud technologies," it may be talking about tools related to the Cloud Native Computing Foundation (CNCF). This foundation, created around Kubernetes, groups together a series of open-source projects used alongside Kubernetes to create cloud-native solutions. These technologies are designed to work on elastic infrastructures, leveraging containers, microservices, and other dynamic functionalities.

Additionally, there is the option to work on developing the cloud infrastructure itself, being part of the team that ensures servers are always available and functioning correctly.

*--My Own Notes Taken from the Brilliant Content of "Aprendiendo con Marga" <3--
*

Operating systems: Which one to use as a developer and why?

Samira Awad — Fri, 18 Oct 2024 15:41:49 +0000

First, we must clearly understand the concept of an operating system:

What is an Operating System?

It is a set of programs that allows a device to function. Among them are Windows, Linux, and macOS for computers, and Android and iOS for mobile devices. Other devices like smart TVs or robots also have their own operating systems.

A device with just the operating system cannot do much. To make it useful, we use software applications installed on top of it. The operating system serves to provide services to these applications. Tasks such as manipulating file information, displaying images on the screen, configuring and using the network, switching between different running applications (which allows us to listen to music while writing a document), among others.

Kernel

An operating system is composed of different parts. The core of the operating system is the Kernel. It manages low-level operations (small tasks) such as:

Access to the processor at any given moment
The memory assigned to an app in execution
And controlling peripherals (screen, keyboard, etc.)

In other words, it allows interaction between software and hardware in an orderly and secure way (it is the part of our software that runs in privileged mode), by controlling the network card, sending, receiving, and updating each packet of data, without caring about the information inside them. In the same way, it manipulates the pixels displayed on the screen without considering what they represent.

The processor can execute millions of operations per second. It does this through an algorithm that decides how processor time is allocated. The kernel divides processing time among many apps to maintain the illusion of simultaneity.

Then, the higher-level libraries and apps of the operating system gather, decode, and convert this into a sequence of information, providing services to the end applications.

Types of Kernel

1. Microkernel:
It is very small, and its code is limited to doing the minimum necessary for the device to function. Other tasks are provided by external services that communicate via the kernel.

Benefit: If a specific service fails, the failure is isolated to that service. In other words, it isolates failures.

Example: The driver of the network card that handles sending and receiving data packets would not be part of the kernel, but a service that communicates with the kernel.

2. Monolithic Kernel:
Many operations are carried out in the same kernel.

Benefit: Time is better utilized since it doesn’t have to pass messages between different services.

Example: Linux Kernel.

3. Hybrid Kernel:
The most important tasks are performed in the kernel, and less important tasks are done outside of it.

Benefit: It shares the benefits of both types of kernels, improving performance on critical tasks while isolating failures in less important ones.

Example: Windows and macOS Kernel. Drivers for the network card or the file system are part of the kernel, while less important ones, such as a webcam, are external.

Differences between Windows, Linux, and macOS

Now that we know exactly what an operating system is and what it does, let's look at their differences.

1. Linux:
Mainly managed through command lines. Almost the entire web is based on Linux because almost all supercomputers and high-capacity servers use it. Moreover, the most widely used mobile operating system is Android, which is based on the Linux kernel.

Being open-source, it is developed by many people around the world. As a result, different Linux distributions have emerged in response to the need for changes.

Distributions

Software projects with specific goals (e.g., being beginner-friendly, secure, minimal installation, etc.) that group applications and prepare them for use.

With this, users can obtain a more or less customized operating system for what they want to do. However, this can increase the learning curve since there are quite a few distributions.

Example: Ubuntu, which facilitates usage and reduces the learning curve, aiming to expand its use on desktop computers.

History of Linux
UNIX
It was an operating system created in the 1970s. Initially developed for a game, it expanded into a more complex operating system.

It operated entirely through text, even input devices (like the keyboard) and output devices. This is where the name of the print() function comes from, as these old computers had printers instead of screens.

It was written in machine language, but they decided to rewrite it to be compatible with other computers, creating the C programming language for it. The focus of this system was simplicity, aiming to perform small tasks but do them well, which was key to its success.

Initially, it was distributed openly, but due to a change in law in the 1980s, the code became closed, losing the possibility for collaboration and/or study. As a result, companies like IBM or HP started commercializing it in different versions.

In response, the GNU project was born, aiming to create a similar and open system, creating different kernels, the most important of which was Linux, created by Linus Torvalds. This kernel, along with the tools developed by GNU, created the operating system that aims to be maintainable and upgradable over time.

For the different versions of UNIX, the POSIX standard was created, which all had to comply with, including Linux.

Linux Growth
Due to its large community, bugs have been quickly fixed, and it has gained a reputation for being more stable and secure. With the rise of the cloud, Linux grew enormously, as most servers use it.

Today, Linux has taken most of the market in servers and is gaining more of the market in personal computers, which has incentivized computer manufacturers to include the necessary code to make their devices work directly in the Linux kernel, without waiting for the community to include them.

Pipes
They created this concept, which allows connecting the output of one command with the input of another, enabling more complex operations, automating processes, and generating great flexibility—a key advantage in managing large-scale systems. For this reason, the cloud has boosted its use, due to its ability to create and destroy virtual servers with ease.

Benefits:

Total hardware control: Allows complete customization for managing and optimizing resources.
Simplicity and flexibility: Customizable to multiple scenarios and focused on doing one task well at a time.
Free and open-source software: No licensing costs.
Efficiency and scalability: Known for efficient performance, ideal for applications requiring high processing capacity and growth.
Advanced automation: Facilitates task automation and management through scripts and text-based commands, optimizing daily administration.
Linux mastery: Opens up many professional opportunities, as nearly the entire web is based on it.

2. Windows
History
DOS
An operating system created in the 1980s by Bill Gates for IBM's personal computers. These computers were later manufactured by other companies. This system was mainly text-based, but unlike UNIX, it was designed to be used by a single user on personal computers.

Windows was created as the graphical interface for this operating system, and it became the main operating system, while DOS became the command line. As newer versions were released, the command line took on a less important role, as it was designed to be managed, configured, and installed graphically.

Windows Growth

Many companies traditionally adopted it as their base operating system. For this reason, it is one of the most used. Traditionally, it has been more compatible with peripherals and hardware, due to agreements manufacturers had with Microsoft (unlike Linux, which relies on the community to add hardware support to the kernel).

In the development world, it used to have high incompatibility. Web development could only be done with Internet Explorer, and for IDEs, Visual Studio was required. Its environment was very restricted, leading to applications being developed only for Windows. Additionally, a license fee is required to use it.

For these reasons, it is not ideal for developers seeking to automate tasks or interact with virtual servers.

Integration of WSL

Windows has integrated a Linux kernel into its operating system, called WSL (Windows Subsystem for Linux). This allows Linux to run within the Windows system. While it won't have the same performance as a native operating system, it serves as a learning tool, and its version 2 is closer to a virtual machine.

Benefit: It combines the ease of use of Windows with the benefits of using Linux.

3. macOS

History:

It was born in the 2000s, based on UNIX. The part of this operating system that organizes files and commands is open-source and is called Darwin, but the graphical interface it provides is closed-source.

A few years ago, it was known for its incompatibility and restrictions, but today it has software available for most tasks. Apple has developed its own M1 processors, offering great speed.

This operating system is only compatible with Apple hardware. This allows for less flexibility but more control and stability. On the other hand, its hardware is more expensive, and licenses are required to use it.

The Best Operating System for a Developer

There is no one best operating system, but each has advantages depending on the developer’s profile. All of these systems are compatible with development tools, programming languages, and the cloud.

The choice depends on several factors:

The hardware.
The compatibility of software with the architecture of the operating system.
And most importantly, the developer’s resilience: the ability to adapt to a new environment.

If we want to manage cloud servers, Linux is the predominant option. However, for local or personal development, the ideal operating system depends on the developer. Still, learning Linux is beneficial to increase versatility, even if you're not managing servers.

Servers and Linux Mastery

Managing and configuring servers through the command line is more efficient and allows for better remote administration compared to graphical interfaces. This is why Linux dominates virtual and cloud servers.

In terms of cost, it is a more economical option because it doesn’t require licenses, unlike Windows or Mac, where each server needs one. Additionally, a company providing a service may have many servers. In the 2000s, it became possible to have a server with many virtual machines inside, whether physical or cloud-based.

In terms of security, being open-source allows the community to audit it and detect vulnerabilities faster, something that is not possible with closed systems. In other systems, only people within the company have access to the code, and only those people can find security flaws.

Basic Development Environment for a Developer

Regardless of the operating system, there are essential tools that every developer should have:

1. WSL (Windows Subsystem for Linux): Allows you to work in a Linux environment without having to switch operating systems.

How to install WSL:

Go to Control Panel > Programs > Turn Windows features on or off.
Check the box for Windows Subsystem for Linux (WSL).
Restart your computer to apply the changes.
Open the Microsoft Store and search for the Linux distribution you prefer, such as Ubuntu, Kali, and others. Then install it.

To interact with these distributions, you can use Windows Terminal, an application that allows you to open multiple terminals such as Ubuntu, PowerShell, or CMD in tabs. Windows Terminal also offers benefits like better performance, color customization, and more control over terminal windows, enhancing the development experience.

2. Docker Desktop: Simplifies working with containers, both locally and in the cloud.

3. Visual Studio Code (VSC): A versatile editor that supports multiple languages and technologies. It’s the default choice for developers.

With these three tools, we can make the following development decisions for backend, frontend, DevOps, and programming language choices.

--My Own Notes Taken from the Brilliant Content of "Aprendiendo con Marga" <3--
I hope they are of some help.

New Version of Angular: Angular 17 CHANGES:

Samira Awad — Wed, 02 Oct 2024 04:02:57 +0000

1. New website: We will have new documentation, tutorials, and a playground section where we can run code live.

It will no longer be called angular.io, but angular.dev. The logo has also changed.

2. Change in syntax: New syntax in HTML template:

Angular 17 changes the HTML syntax. One benefit of this new syntax is that it is integrated into the language itself, so we don’t have to import anything to use if, for, and switch.

Now, the if, for, and switch blocks are placed outside of HTML tags, allowing us to use else-if and else. In the for loop, an empty section is included that will be executed if the array is empty. With this change, the iterations in the for loop have increased their performance by 90%, as it is now mandatory to use track by:

Track involves specifying which ID the array contains to identify each element, improving performance.

Previous Versions:

They used ngIf, ngFor, and ngSwitch. The change is due to Angular using the Zone.js library for these directives, which is not very optimized. To improve its performance, this syntax change was made.

Before, these directive libraries needed to be imported: CommonModule, ngIf, among others.

These library tags are used in HTML tags:

Moreover, previous versions do not have the empty section. To check if an array is empty, a conditional is used.

3. Stable hydration added in SSR.

We had it available as a developer preview, and it is now available stably. Hydration significantly improves the performance of SSR applications, as without hydration, there was always a flicker whenever the application loaded because it first loaded on the server and then on the client. With hydration, this process is improved.

*4. Stable addition of signals.
*
These have been available since Angular 16, but now they will be stable.

5. Projects will come as standalone by default, without modules.

Since Angular 16, standalone components can be created: ng g c --standalone components/folder.

In Angular 17, all components are created as standalone by default.

Before these versions, a component had a module that declared and exported the component. To use these components in the app module, the module had to be imported:

However, with standalone components, modules are no longer needed, so the standalone component is imported directly in imports. The component has standalone: true, and in its imports, we can import what that component needs. CommonModule acts as the module internally:

Command to migrate to standalone: ng generate @angular/core:standalone. Or we can simply add these properties to the normal component to make it standalone and remove its module.

Standalone components can be mixed with those that are not. It is recommended to create new components as standalone, even in older projects.

This can also be used in directives, pipes, and components, which will no longer go in declarations but in imports.

6. Adds defer for lazy loading at the component level.

This allows lazy loading for components that are not visible in the viewport, preventing loading if scrolling is not needed.

7. Switching from Webpack to using esbuild with Vite:

This results in much faster build times than what we had with Webpack. In some cases, the build can be up to 87% faster.

8. Ability to write CSS in the TypeScript file:

Although this is not recommended, and it is advised to keep a separate file for CSS:

Now, when we run ng new to create a new project, it will ask if we want it to be SSR, as Angular always creates an SPA by default. So now, in the ng new process, it will no longer ask if we want to create the routes file; this will always be created automatically. Instead, it will now ask if we want an SSR (server-side render).

Previously in Angular, we could also create an SSR by installing Angular Universal later, but now it is more convenient as the CLI does it during project creation.

10. Custom inputs have been included in the transforms, allowing us that when we already have a boolean property, we don’t need to specify if it is required to be equal to true; simply stating the name of the input assumes it will be true, helping to reduce code:

11. The lifecycle of Angular has been extended with after render and after next render, which can be executed on the client side.

— Notes based on the Angular course by EfisioDev —

New Features in Angular 16: Signals and RxJS

Samira Awad — Wed, 02 Oct 2024 03:55:10 +0000

1) Signals vs RxJS: Creating a Signal variable from scratch in Angular 16 and comparing it to an Observable.

With an example where we have a sidebar menu and a top menu, every time we press a button, the top menu will tell the sidebar menu to collapse:

With RxJS:

This communication is done in a service using a subject and an observable, where every time we click the button, a next is called, which passes the emitted value to the subscribed observable. The sidebar menu component will simply be subscribed and will use this property in the HTML. First, we create the Subject in the service, then we create the observable from it, and we call next to pass the emitted value:

With Signals:

This can be done simply with Signals. Signals were created in Angular to achieve better performance in certain simpler cases. They are imported from @angular/core.

You need to declare a Signal, and every time we update that signal, we call set on it. In the sidebar menu component, we just have to reference that property, and to use the signal in the HTML, we need to put parentheses around it to get its value, as this is how signals are used.

We can also perform an update, which has the added benefit of telling us the previous value. For this, we specify that it receives the previous value and its type, and with an arrow function, we indicate the new value, which is the negated new value:

There are also ways to convert observables to signals and signals to observables:

It's not that signals are a replacement for subjects, as both, along with observables, are much more powerful and have many more features, such as RxJS operators (we have much more control with RxJS). However, signals provide a simple way to work and are common with other libraries and frameworks.

RxJS is a library from Microsoft, not Angular. In contrast, Signals is a library from Angular, which provides greater control and performance, as it allows Angular to know exactly which part has changed when a state changes. This avoids having to re-render the entire component, focusing only on that specific part.

2) New simplified way to unsubscribe with takeUntilDestroyed from RxJS in Angular 16.

In Angular, it's important to unsubscribe from observables. In an example, in OnInit, we store a subscription, and in OnDestroy, we unsubscribe.

The old way was to store a variable with the subscription, and at the time of subscribing, save it in that variable and destroy that subscription in OnDestroy:

Detailed Explanation: A property of type Subscription (from RxJS) is created. This property is initialized in ngOnInit, assigning it the reference of the subscription when it is made. Then, in ngOnDestroy, the subscription is canceled. If the component hasn't defined the subscription variable, it's necessary to handle the error, either by using a question mark to check if it is defined or through a conditional.

Now, this can be done more simply, without creating OnDestroy or a subscription variable, by using the RxJS operator takeUntilDestroyed. What this does is automatically cancel the subscription when the component is about to be destroyed. It is important to inject the DestroyRef service and pass it, so it knows when the component is destroyed:

Detailed Explanation: Now, in the case where we are not unsubscribing, we add an RxJS pipe and send it a takeUntilDestroyed(), a NEW operator, which requires us to pass a destroyedRef, which is a service (from @angular/core) that we can inject into the constructor.

Example: In a sidebar service, it listens for a button click in the navbar component. With takeUntilDestroyed(), it unsubscribes only when the component is destroyed, avoiding multiple subscriptions. In this case, we always want to listen to whether the button has been pressed or not; therefore, we only want to unsubscribe if the component is destroyed.

This is important to do, as otherwise, it will be listening even if we are in other components, and it will only unsubscribe if we close the app since the component is destroyed. This is crucial because if it is always active, when navigating through page components, for example, in the first navigation, it subscribes, then we navigate to another page, and when we return to the first page, it would be a second subscription, resulting in two active subscriptions. Thus, it is important to unsubscribe.

An important note: when we subscribe to an HTTP request, it is not necessary to unsubscribe, as this is done automatically.

3) Effect of a Signal in Angular. Listening for changes in a Signal.

In an example, we have a Signal that returns a boolean and in a method below, it updates with an update:

Imagine you want to be alerted whenever the signal changes, but it changes from many places, not just from this method. If we want to do something whenever it changes, we can do this with an effect. This function takes a signal and checks if it changes to automatically execute the method within the effect:

With this, for example, instead of a console log, we can save the value in local storage and instantiate it with that value. This is especially useful when working with code that we do not know and are unsure how many places it is being modified from.

— Notes based on the Angular course from EfisioDev —

What's New in Angular 16: Inputs in Components

Samira Awad — Wed, 02 Oct 2024 03:50:35 +0000

1) Required Component Input from Angular 16.
Now a component can have a required Input.

Imagine we have a component with an input called user and we want it to be mandatory, meaning it should always be present. To do this, we open and close curly brackets and set required to true:

By doing this, an error will appear if we try to use this component without passing its mandatory input. If we pass the input, it runs correctly:

This simplifies development, especially in older projects, as it will be easy to detect which inputs are mandatory and which are not. In previous versions, you could only add validations to check if inputs existed.

2) Input Transformations in Components in Angular 16.
An input is used to pass information from a parent component to a child component. But sometimes we want to pass the information in a different way or format. From this version onward, we can transform our inputs very easily.

Imagine we have a component with an input called stock. We want that when the stock is null, instead of appearing as null, it shows 0. In other words, we want to make a small transformation.

<app-available-stock [stock]="null" />

In the past, we could only do this with a setter, but it was cumbersome as we had to create a setter and then a separate variable to display the data:

Now, within an input, we can set the transform property and use a function to handle the transformation:

Now, the transformation happens inside the object brackets within the input. We set transform and pass a function to it. For the example, we declare the transformation function above, but in practice, we can create a file or something similar. In the component’s HTML, we directly call the stock variable: {{stock}}

3) Extract URL Parameters Using Inputs, Without ActivatedRoute, in Angular 16.
Before, the only way we had to obtain a route parameter was with ActivatedRoute. In the example, the parameter is called id, and the service is injected and used:

However, now we can also do this with inputs, simply by creating an input that has the same name as the route parameter, and its property is retrieved. To make this work, we need to have it configured in the provideRouter in appConfig: withComponentInputBinding():

This new approach avoids the need to inject the service.

— Notes based on the Angular course from EfisioDev —

What's New in Angular 16: Inputs in Components

Samira Awad — Wed, 02 Oct 2024 03:50:33 +0000

1) Required Component Input from Angular 16.
Now a component can have a required Input.

Imagine we have a component with an input called user and we want it to be mandatory, meaning it should always be present. To do this, we open and close curly brackets and set required to true:

By doing this, an error will appear if we try to use this component without passing its mandatory input. If we pass the input, it runs correctly:

Imagine we have a component with an input called stock. We want that when the stock is null, instead of appearing as null, it shows 0. In other words, we want to make a small transformation.

<app-available-stock [stock]="null" />

In the past, we could only do this with a setter, but it was cumbersome as we had to create a setter and then a separate variable to display the data:

Now, within an input, we can set the transform property and use a function to handle the transformation:

This new approach avoids the need to inject the service.

— Notes based on the Angular course from EfisioDev —

Improve performance in Angular by creating your CUSTOM PIPES

Samira Awad — Wed, 02 Oct 2024 03:39:23 +0000

We should not use methods in the HTML unless they are associated with events:

This has the problem of being executed multiple times. In the example, an array is being mapped, which will execute 16 times. Similarly, we should not use get or API requests directly.

This can be solved using a pipe and/or creating a custom pipe, which will only execute once for each user. In this example, the pipe has a transform method that receives the same arguments as the previously used method:

Explanation:

The problem with methods arises because they are not native to Angular, so Angular doesn't know when their value has changed. As a result, it keeps constantly evaluating methods for changes after every small update.

In contrast, a pipe is native, pure, and only executes when its arguments change. Additionally, a pipe can be reused in different parts of the application (unlike a method, which can only be reused by sending it to a service).

We can create a pipe if it doesn’t exist by specifying its target location:

ng g p pipes/fullName (where pipes/fullName is the location).

The pipe is created as a class that implements PipeTransform, an interface that requires us to have a transform method. This method is executed when the pipe runs and works just like a normal method. To use the created pipe, we must import it into the app component (standalone):

When using it in the HTML, we call it by the name indicated in the name field of the pipe, using the ‘|’ symbol followed by the pipe’s name. The first argument is passed to the left, and if we want to pass other arguments, they are passed to the right, after a colon ‘:’:

Remember good practices: if there are many arguments, it's better to use an object. As a good practice, try not to overuse pipes to avoid cluttering. Break down the code and you’ll succeed.

To create the pipe's content, we specify the arguments we want to receive and the return type in the transform method. Then, we write the content and return the result. Optional values can be received by prefixing them with a ‘?’, and default values can be assigned using ‘=’.

— Notes based on EfisioDev’s Angular course —

Improvements in Angular 14 and 15

Samira Awad — Wed, 02 Oct 2024 03:34:42 +0000

1) Inject Services in Angular 14 Without a Constructor Using inject.
Previously, a class with a constructor was always required to inject any service:

class MyClass {
  constructor(private myService: MyService) {}
}

Now, we can inject a service in both functions and classes. We just need to declare a variable and set it equal to inject with the service name inside:

const myService = inject(MyService);
This is useful, for example, in interceptors and guards, which are now commonly done with functions instead of classes.

2) Self-Closing Tag to Save Lines in Angular 15.
Starting with this version, you can use a component with a single tag:

<my-component />

Before, it was necessary to open and close a component tag to use it:

<my-component></my-component>

3) Reduce Your Imports in Angular by Creating Shortcuts.
Instead of having long imports like these:

import { MyComponent } from '../../components/my-component';
You can shorten imports like this:

import { MyComponent } from '@components/my-component';To achieve this, go to the tsconfig.json file and add paths under the compilerOptions property. Inside paths, you can configure your own import shortcuts:

{
  "compilerOptions": {
    "paths": {
      "@components/*": ["src/app/components/*"]
    }
  }
}

The recommendation is that if you’re within a component and want to use something specific to that component, import it relatively using ./ to access that resource. But when accessing a parent folder, use the @ shortcut. If it gives you issues, you may need to close and reopen Visual Studio Code. These small details make a difference in keeping the code as organized as possible.

4) Optimize Image Loading with the NgOptimizedImage Directive in Angular 15.
If we have a list with 15 images and iterate through them normally using [src], we’ll face the issue of loading all 15 images at once when the application starts, which reduces performance:

<img [src]="imageUrl" />
To fix this, Angular provides the NgOptimizedImage directive. To use it, just import it:

import { NgOptimizedImage } from '@angular/common';
And use [ngSrc] instead of [src]. This will load images lazily, improving performance. However, the directive has many other configurations. If you only want lazy loading, I recommend using the loading="lazy" attribute, which is part of the HTML standard and is compatible with all browsers:

<img [ngSrc]="imageUrl" loading="lazy" />

A recommendation: if you have a main image at the top of the menu, do not set it to lazy loading, as it will be the first to load when the app opens. Apply this only to images that might appear below the scroll, as we don’t need them to load right away.

This is very important for public applications, such as SSR apps that need good SEO, as it helps improve performance.

— Notes based on the Angular course by EfisioDev —

Changing the Angular CLI version

Samira Awad — Wed, 02 Oct 2024 03:25:34 +0000

Angular is constantly updating its versions, every 6 months. There are two ways to make the change: using the Node.js version manager or via command line.

a) Via Command Line:
First, check the Angular version you are using with: ng serve. Then, open the terminal in administrator mode and uninstall the current version: npm uninstall -g @angular/cli.

Now, verify that the cache is correct: npm cache verify. If there’s no error, proceed; otherwise, clear the cache with: npm cache clean --force.

Next, install the desired version (in this case, version 16 which installs the most stable version): npm install -g @angular/cli@16. Verify the installation with: ng version.

b) Via NVM:
Select the version of Node.js to use and install the compatible Angular version with: npm install -g @angular/cli@12.2.8. Uninstall de Angular version with:npm uninstall -g @angular/cli@12.2.8. The Angular version will be install only in the Node current version.
Note: The LTS (Long Term Support) version of Node.js is the stable version and is recommended for most production projects as it receives support and security updates.

We can install a different version of angular for each version of node. This will install only on our used node version.

To see the angular version of the node version used, in a cmd WITHOUT ADMINISTRATOR PERMISSIONS, execute ng version. It is important to do this in another cmd to check the versions, since in the administrator permissions console, it will not send the correct data.

And to uninstall we use the command: npm install -g @angular/cli.

Check compatibilities at: https://angular.dev/reference/versions

Node.js version

Samira Awad — Wed, 02 Oct 2024 03:22:08 +0000

It’s crucial to use the correct Node.js version for our project, otherwise, we may encounter issues with unit tests or application deployment.

First, we check the Node.js version in use by running: ng serve.

This command will display the versions of Angular, Node.js, OS, and npm. If Node.js is not the correct version, it will show (Unsupported) next to it.

By visiting the Angular website, we can view the compatibility between Node.js and different Angular versions. To switch versions, we can either use the Node.js version manager or the command line.

a) Via the Command Line:
First, uninstall the current version of Node.js. Then, go to the official Node.js website, find previous versions, and install the compatible one. Click on "Released" and download the version for your OS.

b) Via Node Version Manager (nvm):
Every programming language has its own version manager. For Node.js, we use NVM (Node Version Manager), which allows us to work with multiple versions of Node.js in the same environment. This is useful for testing our development in different Node.js versions, a best practice recommended by both npm and Microsoft.

With NVM, you can easily manage multiple Node.js versions on the same system, allowing you to test different environments without hassle.

Before installing NVM, make sure there’s no previous version of Node.js installed on your system to avoid conflicts: node -v.

Installing NVM: For macOS and Linux, visit the official NVM repository on GitHub (nvm-sh/nvm). For Windows, download from this link: NVM repository for Windows.

Click on "Download Now," download the nvm-setup.zip file, unzip it, and run the installer. During installation, keep all default options since NVM includes an update tool that makes version management easy.

Verify the installation by running: nvm.

NVM:
NVM allows you to install specific Node.js versions or the latest one.

To install the latest recommended version (LTS): nvm install lts. To install a different version: nvm install version.
To view the installed Node.js versions on your system: nvm list.

Use a specific Node.js version: Open a terminal with administrator privileges and select the desired Node.js version:
nvm use 16.13.1 (Replace 16.13.1 with your desired version).

To verify the active Node.js version: node -v. You can also check the current version in use with: nvm current.

If you want to uninstall a specific Node.js version, open the terminal with administrator privileges: nvm uninstall 16.13.1
(Replace 16.13.1 with your desired version).

Installing NPM and Yarn:
When you install Node.js using NVM, npm is automatically installed. To verify the npm version: npm -v.

If you prefer using Yarn, install it for each version of Node.js you use: npm install -g yarn.

— Notes based on the Angular course by EfisioDev —

How to install Node.js, NPM and NVM on Windows (node version manager)

Samira Awad — Thu, 29 Aug 2024 01:02:24 +0000

1. Introduction:
Each language has its own version manager. For Node.js, we use NVM (Node Version Manager), which allows us to work with multiple versions of Node.js in the same environment. This is useful for testing our developments on different versions of Node.js, which is a good practice recommended by both npm and Microsoft.

2. Key Concepts:
• NPM: Node.js Package Manager.
• NVM: Node.js Version Manager.

3. Preparations:
Before installing NVM, we must ensure that there is no previous version of Node.js installed on our system to avoid conflicts. To check this, run in the terminal:
node -v

4. NVM installation:
• For macOS and Linux: Visit the official NVM repository on GitHub (nvm-sh/nvm).
• For Windows: Download NVM from the following link:

Click "Download Now".
Download the nvm-setup.zip file.
Unzip the file and run the installer.
During installation, leave all the default options, since NVM has an update tool that will allow us to easily manage versions.

5.Verify NVM installation:
Once installed, open a new terminal and verify that NVM is correctly installed by running:
nvm

6.Install a version of Node.js:
NVM allows you to install specific versions of Node.js or the latest version. To install the latest recommended version (LTS), run:
nvm install lts

To install others: nvm install version

7.List installed versions of Node.js:
To view the versions of Node.js installed on your system, use:
nvm list

8.Use a specific version of Node.js:
Open a terminal with administrator permissions and choose the version of Node.js you want to use:
nvm use 16.13.1
(Replace 16.13.1 with the version you want.)

9.Check the version of Node.js in use:
To check which version of Node.js is active, run:
node -v
You can also check the current version of Node.js handled by NVM with:
nvm current

10.Uninstall a version of Node.js:
If you want to uninstall a version of Node.js, open the terminal with administrator permissions and run:
nvm uninstall 16.13.1
(Replace 16.13.1 with the version you want to remove.)

11.Installing NPM and Yarn:
When you install Node.js with NVM, npm is installed automatically. To check the npm version, use:
npm -v
If you prefer to use Yarn, install it for each version of Node.js you use:
npm install -g yarn

Conclusion:
With NVM, you can easily manage multiple versions of Node.js on a single system, allowing you to easily test in different environments.

DEV Community: Samira Awad

How to Deploy ASP.NET Applications on IIS: Complete Guide

Prerequisites

Step 1: Install IIS and Required Tools

1.1 Install IIS

1.2 Install .NET Runtime (Only for ASP.NET Core)

Step 2: Publish the ASP.NET Application

2.1 Publish from Visual Studio

2.2 Prepare the Published Files

Step 3: Create a Site in IIS

3.1 Create the Site

3.2 Configure Bindings

Step 4: Configure the ASP.NET Module

4.1 For .NET Framework Applications

4.2 For .NET Core Applications

Step 5: Configure the Hosts File (Optional for Local Testing)

Step 6: Configure Permissions and Security

6.1 Folder Permissions

6.2 Authentication in IIS

Step 7: Configure SSL Certificate (Optional but Recommended)

7.1 Obtain an SSL Certificate

Step 8: Test the Application

Configure HTTP to HTTPS Redirects in IIS

Option 1: HTTP to HTTPS Redirect in web.config

Explanation

Option 1: HTTP to HTTPS Redirect in web.config

Option 2: HTTP to HTTPS Redirect in a Reverse Proxy

Example with Nginx

Explanation

Why Can't You Have Both Configurations at the Same Time?

Recommendation

Cloud, Containers, and Kubernetes: Fundamentals for Developers

Introduction to Cloud and Containerization

Linux as an Operating System

The Cloud: What Is It Exactly?

Linux in the Cloud and on Servers

Servers and the Dominance of Linux

From the Cloud to Containers: Docker as an Efficient Solution

Software Containers

Problems that Containers Solve

Difference Between Virtual Machines and Containers

Kubernetes: Container Orchestrator

In Summary

History of Kubernetes

Microservices and Kubernetes

Conclusion

Jobs Related to the Cloud

Operating systems: Which one to use as a developer and why?

New Version of Angular: Angular 17 CHANGES:

New Features in Angular 16: Signals and RxJS

What's New in Angular 16: Inputs in Components

What's New in Angular 16: Inputs in Components

Improve performance in Angular by creating your CUSTOM PIPES

Improvements in Angular 14 and 15

Changing the Angular CLI version

Node.js version

How to install Node.js, NPM and NVM on Windows (node version manager)

Option 1: HTTP to HTTPS Redirect in `web.config`

Option 1: HTTP to HTTPS Redirect in `web.config`