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 v****uejs/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.