How to Build a True Multi-Page Website Using ASP.NET, VUE.js, Vite.js
I was happy to learn that Microsoft added Vue.js to the list of front-end frameworks it supports via its project templates. Unfortunately, the Vue.js template follows the pattern of building a Vue.js SPA (single page application), using ASP.NET core to serve it statically and provide API services. I’m sure this architecture works great for many scenarios, but it didn’t end up helping me with my current project.
Requirements
My requirements are as follows:
- To serve the pages using ASP.NET core MVC — some of the pages are rendered using Vue.js, and others are rendered using vanilla ASP.NET MVC.
- To run both the Vite dev server and the Asp.net core dev server against the same local port.
- To provide API support using ASP.NET core.
- To be able to build the site using Vite.js/Rollup.js
- To minimize the boilerplate code required to accomplish all of the above.
Background
Why do I have such specific requirements? Because I built an ASP.NET MVC website over a decade ago using pure ASP.NET MVC 3.0. The only JavaScript on the original site (if any) was bundled with MVC to do form validation. As the site grew, I kept current with ASP.NET and incrementally added more client-side sophistications using knockout.js. I could have done a better job of architecting the client-side code; it was primarily ad-hoc enhancements and quickly started collapsing under its own weight.
Since I was considering using Vue.js for a larger project I was running, I decided to clean up my front-end code using a more modern framework. This conversion went well. I started with my beat-counter page, which was the most front-end-heavy part of the site at the time. I was able to build that quickly and deploy it alongside the rest of the site. This initial conversion established a pattern I’ve used on this site and others and became fond of. I like being able to roll out changes page-by-page rather than being forced to upgrade the entire site in one fell swoop.
The other design point is that I like using “pure” ASP.NET pages for simple pages, and I’m leaning on the ASP.NET identity-scaffolded pages for account management.
The Path Forward
To do both Vue.js pages and “pure” ASP.NET pages on the same website, I need to serve up each page as an ASP.NET page. I’m using MVC pages, but the system would also work with Razor Pages. Using ASP.NET, I provide a bit of scaffolding for the Vue.js pages, load a single Vue.js application component, and plant a model object with backend data that the Vue.js component consumes. For the “pure” ASP.NET pages, I was initially building a parallel structure to provide the menu, but once I got deeper into things, I abstracted out my menu Vue.js component and ran that as a standalone Vue.js app on my “pure” ASP.NET pages. So, technically, every page on the site has a single Vue.js app embedded in it; the difference is that for some of them, the main body section is still served up as a traditional ASP.NET MVC page, and it’s only the menu that is running as Vue.js.
I am reasonably confident that this is a setup that others are using based on questions I’ve seen on stack overflow and answers to some of the questions I’ve had while building this site. But I have yet to find a resource laying out all the pieces to make a site like this work. Most of the articles that reference ASP.NET core and Vite.js are either for a SPA or for using Vite.js as a development server for static assets, not to create a multi-page website with a Vue.js root on each page.
I’m working on a series of articles that spell out in detail what I’ve done to create a (by my definition) truly multi-page ASP.NET MVC, Vue.js, and Vite.js website. If you’d like to peek ahead, I have a working sample website that meets most of my criteria published to GitHub. I’ve already posted the part of the solution that details how to get Vite.js and Rollup.js to generate the flavor of multi-root application that I need. The two remaining significant problems are handling the development environment where two dev servers are servicing the same site and how to avoid writing a bunch of boilerplate .cshtml pages. I may also attack the problem of Server Side Rendering (SSR) the Vue.js code. Stay tuned!
The Series
- How to Build a True Multi-Page Website Using ASP.NET, VUE.js, Vite.js (this article)
- How to Build a True Multi-Page Website Using ASP.NET, VUE.js, Vite.js: Getting ASP.NET MVC and Vite.js to play nicely together
- Removing Boilerplate Code from a Vite/Vue.js Multipage Website
- How to Build a True Multi-Page Website Using ASP.NET, VUE.js, Vite.js: Making the Site Multi-Page with minimal copy-pasting
