Swacblooms🦋

Making the Moves
Menu
  • Home
  • Motivation
  • Education
  • Programming
  • About
  • Contact
  • Privacy Policy
Home
Programming
Serving A VueJs App from DotNet
Programming

Serving A VueJs App from DotNet

Sammy October 27, 2022

Hey guys 👋👋, in this article, I will be describing how to serve a VueJs client-side application from DotNet.

Some of the benefits of serving a VueJs App from DotNet are that you get to enjoy the speed and performance of DotNet and you could also setup API routes from the same DotNet server which gives you the benefit of not writing extra code for CORS (Cross-Origin Resource Sharing ) since both the web app and API are from the same origin( eg https://myvueapp.com and https://myvueapp.com/api/users ).

So below are screen shots of the simple VueJs application I made. It only has two routes ( “/” and “/about”).

Entry VueJs File
Simple Home and About Template

In the image above the RouterView component in the App.vue template renders the Home.vue template when the route is at the root(“/”) and renders the About.vue template when the route is “/about”.

Below is the simple DotNet server code that serves the static resources.

Serving Static Resources

With this setup above you would encounter 404(Not found) errors because the root(“/”) and “/about” route are only available on the client with the aid of the History API but not available on the server.

Running the server above introduced the errors in the image below:

Navigating to “http://localhost:5195/index.html” route worked 😅

The problem with the page above is that it doesn’t render the Home.vue template and neither would it render the About.vue template and this is because the routes that can render a template is the root(“/”) or the “/about” route. So therefore “/index.html” won’t work.

To resolve this issue I had to use a middleware that returns the index.html file when the request sent from the browser has a route without a file extension (eg “/” and “/about” and not “file.js” or “.css”). So that means when I navigate to either the root(“/”) or the “/about” route the index.html file in my “/client/dist” folder would be sent to the browser while the history API does its work of rendering the proper template.

The files “/client/dist” folder contains the built Vue.js app which got generated by executing the npm run build command.

The code below solves the problem.

Executing the code above enables correct rendering of templates on the browser 😎

Home template rendered 😎
About template rendered 😎

The simple VueJs application works properly and now I get to enjoy the benefits of DotNet 🥂🍾. For access to the code you can click here

Hope you learnt something new 😎.

Prev Article
Next Article

Related Articles

error
Hello folks, so in this post, I would be talking …

Typescript: The Error Saving Ninja

IntelliSense in C#
In this video, I explain how to ensure that your …

IntelliSense In C# using VsCode (OmniSharp)

About The Author

Sammy

I am Samson Amaugo. I am a full-stack web developer and I specialize in MERN stack development

Leave a Reply

Cancel reply

Search Site

Recent Posts

  • Using Cloud Firestore in Blazor WebAssembly
  • Serving A VueJs App from DotNet
  • Dynamic Subscriptions in Hot Chocolate 🔥🍫
  • Deploying a DotNet API To Railway 🚂
  • GitHub OAuth Device Flow in DotNet

Categories

  • EDUCATION
  • Motivation
  • Programming
  • Uncategorized

Get more stuff

Subscribe to our mailing list and get interesting stuff and updates to your email inbox.

Thank you for subscribing.

Something went wrong.

we respect your privacy and take protecting it seriously

RSS Swacblooms

  • Using Cloud Firestore in Blazor WebAssembly
  • Serving A VueJs App from DotNet
  • Dynamic Subscriptions in Hot Chocolate 🔥🍫
  • Deploying a DotNet API To Railway 🚂
  • GitHub OAuth Device Flow in DotNet
  • Resumable Download in DotNet
  • Mocking the HttpClient in C#
  • MySocials DotNet CLI Tool
  • Benchmarking in C#
  • C# bang bang operator

Swacblooms🦋

Making the Moves
Copyright © 2023 Swacblooms🦋
Swacblooms - Making the Moves