Explore the ASP.Net Core Empty Web Project Template

In the last module we created our initial FredsCars solution and project and ran the web application to see the results.

In this module we are going to take a look at and explore the initial files the ASP.Net Core Empty Web template sets up. We’ll also look at the code that displays the text “Hello World” in the browser we saw when we ran the application in the last module.

Table Of Contents
  1. Explore the Project Files
  2. Program.cs: The Entry Point
  3. Run the project
  4. What's Next

Explore the Project Files

In the last module we opened up the FredsCars ASP.Net Core project in Visual Studio and viewed them in Solution Explorer. Let’s take a look again and this time highlight some of the most important files to get familiar with right off the bat.

The launchSettings.json file

In Solution Explorer, expand the Properties folder, the yellow folder icon with a wrench on it, and double click the launchSettings.json file to open it.

A new tab will open in the IDE with the launchSettings.json configuration code which should look like the code shown below.

{
  "$schema": "http://json.schemastore.org/launchsettings.json",
  "profiles": {
    "http": {
      "commandName": "Project",
      "dotnetRunMessages": true,
      "launchBrowser": true,
      "applicationUrl": "http://localhost:5190",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    },
    "https": {
      "commandName": "Project",
      "dotnetRunMessages": true,
      "launchBrowser": true,
      "applicationUrl": "https://localhost:7215;http://localhost:5190",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    }
  }
}

The code above is written in JSON (JavaScript Object Notation). The outside curly braces, {}, signify that this entire file is a JavaScript object.

The important part of this file for us is the profiles section which is a property of the parent JavaScript object and itself contains a JavaScript Object holding two profiles.

"profiles": {
    "http": {
         // http profile configuration
    },
    "https": {
        // https profile configuration
    }
}

In the last module we used the dotnet run command from the command line with the --launch-profile switch and a value of “https” to run the web application and will do so most of the time through out the book.

dotnet run --launch-profile "https"

But you can also run the project from within the IDE by clicking the Green Arrow icon at the top.

Notice, it says https next to the Green arrow icon. This corresponds to the https profile in the launchSettings.json file. Now, if you click the expand icon to the right of the the Green Arrow Start button it will show all the profiles from the launchSettings.json file.

The https profile is checked by default and that is the one we are going to use. So, let’s take a closer look at that configuration.

"https": {
  "commandName": "Project",
  "dotnetRunMessages": true,
  "launchBrowser": true,
  "applicationUrl": "https://localhost:7215;http://localhost:5190",
  "environmentVariables": {
    "ASPNETCORE_ENVIRONMENT": "Development"
  }
}

In the code snippet above from launchSettings.json, the launchBrowser property of the https profile set to true means a new browser window will automatically open when you launch the web application in debug mode.

"launchBrowser": true

The applicationUrl property sets up two ports the development server will listen on; An http port and a secure https port.

"applicationUrl": "https://localhost:7215;http://localhost:5190"

Remember the port numbers in your project will be different then mine.

Lastly, the environmentVariables section sets the environment to Development using the ASPNETCORE_ENVIRONMENT variable. Environment is a fist class concept in ASP.Net Core and the three environments it comes with out of the box are Development, Staging, and Production; Although, it is easily extendable and you can add other environments such as Testing.

"environmentVariables": {
  "ASPNETCORE_ENVIRONMENT": "Development"
}

Configuring launchSettings.json

While we are here, let’s change the port numbers in the profiles to 40080 for the http URL and 40443 for the secure https URL so we are on the same page instead of using the random ports assigned by the project.

Modify the launchSettings.json file with the code below. As a reminder I will always highlight the changed code in bold blue font.

FredsCars/Properties/launchSettings.json

{
  "$schema": "http://json.schemastore.org/launchsettings.json",
  "profiles": {
    "http": {
      "commandName": "Project",
      "dotnetRunMessages": true,
      "launchBrowser": true,
      "applicationUrl": "http://localhost:40080",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    },
    "https": {
      "commandName": "Project",
      "dotnetRunMessages": true,
      "launchBrowser": true,
      "applicationUrl": "https://localhost:40443;http://localhost:40080",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    }
  }
}

