Make index.html as startup file in ASP.NET Core

Many websites use index.htm(l) or default.htm(l) as their startup page as its easy to remember but ASP.NET Core by default doesn’t use any of them as startup file. To use them, you have to configure couple of things. So in this post, let’s see how to make index.html as startup file in ASP.NET Core.

Make index.html as startup file in ASP.NET Core

Let’s begin by creating a new ASP.NET Core project. If you are new to ASP.NET Core then I recommened you to read here about creating your first ASP.NET Core application. So Open VS 2015 -> Hit File -> New Project and select “ASP.NET Core Web application (.NET Core)” option.

In the next dialog box, select Empty as template. Though the process of making index.html as startup remains same for web application template also.

Let Visual studio restores the nuget packages. Once restored, let’s just run the application. And you should see “Hello world” displayed in browser.

This “Hello World” is coming from startup.cs file -> Configure() method.

public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
{
    loggerFactory.AddConsole();

    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }
    app.Run(async (context) =>
    {
        await context.Response.WriteAsync("Hello World!");
    });
}

Before we add our index.html file to solution, we need to do 2 things. First, we need to add a package "Microsoft.AspNetCore.StaticFiles": "1.0.0" in our project. This package allows to serve all kind of static files (.js, .css, .jpg, .png, .html) present in wwwroot folder. So open Project.json and add "Microsoft.AspNetCore.StaticFiles": "1.0.0" package in dependencies section. As soon as you save the file, VS will download this package and install it.

{
  "dependencies": {
    "Microsoft.NETCore.App": {
      "version": "1.0.0",
      "type": "platform"
    },
    "Microsoft.AspNetCore.Diagnostics": "1.0.0",

    "Microsoft.AspNetCore.Server.IISIntegration": "1.0.0",
    "Microsoft.AspNetCore.Server.Kestrel": "1.0.0",
    "Microsoft.Extensions.Logging.Console": "1.0.0",
    "Microsoft.AspNetCore.StaticFiles": "1.0.0"
  },

And second thing, we need to do is to add the required middleware to startup.cs. So add following 2 middleware in configure() method.

• app.UseDefaultFiles() – This middleware allows to serve default files. This will search the wwwroot folder for following files.
  • index.html
  • index.htm
  • default.html
  • default.htm

  So you can choose any of them but for this post, I am using “index.html”. UseDefaultFiles() is just an URL-rewriter that doesn’t actually serve the file. You need to also add UseStaticFiles() to actually serve the file.

• app.UseStaticFiles()– This middleware is responsible for serving all static files present in wwwroot folder.

Remember, order of middleware is very important. app.UseDefaultFiles(); should be added before app.UseStaticFiles(); in the pipeline. Read How ASP.NET Core 1.0 Middleware is different from HttpModule and app.Use vs app.Run in ASP.NET Core middleware

public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
{
    loggerFactory.AddConsole();

    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }
    app.UseDefaultFiles();
    app.UseStaticFiles();

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

Finally, let’s add our index.html file. Right click on wwwroot folder and add index.html.

Let’s run the application now and you should see your HTML file running as startup file.
You can also change the default file name instead of using pre-defined in what’s used UseDefaultFiles. Add below code to startup.cs -> configure() method.

DefaultFilesOptions options = new DefaultFilesOptions();
options.DefaultFileNames.Clear();
options.DefaultFileNames.Add("startup.html");
app.UseDefaultFiles(options);
app.UseStaticFiles();

Above code will set “startup.html” file as startup file. Do you know that you can also rename wwwroot folder. Read here to find out how to rename it. And if you need to get wwwroot folder path in your application then please read Get application base and wwwroot path in ASP.NET Core.

Thank you for reading and I hope it helped you. Keep visiting this blog and share this in your network. Please put your thoughts and feedback in the comments section.

PS: If you found this content valuable and want to return the favour, then