How to deploy reactJS app with json-server

user_9984976 0
Viewed 5690

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);
  1. 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.

json-server reactjs node.js heroku json
2 Answers

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);
user_133461560

I have Heroku running on my JSON server too. You need to correct your API path to be your resource name, for example;

If your resource name in your API is 'blogs';

    {
  "blogs": [
    {
      "postTitle": "My First Blog",

then your api path will be;

https://xxxx.herokuapp.com/blogs

OR

export const baseUrl = 'https://xxxx.herokuapp.com/blogs';

You shouldn't need to specify a port, but if you do it will be port 4000, which Heroku uses.

user_52389780
Related