Getting 404 Not Found in certain APIs in the application.

[shikharbajpai]

Summary

Application link: https://music-player-gxka.vercel.app/

GitHub repo link: https://github.com/shikharbajpai/music-player

It is a music application in which there is a songs directory which contains songs folder. But it is unable to load in the vercel. Locally the application is working. Not sure about the reason.

This is the updated vercel.json

{
"version": 2,
"name": "music-player",
"public": true,
"routes": [
{ "src": "/(.)", "dest": "/$1.html" },
{ "src": "/songs/(.)", "dest": "/songs/$1" },
{ "src": "/songs/freemusic/(.*)", "dest": "/songs/freemusic/$1" },
{ "src": "/songs/freemusic/Hazy After Hours.mp3", "dest": "/songs/freemusic/Hazy%20After%20Hours.mp3" }
]
}

Example

https://music-player-gxka.vercel.app/songs/freemusic/

Steps to Reproduce

Open the application link: https://music-player-gxka.vercel.app/
In the developers tools (Fn+ F12) these Api's are giving 404 error: https://music-player-gxka.vercel.app/songs/freemusic/ and https://music-player-gxka.vercel.app/songs/
Due to this neither albums nor any song in the library section is getting loaded.

[shikharbajpai]

As songs folder is a static folder, therefore I have provided the path in the vercel.json but it is still unable to load. Can someone help to resolve the issue. It would be really helpful.

[SarikAnwar01]

{
"rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
}

[shikharbajpai]

@SarikAnwar01 Using the following change, it is only loading html file, not the css nor script.

[SarikAnwar01]

@shikharbajpai I see you are using the bare HTML and CSS so index.html should also load the CSS and script as they are integrated within the file.

[SarikAnwar01]

looks like they are loading @shikharbajpai

[SarikAnwar01]

{
"rewrites": [
{ "source": "/(.)", "destination": "/index.html" }
],
"routes": [
{
"src": "/(.\.css)",
"headers": { "Content-Type": "text/css" },
"dest": "/$1"
},
{
"src": "/(.*\.js)",
"headers": { "Content-Type": "application/javascript" },
"dest": "/$1"
}
]
}

try adjusting the path accordingly it may help you load the CSS and script @shikharbajpai

[shikharbajpai]

@SarikAnwar01 with these changes, html css and script are laoding, but my issue is that the /songs and /songs/freemusic folder are not loading. The code for that is written in script.js. Locally it is working. Can you help me with this

Here is the updated vercel.json for that.
{
"routes": [
{
"src": "/(.\.css)",
"headers": { "Content-Type": "text/css" },
"dest": "/$1"
},
{
"src": "/(.\.js)",
"headers": { "Content-Type": "application/javascript" },
"dest": "/$1"
},
{
"src": "/(.\.svg)",
"headers": { "Content-Type": "image/svg+xml" },
"dest": "/$1"
},
{
"src": "/songs/freemusic/(.)",
"dest": "/songs/freemusic/$1"
},
{
"src": "/songs/(.)",
"dest": "/songs/$1"
},
{
"src": "/(.)",
"dest": "/index.html"
}
]
}

[shikharbajpai]

@SarikAnwar01 Here is the snippet of the code written in script.js