Giter Club home page Giter Club logo

blazordualmode's Introduction

Demo on how to dynamically switch from client to server side mode by appending ?mode=server to the url.

Howto

This commit summarizes the necessary changes.

  1. Create a Blazor (ASP.NET Core hosted) Project, then change the Startup class of the .Server Project to enable server side features. This doesn't have adverse effects on Client Side Blazor but enables the Server Side services. For that you need to have services.AddServerSideBlazor(); in ConfigureServices and endpoints.MapBlazorHub(); in Configure
  2. We can now serve Client Side and Server Side apps but we need to polyfil the HttpClient that is provided in DI in Client Side by default. Server Side doesn't register it by default so we detect this and then register an HttpClient in DI that behaves similiar for compatibility
    // Server Side Blazor doesn't register HttpClient by default
    if (!services.Any(x => x.ServiceType == typeof(HttpClient)))
    {
    	// Setup HttpClient for server side in a client side compatible fashion
    	services.AddScoped<HttpClient>(s =>
    	{
    		// Creating the URI helper needs to wait until the JS Runtime is initialized, so defer it.
                    var uriHelper = s.GetRequiredService<NavigationManager>();
    	        return new HttpClient
    		{
    			BaseAddress = new Uri(uriHelper.BaseUri)
    		};
    	});
    }
  3. At this point, the only difference is which blazor JS file we load in the browser. This can be either achieved by serving a different index.html (for which i couldn't see an easy way) or using a small piece of JS to decide which file to load. First, move the /wwwroot/Index.html from the client to the server /Pages/_Host.cshtml and update the App tag:
    <app>
    	@(await Html.RenderComponentAsync<BlazorDualMode3.Client.App>(RenderMode.ServerPrerendered))
    </app>
  4. Decide what JS to load:
    <script id="blazorMode"></script>
    <script>
    	document.getElementById("blazorMode").src = window.location.search.includes("mode=server") ? "_framework/blazor.server.js" : "_framework/blazor.webassembly.js";
    </script>

blazordualmode's People

Contributors

chucker avatar dn32 avatar mrxx99 avatar pivendren avatar sire avatar suchiman avatar

Stargazers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.