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 ๐Ÿ‘:

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:


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.


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" :


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.

Popular posts from this blog

GitHub Pages + Vue CLI 3

A Closer Look at Pair Programming

Let's talk about Web Accessibility