Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Specify base URL for Angular ClientApp served from ASP.NET Core WebApi

I've created an ASP.NET Core project which serves an Angular app using services.AddSpaStaticFiles(), app.UseSpaStaticFiles(), app.UseSpa(), etc.

But it serves the application directly from http://localhost:1234, while I want to serve it from http://localhost:1234/angular/MyAngularApp1/, while I want to use http://localhost:1234/ for an API controller.

How can I achieve that?

Note: I need it to work in a production build. Some solutions appear to work, but in reality they work only when you run the site from Visual Studio, and stop working once you publish/deploy to IIS or Kestrel.

like image 336
sashoalm Avatar asked Sep 09 '19 12:09

sashoalm


People also ask

How do I run angular and .NET Core project?

To start the project, press F5 or select the Start button at the top of the window. You will see two command prompts appear: The ASP.NET Core API project running. The Angular CLI running the ng start command.

Can I use angular with C#?

Using Angular Development with C# They are both easy to use and have great communities and support. Consider this effective combination for your next web development project.


3 Answers

Eventually I found a function that pretty much achieves this:

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    app.UsePathBase("/MyPrefix/");

    if (env.IsDevelopment())
    .......

See https://www.billbogaiv.com/posts/net-core-hosted-on-subdirectories-in-nginx for more info.

like image 159
sashoalm Avatar answered Sep 21 '22 02:09

sashoalm


You can define a base url for your application like this

    app.UseMvc(routes =>
    {
        routes.MapRoute(
            name: "default",
            template: "ClientApp/{controller}/{action=Index}/{id?}");
    });
like image 43
Tony Ngo Avatar answered Sep 19 '22 02:09

Tony Ngo


If you want to specify base URL for view from Angular ClientApp folder , try to set href attribute of base by going to ClientApp > src > index.html like below :

<head>
 <meta charset="utf-8">
 <title>ClientApp</title>
 <base href="/ClientApp">

 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
like image 45
Xueli Chen Avatar answered Sep 21 '22 02:09

Xueli Chen