{"id":22415061,"url":"https://github.com/nitor-infotech-oss/aspnet-core-multiple-spa","last_synced_at":"2026-04-10T01:01:31.972Z","repository":{"id":51783871,"uuid":"187822467","full_name":"nitor-infotech-oss/aspnet-core-multiple-spa","owner":"nitor-infotech-oss","description":"Use and serve multiple react Single Page Applications using a Single ASP.NET core MVC web app","archived":false,"fork":false,"pushed_at":"2021-05-10T01:35:33.000Z","size":1434,"stargazers_count":4,"open_issues_count":4,"forks_count":1,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-03-27T04:16:53.411Z","etag":null,"topics":["aspnet-core","csharp","dotnet-core","isomorphic","nodejs","reactjs","single-page-applications"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/nitor-infotech-oss.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}},"created_at":"2019-05-21T11:19:38.000Z","updated_at":"2024-02-23T00:18:45.000Z","dependencies_parsed_at":"2022-08-23T07:40:48.144Z","dependency_job_id":null,"html_url":"https://github.com/nitor-infotech-oss/aspnet-core-multiple-spa","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/nitor-infotech-oss/aspnet-core-multiple-spa","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nitor-infotech-oss%2Faspnet-core-multiple-spa","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nitor-infotech-oss%2Faspnet-core-multiple-spa/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nitor-infotech-oss%2Faspnet-core-multiple-spa/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nitor-infotech-oss%2Faspnet-core-multiple-spa/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nitor-infotech-oss","download_url":"https://codeload.github.com/nitor-infotech-oss/aspnet-core-multiple-spa/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nitor-infotech-oss%2Faspnet-core-multiple-spa/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265672372,"owners_count":23808845,"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":["aspnet-core","csharp","dotnet-core","isomorphic","nodejs","reactjs","single-page-applications"],"created_at":"2024-12-05T15:11:02.701Z","updated_at":"2025-12-30T22:07:09.454Z","avatar_url":"https://github.com/nitor-infotech-oss.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Serve multiple [React](https://reactjs.org/) applications with Single [ASP.NET Core](https://docs.microsoft.com/en-gb/aspnet/core/) Web Application\r\n\r\n## Idea\r\n\r\nThe ASP.NET Core is providing amazing experience building [Single Page Application with React](https://docs.microsoft.com/en-gb/aspnet/core/client-side/spa/react). You can create a single application either in React or [Angular](https://docs.microsoft.com/en-gb/aspnet/core/client-side/spa/angular) and serve the application using [Kestrel](https://docs.microsoft.com/en-us/aspnet/core/fundamentals/servers/kestrel). This is made possible with [JavaScriptServices](https://docs.microsoft.com/en-gb/aspnet/core/client-side/spa-services)\r\n\r\nWhat we are really implementing here is the capability to serve multiple Single Page Applications (Modules) under a single ASP.NET core Web Application\r\n\r\nIt is a hack, this is an utility can be used with any Client Side JavaScript application or framework with minor customization, you can customize and set your own conventions\r\n\r\n## How it works\r\n\r\n1. Every Single Page Application build produces a consistent output with a single HTML Page\r\n2. The HTML page - `index.html`, has references to style bundles and script bundles and a placeholder to render the client side application\r\n3. `SPAHelper` Class has few helper methods which can extract the `head` and `body` section and render in your `Razor Views` or `Razor Pages`\r\n\r\n    - `RenderReactHead` will extract styles and other `head` tags and render those in View (You can use layout sections to put that under layout head)\r\n\r\n    ```html\r\n        @section Styles {\r\n            @await Html.RenderReactHead(\"sample-app-1\", \"wwwroot/sample-app-1/index.html\")\r\n        }\r\n    ```\r\n\r\n    - `RenderReactBody` will extract body along with script imports and render those in View\r\n\r\n    ```html\r\n        @await Html.RenderReactBody(\"sample-app-1\", \"wwwroot/sample-app-1/index.html\")\r\n    ```\r\n\r\n4. The output of SPA build is kept under `sample-app-1` under `wwwroot`, you can follow this convention to render multiple SPAs with every Action Method and View\r\n\r\n5. If you are using [React Router](https://reacttraining.com/react-router), you can add following conditional route mapping to avoid `404 HTTP status code` on page refresh. This will always render server side View before activating client side routing\r\n\r\n    ```csharp\r\n        app.MapWhen(\r\n            context =\u003e context.Request.Path.Value.StartsWith(\"/Apps/App1\"), \r\n            builder =\u003e {\r\n            builder.UseMvc(routes =\u003e\r\n            {\r\n                routes.MapSpaFallbackRoute(\r\n                    \"spa-app1-fallback\",\r\n                    new { controller = \"Apps\", action = \"App1\" }\r\n                );\r\n            });\r\n        });\r\n    ```\r\n\r\n## Todos\r\n\r\n1. ~~Automate build and copying SPA output~~\r\n2. Build target for Project to automate publishing with SPA output\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnitor-infotech-oss%2Faspnet-core-multiple-spa","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnitor-infotech-oss%2Faspnet-core-multiple-spa","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnitor-infotech-oss%2Faspnet-core-multiple-spa/lists"}