DEV Community

Cover image for Build and Deploy a Fake REST API Server for CRUD with Nodejs in 5 minutes
Mangabo Kolawole
Mangabo Kolawole Subscriber

Posted on • Originally published at Medium

Build and Deploy a Fake REST API Server for CRUD with Nodejs in 5 minutes

*Article posted using bloggu.io. Try it for free.*For some recent interviews with React, I found myself in the necessity to build an API to perform CRUD operations.

It's possible to have directly fake data mocked in the React application, but I find the idea of showcasing how you handle requests from a remote server fascinating. But how do you make it fast?

It can take literally hours to set up a good API server and deploy it. Well, not really. Let's learn how to build a quick fake REST API server for CRUD operations.

## Requirements

You need to have Nodejs installed on your machine and also a Heroku account.

Setup

Let's create a working directory and init a Nodejs project.

mkdir fake-server && cd fake-server
yarn init
Enter fullscreen mode Exit fullscreen mode

You'll be asked some questions for some entries in the package.json. Here's the structure of the package.json for this project.

{
  "name": "fake-server",
  "version": "1.0.0",
  "license": "MIT",
  "main": "server.js",
  "scripts": {
    "start": "node server.js"
  }
}
Enter fullscreen mode Exit fullscreen mode

Let's install json-server in the project.

yarn add json-server
Enter fullscreen mode Exit fullscreen mode

Great! We can now move to write the server.js file.

Writing the server

The server.js will contain the logic to run the launch the server and load the json-server middlewares.

const jsonServer = require('json-server');
const server = jsonServer.create();
const router = jsonServer.router('db.json'); // <== Will be created later
const middlewares = jsonServer.defaults();
const port = process.env.PORT || 3200; // <== You can change the port

server.use(middlewares);
server.use(router);

server.listen(port);
Enter fullscreen mode Exit fullscreen mode

Next, we need to create the db.json file. It's a file containing JSON data. json-server will automatically create routes and schema for resources with the structure of the JSON files, then will allow CRUD operations on the resources.

The data for this article comes from Mockaroo.

The structure of db.json comes like this.

{
  "resources1": [
     // JSON data
  ],
  "resources2": [
     // JSON data
  ]
}
Enter fullscreen mode Exit fullscreen mode

Here's an example of user data for our project.

{
  "users": [
    {
      "id": 1,
      "name": "Aurelie Cheyne",
      "email": "acheyne0@simplemachines.org",
      "city": "Male",
      "username": "acheyne0",
      "website": "Redhold"
    },
    {
      "id": 2,
      "name": "Dael Leppo",
      "email": "dleppo1@mapy.cz",
      "city": "Non-binary",
      "username": "dleppo1",
      "website": "Cardify"
    },
    {
      "id": 3,
      "name": "Elnar Brahm",
      "email": "ebrahm2@wunderground.com",
      "city": "Female",
      "username": "ebrahm2",
      "website": "Matsoft"
    },
    {
      "id": 4,
      "name": "Shelby Feaver",
      "email": "sfeaver3@dion.ne.jp",
      "city": "Female",
      "username": "sfeaver3",
      "website": "Cardguard"
    },
    {
      "id": 5,
      "name": "Anthe Ivanishev",
      "email": "aivanishev4@va.gov",
      "city": "Female",
      "username": "aivanishev4",
      "website": "Bitchip"
    },
    {
      "id": 6,
      "name": "Shermy Clinton",
      "email": "sclinton5@abc.net.au",
      "city": "Male",
      "username": "sclinton5",
      "website": "Fixflex"
    },
    {
      "id": 7,
      "name": "Alma Romaint",
      "email": "aromaint6@sciencedirect.com",
      "city": "Male",
      "username": "aromaint6",
      "website": "Keylex"
    }
  ]
}
Enter fullscreen mode Exit fullscreen mode

With the db.json written, we can now run the server.

yarn start
Enter fullscreen mode Exit fullscreen mode

The server will be available at http://localhost:3200.

Screenshot 2022-05-28 at 22-17-00 JSON Server.png

And let's check the users resource at http://localhost:3200/users/.
Screenshot 2022-05-28 at 22-17-08 Screenshot.png

Data is available but we want to deploy it. Interestingly, you might not need to deploy at all if you are only doing read-only operations. Push the code to Github, your data will automatically be available at: https://my-json-server.typicode.com/your_github_username/project_name.
For example, you can find the remote server for the repository of this mini-project here.

You can go full CRUD but warning: data is not persisted when executing write operations. To avoid this, you can deploy on Heroku.

Deploying on Heroku

Deploying on Heroku is a quick and straightforward process. Before that, make sure to have a .gitignore file.

node_modules
Enter fullscreen mode Exit fullscreen mode

Then, make sure to log in.

heroku login
Enter fullscreen mode Exit fullscreen mode

After that, create a new project and push the code.

heroku create
heroku buildpacks:set heroku/nodejs
Enter fullscreen mode Exit fullscreen mode

And let's push the code to Heroku:

git push heroku master
Enter fullscreen mode Exit fullscreen mode

And you have your application ready and running. You can also make persistent CRUD operations.πŸ€Ÿβ€

You can find the code of this project here and directly use it as a template if you are in hurry.😁

Want to add something or have some comments? Let's discuss this in the comments section.

Top comments (0)