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?