Using Tools for Frontend and Backend Development

Visual Studio has many tools to work with .NET applications and the Microsoft ecosystem, but it also has many tools for other programming languages and technologies. This includes web development technologies, such as JavaScript, CSS, and HTML.

In VS 2022, there are also some new improvements that help us to code faster in both the frontend and backend. This means tools for frontend developers to work with HTML, JavaScript and CSS and tools for backend developers to test web applications externally and API endpoints. With these tools, you don’t need to use other editors or integrated development environments (IDEs) to complete your activities while working with these technologies.

In this chapter, you will learn about web tools in VS, how to take advantage of them, and how to simplify them when we are developing some common statements. These tools will help you to generate code automatically, install and specify versions...

Technical requirements

To complete the demos of this book chapter, you must have previously installed VS 2022 with the web development workload, as shown in Chapter 1, Getting Started with Visual Studio 2022.

You can obtain the chapter projects at the following link: https://github.com/PacktPublishing/Hands-On-Visual-Studio-2022-Second-Edition/tree/main/Chapter%206.

Using scaffolding

Scaffolding is one of the most beneficial features for developers in VS. By using scaffolding, we can save time generating code automatically by just clicking on some options.

It’s indispensable to clarify that scaffolding is a popular concept in software development, and this is not unique to VS. Normally, scaffolding is associated with the code generation of model view controller (MVC) components. MVC is a popular pattern for creating web applications. Using MVC, you must distribute the responsibilities for creating web applications into three different components:

• Model: Responsible for saving the data
• View: The interface that interacts with the user
• Controller: In charge of handling all the actions performed by the user in the view

Let’s make use of this feature by opening the initial project called Chapter6_Code_Web, which you can find in the repository of the Technical requirements section. To use scaffolding in VS, you...

Installing JavaScript and CSS libraries

To start a project, we can use a template from VS to easily create a proof of concept (POC), demo, or base project, but there is the possibility of the project growing in terms of functionalities and services. In this scenario, we will have to include libraries to potentialize and optimize our project and extend the functions incorporated in the base template.

To include a new JavaScript library in the Chapter6_Code_Web project, you can open Solution Explorer and right-click on the ClientApp folder. In the menu, you will find the Client-Side Library… option (see Figure 6.7):

Figure 6.7 – The "Client-Side Library…" functionality in VS

After clicking on this option, you will get a model that allows you to include web libraries from different resources. By default, cdnjs is selected, but you can also choose the other sources supported by VS:

Figure 6.8 &...

Debugging in JavaScript

We must debug a project when there is strange behavior, an issue, or a blocker in our application. VS supports debugging for many programming languages, including JavaScript. This is a great feature, given that we can debug the frontend side (for example, with JavaScript) and the backend side (for example, with C#) using the same IDE.

To debug JavaScript and TypeScript code using VS, we need to check the Script Debugging (Enabled) option. This option is on the execution menu of the project:

Figure 6.12 – The Script Debugging (Enabled) option in the project execution menu

Then, we can run the project in debug mode, but before that, we need to add a break to inspect the code. Navigate to ClientApp | src | components | Counter.js and create a new breakpoint at line 13 (see Figure 6.13):

Figure 6.13 – A breakpoint in the incrementCounter method inside Counter.js

Now, execute the project...

Hot Reload

For many years, C# developers were waiting for a feature that would allow them to see real-time changes in web applications. The big challenge with this was the naturalness of C# as a programming language because C# is a compiled language. A compiled language needs to be converted to a low-level language for use by an interpreter, and this process consumes time and resources in a machine. In Figure 6.16, you can see a new flame-shaped icon. After clicking on this icon, you will refresh the changes in the browser, or you can select the Hot Reload on File Save option to reload a web application automatically after saving changes:

Figure 6.16 – The Hot Reload option in VS enabled during the execution

The Hot Reload feature has some settings that we can modify according to our needs. You can access these features using the Settings option when the Hot Reload button is enabled, or you can navigate to Tools | Options | Debugging | .NET / C...

Dev tunnels

Dev tunnels are a feature of VS that allow you to create an ad-hoc connection to your local ASP.NET Core projects so that other devices can connect to it. For example, suppose that you create a REST service that you want to test on a mobile device, which is probably connected to a different network than localhost. Then, through a dev tunnel, you can create a communication tunnel between the REST API and the device.

Another use case is if you would like to make an online presentation of a project, and you would like the attendees to be able to observe the application being executed. These are just a few use cases that you could use dev tunnels for. Let’s see how to create and use them.

Creating a dev tunnel

To follow this demonstration, you can create a new project with the ASP.NET Core Web App template or use the project named Chapter6_Code, which you can download from the link indicated in the Technical requirements section.

Once the project is open...

Web API Endpoints Explorer

Web API Endpoints Explorer is a VS tool that allows interaction with API projects based on ASP.NET Core. For this demonstration, from the resources you downloaded in the Technical requirements section, you have available a project named Chapter6_Code_API to which I have added several endpoints.

Once you have opened the project, you can test the endpoints explorer through View | Other Windows | Endpoints Explorer, which will display a new window called Endpoints Explorer, as you can see in Figure 6.26:

Figure 6.26 – The Endpoints Explorer window

The Endpoints Explorer displays all the endpoints it has found in your project, as well as the type of HTTP method and its path. If you right-click on one of the endpoints, you will be presented with two options:

• Open in the Editor: This action will open the controller where the endpoint is specified
• Generate Request: This action will generate an http file and add...

HTTP editor

The .http file editor is a friendly way to test mainly API projects created with ASP.NET Core. Some of the features of this editor are as follows:

• It allows the creation and update of .http files
• It allows the testing of HTTP requests specified in the .http file
• It displays responses to the requests

To better understand the syntax within an .http file, let’s continue working with the Chapter6_Code_API project. This time, create a request for the POST /books endpoint, params (Chapter6_Code_API.Book book book), as you can see in Figure 6.29:

Figure 6.29 – POST request added according to the Endpoint selected

In case there is a previously created .http file, it will be updated to display the new HTTP request, as you can see in Figure 6.29.

Let’s analyze the syntax of the file:

• Line 1: A variable is created, which we can identify by the ‘@’ symbol, called Chapter6_Code_API_HostAddress...

Summary

Now, you are ready to take advantage of the web tools in VS to code faster and improve the quality of your code. With scaffolding, we can create components for an MVC model easily; VS generates the code using a template with simple sample code.

You also learned how to include JavaScript and CSS libraries using the tools included in VS. Using these tools, you know how to select the right version of the library and upgrade dependencies in the future.

If there is an issue or strange behavior in the code, you can now use JavaScript debugging to analyze the code deeper and execute the code step by step, inspecting the values of the variables and workflows.

Also, you learned how to use Hot Reload in VS 2022 to refresh the application when you are debugging and see the changes performed in the code in real time.

Another tool you have learned to use is dev tunnels, which are a way to test ASP.NET Core-based applications and APIs from other devices even if they are on different...