Create your own mock API server with Express.js and Firebase for free!
Tags: mockserver, firebasecloudfunct, mockapi, mockapiexample
Published: 2019-04-15 23:45:54

---
title: Create your own mock API server with Express.js and Firebase for free!
published: true
tags: mock-server,firebase-cloud-funct,mock-api,mock-api-example
canonical_url: https://medium.com/@hossainkhan/create-your-own-mock-api-server-with-express-js-and-firebase-for-free-9dba2bfbc754
---

Recently I had to prepare a complete mocked server for an app I worked in the past. The reason mocking was required so that app’s different functionality can be showcased with a variation of mocked response which triggers different UI and functionality.

There may be different solutions available in the market, however, since Firebase has a free tier that allows Node.js based [Express](https://expressjs.com/) web framework makes things much easier to customize based on need.

Google has [many many examples](https://github.com/firebase/functions-samples) for cloud functions which showcase 100s of use case, however, I just wanted to focus on using Express to mock API responses.

### What will this guide touch on?

- How to create a Firebase project
- How to deploy on Firebase project
- Configure Firebase project for mocking
- How to add new APIs that mimic what you want
- How to use firestore for mocked response

### Setup & Deploy Firebase

First, go to [https://console.firebase.google.com/](https://console.firebase.google.com/) and click on “Add Project” and name it to complete the project creation step.

![](https://cdn-images-1.medium.com/max/1024/1*cNtjrmCpEk-WIaT12O7IqA.png)<figcaption>Create project. Note: The project ID will be visible in URL used in mocking.</figcaption>

If you don’t have “Firebase CLI” installed, follow steps from [https://firebase.google.com/docs/cli/](https://firebase.google.com/docs/cli/) to install the Firebase CLI. This will allow you update code to deploy mock server to Firebase.

Run `firebase list` command in terminal to validate the project you just created shows up in the list.

![](https://cdn-images-1.medium.com/max/1024/1*tLq8Nb67WZaB8S4naHK4mQ.png)

Now, go to a new directory and initialize a new firebase project by running the following command:

```
firebase init
```

![](https://cdn-images-1.medium.com/max/1024/1*Xy89RPx9KAuBap0CXkypVg.png)<figcaption>Select “Functions” and “Hosting” by going up and down and pressing space to turn on the option. Then press Enter. Note that “Hosting” is not required however, if you want to host mock image or video, you will need hosting.</figcaption>

Use default options for the firebase init wizard. We will update some configuration later. Once initialization is completed, link your newly created firebase project with current directory project by executing following command with your project ID you just created:

```
// “ **your-project-id-23d6x** ” is the ID from “firebase list” command.

firebase use --add your-project-id-23d6x
```

Now, try deploying barebone project to see everything is working by running `firebase deploy`. Once the project is deployed, you will see a public URL use that to verify that default index.html content for Firebase is shown.

### Use Express for Mocking

Now that default project is up and running, it’s time to setup Express so that we can define our API that mimics what we want.

First, update **rewrites** rule of `/firebase.json` to forward all requires to Firebase Cloud Function. See [github-sample](https://github.com/amardeshbd/firebase-mock-api-server/blob/master/firebase.json#L17) for reference.

Now, update /functions/package.json file to include express under "dependencies". See [github-sample](https://github.com/amardeshbd/firebase-mock-api-server/blob/master/functions/package.json#L14) for reference.

Once this is done, you need to update npm modules so that Express can be used. Use the following commands to update it.

```
cd functions
npm install
cd ..
```

Now, you have express ready to be used in `/functions/index.js`. Open `index.js` and remove any previous content, and apply the following:

{% gist https://gist.github.com/amardeshbd/efac2c76f2dbbe0d50a646ede49dbd7b %}

Now that app is an Express instance, you can start defining APIs using [routing rules](https://expressjs.com/en/guide/routing.html). Here is a simple example that provides the hard-coded response for `/say/hello` API.

{% gist https://gist.github.com/amardeshbd/d6a2cfeda99416a232c95e374758e986 %}

See [GitHub example](https://github.com/amardeshbd/firebase-mock-api-server/blob/master/functions/index.js) with HTTP `‘get’` & `‘post’` API with a dynamic response based on request data. The example also shows how you can load large data from JSON file, which keeps the `“index.js”` file clean from hard-coded data.

Once you are done adding APIs, you can run firebase deploy from root of the project to deploy your APIs.

Here are some example APIs that are available from the [example](https://github.com/amardeshbd/firebase-mock-api-server) GitHub project.

- [https://mock-apis-server.firebaseapp.com/say/hello?name=Ryan](https://mock-apis-server.firebaseapp.com/say/hello?name=Ryan)
- [https://mock-apis-server.firebaseapp.com/photos/29647](https://mock-apis-server.firebaseapp.com/photos/29647)

### Use Firebase firestore database for mocked response

If you want to dynamically update content and don’t want to keep updating JSON file and re-deploy each time, then using Firestore is a perfect solution. Using firebase console you can update response data which will be immediately reflected on next request. You can also add/remove fields to simulate error handling.

To use Firestore, you need to enable database and create a collection(like table) to store data.

![](https://cdn-images-1.medium.com/max/1010/1*bl4eShRt2PYb4OVcKNrtdg.png)<figcaption>Here is an example, where “userProfiles” is a collection of user profile info.</figcaption>

Here is a partial example on how to access the data from the Firestore collection

{% gist https://gist.github.com/amardeshbd/f782229c235667bdf96bebfc44485e4f %}

Now, using the firebase [console](https://console.firebase.google.com/), you can modify the contents and the next API request will reflect the new data.

Happy mocking 😃!

See [https://github.com/amardeshbd/firebase-mock-api-server](https://github.com/amardeshbd/firebase-mock-api-server) for more detailed example and sample APIs you can test from the browser.

[amardeshbd/firebase-mock-api-server](https://github.com/amardeshbd/firebase-mock-api-server)

> If you have followed the steps and feel some parts are broken or not explained properly, please do leave a comment. I will update the guide accordingly.