|
| 1 | +In this exercise, you will: |
| 2 | + |
| 3 | +* Create an ASP.NET Core web app project from a template. |
| 4 | +* Examine the structure of the created project. |
| 5 | + |
| 6 | +## Create an ASP.NET Core web app using a template |
| 7 | + |
| 8 | +::: zone pivot="vscode" |
| 9 | + |
| 10 | +In Visual Studio Code, create a new project: |
| 11 | + |
| 12 | +1. Select the **Explorer** view: |
| 13 | + |
| 14 | + :::image type="content" source="../media/vs-code-select-explorer.png" alt-text="Screenshot of selecting the Explorer view."::: |
| 15 | + |
| 16 | +1. Select the **Create .NET Project** button. Alternatively, you can bring up the **Command Palette** using <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>P</kbd>, and then type "`.NET`" to find and select the **.NET: New Project** command. |
| 17 | + |
| 18 | + :::image type="content" source="../media/vs-code-select-create-dotnet-project.png" alt-text="Screenshot of selecting Create .NET Project."::: |
| 19 | + |
| 20 | +1. Select the **ASP.NET Core Empty** project template from the list. |
| 21 | +1. In the **Project Location** dialog, create a folder named `MyWebApp` to contain the project. |
| 22 | +1. In the **Command Palette**, name the project `MyWebApp`, including matching the capitalization. Using this exact project name is important to ensure that the namespaces for code in this instruction match yours. |
| 23 | +1. Select **Create project** from the **Command Palette**. |
| 24 | + |
| 25 | +## Examine the structure of the project |
| 26 | + |
| 27 | +The *MyWebApp* project folder contents are displayed in the Visual Studio Code **Explorer**: |
| 28 | + |
| 29 | +:::image type="content" source="../media/vs-code-explorer-project-files.png" alt-text="Screenshot of the project files in the Visual Studio Code Explorer."::: |
| 30 | + |
| 31 | +::: zone-end |
| 32 | + |
| 33 | +::: zone pivot="shell" |
| 34 | + |
| 35 | +From a terminal or the command line, create a new project: |
| 36 | + |
| 37 | +1. Change to the directory (`cd`) that's going to contain the project. |
| 38 | +1. Create an ASP.NET Core web app in a directory named *MyWebApp* by running the .NET CLI command `dotnet new`: |
| 39 | + |
| 40 | + ```dotnetcli |
| 41 | + dotnet new web -o MyWebApp |
| 42 | + ``` |
| 43 | +
|
| 44 | + A new ASP.NET Core empty web project is created in a directory named *MyWebApp*. |
| 45 | + |
| 46 | + The following outlines the command syntax: |
| 47 | + |
| 48 | + - `dotnet new`: A .NET CLI command for creating various .NET development artifacts based on templates such as projects, solutions, libraries, configuration, and other specialized files. |
| 49 | + - `web`: A project template used to create an ASP.NET Core empty web project, containing no example content. `web` is one of the many [built-in project templates](/dotnet/core/tools/dotnet-new-sdk-templates) available in the [.NET SDK](https://dotnet.microsoft.com/download). |
| 50 | + - `-o`: The output option specifies the directory where the new project is created: |
| 51 | + - If the directory doesn't exist, the .NET CLI creates it. |
| 52 | + - The directory where the project is created serves as the default project name, namespace, and assembly name (the name of the compiled output). |
| 53 | + - If the output option `-o <directory>` isn't used, then the current directory is used. |
| 54 | +
|
| 55 | +1. Open the *MyWebApp* project folder. |
| 56 | +
|
| 57 | +## Examine the structure of the project |
| 58 | +
|
| 59 | +::: zone-end |
| 60 | +
|
| 61 | +::: zone pivot="vscode" |
| 62 | +
|
| 63 | +The *MyWebApp* project folder contents are displayed in the Visual Studio Code **Explorer**: |
| 64 | +
|
| 65 | +:::image type="content" source="../media/vs-code-explorer-project-files.png" alt-text="Screenshot of the project files in the Visual Studio Code Explorer."::: |
| 66 | +
|
| 67 | +::: zone-end |
| 68 | +
|
| 69 | +The following sections contain an overview of the main project folders and files of the empty ASP.NET Core project: |
| 70 | +
|
| 71 | +### The *MyWebApp.csproj* project file |
| 72 | +
|
| 73 | +The *.csproj* project file is used to: |
| 74 | +
|
| 75 | +- Configure how to build the project |
| 76 | +- Specify which version of .NET to target |
| 77 | +- Manage project dependencies |
| 78 | +
|
| 79 | +::: zone pivot="vscode" |
| 80 | +### The *.sln* solution file |
| 81 | +
|
| 82 | +When an ASP.NET Core project is created or opened in Visual Studio Code (with the C# Dev Kit extension), it creates a *[project name].sln* solution file. The *[project name].sln* solution file contains information for one or more related projects, including build information, settings, and any miscellaneous files that aren’t associated with just one particular project. |
| 83 | +
|
| 84 | +::: zone-end |
| 85 | +
|
| 86 | +::: zone pivot="shell" |
| 87 | +
|
| 88 | +::: zone-end |
| 89 | +
|
| 90 | +### The *obj* folder |
| 91 | +
|
| 92 | +The `obj` folder contains intermediate files that are used by the build system, including compiled object files generated from the source files. The final build output is placed in a `bin` folder created during the build process. |
| 93 | +
|
| 94 | +### The *Properties/launchSettings.json* file |
| 95 | +
|
| 96 | +The *Properties/launchSettings.json* file contains configuration data for how the app is launched during development. These settings include the `applicationUrl` property, which specifies the root URL the app uses, such as `https://localhost:{port}`, where `{port}` is a random local port number assigned when the project is created. |
| 97 | +
|
| 98 | +The *launchSettings.json* file contains the following configuration: |
| 99 | +
|
| 100 | +```json |
| 101 | +{ |
| 102 | + "$schema": "https://json.schemastore.org/launchsettings.json", |
| 103 | + "profiles": { |
| 104 | + "http": { |
| 105 | + "commandName": "Project", |
| 106 | + "dotnetRunMessages": true, |
| 107 | + "launchBrowser": true, |
| 108 | + "applicationUrl": "http://localhost:5218", |
| 109 | + "environmentVariables": { |
| 110 | + "ASPNETCORE_ENVIRONMENT": "Development" |
| 111 | + } |
| 112 | + }, |
| 113 | + "https": { |
| 114 | + "commandName": "Project", |
| 115 | + "dotnetRunMessages": true, |
| 116 | + "launchBrowser": true, |
| 117 | + "applicationUrl": "https://localhost:7140;http://localhost:5218", |
| 118 | + "environmentVariables": { |
| 119 | + "ASPNETCORE_ENVIRONMENT": "Development" |
| 120 | + } |
| 121 | + } |
| 122 | + } |
| 123 | +} |
| 124 | +``` |
| 125 | + |
| 126 | +### The *Program.cs* file |
| 127 | + |
| 128 | +The *Program.cs* file serves as the entry point for an ASP.NET Core app and has several key purposes, which include: |
| 129 | + |
| 130 | +- Host configuration: Configures the host, including setting up the web server. |
| 131 | +- Service registration: Adds services to the app’s functionality, such as database contexts, logging, and specialized services for specific frameworks. |
| 132 | +- Middleware pipeline configuration: Defines the app’s request handling pipeline as a series of middleware instances. |
| 133 | +- Environment configuration: Sets up environment-specific settings for development, staging, and production. |
| 134 | + |
| 135 | +In the new empty ASP.NET Core project you created, the *Program.cs* file contains the following minimal code: |
| 136 | + |
| 137 | +```csharp |
| 138 | +var builder = WebApplication.CreateBuilder(args); |
| 139 | +var app = builder.Build(); |
| 140 | + |
| 141 | +app.MapGet("/", () => "Hello World!"); |
| 142 | + |
| 143 | +app.Run(); |
| 144 | +``` |
| 145 | + |
| 146 | +The following lines of code in this file create a `WebApplicationBuilder` with preconfigured defaults, and builds the app: |
| 147 | + |
| 148 | +```csharp |
| 149 | +var builder = WebApplication.CreateBuilder(args); |
| 150 | +var app = builder.Build(); |
| 151 | +``` |
| 152 | + |
| 153 | +The `app.MapGet()` method directly defines an endpoint that handles HTTP GET requests: |
| 154 | + |
| 155 | +```csharp |
| 156 | +app.MapGet("/", () => "Hello World!"); |
| 157 | +``` |
| 158 | + |
| 159 | +`app.MapGet("/")`: Defines a route for the HTTP GET request. The `/` indicates this route responds to the requests made to the root URL of the app. For example, `http://localhost:{port}/`, where `{port}` is a randomly assigned port number assigned in the *Properties/launchSettings.json* file at project creation. |
| 160 | + |
| 161 | +`() => "Hello World!"`: A lambda expression that serves as the request handler. When a GET request is made to the root URL, this lambda expression is executed, and it returns the string "Hello World!" |
0 commit comments