Now, navigate to the folder with the FredsCars ASP.Net Core Empty Web project and run the project using the following commands.

TIP: If you still have the application running in an open console window or PowerShell window, press Ctrl-C in the window to stop the ASP.Net Core application from running. Type cls to clear all old feedback, and then enter the commands below.
cd C:\Development\FredsCars\MVC\Module02\FredsCars\FredsCars
dotnet run --launch-profile "https"

You should see the following output results in the Developer PowerShell for VS window.

In the image above you can see that after modifying the ports in launchSettings.json, the application is listening on port 40080 for https and port 40443 for https.

The apsettings.json file

The appsettings.json file is a configuration file for the web application also in JSON format. (Configuration files for ASP.Net Core are typically all in JSON format helping to make it’s web applications more cloud ready). It contains key/value pairs that can be used throughout the application. Some common configuration information stored is for logging and connection strings. But you can set up a custom key/ pairs value for anything you might need.

The appsettings.json code is shown below.

{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
  },
  "AllowedHosts": "*"
}

In the configuration code above, logging is set up where the default log level for components and services is “Information”. But for ASP.Net Core logging in particular, the logging level is set to warning”.

We saw an example of logging when we ran the project.

In the output results in the image above, we see the Microsoft.Hosting service logging “Information” level output to the console window.

The logging is showing us the following information.

  1. The two ports the application is listening on as we have already covered.
  2. How to shut down the application by pressing Ctrl+C.
  3. The hosting environment is set to Development (by the ASPNETCORE_ENVIRONMENT in launchSettings.json).
  4. The content root path of the application.

Program.cs: The Entry Point

The first two files we looked at were configuration files. But the Program.cs file is the first actual code file we are going to look at in ASP.Net Core MVC.

Program.cs is the entry point to any .Net program whether it is a console, desktop, mobile or, in our case, web application.

The code for Program.cs is shown below.

FredsCars\Program.cs

var builder = WebApplication.CreateBuilder(args);
var app = builder.Build();

app.MapGet("/", () => "Hello World!");

app.Run();

The code above is written in C# or, CSharp, the most common programming language for .Net.

C# was the brand new programming language Microsoft created just for .Net originally nearly 25 years ago. C# is in the C++ family of programming languages along with Java. They have a lot of curly braces “{}” in their syntax to begin and end blocks of code.

You can also use VB.Net as a programming language for .Net. But, I recommend learning C#. VB.Net is more verbose and was intended as a way to make it easier for people transitioning from Classic ASP and VBScript to learn .Net.

Just think of C# as the programming language we use to access the ASP.Net Core platform components and services for now.

Let’s quickly break down what these four lines of code in Program.cs do.

The first line creates a WebApplicationBuilder object and stores it in a variable called builder.

var builder = WebApplication.CreateBuilder(args);

It does this by using the CreateBuilder() method of the ASP.Net Core WebApplication object.

A variable is a name used to point to a block of computer memory to store a piece of information. So right now picture your computer’s memory something like the following.

Variables that contain simple types of information like integers and booleans are stored in an area of memory known as the stack. But, complex types called objects are stored in another area called the heap. And a pointer to the object in the heap is also stored in the stack along with simple types. In the above diagram, a pointer variable in the stack called builder is pointing to the WebApplicationBuilder object in the heap.

Integers and Booleans are some examples of simple data types and we will learn about data types as we go. Some of the main ones are integer, string, and boolean. There are no simple datatypes used in Program.cs but we will see many once we start programming.

The next line uses the Build method of the WebApplicationBuilderObject to build the web application, return it as a WebApplication object, and store it in a variable called app.

var app = builder.Build();

At this point, think of your computer memory like the following diagram.

The var keyword

The app variable is actually holding an object of type WebApplication. So it could also be represented this way.

