How to add Json stub server in Vue/React/angular application.

As you all know, in modern web application frontend framework, it is easy and fast to develop frontend application, however these application always need to connect to backend rest api service in test/ production environment to work with the data. for that we need to Build and deploy the application on test or production server and test and debug the application. let’s think if we have same data and our local server and our application always connected to that server we can easily test and debug the application before putting on the test environment for QA and we will get minimum defect.

So we come up with the solution to setup Json mock data server in local machine and connect our Vue/ React / Angular app to local Json Server.

Below example specific develop for Vue Js. However, you will get the Idea for react and angular Js

Below are the steps to setup the Stub / Mock data in local machine using Json server.

1. create Vue project in local machine
   1. vue create <Project Name>
2. validate your vue app is working fine using npm run serve command
3. npm Install json server : npm install -g json-server
4. add Below script in package.json

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "stubserver": "node ./api/server.js --port 3002 --no-cors=true"
  },

5. create api/json folder in the Vue project, and add all the sample json files in the directory. [you can check below Github URL for your reference ]

6. Take a look at the below Git repo. copy and paste router.js and server.js in api folder.

7. Run mock server using command : npm run stubserver.

8. check json server running or not using url : http://localhost:3002/<jsonfilename>

9. I have added vue code for how to use local rest api in vue app (you can replace production or test url based on environment). please check the git repo code.

10. Run the vue app and check functionality is working ! 🙂

Git Repo:

https://github.com/manasvi99/vue-json-mock-server