[Vuejs]-Vuejs frontend development without backend: how to write fixtures?

by

3👍

✅

From my experience of a past project, for small development cycles it is really convenient to just use static json files to mock the result of the request. I’ve basically imported the required files in my vuex modules and used them as a fake result in my actions, commiting the same mutation as I would with a normal endpoint, but using the mock instead of the http result as parameter for the mutation. That’s convenient and you’ll only have to change a single line, once the endpoint is ready to go. This works fine in scrum for example, when you have small development cycles and you know that, by the end of the sprint, your endpoint will be ready to go anyway.

It can be a bit tricky when you don’t get the required endpoint for an extended period of time, for whatever reason. We’ve experienced that once, where an entire microservice wasn’t available for month, yet we still needed to develop a rich feature in our frontend. In this scenario we used wiremock to mock a whole variety of endpoints from that microservice for that feature. It’s a lot of overhead though, and really only viable when you know that you’re in a long development cycle. Otherwhise I suggest just going with static files.

👤Philip Feldmann

1👍

In one of our projects we just used static json files to develop the front-end independently from the back-end.

We used vue-cli-service, so it was possbile to make it serve the static json file simply by specifying the contentBase option in vue.config.js.

Here is a (simplified) example:

vue.config.js:

module.exports = {
  devServer: {
    contentBase: path.join(__dirname, 'src', 'api')
  }
}

Add the static json path in an env variable, for example in a .env file:

VUE_APP_API_USERS = 'users.json'

Then when accessing the API:

import axios from 'axios';
axios.get(process.env.VUE_APP_API_USERS)
  .then(response => this.users = response.data)
  .catch(error => console.log(error));

users.json in the directory structure:

├── package.json
├── src
│   ├── api
│   │   └── users.json
│   ├── App.vue
│   ├── assets
│   │   └── logo.png
│   └── main.js
├── vue.config.js
└── yarn.lock

Run vue-cli-service serve. It will now serve users.json to the API call.

vue-cli-service version used: 3.6.0

👤HelloWorld101

Leave a comment