React-Admin Example to Create CRUD REST API Using JSON-Server Library in Browser Using Javascript

Welcome folks today in this blog post we will be using the react-admin library to create the crud rest api using json-server library in browser using javascript. All the full source code of the application is shown below.

Get Started

In order to get started you need to make a new directory called crudapp as shown below

mkdir crudapp

cd crudapp

Making the Backend Server Using JSON-Server

Now we can make the backend json-server api server as shown below

npm init -y

npm i json-server

npm i concurrently

npm i content-range

And after that you need to copy paste the below code inside the package.json in the scripts section as shown below

package.json

{
  "name": "react-admin-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "server": "json-server --watch db.json --port 5000 --middlewares ./range.js",
    "client": "npm start --prefix client",
    "dev": "concurrently \"npm run server\" \"npm run client\""
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "concurrently": "^5.3.0",
    "content-range": "^1.1.0",
    "json-server": "^0.16.2"
  }
}

{

"name": "react-admin-example",

"version": "1.0.0",

"description": "",

"main": "index.js",

"scripts": {

"server": "json-server --watch db.json --port 5000 --middlewares ./range.js",

"client": "npm start --prefix client",

"dev": "concurrently \"npm run server\" \"npm run client\""

"keywords": [],

"author": "",

"license": "ISC",

"dependencies": {

"concurrently": "^5.3.0",

"content-range": "^1.1.0",

"json-server": "^0.16.2"

}

As you can see we have added the scripts for the starting the json-server and here we are watching the db.json where we will be storing the data stored inside the json format and we will be starting the server at port 5000 and then we are passing the middleware called range.js where we pass the content-range header. And also we are starting the react.js client app and then we are using the concurrently library to start the client and the server at the same time.

And now we need to create the db.json file where we will be creating the records for the resources

db.json

{
  "posts": [
    {
      "id":"1",
      "title":"this is the title of first blog post",
      "body":"this is the blog post",
      "publishedAt":"2020-09-08"
    },
    {
      "id":"2",
      "title":"this is the title of second blog post",
      "body":"this is the second blog post",
      "publishedAt":"2021-09-08"
    },
    {
      "id":"3",
      "title":"this is the third of first blog post",
      "body":"this is the third blog post",
      "publishedAt":"2022-09-08"
    }
  ],
  "users": [
    {
      "id": "1",
      "name": "John Smith",
      "email": "john@example.com"
    },
    {
      "name": "Gautam33 Sharma",
      "email": "geeky33gautam1997@gmail.com",
      "id": "NY59e5K"
    },
    {
      "name": "Gautam44 Sharma",
      "email": "geeky44gautam1997@gmail.com",
      "id": "NY59e5K"
    },
    {
      "name": "Gautam Sharma",
      "email": "geekygautam1997@gmail.com",
      "id": "vMNAPgD"
    }
  ]
}

{

"posts": [

{

"id":"1",

"title":"this is the title of first blog post",

"body":"this is the blog post",

"publishedAt":"2020-09-08"

{

"id":"2",

"title":"this is the title of second blog post",

"body":"this is the second blog post",

"publishedAt":"2021-09-08"

{

"id":"3",

"title":"this is the third of first blog post",

"body":"this is the third blog post",

"publishedAt":"2022-09-08"

}

"users": [

{

"id": "1",

"name": "John Smith",

"email": "john@example.com"

{

"name": "Gautam33 Sharma",

"email": "geeky33gautam1997@gmail.com",

"id": "NY59e5K"

{

"name": "Gautam44 Sharma",

"email": "geeky44gautam1997@gmail.com",

"id": "NY59e5K"

{

"name": "Gautam Sharma",

"email": "geekygautam1997@gmail.com",

"id": "vMNAPgD"

}

]

}

As you can see we are creating the array of json objects for the posts and the users and now we need to create the range.js middleware which we will be passing it to the json-server as shown below

range.js

module.exports = (req, res, next) => {
  res.header('Content-Range', 'posts 0-20/20')
  next()
}

module.exports = (req, res, next) => {

res.header('Content-Range', 'posts 0-20/20')

next()

}

Making the React.js Client FrontEnd

Now we need to create the client folder and inside it we will be creating a new react.js app as shown below

npx create-react-app client

cd client

Now we need to install the dependencies which are necessary for this react.js project as shown below

npm i react-admin

npm i ra-data-simple-rest

npm i @material-ui/core

And now we need to add the proxy to the react.js app inside the package.json file as shown below

package.json

Directory Structure

You will see the below directory structure of the react.js app as shown below

And now we need to make the App.js file and copy paste the following code

App.js

import React from 'react'
import { Admin, Resource } from 'react-admin'
import restProvider from 'ra-data-simple-rest'
import PostList from './components/PostList'
import PostCreate from './components/PostCreate'
import PostEdit from './components/PostEdit'
import UserList from './components/UserList'
import UserCreate from './components/UserCreate'
import UserEdit from './components/UserEdit'

function App() {
  return (
    <Admin dataProvider={restProvider('http://localhost:3000')}>
      <Resource
        name='posts'
        list={PostList}
        create={PostCreate}
        edit={PostEdit}
      />
      <Resource
        name='users'
        list={UserList}
        create={UserCreate}
        edit={UserEdit}
      />
    </Admin>
  )
}

export default App

import React from 'react'

import { Admin, Resource } from 'react-admin'

import restProvider from 'ra-data-simple-rest'

import PostList from './components/PostList'

import PostCreate from './components/PostCreate'

import PostEdit from './components/PostEdit'

import UserList from './components/UserList'

import UserCreate from './components/UserCreate'

import UserEdit from './components/UserEdit'

function App() {

return (

<Resource

name='posts'

list={PostList}

create={PostCreate}

edit={PostEdit}

<Resource

name='users'

list={UserList}

create={UserCreate}

edit={UserEdit}

</Admin>

)

}

export default App

As you can see we are importing the react-admin library at the top and then we have two Resources where we have the posts and the users and then we are attaching the name property and then we are attaching the list property where we will be showing the list of posts and the users and then we are attaching the create method where we will be creating the new user. And also for editing the users and posts as well. And at the top of this react-admin component we are providing the data-provider property where we need to provide the url of the backend json-server . And now we need to create the components folder and inside it we need to create the files

Displaying the List of Posts

Now we need to create the component called PostList.js and copy paste the following code

components/PostList.js

import React from 'react'
import {
  List,
  Datagrid,
  TextField,
  DateField,
  EditButton,
  DeleteButton,
} from 'react-admin'

const PostList = (props) => {
  return (
    <List {...props}>
      <Datagrid>
        <TextField source='id' />
        <TextField source='title' />
        <DateField source='publishedAt' />
        <EditButton basePath='/posts' />
        <DeleteButton basePath='/posts' />
      </Datagrid>
    </List>
  )
}

export default PostList

import React from 'react'

import {

List,

Datagrid,

TextField,

DateField,

EditButton,

DeleteButton,

} from 'react-admin'

const PostList = (props) => {

return (

</Datagrid>

</List>

)

}

export default PostList

As you can see we are importing all the required widgets from the react-admin library. And then we are showing the id,title, publishedAt and then we have the edit and delete buttons. We are wrapping this inside the datagrid component.

Creating the Post

Now we need to create the post for this we need to create the PostCreate.js file as shown below

PostCreate.js

import React from 'react'
import { Create, SimpleForm, TextInput, DateInput } from 'react-admin'

const PostCreate = (props) => {
  return (
    <Create title='Create a Post' {...props}>
      <SimpleForm>
        <TextInput source='title' />
        <TextInput multiline source='body' />
        <DateInput label='Published' source='publishedAt' />
      </SimpleForm>
    </Create>
  )
}

export default PostCreate

import React from 'react'

import { Create, SimpleForm, TextInput, DateInput } from 'react-admin'

const PostCreate = (props) => {

return (

</SimpleForm>

</Create>

)

}

export default PostCreate

As you can see we have a simple html5 form where we allow the user to enter the title and the body of the post. And we are wrapping this inside the SimpleForm widget as shown below

Editing the Post

Now we need to create the EditPost.js file and copy paste the following code

PostEdit.js

import React from 'react'
import { Edit, SimpleForm, TextInput, DateInput } from 'react-admin'

const PostEdit = (props) => {
  return (
    <Edit title='Edit Post' {...props}>
      <SimpleForm>
        <TextInput disabled source='id' />
        <TextInput source='title' />
        <TextInput multiline source='body' />
        <DateInput label='Published' source='publishedAt' />
      </SimpleForm>
    </Edit>
  )
}

export default PostEdit

import React from 'react'

import { Edit, SimpleForm, TextInput, DateInput } from 'react-admin'

const PostEdit = (props) => {

return (

</SimpleForm>

</Edit>

)

}

export default PostEdit

As you can see we are again using the simple form where we are fetching all the values of the post and then user can edit the post and save the changes as shown below

And we can do this the same for the users resource as well. For this we can define the crud files as shown below

UserList.js

import React from 'react'
import {
  List,
  Datagrid,
  TextField,
  EmailField,
  EditButton,
  DeleteButton,
} from 'react-admin'

const UserList = (props) => {
  return (
    <List {...props}>
      <Datagrid>
        <TextField source='id' />
        <TextField source='name' />
        <EmailField source='email' />
        <EditButton basePath='/users' />
        <DeleteButton basePath='/users' />
      </Datagrid>
    </List>
  )
}

export default UserList

import React from 'react'

import {

List,

Datagrid,

TextField,

EmailField,

EditButton,

DeleteButton,

} from 'react-admin'

const UserList = (props) => {

return (

</Datagrid>

</List>

)

}

export default UserList

Creating the User

UserCreate.js

import React from 'react'
import { Create, SimpleForm, TextInput } from 'react-admin'

const UserCreate = (props) => {
  return (
    <Create title='Create a User' {...props}>
      <SimpleForm>
        <TextInput source='name' />
        <TextInput source='email' />
      </SimpleForm>
    </Create>
  )
}

export default UserCreate

import React from 'react'

import { Create, SimpleForm, TextInput } from 'react-admin'

const UserCreate = (props) => {

return (

</SimpleForm>

</Create>

)

}

export default UserCreate

Editing the User

UserEdit.js

import React from 'react'
import { Edit, SimpleForm, TextInput } from 'react-admin'

const UserEdit = (props) => {
  return (
    <Edit title='Edit User' {...props}>
      <SimpleForm>
        <TextInput disabled source='id' />
        <TextInput source='name' />
        <TextInput source='email' />
      </SimpleForm>
    </Edit>
  )
}

export default UserEdit

import React from 'react'

import { Edit, SimpleForm, TextInput } from 'react-admin'

const UserEdit = (props) => {

return (

</SimpleForm>

</Edit>

)

}

export default UserEdit

Running the App

Now to run the app guys you need to go to the parent directory and execute the below command

npm run dev

This will start the client and the server at the same time. The client will run on port 3000 and the server will run on port 5000 as shown below