*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
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"
}
}
Let's install json-server
in the project.
yarn add json-server
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);
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
]
}
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"
}
]
}
With the db.json
written, we can now run the server.
yarn start
The server will be available at http://localhost:3200.
And let's check the users
resource at http://localhost:3200/users/.
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
Then, make sure to log in.
heroku login
After that, create a new project and push the code.
heroku create
heroku buildpacks:set heroku/nodejs
And let's push the code to Heroku:
git push heroku master
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)