WebApplication app = builder.Build();

The above line can be read as, “the variable app of type WebApplication is assigned the returned contents of the builder.Build method.

Notice, I wrote “is assigned” rather then “equal too”. The equal operator is “==” in C#. The assignment operator is “=”. We’ll see the equal “==” operator later in code when we want to compare two values. For instance, 9 + 5 == 14. This would compare 9 + 5 to 14 and return a boolean result of either true or false. In this case true.

But the code for this line in the actual application uses the var keyword as the type rather than WebApplication.

Here is the line again.

var app = builder.Build();

You can use the var keyword for any type of variable be it integer, a custom type, or an object from the ASP.Net Core framework like WebApplication as long as the type can be inferred from the right side of the assignment statement. Here we know that builder.build will return a WebApplication object. To see the type of the object returned hover your mouse over the Build method as shown below.

The var keyword in C# is different than the var keyword in JavaScript. In JavaScript if you assign an integer value to a variable you can later change it to a string value.

This is not so in C#. Even though we have marked the app variable type as var, it is still strongly typed. If you hover over the var keyword for that line in the IDE, a popup will appear giving information on the type of the variable.

In the above screenshot you can see that the var keyword has inferred the type from what the builder.Build method returns. Also notice in the description it says, “The web application used to configure the HTTP pipeline, and routes”. Keep this in mind for when we get to the third line of code.

And again, if you hover over the builder.Build() method with your mouse you can see a similar popup describing what that method returns.

Now that there is a WebApplication object in the app variable, it can be used to configure the HTTP pipeline and routes. And that is what the third line does.

app.MapGet("/", () => "Hello World!");

The above line uses the MapGet() method of the WebApplication object to set up an EndPoint route. An EndPoint is a URL the web application listens on for requests.

The MapGet() method takes two parameters. The first is the route and the second is an inline function that handles the route.

In the above line the specified route is “/“, which is the base URL of the application: http://localhost/#### where #### is the port number your application is configured to run on.

The second parameter is the function that handles the route:

() => "Hello World!"

This second parameter is a lamda expression defining a function to handle the “/” route.

() can be read as no parameters.

=> is the goes into operator and can be read as “goes into”.

So the lamda function can be read as “no parameters go into the function that returns the string “Hello World!”.

“Hello World!” is the body of the function. So the string “Hello World!” is what the function returns.

A lamda expression is just an easy efficient way to write an anonymous function that can be passed to a method.

Another way to write this function would be:

function (){
    return "Hello World!"
}

Now that the WebApplication object is built and configured, it’s Run() method can be called. And that’s what the fourth and final line does.

app.Run();

In the last module when we ran the dotnet run --launch-profile "https" command, this was the code that got executed to set up the web application host.

Don’t worry if this is all a bit fuzzy for now. Everything will become much more clear once you get some experience writing some code in the following modules.

Run the project

As a reminder of what we have so far. Let’s run the project one more time.

Run the following commands at the command prompt. This is the folder that contains the FredsCars.csproj file.

cd C:\Development\FredsCars\MVC\Module02\FredsCars\FredsCars 
dotnet run --launch-profile "https"

Again here are the output results.

Now open the application in a web browser by pressing Ctrl+k and clicking the https link shown above or manually opening up a browser and navigating to the https url.

The results in your browser should look similar to the following.

What’s Next

In this module we took a tour of the initial files set up by the ASP.Net Core Empty Web project template. We looked at the two coniguration files and the entry point to the application, Program.cs. And, we went over the code Program.cs uses to start up and run the web application.

We also learned a little about variables, functions, and parameters in C#. We will learn more about C# as we go and fill in the blanks as needed.

In the next several modules we start to build out the infrastructure of our FredsCars ASP.Net Core MVC application.

First we need to configure the ASP.Net Core project to enable MVC. Next, we’ll build our first controller. And finally, create a View to show data to the user.

< Prev
Next >

Leave a Reply