Wrapping up this first look at the frontend application built with Vue.js, in this episode we make it work with the group management Web API we developed so far.
For the walk-through you can check out the next video, but if you prefer a quick read, skip to the written synthesis.
The playlist for the whole series is here.
In this episode we will finally connect the frontend and the backend, by making HTTP calls to the groups service. To do the HTTP calls we’ll use axios.
Service client interface
We’ll start by creating an interface to represent our groups service client. As usual in these frontend posts, this isn’t mandatory, but I tend to give into my C# habits 🙂
To start with, we create a new folder called
src. In the new folder we create another one called
models, to keep the models that represent what we get (and send) from the service.
GroupModel is the same as we have seen in the other application areas. Let’s get right into something new, the service client interface,
GroupsEndpoint (this isn’t my best episode in terms of naming 😛).
If you remember the
GroupsService we had in episode 12, this will be very familiar. It’s basically the same, just adapted to TypeScript. All methods return
Promises, as they perform IO operations.
Service client implementation
Before implementing the service client, we need to add axios to the project. As I’m using npm, I did it by running
npm install --save axios.
Now we can implement the interface we defined.
There’s not really a lot to explain, but let’s take a look.
For starters, we’re defining a base url for the requests. Note that it starts with
/api, but that is not part of the route we defined in our service. We’ll see why in a bit, regarding the development server proxy.
Regarding the method implementations, they’re all
async and make use of axios to make the requests, using the various HTTP methods we defined when creating the web API.
We don’t have any error handling logic yet, we should implement it eventually, but for now it’s not very important.
Using the service client in Vuex actions
Now that we implemented the service client, we need to use it in the actions. We could just import the
GroupsService and use it in the actions implementation, but to make it easier to test the actions if we feel like it sometime in the future, I created a factory that receives a
Taking a look, the actions logic is almost the same, but now we make API requests before passing the values to the mutations that update the state. The actions also became
async, as they call the also asynchronous service methods.
Notice that in the
update actions we pass the response from the service to the mutations, not the action payload. This is because there are some properties that are initialized or updated server side, and we need to keep that information.
Configure development server proxy
If you recall from when we were developing the API, we didn’t enable CORS, as we’ll be serving the frontend and the API from the same domain. When it’s all working together on a server, we’ll use a reverse proxy to map requests where the route starts with
/api to the backend services, and the rest will go to the frontend.
To achieve a similar goal during development, we can configure Vue’s development server to proxy the API requests.
In the root of the project, so one step above
src, we create a new file called
vue.config.js where we can setup, among other things, the dev server to proxy the API requests.
In this configuration file, we’re saying that all requests that start with
/api go to
http://localhost:5000, where we have hosted the API in dev so far. There’s also some more options, but the most relevant one is the path rewrite, that removes the
/api from the route, as it is not expected in the groups service API. For the couple of booleans,
ws means that we also proxy web socket requests and
changeOrigin changes the origin of the host header to the target url.
With this post we wrap up our first adventure in the frontend in this series. In these 3 episodes we built a simple Vue.js application, which allows for a very simple management of groups. We made use of components, a store and made it work nicely with the web API.
In the next post we’ll be back to C#, but we’ll of course get back to the frontend eventually.
Links in the post:
The source code for this post is here.
Feedback always appreciated!
Thanks for stopping by, cyaz!