How to deploy reactJS app with json-server

Question

I have actually deployed my React-app in the following way:-

1. ran the command: npm run build
2. Already had db.json file with dummy data. Context, when I run json-server --watch db.json -p 3001 -d 2000 the entire react-app works on the localhost
3. installed json-server using npm
4. created a server.js file

const jsonServer = require('json-server');
const server = jsonServer.create();
const router = jsonServer.router('db.json');
const middlewares = jsonServer.defaults();
const port = process.env.PORT || 3001;

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

server.listen(port);

5. created the app on heroku and pushed it to heroku master The website for some reason only works when I run node server.js on my local-machine and it is making requests to my localport. if that command isn't running the react-app cannot do the axios request to the DB. I don't know what went wrong. I used the following tutorial for this: https://github.com/jesperorb/json-server-heroku

My suspicions are that in my code I have created a basUrl.js file in which

export const baseUrl = 'http://localhost:3001/';

How should I change this to fix my problem?

Thanks for your help.

Answer 1

You should link your react folder built with the server (server.js), to do that add:

const express = require('express');
const path = require('path');

app.use(express.static(path.join(__dirname, 'build')));
app.get('/*', function (req, res) {
    res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

'build' is your react app's folder created after npm run build into your react app folder.

You have to install path and express modules if not.

And, You should get your json-server database in 'get' function, to use it with a specific url like: /db, just like this:

app.use('/db', middlewares, router);

But you should put /db before /* to not to open database with url /.

So, the result (server.js) will be:

const jsonServer = require('json-server');
const app = jsonServer.create();
const path = require('path');
const express = require('express');
const middlewares = jsonServer.defaults();
const router = jsonServer.router('db.json');
const port = process.env.PORT || 3001;

app.use('/db', middlewares, router);
app.use(express.static(path.join(__dirname, 'build')));

app.get('/*', function (req, res) {
    res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

server.listen(port);