How to host Angular application with Kestrel

Question

I am trying to deploy an Angular 7 application with .NET Core using Kestrel using the FileProvider extension.

I have created the angular app , i have ng build it and i copied the files inside dist .NET Porject.

Startup

 public void Configure(IApplicationBuilder app, IHostingEnvironment env) {
        string jsFolderName = "myroot";
        string prodRoot =Path.Combine(AppDomain.CurrentDomain.BaseDirectory,jsFolderName);
        string debugRoot =Path.Combine(Directory.GetCurrentDirectory(),jsFolderName);

        var isDev=env.IsDevelopment();


        DefaultFilesOptions options = new DefaultFilesOptions();
        options.DefaultFileNames.Clear();
        options.DefaultFileNames.Add("/myroot/index.html");
        app.UseDefaultFiles(options);
        app.UseStaticFiles();
        app.UseStaticFiles(new StaticFileOptions() {
            FileProvider = new PhysicalFileProvider(isDev?debugRoot:prodRoot),
            RequestPath = "/app"
        });
        if (env.IsDevelopment()) {
            app.UseDeveloperExceptionPage();
        } else {
            app.UseHsts();
        }

        app.UseHttpsRedirection();
        app.UseMvc();
    }

P.S My myroot folder is right in the root of the project. I do not know how to feed the first page (entrypoint) of the angular app which is index.html.

why dont you use ready templates? I suggest you to look [Mark Pieszak's AspNetCore Angular Universal Template](https://github.com/MarkPieszak/aspnetcore-angular-universal) or you can use microsoft's Angular template which is already available in VS2017 — Derviş Kayımbaşıoğlu, Dec 18 '18 at 13:29

score 1 · Accepted Answer · answered Dec 19 '18 at 04:45

As suggested by @Simonare in the comment, the best way is to use official Angular template.

But if you want to serve the static files only, you could do as below :

Configure the DefaultFilesOptions with FileProvider and RequestPath.

 
    var fileProvider = new PhysicalFileProvider(isDev?debugRoot:prodRoot);

    DefaultFilesOptions options = new DefaultFilesOptions(){
        RequestPath = "/app",           // to process request to `/app`
        FileProvider = fileProvider,    // to check files under `myroot/**/**`
        DefaultFileNames = new List { "index.html" },
    };
    options.DefaultFileNames.Clear();
    options.DefaultFileNames.Add("/myroot/index.html");
    app.UseDefaultFiles(options);

    // serve static files 
    app.UseStaticFiles();
    app.UseStaticFiles(new StaticFileOptions() {
        RequestPath = "/app",
        FileProvider = fileProvider,
    });

Because the path of app is https://yourhost:port/app, you also need to change the base path within the index.html, so that browser will load all assets (e.g. js, css, img files) relative to current path. The original base of /src/index.html is /:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>App</title>
        <base href="/">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="icon" type="image/x-icon" href="favicon.ico">
    </head>
    <body>
        <app-root>Loading...</app-root>
    </body>
</html>

Note we need :

change the <base href="/"> to <base href="/app">
or change the base to an empty string : <base href="">
or remove that line

How to host Angular application with Kestrel

1 Answers1

Linked