Boilerplate: VueJS + ASP.NET MVC 5



If you need to start as soon as possible with a project using VueJS 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 VueJS 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 VueJS and ASP.NET MVC:

1) Go to the windows  running the VueJS 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 VueJS 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; VueJS 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 VueJS + ASP.NET Core, stay tuned.

Comments