4 - Add JSON server
1. npm install json-server and ts-node
add json-server and ts-node
npm i json-server ts-node --save-dev
Add a folder called server to the root directory and paste in the below code
2. Make a server.ts file in a new folder called server
Make a new folder called server

Make file called server.ts in the new server folder and paste in the below code. You do not need to study or learn this min node express app it is just to have a mock backend.
const jsonServer = require('json-server');
const server = jsonServer.create();
const router = jsonServer.router('server/db.json');
const middlewares = jsonServer.defaults();
const db = require('./db.json');
const fs = require('fs');
server.use(middlewares);
server.use(jsonServer.bodyParser);
server.post('/login', (req, res, next) => {
const users = readUsers();
const user = users.filter(
u => u.username === req.body.username && u.password === req.body.password
)[0];
if (user) {
res.send({ ...formatUser(user), token: checkIfAdmin(user) });
} else {
res.status(401).send('Incorrect username or password');
}
});
server.post('/register', (req, res) => {
const users = readUsers();
const user = users.filter(u => u.username === req.body.username)[0];
if (user === undefined || user === null) {
res.send({
...formatUser(req.body),
token: checkIfAdmin(req.body)
});
db.users.push(req.body);
} else {
res.status(500).send('User already exists');
}
});
server.use('/users', (req, res, next) => {
if (isAuthorized(req) || req.query.bypassAuth === 'true') {
next();
} else {
res.sendStatus(401);
}
});
server.use(router);
server.listen(3000, () => {
console.log('JSON Server is running');
});
function formatUser(user) {
delete user.password;
user.role = user.username === 'admin'
? 'admin'
: 'user';
return user;
}
function checkIfAdmin(user, bypassToken = false) {
return user.username === 'admin' || bypassToken === true
? 'admin-token'
: 'user-token';
}
function isAuthorized(req) {
return req.headers.authorization === 'admin-token' ? true : false;
}
function readUsers() {
const dbRaw = fs.readFileSync('./server/db.json');
const users = JSON.parse(dbRaw).users
return users;
}
3. Add a file called db.json
Make file called db.json for mock data in the new server folder
{
"users": [
{
"id": 1,
"username": "duncan",
"country": "australia",
"password": "123"
},
{
"id": 2,
"username": "sarah",
"country": "england",
"password": "123"
},
{
"id": 3,
"username": "admin",
"country": "usa",
"password": "123"
},
{
"username": "test2",
"password": "123",
"id": 4
}
],
"profiles": [
{
"id": 1,
"userId": 1,
"job": "Plumber"
},
{
"id": 2,
"userId": 2,
"job": "developer"
},
{
"id": 3,
"userId": 3,
"job": "Manager"
}
],
"products": [
{
"id": 1,
"name": "Spanner",
"category": "tools"
},
{
"id": 2,
"name": "Hammer",
"category": "tools"
},
{
"id": 3,
"name": "Screw driver",
"category": "tools"
},
{
"id": 4,
"name": "Paint brush",
"category": "paint"
},
{
"id": 5,
"name": "Paint roller",
"category": "paint"
},
{
"id": 6,
"name": "Paint",
"category": "paint"
}
]
}
4. Add the below script to the scripts in the package.json
/// abbreviated
scripts: {
...
"server": "ts-node ./server/server.ts"
...
}
//abbreviated
5. Start the server and leave it running
Start the server and leave it running whenever you use the apps. It is easier to run in a seperate terminal to VS Code so when you refresh the IDE you do not kill this server.
npm run server
6. Navigate to http://localhost:3000
Check it is working.

8. Commit your code
Last updated