Deploying a different index page using Vercel with json-server

27 Views Asked by At

I am trying to deploy a pet project application of mine to Vercel. This application uses vanilla JavaScript along with json-server to fake a REST API endpoint for videos. The endpoint is solely for consumption purposes, and indeed, the application includes an index file located at ./public/index.html. To configure json-server, I initiated the process by executing the commands npm init -y followed by npm install json-server. In the root directory of my project, I created the server.js file containing the following code:

const jsonServer = require('json-server');
const server = jsonServer.create();
const router = jsonServer.router('./backend/videos.json');
const middlewares = jsonServer.defaults();

server.use(middlewares);
server.use(router);
server.listen(3000, () => {
  console.log('JSON Server is running')
});

I also added the "start" script into my package.json like the following:

{
  "name": "vidflow",
  "version": "1.0.0",
  "description": "",
  "main": "script.js",
  "scripts": {
    "start": "node server.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "json-server": "^0.17.4"
  }
}

And finally, I added the vercel.json with the following code:

{
  "version": 2,
  "builds": [
    {
      "src": "server.js",
      "use": "@vercel/node",
      "config": {
        "includeFiles": ["./backend/videos.json"]
      }
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "server.js"
    }
  ]

}

After deploying it to Vercel the endpoint is working as expected but the index page is set json-server index page telling me that the json-server is successfully running, and that's not what I want. I want to display my index page from ./public/index.html. How can I do that?

0

There are 0 best solutions below