@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 :)
I have one request can you do a coding shorts on User Impersonation using Identity/Jwt? Please is it possible? or am i just throwing a dumb question? Sorry
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
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
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
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?
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.
Yes. a couple of ways. First, you could use Aspire and it will launch they together, but that's a little overkill for just solving this. There is middleware for this (though it's changed a lot and I'm not much of a fan: github.com/vitejs/vite/discussions/7104#discussioncomment-2265654. Rider has support for doing this as well as Visual Studio has the Task Runner Explorer (a plugin) to run your project on opening of VS.
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 UA-cam "watch later" list. "Forget Yellowstone - These EIGHT Supervolcanoes Could Destroy the World" strikes me as especially nerve-wracking. ;)
I like Razor pages for this since I'm proposing micro-frontends - so the chrome of the page is handled on the server, and the vite app is handling the user interaction. If you have a single monolith in your Vite project, then Razor has nothing for you.
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.
I'm not a react guy, but I suspect it has nothing to do with text. I bet if you move them inside an assets folder, it will be compiled into the react assets. Otherwise it's probably a path issue.
@@terminatormunky Again, not sure how React does this, but usually it's a matter of it expecting the url to be relative to something. When you run the app, what's the href pointing to?
@@swildermuth I notice in the minified js file, it is looking in /assets/.png Which is under wwwroot/client/assets for reference The JS files and the image files are all in this folder, however changing this path doesn't do anything because the C# app just simply doesn't seem to be serving up these files. It is only serving up the CSS and JS files that I specified in the Index.cshtml. Do you know how I can tell it to send these image files? Also thanks for all your responses! Top tier!
Thanks, Sean. This was very helpful. Appreciate everything you do for the community.
Glad it was helpful!
I handled it by simply proxying the request.
But how you descriped it is wonderful! Thank you so much
In my app I want to have /app/.. - Handle by Spa, and every thing else handled by Razor Pages, it this even possible ?
@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 :)
You read my mind! Perfecto. Thank you, Shawn!
Very useful information! Thank you
You are welcome!
Thanks for this coding shorts.
Glad you like them!
I have one request can you do a coding shorts on User Impersonation using Identity/Jwt? Please is it possible? or am i just throwing a dumb question? Sorry
Hi. what about that image, Vue logo? how to make it load? it is also not available when publishing in IIS. Thanks.
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
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
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
While I agree, they seem to be moving away from them. I ended using YARP to reverse proxy to the actual running of Vite during development.
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?
You can have mulitiple fallbacks based on pattern:
app.MapFallbackToPage("/FilmList/{*path}", "/FilmList");
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.
Yes. a couple of ways. First, you could use Aspire and it will launch they together, but that's a little overkill for just solving this. There is middleware for this (though it's changed a lot and I'm not much of a fan: github.com/vitejs/vite/discussions/7104#discussioncomment-2265654. Rider has support for doing this as well as Visual Studio has the Task Runner Explorer (a plugin) to run your project on opening of VS.
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 UA-cam "watch later" list. "Forget Yellowstone - These EIGHT Supervolcanoes Could Destroy the World" strikes me as especially nerve-wracking. ;)
I like Razor pages for this since I'm proposing micro-frontends - so the chrome of the page is handled on the server, and the vite app is handling the user interaction. If you have a single monolith in your Vite project, then Razor has nothing for you.
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.
I'm not a react guy, but I suspect it has nothing to do with text. I bet if you move them inside an assets folder, it will be compiled into the react assets. Otherwise it's probably a path issue.
@@swildermuth yeah it's very odd. They are being put into my wwwroot folder, the minified app just doesn't see them in there.
@@terminatormunky Again, not sure how React does this, but usually it's a matter of it expecting the url to be relative to something. When you run the app, what's the href pointing to?
@@swildermuth I notice in the minified js file, it is looking in /assets/.png Which is under wwwroot/client/assets for reference
The JS files and the image files are all in this folder, however changing this path doesn't do anything because the C# app just simply doesn't seem to be serving up these files. It is only serving up the CSS and JS files that I specified in the Index.cshtml. Do you know how I can tell it to send these image files? Also thanks for all your responses! Top tier!