Is it possible to use a json-server api for a hosted project

1

I created a react app for my portfolio using a fake API from json-server and when i try to deploy build on Netlify the api does not work. Is it possible to use this fake api and if so how because I am getting an error “GET suspicious-cray-b0012d.netlify.app/posts 404” on the hosted project but it works fine in dev mode

2

Can you share the code where you are trying to make the request?

3

this is the db.json file

{
  "posts":[
      {
          "id": 1,
          "title": "HTML",
          "image": "https://images.unsplash.com/photo-1550645612-83f5d594b671?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80",
          "author": "Mohamed Mohamud",
          "date": "Jun 6, 2020",
          "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non mauris ac lacus tempus aliquam vel a urna. Etiam in elit vitae lacus elementum rhoncus vehicula eget velit. Donec urna nisi, mollis nec scelerisque iaculis, ultrices ut felis. Suspendisse eros est, commodo ut iaculis nec, sodales quis lectus. Ut a ipsum vel sapien convallis bibendum sed vel nibh. Vestibulum elementum eleifend nisi, vel varius diam porta in. Curabitur nunc ex, accumsan sed ante non, lobortis aliquet tellus. Fusce urna justo, tincidunt eget nisl eu, tempor lobortis dui. Ut pretium dui et enim iaculis congue. Pellentesque eget tellus porta, varius lectus sit amet, placerat orci. Duis hendrerit in lorem quis fringilla. Sed justo lacus, pulvinar fermentum mauris in, porttitor consequat nibh. Proin lacinia mauris urna, ac sagittis libero varius quis. Vivamus nisi mi, porttitor in volutpat nec, mattis non orci. Phasellus faucibus, lectus in volutpat faucibus, nulla neque vehicula purus, non accumsan neque metus et lorem. Integer eget venenatis est, in malesuada orci. Nulla quis egestas ipsum. Morbi placerat eros sit amet rutrum fringilla. Vivamus urna urna, scelerisque ut fringilla at, bibendum a tellus. In vel ipsum lacinia, vehicula urna at, pulvinar orci. Praesent luctus mi suscipit, dictum lectus ac, pellentesque sapien. Sed ultrices elit turpis, sit amet tincidunt justo dictum a. Pellentesque volutpat neque at lorem laoreet facilisis. Praesent euismod sollicitudin orci, vitae finibus augue fermentum a. Etiam hendrerit, enim et porttitor semper, diam elit venenatis odio, id efficitur lacus nisl quis enim. Etiam magna ipsum, tincidunt in sodales eu, hendrerit semper leo. Donec quis pulvinar purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vitae porttitor ipsum."
      }
  ]
}
4

can you share your backend code?

5

No, share the code for where you are making the request

6 
const getPosts = async () => {
        try {
            dispatch({ type: 'SENDING_REQUEST' });
            const res = await fetch('/posts');
            const data = await res.json();
            dispatch({ type: 'REQUEST_FINISHED' });
            dispatch({ type: 'SET_POSTS', payload: data });
        } catch (err) {
            console.log(err);
        }
    };
7

isn’t this supposed to be GET??

8

And also can you share your backend code which handles the API

9

thats what im asking I made a fake api using json-server I have not learnt any backend code yet is it possible to use the fake api when I host it it works when im in dev mode

10

I see that your api is showing 404 error. That means it doesnt exist. So even if your code is correct, then also you wont get the data

11

I understand does this mean json-server is only for development purposes

12

Which service are you using for fake JSON data?

13

He has created his own fake json api

14 
{
  "name": "my-blog-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "concurrently": "^5.3.0",
    "json-server": "^0.16.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-router-dom": "^5.2.0",
    "react-scripts": "3.4.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "json-server": "json-server --watch db.json --port 5000",
    "dev": "concurrently \"npm start\" \"npm run json-server\"",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "proxy": "http://localhost:5000"
}

this is my package.json , json-server is the dependency and npm run dev makes everything work fine but when i run build it does not work

15

I don’t think netlify will run backend code.

If it does show me how you are trying to deploy your server code as well…

16

I think the reason it is not working is that netlify does not run backend code. You were succesfully able to run your react code, but does netlify create a nodejs environment for you?

1 Like
17

the way I deploy to Netlify is i run build then i upload the build folder, its fine if it does not work I just wanted to know for sure. I guess its time for me to start learning the rest of the MERN stack

18

Ah yeah that’s it.

But you can still use an external api in netlify. If you want to try it out go ahead.

1 Like
19

Thank you for all the help