How to build a Vue.js application using DevExtreme UI components and a .Net Core API

Image by trismegist@yandex.ru at Depositphotos

I’m a backend developer with little experience of the frontend. My JavaScript skills are basic at best. A new app I’m working on requires a polished and maintainable UI, which lead me to investigate the top three frameworks of the day: React, Angular and Vue. I chose Vue as the learning curve seemed smallest, and after watching a couple of Pluralsight courses felt confident enough to make a start. [1]

DevExtreme [2] is a full JavaScript component suite from DevExpress. I’ve used DevExpress desktop components in the past and have always been impressed with the polished and professional look and feel as well as with the ease of integration and vast library of sample code. DevExtreme looks to be made in the same mold, with code samples for each component in all three frameworks mentioned above.

The sample project I’m going to walk through includes a new Vue (2.6) application using the DevExtreme Treelist component, pulling data from a .Net Core (3.1) backend API. It’s a bare bones, getting started app, with no authentication, designed to demonstrate the power of off-the-shelf components like DevExtreme and how easy it is to incorporate them into your Vue app and to populate them from a .Net Core API.

1. Creating the Vue app

The first step is to install NPM and the Vue CLI if they’re not already installed. NPM comes as part of the Node.js installation. [3] Once installed, open a terminal and run the following command to install the Vue CLI:

npm install -g @vue/cli

To create the Vue app, we’re going to use the Vue Project Manager. To launch the Project Manager, run the following command from a terminal:

vue ui

The Vue Project Manager is a simple app designed to create and manage Vue projects. It handles project creation and configuration, dependencies and plugins, and build tasks. I created my new project inside my “C:\Vue Projects” folder, and called it “Employees”.

On the presets page, choose Default Presets. We’ll start off with the basic set of dependencies and plugins and add to them later as required. Clicking Create Project will create the new project inside the selected folder. It can take a couple of minutes to complete as a large number of dependencies are downloaded and installed. Once complete, you’ll see the Project Dashboard for your new project. We’ll come back to this later.

2. Building and running your new Vue app

I’m using Visual Studio Code for my Vue apps. As a backend .Net developer I’m more familiar with Visual Studio, but find VS Code faster and easier to work with for Vue projects.

Open Visual Studio Code, select “File | Open Folder”, and browse to your “Vue Projects\Employees” folder. A new Vue project is a simple Hello World app, but all the core dependencies are in place and the project is properly configured and structured for a Single Page Application.

Open a terminal from inside VS Code (Terminal menu | New Terminal) and run the following command to install the NPM packages to the project:

npm install

If the command throws up any errors, ensure that your terminal is active in the correct folder: “C:\Vue Projects\employees”. Next, build and run the new app:

npm run serve

When the build completes without errors, you should see a local and network address for your app, in this case http://localhost:8080/.

A control + click on the link will open the app and you’ll see the default Vue Hello World application. Congratulations on your first successful, if limited, Vue app.

3. Adding the DevExtreme Treelist component

A working demo of the DevExtreme Treelist component can be found here. This includes sample Vue code and data that we’ll be using later, but for now it’s worth taking a look just to see what your new app will be displaying in place of the Hello World page.

To add DevExtreme to your project, go back to the Vue Project Manager we had open earlier and open the Dependencies section. Click on “Install Dependency” and search for “devextreme”. From the list available select and install the following three packages, one after the other: devextreme, devextreme-vue and devextreme-themebuilder.

Once installed, return to the Treelist demo page mentioned above. We’re now going to copy some code and data across to replace the Hello World project with the Treelist page code. We’ll be taking code from the App.vue, index.html and data.js pages.

First, copy the Vue code from App.vue. Go back to the project in Visual Studio Code and open the App.vue file. In the editor replace the content with the copied content from DevExtreme. Do the same for the index.html file. In your project, this file is located inside the public folder. After copying, remove the two script blocks from the bottom of the HEAD section that reference config.js and index.js.

Next, create a new file called data.js inside your project’s src folder. Copy and paste the contents of the DevExtreme data.js sample into this file.

Open a new Terminal and build and run your updated Vue app:

npm run serve

You should now see the DevExtreme TreeList demo content appearing instead what was the Vue Hello World application, as shown below. The app is fully functional, allowing you to add, edit and delete entries in the tree list, all using the predefined data source in the data.js file.

