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.

Popular posts from this blog

GitHub Pages + Vue CLI 3

-
Image
In this post, I will show you how to run your Vue CLI 3 project on GitHub Pages in a few simple steps. GitHub Pages is ideally for your personal website, documentation, demos, or your wife's website  😊 ... basically, any static project that you want to display to the world quickly. For the purpose of this tutorial, I will be using  mejiamanuel5 / gh-pages-vue-cli-3    a project that I created for a better demonstration. You can clone my repo, use your existing Vue CLI 3 project or create a new one. If you don't know how to create one, this guide can help you. Ready? let's start: 1) At the root of your project create a file called  deploy.sh  and add this script: # abort on errors set -e # build echo Linting.. npm run lint echo Building. this may take a minute... npm run build # if you are deploying to a custom domain add a CNAME (uncomment the next 3 lines) #cd docs #echo 'yourcustomdomain.com' > CNAME #cd - # deploy echo Deploying..
Read more

A Closer Look at Pair Programming

-
Image
Last June 11th, I had the opportunity to participate as a speaker in the Vue.js Global Summit by Gleekle to talk about one of my favorite topics, Pair Programming. My intention with this talk was to motivate teams to adopt this wonderful technique to improve their productivity. Here I bring you a summary, we will be covering: What is Pair Programming? Benefits of Pair Programming Pair Programming styles Implementing Pair Programming (tips and tricks) Common Pushbacks Takeaways Before start talking about Pair Programming, it’s important to mention some of the most common problems inside a development team: First, Lack of communication between team members - This could be partialized or generalized problem depending on the company Another one is Centralized knowledge - This happens when one team member is the to-go person for any particular technology, codebase familiarity, or domain knowledge. And yeah somebody is coming to your mind right now Never-ending code reviews - A sing
Read more

Let's talk about Web Accessibility

-
Image
Most web applications are developed for users with no disabilities, under the assumption that all users have the same  physical abilities and resources , when in fact it's the opposite. The circumstances of our users will vary from having internet issues to being physically disabled, and here is when Web Accessibility comes into play,  so you can optimize your web app and adapt it to all audiences. Web Accessibility  (a11y for short)   refers to designing/developing web apps so people with some kind of physical disability, situational disability, and socio-economic restriction (like low internet speed) can use them. Web Accessibility encompasses all disabilities that affect web navigation, including: 👁 visual 🧠 neurological 👂🏽 auditory 🖐🏽 physical  🗣 speech The first time I heard about this concept, I was surprised by the number of people who are restricted to fully use web applications. My first guess was that around 1% to 5% percent of the population has a disability, but
Read more