Creating a Basic Web Site From an ASP.NET Core Empty Project

We take a look at how quickly a basic web site can be made with ASP.NET Core. If you're new to ASP.NET Core or want a refresher, read on for more!

Paul Michaels

Updated Nov. 13, 18 · Tutorial

Likes (1)

Comment

Save

36.0K Views

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.

File -> New Project

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

This is generated by a line in the Startup.cs file:

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.

Step 1: Create the HTML File

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:

The contents of this file are as follows:

<!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."

Step 2: Configure ASP.NET

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

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 Index or Default files. It's also worth pointing out that the order of these matters:

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

    app.UseDefaultFiles();
    app.UseStaticFiles();                                    
}

Now it loads the Index.html file. So, technically, it was only two steps — although we haven't referenced any JavaScript yet.

Step 3: Add the JavaScript... and Let's Do Something Funky

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

<!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):

The JavaScript code for that new file is here:

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!

If you enjoyed this article and want to learn more about ASP.NET, check out this collection of tutorials and articles on all things ASP.NET.

ASP.NET ASP.NET Core

Published at DZone with permission of Paul Michaels, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Related

Trending