Creating a Basic Web Site from an Asp.Net Core Empty Project
Tags: aspnetcore, dotnet, csharp, javascript
Published: 2020-01-17 17:47:43

This is from <a href="https://www.pmichaels.net/2018/11/10/creating-a-basic-web-site-from-an-asp-net-core-empty-project/">an original post back in 2018</a>, but it's probably one of my most frequently re-visited posts.

I recently wanted to do a very quick proof of concept, regarding the use of setInterval versus setTimeout after reading that setTimeout was referable if you were calling the same function very rapidly.  I thought I'd note down my journey from File -> New Project to having the POC running so that next time, I don't have to re-lookup the various parts.


<h1>File -> New Project</h1>

If you create a brand new Asp.Net Core 2.1 project, select empty project, and then run the generated code, you'll see this:

<a href="https://www.pmichaels.net/wp-content/uploads/2018/11/aspnetcoreempty-1.png"><img src="https://www.pmichaels.net/wp-content/uploads/2018/11/aspnetcoreempty-1.png" alt="" width="754" height="272" class="alignnone size-full wp-image-3537" /></a>

This is generated by a line in Startup.cs:

```javascript
app.Run(async (context) =>
{
    await context.Response.WriteAsync("Hello World!");
});
```

The target here is to get to a situation where the blank app is serving an HTML page with some attached Javascript as fast as possible.  Here, I've got exactly three steps.

<h1>Step 1 - Create the HTML File</h1>

The application can only serve static files (HTML is considered a static file) from the wwwroot folder.  The internal structure of this folder doesn't matter, but that's where your file must go:

<a href="https://www.pmichaels.net/wp-content/uploads/2018/11/aspnetcoreempty-2.png"><img src="https://www.pmichaels.net/wp-content/uploads/2018/11/aspnetcoreempty-2.png" alt="" width="305" height="323" class="alignnone size-full wp-image-3536" /></a>

The contents of this file are as follows:

```HTML
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <p>test</p>
</body>
</html>
```

This won't actually do anything yet, because by default, Asp.Net Core does not serve static files, nor does it know the enormous significance of naming something "Index".

<h1>Step 2 - Configure Asp.Net</h1>

Startup.cs is where all the magic happens; this is what it looks like out of the box:

```csharp
public class Startup
{
    // This method gets called by the runtime. Use this method to add services to the container.
    // For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940
    public void ConfigureServices(IServiceCollection services)
    {
        
    }
 
    // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
    public void Configure(IApplicationBuilder app, IHostingEnvironment env)
    {
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }
 
        app.Run(async (context) =>
        {
            await context.Response.WriteAsync("Hello World!");
        });
    }
}
```

The `context.Response.WriteAsync` goes, and instead we tell Asp.Net Core to serve static files, and the call to `UseDefaultFiles` means that it will search for <a href="https://docs.microsoft.com/en-us/aspnet/core/fundamentals/static-files?view=aspnetcore-2.1">Index or Default files</a>.  It's also worth pointing out that the order of these matters:

```csharp
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }
            
    app.UseDefaultFiles();
    app.UseStaticFiles();                                    
}
```

Now it loads the Index.html.  So technically it was only two steps - although we haven't referenced any Javascript yet.

<h1>Step 3 - Adding the javascript… and let's do something funky</h1>

Change the HTML to give the paragraph an ID and an absolute position.  Also, reference the file site.js:

```HTML
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="site.js"></script>
</head>
<body>
    <p id="testElement" style="position:absolute">test</p>
</body>
</html>
```

Obviously, without adding site.js, nothing will happen (it also needs to be in wwwroot):

<a href="https://www.pmichaels.net/wp-content/uploads/2018/11/aspnetcoreempty-3.png"><img src="https://www.pmichaels.net/wp-content/uploads/2018/11/aspnetcoreempty-3.png" alt="" width="296" height="213" class="alignnone size-full wp-image-3535" /></a>

The Javascript code for that new file is here:

```csharp
var divxPos = 0;
 
window.onload = function () {
    runCode();
};
 
function runCode() {
    var test = document.getElementById("testElement");    
    test.style.left = divxPos++ + 'px';    
 
    setTimeout(() => runCode(), 50);
};
```

If you run it, you'll find the text running away with itself!