In this tutorial, we are going to cover how to integrate Vue.js and Asp.Net Core 3.1 application using Entity Framework Core in Visual Studio Code. We will use PostgreSql database in this tutorial. So, we are going to build a SPA (Single Page Application).
First-of-all, we will install all the dependencies and tools that we need in this project. And then we will see how to setup a new project using Vue and Asp.Net Core 3.1 in visual studio code. So, we will learn the following list in this tutorial:
- Install all the dependencies and tools
- How to install PostgreSql Database?
- How to create a new project using dotnet CLI (Command Line Interface) in VS Code?
- How to setup a database in Vue and Asp.Net Core 3.1 application?
And then finally, we will test our application and then we will see how it works.
Setup a new project using Vue.js and Asp.Net Core 3.1 in visual studio code?
Let’s start how to setup a new project in Vue.js and Asp.Net Core 3.1 application with Entity Framework Core using Visual Studio Code in step by step.
1- Install all the dependencies and tools
So, in this step, we will install all the dependencies and tools.
Install Node.js
To install the Node.js, just click here (https://nodejs.org/en/download/) to go to the download page and then download the required version according to your machine and then install it on your machine.
To test that node has been installed properly or not, go to command prompt and then run the below command and then you will see the output as you do see below in the screenshot.
=> node -v
Install .Net Core 3.1
Now, we are going to install .Net Core 3.1 in our system. So, click here (https://dotnet.microsoft.com/download/dotnet-core/3.1) go to the download page and then download the required version according to your machine and then install it.
Note: – If you have already installed it, then you can skip this step.
Install Vetur
Vetur is a visual studio code extension. It will help us to build a Vue application like syntax highlighting, code snippets, intellisense and etc. To install it, just go to visual studio code and then go to extension menu from left sidebar and then search for Vetur and then install it.
2: How to Install PostgreSQL Database?
Now, in step, we will see how to install PostgreSQL. So, click here (https://www.enterprisedb.com/downloads/postgres-postgresql-downloads) to go to the download page and then install it on your machine according to your machine. I have left all the default options checked during the installation process.
Note: – Remember the port number and password that you have entered during the installation process and we will use it later.
After installation, we will see pgAdmin 4 App in our system as you do see below in the screenshot.
Note: – When we will run this app, it will ask the password.
3: How to create a new project using dotnet CLI (Command Line Interface) in VS Code?
In this step, we will see how to create a new project in Vue and Asp.Net Core 3.1 using dotnet CLI (Command Line Interface) in Visual Studio Code. So, go to visual studio and create a new folder using this below command.
=> mkdir BookStore
And then go to inside this BookStore folder using the below command as you do see in the below screenshot.
=> cd BookStore
Now, run the below command to download and install all the dotnet CLI Single Page Application templates.
=> dotnet new –install Microsoft.AspNetCore.SpaTemplates::*
After running the above command, then you will see all the templates as you do see below in the screenshot.
Now, run the below command to create a new project within your specific directory. It will name the application based on the folder that you are inside as you do see below in the screenshot.
=> dotnet new vue
Now, open the project directory within the VS Code and then you will see the project folder structure as you do see below in the screenshot.
Now, in this project we will not use typescript. So, we will remove all the dependencies of typescript from this project. To do this, go to package.json file and then remove these below packages. And then you will see the file as you do see below in the screenshot.
Now, go to tsconfig.json file and then delete it. Then go to webpack.config.js file as you do see below file.
Now, make some changes to remove typescript. First-of-all, remove this below line of code from line # 4
=> const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;
Now, update line # 13 and 14 as you do see below
=> resolve: { extensions: [ '.js' ] },
=> entry: { 'main': './ClientApp/boot.js' },
Now, update the code of lines from 17 to 20 as you do see below
Now, go to line # 29 and remove it. Then you will see the updated file as you do see below in the file code.
Now, go to components folder inside ClientApp. And then delete all the components and then delete the css folder. Now, add a new component with the name of App.vue. Now, add write some code as you do see below in the code file.
Now, change the boot.ts file name to boot.js and then change the file content as you do see below in the code file.
Now, go to _Layout.cshtml file inside Views/Shared folder and then remove all the stylesheet references.
Now, go to csproj file and then modify it from line # 10 to 22 as you do see below in the file.
Note: – You will see Entity Framework Packages in this file. We will use them later in this tutorial.
Now, go to the terminal and then run the below command to restore all the packages.
=> dotnet restore
Now, run the below command to install npm packages.
=> npm install
Now, run the below command to run the server side project.
=> dotnet run
Then open a second terminal of client app and then run the below command and then navigate to this url (http://localhost:8080/) and then you will see the output as you do see below in the screenshot.
=> vue serve
4- How to setup a database in Vue and Asp.Net Core 3.1 application?
Now, in this step, we will see how to setup a database in Vue and Asp.Net Core 3.1 application. We will use Entity Framework Core Identity to create a database.
Before going to the next, we need to add these below packages. So, go to the terminal and then run the below commands one by one to install the packages related to PostgreSQL and Entity Framework Core.
=> dotnet add package Microsoft.AspNetCore.Identity.EntityFrameworkCore --version 3.1.1
=> dotnet add package Npgsql.EntityFrameworkCore.PostgreSQL --version 3.1.0
=> dotnet add package Npgsql.EntityFrameworkCore.PostgreSQL.Design --version 2.0.0-preview1
So, go to project folder structure and then create a new folder with the name of “Data”. We will add all the database related files within the “Data” folder. Now, right click on the Data folder and then add a new folder with the name of “Entities”. Now, we will add all the classes inside the Entities folder. So, right click on the Entities folder and then add a new class with the name of AppUser.cs as you do see below in the code file.
Now, add a new class with the name of “AppRole.cs” as you do see below in the code file.
Now, right on the Data folder and then add a context file with the name of “BookStoreContext.cs” and then write the code as you do see below in the file.
Now, we will add dependency injection for database context. So, go to project folder structure and then open the startup.cs file and then go to ConfigureServices method and then write the code as you do see below in the code file.
Let’s understand the above code:
Line # 39: here in this line, we are registering the database context with dependency injection container.
Line # 41: here in this line, we are registering the Asp.Net Core Identity service.
Now, we will add connection string for the database. So, go to project folder structure and then open the appsettings.json file and then add the connection string as you do see below in the file.
Note: – Make sure you have added the correct username and password for your database server.
Now, add migration by running this below command and it will add a new folder with the name of Migrations within the project folder structure.
=> dotnet ef migrations add initial
Now, run the below command to create a database.
=> dotnet ef database update
After running successfully these above commands, now go to server and then you will see the output as you do see below in the screenshot.
Now, go to project folder structure and then create a new file with the name of UserController.cs inside the Controllers folder. Now, write the code as you do see below in the file.
Here in the above GetUser function, we are creating a new user if it is not exists and then return the users list.
Now, run the project by running this command ( dotnet run ) and then navigate to the url ( http://localhost:5000/api/users ) and then you will see the output as you do see below in the screenshot.
Congratulations! We have successfully integrated Vue and Asp.Net Core 3.1 application using visual studio code.
Thank you for reading. Please keep visiting and sharing it within your community.
Leave a Reply