But what if we want to pull data from an API?

4. Create the .Net Core API

The next step is create a simple, bare-bones API using .Net Core 3.1 to return employee data. We’re still going to use the predefined data instead of a database, but this time that data will be accessible only from your new API.

I’m using the latest Visual Studio 2019 to create the API. Select “Create a new project” and choose “ASP.NET Core Web Application” from the list of available templates in the dialog. On the next screen, browse to your “Vue Projects” folder and name the Project “EmployeeApi”. On the Create screen, select API as the application type.

The default .Net Core app that’s created will contain some unnecessary files, so let’s remove those first. Delete the Weatherforcast.cs and WeatherForecastController.cs files. Open the launchSettings.json file inside Properties and set the launchUrl values to empty strings.

Now let’s fill out the code so that we have an endpoint to call and some data objects to send back.

First, create an empty API controller called Employee. Then add a new endpoint to it called GetEmployees and include a reference to an IWebHostEnvironment interface that you’ll need to access your data file.

Next, create your Employee object. The parameter names should be an exact match for the names in the data.js data source, as your DevExtreme Treelist expects to find these values in any data it uses.

Finally, you need to add the data source to your project. In the root project folder, create a file called data.json. Copy the data contents of the employees list in the data.js file from the Vue project into your new data.json file in the .Net Core project. This should be a Json list, not a JavaScript list, which means only copying the [ … ] block of code.

Once you’ve done this, you’re good to go. Build and run the EmployeeApi project. On my system, it’s running on https://localhost:44303/. You can test that everything is working by running a Get request to your new endpoint inside Postman, as shown below.

You’re now ready to go back to the Vue project and make the necessary changes to get the employee data from the API instead of from its own internal static data list.

5. The Vue.js app calls the .Net Core API

The first thing you need to do is go back to the Vue Project Manager and install a HTTP client so you can call your new API. As before, click “Install Dependency”, and search for and install “axios”.

Back in your Vue project, open the data.js file and delete the static list of employees. You now need to add a call to your new .Net Core endpoint, as shown below.

If your Vue app is still running, the tree list will now appear empty. This is because you haven’t updated your App.vue code to correctly call your new data access method. Replace the script section at the bottom of App.vue with the following code:

And that’s it for the Vue app. Everything should be working correctly. You’re making your call to the new API endpoint, and your Treelist should be loading the returned data.

But… it’s not.

You’re probably seeing console error messages relating to CORS and the Access-Control-Allow-Origin header. This relates to cross site scripting. Your Vue app and your API are not using the same port — something that is widely considered a security vulnerability. You can fix this by making some changes to the API. A shout out to Scott Stoecker for this.

Open the startup.cs file in the EmployeeApi project. In the ConfigureServices method, add the following line: services.AddCors();

In the Configure method, add a call to app.UseCors as shown below:

Restart the API and refresh the Treelist page in your Vue app.

You’re still not seeing data, but this time there are no console errors. Instead, you might see a DevExtreme error message telling you“ The ‘ID’ key field is not found in data objects. “ The solution to this can be quickly found by making the API call directly from Postman as we did earlier, and looking at the results. You should be able to see that all the variable names have been changed to camel case. DevExtreme variable names are case sensitive — it doesn’t recognize the ‘id’ field as ‘ID’.

You can fix this by making a further and final change to your startup.cs file in the .Net Core API. In ConfigureServices, adjust the call to AddControllers() as shown below:

Thanks to Ron Rebennack on Stack Overflow for that. Back in your Vue project, refresh the page and the data will now load without any console or other errors.

If you’re as new to frontend development as I am, you’ll probably agree that there are a lot of moving parts in getting even as basic a Vue app as this working and connecting to a .Net Core backend. The addition of a third party component suite like DevExtreme only adds to this, as do the changes that seem to come with every second release of .Net Core.

And that’s all without even looking at the authentication and user management that every app must have, not to mention the routing and state management required by even a moderately sized Single Page Application. Fun and games for next week.

[1] Vue.js: Big Picture, by Daniel Stern. Vue: Getting Started, by John Papa

[2] DevExtreme JavaScript component suite.

[3] Node.js installation.

To hear more from me, you can follow me on Twitter or on LinkedIn.

Originally published at http://darrendevitt.com on April 11, 2020.