Coding Shorts: Using Vite in ASP.NET Core Projects

Lots of client-side projects are now using Vite for their development server. Whether it is React, Vue, Svelte kit or other projects, Vite is more important than ever. In this coding short, I show you how you can use Vite at development time in an ASP.NET Core project:

00:00 - Introduction
00:59 - The Vite Project
03:30 - Release Builds to ASP.NET Core
04:54 - Adding Vite Project to a Razor Page
08:02 - Using the Vite Server on a Razor Page
10:03 - Problems with Routing
11:47 - Mapping a Fallback Route
12:57 - Wrapping Up

If you like this video, you might like other videos in my Instructional Videos:

You can hire me too! You can reach me at my new website:

[dudeharmonious]

Thanks, Sean. This was very helpful. Appreciate everything you do for the community.

[Kingside]

I handled it by simply proxying the request.
But how you descriped it is wonderful! Thank you so much

[itsIgzy]

@shawn Thanks for the super tutorial I used it for my project as well, altho only one small heads up, also for other who migth get stuck with the issue that the files are not loading, the base property in the vite config when set to simply a string for example:

base:"vue-client", when in production will throw errors that it can't find the files, the fix for that is to make the base with slashes like this

base:"/vue-client/"

Kind regards :)

[rogerpence]

You read my mind! Perfecto. Thank you, Shawn!

[szabolcsveer]

I'm using React the same way as you showed in this video, rendering React page components into Razor views, however this way I don't have communication between the entry points inside React
and I wanna use the routing from the MVC app. Is there a way to do this? Much Appreciated

[aahsf]

Hi. what about that image, Vue logo? how to make it load? it is also not available when publishing in IIS. Thanks.

[Octopie]

Interesting video. Are we limited to use vue router in only 1 place in our app or is there a way to configure multiple app.MapFallbackToPage calls for if we had a Vue spa (with vue routing) at /FilmList and say /ActorList?

[zerthz_]

Do you have an automated way to run the vite server on port 5000? So that you don't have to do it manually? Would be nice if it was possible to bake it into the debugging mode that it automatically run it and took it down.

[nefesses]

Is it possible to make a .net core web application that use nuxt3 framework? and how could i make this project compatible with nuxt (building deployment etc).
.net core with using modern ui development frameworks like vue nuxt react etc. it can be rough
What is the correct way to make kind of this project?
Backend and Frontend must be seperate or not?
i cannot find any detailed documentation for this

And thanks for the video

[hanuman]

I find it curious that SpaServices is so poorly documented, when it's needed for all SPA projects (Vue, React, Angular) when 95% of all .NET jobs require SPA

[r_ffin]

What's the advantage of serving Razor pages? That is, what practically would you want to inject via Razor that you couldn't replace with a pure-JavaScript client (here, Vue files served by Vite (or built by Vite and served by any web server)) talking to a .NET Core Web API? Feels like a dueling architecture [pulling from .NET-land via Razor and APIs], and I'm trying my best to separate those two concerns' stacks completely at my current employer. How do you use Razor that would make that separation a bad idea?

PS -- Interesting YouTube "watch later" list. "Forget Yellowstone - These EIGHT Supervolcanoes Could Destroy the World" strikes me as especially nerve-wracking. ;)

[terminatormunky]

How would you deal with images with this setup? My vite react app compiles great, but the images, such as the icon or a logo for the nav bar, are not picked up by my C# app when serving up the react app for some reason.