{"id":21340631,"url":"https://github.com/mintplayer/mintplayer.aspnetcore.spaservices","last_synced_at":"2025-04-07T07:04:40.964Z","repository":{"id":38460985,"uuid":"204431316","full_name":"MintPlayer/MintPlayer.AspNetCore.SpaServices","owner":"MintPlayer","description":"Project for Server-side rendering with ASP.NET Core and Angular","archived":false,"fork":false,"pushed_at":"2024-11-22T11:47:11.000Z","size":1766,"stargazers_count":24,"open_issues_count":7,"forks_count":8,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-09T12:29:15.499Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"C#","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MintPlayer.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-08-26T08:30:11.000Z","updated_at":"2025-03-09T10:43:27.000Z","dependencies_parsed_at":"2024-06-10T23:44:17.218Z","dependency_job_id":"57bd94be-d2fa-4d51-87db-feff7036127e","html_url":"https://github.com/MintPlayer/MintPlayer.AspNetCore.SpaServices","commit_stats":null,"previous_names":["mintplayer/mintplayer.aspnetcore.spaservices","mintplayer/mintplayer.aspnetcore.spaservices.routing"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MintPlayer%2FMintPlayer.AspNetCore.SpaServices","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MintPlayer%2FMintPlayer.AspNetCore.SpaServices/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MintPlayer%2FMintPlayer.AspNetCore.SpaServices/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MintPlayer%2FMintPlayer.AspNetCore.SpaServices/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MintPlayer","download_url":"https://codeload.github.com/MintPlayer/MintPlayer.AspNetCore.SpaServices/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247608150,"owners_count":20965952,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-22T00:52:07.593Z","updated_at":"2025-04-07T07:04:40.944Z","avatar_url":"https://github.com/MintPlayer.png","language":"C#","funding_links":[],"categories":[],"sub_categories":[],"readme":"# MintPlayer.AspNetCore.SpaServices.Routing\nThis project facilitates server-side prerendering in ASP.NET Core.\n\n## Version info\n\n| License                                                                                                               | Build status                                                                                                          | Code coverage | Code quality |\n|-----------------------------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------|---------------|--------------|\n| [![License](https://img.shields.io/badge/License-Apache%202.0-green.svg)](https://opensource.org/licenses/Apache-2.0) | ![.NET Core](https://github.com/MintPlayer/MintPlayer.AspNetCore.SpaServices.Routing/workflows/.NET%20Core/badge.svg) |               | [![Codacy Badge](https://app.codacy.com/project/badge/Grade/a1528e2873ac4375881f4ccc00b70a91)](https://www.codacy.com/gh/MintPlayer/MintPlayer.AspNetCore.SpaServices.Routing?utm_source=github.com\u0026amp;utm_medium=referral\u0026amp;utm_content=MintPlayer/MintPlayer.AspNetCore.SpaServices.Routing\u0026amp;utm_campaign=Badge_Grade) |\n\n| Package                                        | Release                                                                                                                                                                                         | Preview                                                                                                                                                                                            | Downloads |\n|------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------|\n| MintPlayer.AspNetCore.NodeServices             | [![NuGet Version](https://img.shields.io/nuget/v/MintPlayer.AspNetCore.NodeServices.svg?style=flat)](https://www.nuget.org/packages/MintPlayer.AspNetCore.NodeServices)                         | [![NuGet Version](https://img.shields.io/nuget/vpre/MintPlayer.AspNetCore.NodeServices.svg?style=flat)](https://www.nuget.org/packages/MintPlayer.AspNetCore.NodeServices)                         | [![NuGet](https://img.shields.io/nuget/dt/MintPlayer.AspNetCore.NodeServices.svg?style=flat)](https://www.nuget.org/packages/MintPlayer.AspNetCore.NodeServices)                         |\n| MintPlayer.AspNetCore.SpaServices              | [![NuGet Version](https://img.shields.io/nuget/v/MintPlayer.AspNetCore.SpaServices.svg?style=flat)](https://www.nuget.org/packages/MintPlayer.AspNetCore.SpaServices)                           | [![NuGet Version](https://img.shields.io/nuget/vpre/MintPlayer.AspNetCore.SpaServices.svg?style=flat)](https://www.nuget.org/packages/MintPlayer.AspNetCore.SpaServices)                           | [![NuGet](https://img.shields.io/nuget/dt/MintPlayer.AspNetCore.SpaServices.svg?style=flat)](https://www.nuget.org/packages/MintPlayer.AspNetCore.SpaServices)                           |\n| MintPlayer.AspNetCore.SpaServices.Prerendering | [![NuGet Version](https://img.shields.io/nuget/v/MintPlayer.AspNetCore.SpaServices.Prerendering.svg?style=flat)](https://www.nuget.org/packages/MintPlayer.AspNetCore.SpaServices.Prerendering) | [![NuGet Version](https://img.shields.io/nuget/vpre/MintPlayer.AspNetCore.SpaServices.Prerendering.svg?style=flat)](https://www.nuget.org/packages/MintPlayer.AspNetCore.SpaServices.Prerendering) | [![NuGet](https://img.shields.io/nuget/dt/MintPlayer.AspNetCore.SpaServices.Prerendering.svg?style=flat)](https://www.nuget.org/packages/MintPlayer.AspNetCore.SpaServices.Prerendering) |\n| MintPlayer.AspNetCore.SpaServices.Routing      | [![NuGet Version](https://img.shields.io/nuget/v/MintPlayer.AspNetCore.SpaServices.Routing.svg?style=flat)](https://www.nuget.org/packages/MintPlayer.AspNetCore.SpaServices.Routing)           | [![NuGet Version](https://img.shields.io/nuget/vpre/MintPlayer.AspNetCore.SpaServices.Routing.svg?style=flat)](https://www.nuget.org/packages/MintPlayer.AspNetCore.SpaServices.Routing)           |[![NuGet](https://img.shields.io/nuget/dt/MintPlayer.AspNetCore.SpaServices.Routing.svg?style=flat)](https://www.nuget.org/packages/MintPlayer.AspNetCore.SpaServices.Routing)            |\n\n## Server-side rendering\nIf you haven't setup SSR yet, please consult [this manual](https://medium.com/@pieterjandeclippel/server-side-rendering-in-asp-net-core-angular-6df7adacbdaa).\n\n## Installation\n### NuGet package manager\nOpen the NuGet package manager and install `MintPlayer.AspNetCore.SpaServices.Routing` in your project\n### Package manager console\nInstall-Package MintPlayer.AspNetCore.SpaServices.Routing\n\n## Usage\n### Register SPA routes\nThe ASP.NET Core application needs to be aware of your angular/react SPA routes.\nTherefor you need to provide these with the SpaRouteBuilder. For example:\n\n    public void ConfigureServices(IServiceCollection services)\n    {\n        // Define the SPA-routes for our helper\n        services.AddSpaRoutes(routes =\u003e routes\n            .Route(\"\", \"home\")\n            .Group(\"person\", \"person\", person_routes =\u003e person_routes\n                .Route(\"\", \"list\")\n                .Route(\"create\", \"create\")\n                .Route(\"{id}\", \"show\")\n                .Route(\"{id}/edit\", \"edit\")\n            )\n        );\n    }\n    \nYou can define routing parameters in your paths as well.\n\n### Adding SPA prerendering middleware\nTo enable SPA prerendering you'd normally use the following middleware registration code:\n\n    app.UseSpa(spa =\u003e\n    {\n        ...\n\n        spa.UseSpaPrerendering(options =\u003e\n        {\n            options.BootModulePath = $\"{spa.Options.SourcePath}/dist/server/main.js\";\n            options.BootModuleBuilder = env.IsDevelopment()\n                ? new AngularCliBuilder(npmScript: \"build:ssr\")\n                : null;\n            options.ExcludeUrls = new[] { \"/sockjs-node\" };\n        });\n\n        ...\n    });\n    \n### Supplying data\nYou probably want to pass data based on which url the visitor opens the first time.\nWith this package you can easily determine which angular component is to be rendered and what data needs to be provided to the angular app.\n\n    public void Configure(IApplicationBuilder app, IHostingEnvironment env, ISpaRouteService spaRouteService)\n    {\n        ...\n\n        app.UseSpa(spa =\u003e\n        {\n            ...\n            \n            spa.UseSpaPrerendering(options =\u003e\n            {\n                ...\n\n                options.SupplyData = (context, data) =\u003e\n                {\n                    var route = spaRouteService.GetCurrentRoute(context);\n                    var personRepository = context.RequestServices.GetRequiredService\u003cIPersonRepository\u003e();\n\n                    switch (route?.Name)\n                    {\n                        case \"person-list\":\n                            {\n                                var people = personRepository.GetPeople();\n                                data[\"people\"] = people;\n                            }\n                            break;\n                        case \"person-show\":\n                        case \"person-edit\":\n                            {\n                                var id = System.Convert.ToInt32(route.Parameters[\"id\"]);\n                                var person = personRepository.GetPerson(id);\n                                data[\"person\"] = person;\n                            }\n                            break;\n                    }\n                };\n            });\n        }\n    }\n\nYou can't perform dependecy injection here since the SupplyData is a delegate.\nYou can however retrieve an instance from the service-container through `context.RequestServices` or `context.ApplicationServices`.\n\n### main.server.ts\nThe data you passed in the SupplyData delegate is made available on the params.data object in the `main.server.ts`.\nThe refactored code can look like this:\n\n    const providers: StaticProvider[] = [\n      provideModuleMap(LAZY_MODULE_MAP),\n      { provide: APP_BASE_HREF, useValue: params.baseUrl },\n      { provide: 'BASE_URL', useValue: params.origin + params.baseUrl },\n      { provide: 'MESSAGE', useValue: params.data.message }\n    ];\n\n    if ('people' in params.data) {\n      providers.push({ provide: 'PEOPLE', useValue: params.data.people })\n    }\n    if ('person' in params.data) {\n      providers.push({ provide: 'PERSON', useValue: params.data.person })\n    }\n\n    const options = {\n      document: params.data.originalHtml,\n      url: params.url,\n      extraProviders: providers\n    };\n\n### main.ts\nEach key you pass in the main.server.ts must also be provided in the main.ts:\n\n    const providers = [\n      { provide: 'BASE_URL', useFactory: getBaseUrl, deps: [] },\n      { provide: 'MESSAGE', useValue: 'Message from the client' },\n      { provide: 'PEOPLE', useValue: null },\n      { provide: 'PERSON', useValue: null }\n    ];\n\n### Use in components\nYou can then use this value by using dependency injection in your components:\n\n    constructor(private personService: PersonService, @Inject('PERSON') private personInj: Person, private route: ActivatedRoute) {\n      if (personInj === null) {\n        var id = parseInt(this.route.snapshot.paramMap.get(\"id\"));\n        this.personService.getPerson(id, true).subscribe(person =\u003e {\n          this.setPerson(person);\n        });\n      } else {\n        this.setPerson(personInj);\n      }\n    }\n\n### Generate SPA routes\nIf necessary, you can generate an application URL on the server-side through c# code. Examples  for this use are when using a redirect from OpenSearch straight to your ShowComponent, or when generating an XML sitemap.\n\nTo do so, there are 2 approaches:\n\n#### Using a dictionary\n\n    var parms = new Dictionary\u003cstring, object\u003e();\n    parms[\"id\"] = 5;\n    var route = spaRouteService.GenerateUrl(\"person-edit\", parms);\n\n#### Using an anonymous type\n\n    var route = spaRouteService.GenerateUrl(\"person-edit\", new {\n        id = 5\n    });\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmintplayer%2Fmintplayer.aspnetcore.spaservices","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmintplayer%2Fmintplayer.aspnetcore.spaservices","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmintplayer%2Fmintplayer.aspnetcore.spaservices/lists"}