How to configure Vite.AspNetCore in MPA scenario?

[rosdi]

Is there a sample how to configure Vite.AspNetCore in MPA scenario? The Razor Pages example is solid, but it is just one Vite app in there. I am looking the recommended configuration/setup for an MPA.

I figured I could duplicate the 'Assets' folder in the example to make a second Vite app, is this the correct approach?

The 'Assets' folder would be renamed to my apps module names, 'Registration', 'Order', 'Payment', etc... if that makes sense.

Is this the way to do it?

[Eptagone]

Hello. All these examples are MPA projects where Vite is used as a bundler only.

The Assets folder is where uncompiled assets are stored. You can rename the folder if you want. Customize your vite.config.ts file to set all the configurations you want.

Render your HTML using razor pages and give them functionality using javascript. Your main vite entry point is your main script.

[rosdi]

Your main vite entry point is your main script.

Probably this is very obvious, but my frontend coding skill is VERY rusty. What I don't understand is all my razor pages will use the same single entry point? Shouldn't each razor page has its own entry point? I googled a bit on sample with multiple razor pages using Vite.AspNetCore but couldn't find any.

[Eptagone]

No, it's not necessary to have an entry point for each Razor Page, unless you have pages with completely different functionality, in that case you might have different entry points.

If you want to create something like reusable components, you can use a framework like StimulusJS.

[rosdi]

Thanks for the suggestion. I have decided to approach this differently. Will be developing native web components (via https://github.com/bitovi/react-to-web-component) to augment the power of razor, this way I get maximum flexibility. Will be blogging about this later.