Deploy JSON Server to Vercel with Firebase as a Database

A javascript implementation to deploy JSON Server to Vercel, using Firebase as a simple DataBase storage to allow you to run fake REST API online!

How to setup the project

Firebase Realtime Database Setup

Create a Firebase Project

1. Login into Firebase Console with your google account.
2. Click on "Add project" and follow the prompts to create a new project.

Add Realtime Database to Your Project

3. In the Firebase Console, select your project.
4. In the left-hand menu, click on "Build" and then "Realtime Database."
5. Click on "Create Database."
6. Select your preferred location and set the database to "Start in test mode" (you can change the rules later). Note: If you want many people to be able to use your databaseat the same time you could configure auth for every user Or for development only, you can set the rules to true.

     "rules": {
       ".read": true,
       ".write": true
     }

Set Up Firebase in Your Project

7. Click on the gear icon next to "Project Overview" and select "Project settings."
8. Go to the "Service accounts" tab.
9. Click on "Generate new private key" and download the JSON file. This file will be used to Authenticate the json-server app with Firebase. Important!: Store the generated file in a config folder in your root app, or save it for later use with environment variables.

Upload your DB.json file to firebase realtime database

11. Click on the three dots on the right-hand side of the database toolbar.
12. Select "Import JSON."
13. Choose your db.json file and click "Open" to upload it.

Vercel Deployment Setup

Setup Vercel

1. Clone this repository.
2. Run pnpm install on the terminal.
3. Update or use the default db.json in the repository.
4. Sign Up or login into Vercel.
5. From the Vercel dashboard, click "+ New Project" then "Import" your repository.
6. In the "Configure Project" screen, configure Environment Variables.

Adding Environment variables

6. Under "Environment Variables", add the following variables and fill the values from the generated config file in firebase. See : Set Up Firebase in Your Project

   • FIREBASE_PROJECT_ID
   • FIREBASE_PRIVATE_KEY
   • FIREBASE_CLIENT_EMAIL

7. Leave everything else default and click "Deploy".

8. Save and Wait until deployment is done, and your own JSON server is ready to serve!

Note: If you have already deployed your project to vercel:
    - Then Go to your "Vercel project dashboard".
    - Navigate to the "Settings" tab.
    - Add your "Environment Variables".

Default db.json

{
  "posts": [
    { "id": 1, "title": "json-server", "author": "typicode" },
    { "id": 2, "title": "Learning JSON", "author": "student" }
  ],
  "comments": [
    { "id": 1, "body": "some comment", "postId": 1 },
    { "id": 2, "body": "another comment", "postId": 1 },
    { "id": 3, "body": "great post!", "postId": 2 }
  ],
  "profile": { "name": "typicode" }
}

Using Json-Server

1. Filter

filter by category:

/productos?category=comida

Concatenate more fields

filter by 2 categories:

 `/productos?category=comida&category=tecnologia`

2. _expand

Usar _expand para relaciones de uno-a-uno (one-to-one relationship).

/requisito-requerimientos?_expand=requerimiento

Concatenate more fields

/requerimientos?_expand=puesto&_expand=empresa

3. _embed

Usar _embed para relaciones de uno-a-varios (one-to-many relationship). Un requerimiento puede tener varios requerimientos asociados

/requerimientos?_embed=requisito-requerimientos

Attribution

Part of the code in this project was adapted from kitloong's work.

Reference

1. https://github.com/typicode/json-server
2. https://vercel.com