Configure and Deploy dot Net Core API with Angular 8 front end Together | Host on same domain

In this article we will see , how to host (deploy) asp.net core api application with angular 2+ together on one domain.

First we discus problem.

When we deploy api and ui on our server then we need to create to different domains like

abcd-api.yourdomain.com    For api

abcd.yourdomain.com   For UI

So its difficult to manage on that case if we have already multiple domain on your hosting server.

So in our case will will create only one domain abcd.yourdomain.com and host application api and ui together on it.

So we have no need for use separate separate domain for each. There are few settings you may follow below things.

1. In your api project open Startup.cs file and write green looking code under Configure method

public void Configure(IApplicationBuilder app, IHostingEnvironment env)

        {

            if (env.IsDevelopment())

            {

                app.UseDeveloperExceptionPage();

            }

 

            app.Use(async (context, next) =>

            {

                await next();

                if(context.Response.StatusCode==404 && !System.IO.Path.HasExtension(context.Request.Path.Value))

                {

                    context.Request.Path = "/index.html";

                    await next();

                }

            });

            app.UseDefaultFiles();

            app.UseStaticFiles();

 

            app.UseCors(builder =>

            builder.AllowAnyOrigin()

            .AllowAnyHeader()

            .AllowAnyMethod()

            );

 

            app.UseAuthentication();

            

            app.UseMvc();

 

        }

2. Now copy you prod build angular code and paste into api wwwroot folder.

  -> Now you know better which folder you selected for prod build ,you may change that and also copy and paste build code and manually paste into wwwroot folder.

-> Paste copied code into wwwroot folder in api.

Conclusion: You have no need for create separate domain to host api in different and ui on different domain. You can easy to run together.