# Setting Up Postman with the API Server | Full-Stack Google Contacts Clone with AdonisJS (Node.js) and Quasar Framework (Vue.js)

**Author:** Ndianabasi Udonkang  
**Published:** 2021-10-01

In this lesson, we will learn how to use Postman to send API requests to our API server. We will create collections, environments, variables within Postman

---

## Tags

- [Nodejs](/llms/technical-blog/tag/nodejs.md)
- [Vuejs](/llms/technical-blog/tag/vuejs.md)
- [API Development](/llms/technical-blog/tag/api-development.md)
- [Adonisjs](/llms/technical-blog/tag/adonisjs.md)
- [Quasar Framework](/llms/technical-blog/tag/quasar-framework.md)

## Part of Series: [Full-Stack Google Contacts Clone with Node.js (Adonisjs Framework) and Vue.js (Quasar Framework)](/llms/technical-blog/series/clnwu9bc991hiu3wo2vwmw45/full-stack-google-contacts-clone-with-node-js-adonisjs-framework-and-vue-js-quasar-framework.md)

This article is part of the **[Full-Stack Google Contacts Clone with Node.js (Adonisjs Framework) and Vue.js (Quasar Framework)](/llms/technical-blog/series/clnwu9bc991hiu3wo2vwmw45/full-stack-google-contacts-clone-with-node-js-adonisjs-framework-and-vue-js-quasar-framework.md)** series.

### Articles in this Series:

