Coding Shorts: Hosting SPAs in ASP.NET Core
HTML-код
- Опубликовано: 17 апр 2022
- I've been talking with clients for a long time about hosting a SPA (e.g. Vue, Angular, React, Svelte, etc.) in ASP.NET Core projects. I've tried a lot of approaches and in this video, I show you how I got there and what I think you should be doing now.
UPDATE:
I did find out that the dual-StaticFiles is not the right approach. To get asp-append-version working, please see the subsequent blog post:
wildermuth.com/2022/04/25/mul...
If you like this video, you might like other videos in my Instructional Videos:
- • Instructional Videos
Or my Pluralsight Courses:
- shawnl.ink/psauthor 
Наука
Dear Sir, I would like to express my sincere appreciation for the valuable information you shared with us. Your presentation was truly remarkable and provided me with a wealth of knowledge that I found extremely useful. I am grateful for the opportunity to have learned from your expertise.
Many many thanks
Hello Shawn, i took some of your courses on pluralsight in the past and i should say they were great. Your way of expanding the topic and progressing nicely and also you voice somehow helps a lot.. I see from this video that nothing changed. It is still very good to learn from you... I met this video while looking for a similar setup that I want to use for some pet project at home. The only difference is I want to host all this in a windows service. which i know is doable too :) thank you..
That's a very nice compliment.
Very Thanks man! You save my life! Hugs from Brazil.
Glad I could help
Awesome content as always @swildermuth! Very helpful.
Glad it helped. Hope you're doing well, haven't seen you in a while!
Thanks! good video!
Thank you about the great content
I appreciate that!
Thank you for your content, do you know how to use a spa react app inside a link into the a razor page? i saw that there is a SpaServices
This is really nice because you don't have to muck about with build folders in odd places. What was the issue with using Vue's cache busting?
If you use Vue's cache busting, then you have to change the URL in your Script tags on every build.
Hi Shawn,
Wonderful tutorial.
Have you got a tutorial on MsBuild specific to various DevOps issues encountered in the production build of integrating client and dotnet6 API services? e.g using Tailwindcss in razor pages build, etc
Not really, though my end-to-end Pluralsight course covers some of the deployment issues. shawnl.ink/pscore
Hi Shaw BFF appears to be the talk of the town just now. I would keen to hear your thoughts around Microsoft Identity when securing various SPAs. Are you always integrating like you are here so you don't have tokens in the browser? Do you feel it is an acceptable risk etc?
I'm keen to hear some insights on this too.
What happened to UseSpaStaticFiles?
Will front end routing work with this technique?
It's still there, I just fine care for how it works
Hi Shawn,
Great lesson you have here.
Please how can l integrate this in an Asp.Net core 6 web api project without and index file?
what do you mean "without an index file"
@@swildermuth asp.net core web api
Will this work if my site has its own routing?
yes, though you might need to use MapFallback if you aren't using hash urls in the spa.
Not a fan of the new Spa Proxy in Asp.Net 6?
No, and I thought it was deprecated. Having a Node instance running in the background isn't necessary during Production, and for development it is hard to know if it is failing. This solution surfaces build tool failures more obviously to me.
@@swildermuth So, I guess you aren't aware of the changes they made in .Net 6. The Javascript services were deprecated. They changed the spa templates.
The whole change was to allow you to use the clientside framework tools during dev and use the node proxy to hit backend services.
Check out the Improved single-page app (SPA) templates section in the Asp.Net Core 6 what's new page. It starts:
"The ASP.NET Core project templates have been updated for Angular and React to use an improved pattern for single-page apps that is more flexible and more closely aligns with common patterns for modern front-end web development."
The react/angular templates are "in the box" but servicestack actually have vue and svelte templates.
@@pilotboba I'll check this out and see if they solved "node not responding" mess that made me shy away from it.
My issue with this is that on every launch, you're recompiling. For Vite, that's not a problem but for Angular and React, the Proxy is going to be super slow to startup. With this technique, you can keep build-watch running continuously in the background. The proxy assumes that the ASP.NET project is just an API server, and that's not the only use-case.