Boilerplate: Vue.js + ASP.NET MVC 5

If you need to start as soon as possible with a project using Vue.js 2.0 and ASP.NET MVC 5, here I bring you a light Boilerplate/Template with the minimum setup 👍:

https://github.com/mejiamanuel57/Boilerplate-VueJS2-ASPNETMVC5

Let’s make this run:

1. First, clone the repository
2. cd VueJS2-MVC5
3. npm install
4. npm run dev …And the Vue.js is running with hot reloading on port 8080

Now let’s go to the server-side:

1. npm run build to build the web project “for production use”
2. Open the solution in Visual Studio
3. Make sure to run the web project on http://localhost:54490

4. Press F5 and another window will open showing the built project on port 54490

Test the connexion between Vue.js and ASP.NET MVC:

1. Go to the windows running the Vue.js project on http://localhost:8080/
2. Click on the button “Go and test the backend”
3. If the result says: “You have reached the backend”, everything is working

That’s all 🚀

If you want to know how this project is working, keep reading, there are certain things to take into consideration:

config/index.js

Here we specified the Vue.js build path. Note the Index.cshtml is on the same route of the ASP.NET MVC default startup project.

App_Start/RouteConfig.cs

Rember, we will have the client-side routes handled by vuejs/vue-router and the server-side routes handled by ASP.NET MVC.
On RouteConfig.cs set the constraints to identify the server-side routes on our case, every URL which starts with “api”:

Web.config

Since the server-side will be receiving http requests from different ports in the development environment; Vue.js on 8080 and ASP.NET 54490, we need to enable cross-origin HTTP request. *On our example, it’s enabled for any domain, be aware of the security gap*.

If you have any question leave a comment or send me an email. I will make another boilerplate/template for Vue.js + ASP.NET Core, stay tuned.