- [Introduction to Full-Stack Google Contacts Clone with Node.js (Adonisjs Framework) and Vuejs (Quasar Framework)](/llms/technical-blog/article/xe5mlxg43s9rpx1pxsvfdp3r/introduction-to-full-stack-google-contacts-clone-with-node-js-adonisjs-framework-and-vuejs-quasar-framework.md)
- [Workspace Setup | Full-Stack Google Contacts Clone with Adonis.js/Node.js and Quasar (Vue.js)](/llms/technical-blog/article/fo8str8yjpkz5dygxg875bpw/workspace-setup-full-stack-google-contacts-clone-with-adonis-js-node-js-and-quasar-vue-js.md)
- [Frontend Overview | Full-Stack Google Contacts Clone with Adonis.js/Node.js and Quasar (Vue.js)](/llms/technical-blog/article/nxgmng6fhf1cwjk30coflro2/frontend-overview-full-stack-google-contacts-clone-with-adonis-js-node-js-and-quasar-vue-js.md)
- [The Left Drawer | Full-Stack Google Contacts Clone with Adonis.js/Node.js and Quasar (Vue.js)](/llms/technical-blog/article/m6fagvy2il5h65llxxbbl9os/the-left-drawer-full-stack-google-contacts-clone-with-adonis-js-node-js-and-quasar-vue-js.md)
- [Improve The Header | Full-Stack Google Contacts Clone with Adonis.js/Node.js and Quasar (Vue.js)](/llms/technical-blog/article/jjwbxcg450jmkkcrrmkmwvwj/improve-the-header-full-stack-google-contacts-clone-with-adonis-js-node-js-and-quasar-vue-js.md)
- [New Contact Form Design | Full-Stack Google Contacts Clone with Adonis.js/Node.js and Quasar (Vue.js)](/llms/technical-blog/article/ebguwpkntk3empakunrki4dq/new-contact-form-design-full-stack-google-contacts-clone-with-adonis-js-node-js-and-quasar-vue-js.md)
- [Validating the Contact Form with Vuelidate | Full-Stack Google Contacts Clone with Adonis.js/Node.js and Quasar (Vue.js)](/llms/technical-blog/article/z0xr9m2ljler2cwnpsw2ycwa/validating-the-contact-form-with-vuelidate-full-stack-google-contacts-clone-with-adonis-js-node-js-and-quasar-vue-js.md)
- [Designing the Contacts Table | Full-Stack Google Contacts Clone with Adonis.js/Node.js and Quasar (Vue.js)](/llms/technical-blog/article/h2p1x1z406ib38zu2dci3jur/designing-the-contacts-table-full-stack-google-contacts-clone-with-adonis-js-node-js-and-quasar-vue-js.md)
- [Designing the Contacts Table (Part 2) | Full-Stack Google Contacts Clone with Adonis.js/Node.js and Quasar (Vue.js)](/llms/technical-blog/article/j0iscua9gg8ekuz8ifh6chpn/designing-the-contacts-table-part-2-full-stack-google-contacts-clone-with-adonis-js-node-js-and-quasar-vue-js.md)
- [Refactoring the Main Layout | Full-Stack Google Contacts Clone with Adonis.js/Node.js and Quasar (Vue.js)](/llms/technical-blog/article/uktmlqsivwtr3cvnpld59k9q/refactoring-the-main-layout-full-stack-google-contacts-clone-with-adonis-js-node-js-and-quasar-vue-js.md)
- [Improving User Experience with the Contacts Table | Full-Stack Google Contacts Clone with Adonis.js/Node.js and Quasar (Vue.js)](/llms/technical-blog/article/dzs812auf61ej7qu2cg726dh/improving-user-experience-with-the-contacts-table-full-stack-google-contacts-clone-with-adonis-js-node-js-and-quasar-vue-js.md)
- [Designing the Contact Details Page | Full-Stack Google Contacts Clone with Adonis.js/Node.js and Quasar (Vue.js)](/llms/technical-blog/article/kf9pz97n63fvgfrcy5viwzrg/designing-the-contact-details-page-full-stack-google-contacts-clone-with-adonis-js-node-js-and-quasar-vue-js.md)
- [Creating the Contact Edit Page | Full-Stack Google Contacts Clone with Adonis.js/Node.js and Quasar (Vue.js)](/llms/technical-blog/article/fmr90prj84c9zn0633jc368g/creating-the-contact-edit-page-full-stack-google-contacts-clone-with-adonis-js-node-js-and-quasar-vue-js.md)
- [How Software Backends Work | Full-Stack Google Contacts Clone with AdonisJs (Node.js) and Quasar Framework (Vue.js)](/llms/technical-blog/article/aca8fcrghz70nn1wqg3uzbum/how-software-backends-work-full-stack-google-contacts-clone-with-adonis-js-node-js-and-quasar-framework-vue-js.md)
- [Setting Up The Backend | Full-Stack Google Contacts Clone with AdonisJs (Node.js) and Quasar Framework (Vue.js)](/llms/technical-blog/article/fxb49fmz9ljbwrimbnnzudfv/setting-up-the-backend-full-stack-google-contacts-clone-with-adonis-js-node-js-and-quasar-framework-vue-js.md)
- [Why Choose the AdonisJs Framework? | Full-Stack Google Contacts Clone with AdonisJs (Node.js) and Quasar Framework (Vue.js)](/llms/technical-blog/article/lnhm5oudx34yo2869gmcms37/why-choose-the-adonis-js-framework-full-stack-google-contacts-clone-with-adonis-js-node-js-and-quasar-framework-vue-js.md)
- [Setting Up Our API Server with AdonisJs Framework | Full-Stack Google Contacts Clone with AdonisJs (Node.js) and Quasar Framework (Vue.js)](/llms/technical-blog/article/x1jgmet84aqj9qggu5mulkh0/setting-up-our-api-server-with-adonis-js-framework-full-stack-google-contacts-clone-with-adonis-js-node-js-and-quasar-framework-vue-js.md)
- **Setting Up Postman with the API Server | Full-Stack Google Contacts Clone with AdonisJS (Node.js) and Quasar Framework (Vue.js)** (Current Article)
- [The Model-View-Controller Design Pattern in AdonisJS | Full-Stack Google Contacts Clone with AdonisJS (Node.js) and Quasar Framework (Vue.js)](/llms/technical-blog/article/h5wqql65iejop5xrplujw458/the-model-view-controller-design-pattern-in-adonis-js-full-stack-google-contacts-clone-with-adonis-js-node-js-and-quasar-framework-vue-js.md)
- [Create Column Definitions & Insert New Contacts | Full-Stack Google Contacts Clone with AdonisJS (Node.js) and Quasar Framework (Vue.js)](/llms/technical-blog/article/asc2emsho4u73r6jb2gxjddw/create-column-definitions-and-insert-new-contacts-full-stack-google-contacts-clone-with-adonis-js-node-js-and-quasar-framework-vue-js.md)
- [Data Validation & Sanitisation with AdonisJS | Full-Stack Google Contacts Clone with AdonisJS (Node.js) and Quasar Framework (Vue.js)](/llms/technical-blog/article/bcey0ac7m5sbs9hqy1h824sl/data-validation-and-sanitisation-with-adonis-js-full-stack-google-contacts-clone-with-adonis-js-node-js-and-quasar-framework-vue-js.md)
- [Creating a Middleware and Updating a Contact | Full-Stack Google Contacts Clone with AdonisJS (Node.js) and Quasar Framework (Vue.js)](/llms/technical-blog/article/oqxzmtgfy1r3oewpnedc7wf6/creating-a-middleware-and-updating-a-contact-full-stack-google-contacts-clone-with-adonis-js-node-js-and-quasar-framework-vue-js.md)
- [Fetching and Deleting a Contact with AdonisJS | Full-Stack Google Contacts Clone with AdonisJS Framework (Node.js) and Quasar Framework (Vue.js)](/llms/technical-blog/article/p6bh0ponq43u3vi6o8uww84x/fetching-and-deleting-a-contact-with-adonis-js-full-stack-google-contacts-clone-with-adonis-js-framework-node-js-and-quasar-framework-vue-js.md)
- [Using Model Factories and Seeders in AdonisJS | Full-Stack Google Contacts Clone with AdonisJS Framework (Node.js) and Quasar Framework (Vue.js)](/llms/technical-blog/article/cfotveuxbgjtdp12l6pzcb2y/using-model-factories-and-seeders-in-adonis-js-full-stack-google-contacts-clone-with-adonis-js-framework-node-js-and-quasar-framework-vue-js.md)
- [Creating and Registering a Vuex Module | Full-Stack Google Contacts Clone with AdonisJS Framework (Node.js) and Quasar Framework (Vue.js)](/llms/technical-blog/article/cw96ewnzujgsz2e2garhbuzb/creating-and-registering-a-vuex-module-full-stack-google-contacts-clone-with-adonis-js-framework-node-js-and-quasar-framework-vue-js.md)
- [Connecting UI Components to the Vuex Store | Full-Stack Google Contacts Clone with AdonisJS Framework (Node.js) and Quasar Framework (Vue.js)](/llms/technical-blog/article/fdyqp17yehbnqrjvjvab4b5b/connecting-ui-components-to-the-vuex-store-full-stack-google-contacts-clone-with-adonis-js-framework-node-js-and-quasar-framework-vue-js.md)
- [Connecting the Frontend to the API Server | Full-Stack Google Contacts Clone with AdonisJS Framework (Node.js) and Quasar Framework (Vue.js)](/llms/technical-blog/article/fk4262359gg3g7f0jn95fn9b/connecting-the-frontend-to-the-api-server-full-stack-google-contacts-clone-with-adonis-js-framework-node-js-and-quasar-framework-vue-js.md)
- [Creating and Updating Contacts From the Frontend | Full-Stack Google Contacts Clone with AdonisJS Framework (Node.js) and Quasar Framework (Vue.js)](/llms/technical-blog/article/t15w2s3ao9jo74l96stjo7z6/creating-and-updating-contacts-from-the-frontend-full-stack-google-contacts-clone-with-adonis-js-framework-node-js-and-quasar-framework-vue-js.md)
- [Uploading Files and Creating Avatars for Contacts With AdonisJS and Axios](/llms/technical-blog/article/hg9ilaubqesm8angg0rhrjp9/uploading-files-and-creating-avatars-for-contacts-with-adonis-js-and-axios.md)
- [Deleting a Contact with AdonisJS and Vuejs](/llms/technical-blog/article/zdr4pxmgcax2dsfnwimhty0g/deleting-a-contact-with-adonis-js-and-vuejs.md)

