Configure route in a Blazor Server-Side client project

Question

I'm making a Blazor server-side SPA client app which communicate with API controllers on a MVC server through HTTP requests.

What should I add in both Startup.cs of the client and server to make the routing work when making the HTTP request? And how can I configure the routes?

Answer 1

OK... The BlazingPizza sample is a Blazor WebAssembly application. It is executed on the client browser. The solution contains three projects: Shared (shared by the other two projects); Client ( executed on the client browser); and Server (a project which host the application and the Web Api). Now, you want to convert this application to Blazor Server app, right?

Do this and you're safe: 1. Go to Visual Studio and create Blazor Server App (from the Create a new Blazor app dialog). After hitting the "Create" button, a new Server-side Blazor application is created and configured for you. Run this app and see what it can do, view the Startup class to learn how your app was configured, etc.

Realize this: This is an Asp.Net Core app, running on the server, and sending Html content via SignaleR to connected clients. It is important that you realize that this (the Html you see in the browser) is the client-side of the Blazor Server app, but execution of code occurs on the server only,and thus, if you use a Web Api app to your application, it is executed on the server; in other words, from the server you make Web Api calls to the server. This is legitimate, and sometimes even necessary...

2. To add a Web Api project to your application do the following: Right click on the solution name, select Add --> New Project ... From the Add a new project window select Asp.Net Core Web Application. From the Create a new Asp.Net Core web application window select the API project template, and then hit the "Create" button. A new Web Api project is created and configured for you with a controller named WeatherForecastController.

3. You are going to call the Web Api endpoint from your Blazor Server app, right? So add a reference to the Web Api project from the Blazor Server app. Now you can perform HTTP calls from your Blazor Server to the Web Api endpoints.

What I've described above is how you do what you've asked in the comment above. But this is only the beginning. Start to play with it, and please, if you have more questions, open new question threads, and I'll try to help...

Answer 2

Setting of the Startup class if you use Balzor Server App. Note: this type of Blazor is executed on the server. Note that the code below is provided automatically when you create this type of Blazor

Startup.cs

public class Startup
    {
        public Startup(IConfiguration configuration)
        {
            Configuration = configuration;
        }

        public IConfiguration Configuration { get; }

        // 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)
        {
            services.AddRazorPages();
            services.AddServerSideBlazor();
            services.AddSingleton<WeatherForecastService>();
        }

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }
            else
            {
                app.UseExceptionHandler("/Error");
                // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
                app.UseHsts();
            }

            app.UseHttpsRedirection();
            app.UseStaticFiles();

            app.UseRouting();

            app.UseEndpoints(endpoints =>
            {
                endpoints.MapBlazorHub();
                endpoints.MapFallbackToPage("/_Host");
            });
        }
    }

Setting of the Startup class if you use Balzor WebAssembly App. Note: this type of Blazor is executed on the client browser. Note that the code below is provided automatically when you create this type of Blazor. Note also that the Blazor app is hosted on the server, and thus there are three projects in your solution: Shared, Client and Server where you define your Web Api controllers.

Client.Startup.cs

public class Startup
    {
        public void ConfigureServices(IServiceCollection services)
        {
        }

        public void Configure(IComponentsApplicationBuilder app)
        {
            app.AddComponent<App>("app");
        }
    }

Server.Startup.cs

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)
        {
            services.AddMvc();
            services.AddResponseCompression(opts =>
            {
                opts.MimeTypes = ResponseCompressionDefaults.MimeTypes.Concat(
                    new[] { "application/octet-stream" });
            });
        }

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            app.UseResponseCompression();

            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
                app.UseBlazorDebugging();
            }

            app.UseStaticFiles();
            app.UseClientSideBlazorFiles<Client.Startup>();

            app.UseRouting();

            app.UseEndpoints(endpoints =>
            {
                endpoints.MapDefaultControllerRoute();
                endpoints.MapFallbackToClientSideBlazor<Client.Startup>("index.html");
            });
        }
    }

Note: As it was not clear from "a Blazor server-side SPA client app" what type of Blazor you are speaking of, I've shown you both. Once again, this setting are automatically created for you when you create your apps.

To make HTTP calls from a Blazor WebAssembly, you inject the HttpClient service into your components and calls methods of this service according to your needs:

@inject HttpClient HttpClient

Note that the HttpClient service is added to the DI container by default

To make HTTP calls from Blazor Server you do the same thing shown above, and you you call the Web Api the same way, except that you have to add the HttpService to the DI container manually. It is not provided automatically as calling a Web Api from a Blazor Server is not common in that mode of execution (Your Blazor app is running on the same server where your Web Api resides).

Note also that it is recommended to use the IHttpClientFactory to produce the HttpClient.