---

## Article Content

In this lesson, we will setup Postman and integrate it with our API server. We will ping the `/` and `/health` routes with Postman and learn a little about how to work Postman. As we advance in this tutorial, you will learn more about Postman practically. If you have not installed Postman yet, download it from [their website](https://www.postman.com/downloads/) and install.

Why Postman? Postman is an API platform used for testing, documenting, and mocking API requests. If you are building a backend for an application, you do not need to use the frontend (or wait for the frontend to be ready) to test your endpoints. Postman provides all the tools needed to test and mock your API endpoints (routes) and create detailed documentations (including examples) for each endpoint. This allows you to create the API endpoints of your application independent of the development process of the frontend.

Now, let's setup Postman. Launch Postman. If you are asked to create an account, follow through and have your account ready.

#### Create a new Workspace

1. On the top menu, click `Workspaces > New Workspace`.
2. In the `Create New Workspace` form:
   1. For `Name` field, enter: `Google Contacts Clone`.
   2. For `Visibility`, select `Personal`
3. Click `Create Workspace` at the bottom
4. The new workspace will be created and opened.

#### Create a Collection

A collection is used to group related API endpoints. We need one to hold our two routes: `/` and `/health`. We will call it `API Entry` collection.

![Creating a Postman Collection](https://cdn.ndianabasi.com/site/setting_up_postman_with_the_api_server_full_stack_google_contacts_clone_with_adonisjs_node_js_and_quasar_framework_vue_js_v1633072000078_M_Cnszz64_S_9bccc83fd3.png)

1. On the left side of the window, click `Create Collection`.
2. Enter the name: `API Entry`. This creates the `API Entry` collection. You can see it now on the left side within the `Collections` tab.

![API Entry Collection Created](https://cdn.ndianabasi.com/site/setting_up_postman_with_the_api_server_full_stack_google_contacts_clone_with_adonisjs_node_js_and_quasar_framework_vue_js_v1633072214927_P4i8kr_A9_V_c9cedac3fc.png)

#### Create a New Environment

Before we continue any further, we need to create an environment which will hold important variables for our workspace. Variables are used to hold values which will be reused throughout our workspace.

1. On the left hand side of the `Google Contacts Clone` overview window, click `Create an environment`.

   ![image.png](https://cdn.ndianabasi.com/site/setting_up_postman_with_the_api_server_full_stack_google_contacts_clone_with_adonisjs_node_js_and_quasar_framework_vue_js_v1633072795306_flz_S7_Nk_U2_d868e2d078.png)

2. Enter `Default` in the `Environment name` field.

3. Within the environment table,
   1. Enter `baseURL` under `VARIABLE` column,
   2. Enter `http://127.0.0.1:3333` under `INITIAL VALUE` column. No need to fill the `CURRENT VALUE` column. It will be populated with the initial value, if not set.

4. Click the more (`...`) button at the top right of the environment table (see image below). Then click `Set an active environment`.

   ![image.png](https://cdn.ndianabasi.com/site/setting_up_postman_with_the_api_server_full_stack_google_contacts_clone_with_adonisjs_node_js_and_quasar_framework_vue_js_v1633073322377_Nfucpo_XV_4_512796d1d9.png)

#### Create a New Request for the `/` endpoint

> Make sure that your API server is running.

```bash
# In the route of your project
cd api
yarn serve # <-- Run the server
```

1. Within the `Collections` tab, under `API Entry` collection, click `Add a request` to create a new request.

   ![image.png](https://cdn.ndianabasi.com/site/setting_up_postman_with_the_api_server_full_stack_google_contacts_clone_with_adonisjs_node_js_and_quasar_framework_vue_js_v1633074901840_Cql_Lvw_E_Bm_02748549e5.png)

2. In the `Request name` field, enter: `Home`

3. We will use the `GET` method.

4. In the `request URL` field, enter: `{{baseURL}}/`. Here we are interpolating (inserting/consuming) the `baseURL` variable we created in our `Default` environment.

5. Click the `Save` button at the top right.

6. Click the `Send` button to send the API request.

7. You should get a response at the bottom of the bottom. As shown below:

![image.png](https://cdn.ndianabasi.com/site/setting_up_postman_with_the_api_server_full_stack_google_contacts_clone_with_adonisjs_node_js_and_quasar_framework_vue_js_v1633075622245_m3_VFYE_Exi_8e7e1a3911.png)

If everything went well, congratulations. You've made your first API request with Postman.

#### Creating a New Request for the `/health` endpoint

1. Within the `Collections` tab, right click the `API Entry` collection name, click `Add Request` to create a new request.
2. In the `Request name` enter: `Health Check`
3. We will use the `GET` method.
4. In the `request URL` field, enter: `{{baseURL}}/health`.
5. Click the `Save` button at the top right.
6. Click the `Send` button to send the API request.
7. You should get a response at the bottom of the bottom. As shown below:

![image.png](https://cdn.ndianabasi.com/site/setting_up_postman_with_the_api_server_full_stack_google_contacts_clone_with_adonisjs_node_js_and_quasar_framework_vue_js_v1633076023670_10_B_Vj_D_Oy_P_c09579c844.png)

If everything went well, congratulations!!! You are on your way to being an awesome backend developer.

In the next lesson, we will look at start creating the models and controllers for our contacts.


*This document was generated from the live article page on https://ndianabasi.com/technical-blog/article/v4qehksislosmuy92qgjr4ct/setting-up-postman-with-the-api-server-full-stack-google-contacts-clone-with-adonis-js-node-js-and-quasar-framework-vue-js • 2026-06-07*