Vercel isn't showing code, not HTML

[legends-of-ngdb]

Legends-of-NGDB/ngdb (github.com)

I have configured the vercel.json and express is setup properly.

[pawlean (Pauline P. Narvas)]

Hi, @legends-of-ngdb! Welcome to the Vercel Community

Thank you for providing that information about your project structure and vercel.json file. It appears that there’s a mismatch between your project structure and the Vercel configuration, which is likely causing issues with deployment issues.

Your vercel.json configuration is routing all requests to “/api”, which doesn’t align with your project structure. You don’t have an “api” directory, and it seems you’re not using Next.js API routes.

{
  "version": 2,
  "rewrites": [{ "source": "/(.*)", "destination": "/api" }]
}

To resolve this, we need to adjust your configuration to match your project structure. Here’s what I suggest:

{
  "version": 2,
  "builds": [
    { "src": "website/src/index.js", "use": "@vercel/node" },
    { "src": "website/pages/**/*", "use": "@vercel/static" }
  ],
  "routes": [
    { "src": "/pages/(.*)", "dest": "/website/pages/$1" },
    { "src": "/(.*)", "dest": "/website/src/index.js" }
  ]
}

This sets up two build steps:

• One for your Node.js application (assuming index.js is your entry point)
• One for your static files in the “pages” directory

It defines routing rules:

• Requests to “/pages/*” are served directly from the “pages” directory
• All other requests are routed to your Node.js application

Could you give that a go?

I’ll also leave some relevant documentation for you to dig into:

Configuring Projects with vercel.json

[legends-of-ngdb]

Thanks pawlean for the well-researched help. I really appreciate it. I’m sorry I wasn’t able to respond earlier - mainly it was because I was in Chicago - but that isn’t an excuse. I tried the code that you made but it seems Vercel ran into an error.

I updated my Github: Legends-of-NGDB/ngdb

[legends-of-ngdb]

It seems I’m encountering 404 but I don’t see why…

[legends-of-ngdb]

Changed it to this but didn’t work…

{
  "version": 2,
  "builds": [
    { "src": "website/src/index.js", "use": "@vercel/node" },
    { "src": "website/pages/**/*", "use": "@vercel/static" }
  ],
  "routes": [
    { "src": "/pages/(.*)", "dest": "/website/pages/$1" },
    { "src": "/(.*)", "dest": "/website/src/index.js" }
  ]
}

[legends-of-ngdb]

Still not working…

{
  "version": 2,
  "builds": [
    {
      "src": "website/src/index.js",
      "use": "@vercel/node"
    },
    {
      "src": "website/pages/**/*.html",
      "use": "@vercel/static"
    }
  ],
  "routes": [
    {
      "src": "/",
      "dest": "/website/src/index.js"
    },
    {
      "src": "/pages/(.*)",
      "dest": "/website/pages/$1"
    },
    {
      "src": "/(.+)",
      "dest": "/website/src/index.js"
    }
  ]
}

[pawlean (Pauline P. Narvas)]

We wrote this community post which may be helpful. Could you go through this and let us know how you get on?

Debugging 404 Errors

Sometimes things don’t go as expected when deploying a website. If you see a 404 on your site, that means the page or resource couldn’t be found. There are many possible causes, and the absence of something can be tricky debug if you don’t know where to look. Here are some things you can do to find the cause and fix it. Debugging Tips Check the error code If you see a mostly white screen with 404: NOT_FOUND along with a Code and and ID then you can click the blue info box below the error deta…

[pawlean (Pauline P. Narvas)]

I did a bit more digging, and observed that when I delete the vercel.json file completely to rely on Vercel to figure out your project structure, it believes your index.js in your root directory is the homepage. However, this just displays your code which I imagine isn’t what you want.

//--------CONTSTANTS----------\\
const url = require('url'),
	path = require('path'),
	express = require('express'),
...
	

From your directory, what is your homepage? I experimented by making the output directory as website/pages but this displays your custom 404 page, which I also don’t think you want.

In your vercel.json configuration above, you specify as /website/src/index.js as your homepage, but in your /website/src directory, you don’t have an index.js.

I would suggest reviewing your directory, specifying which is your homepage and work from there in the vercel.json configuration.

Let us know how you get on!

[legends-of-ngdb]

Sorry about that. I was trying to get GPT-4o to solve the issue.

I have updated it with some success.

{
  "version": 2,
  "builds": [
    { "src": "index.js", "use": "@vercel/node" },
    { "src": "website/pages/**/*.html", "use": "@vercel/static" }
  ],
  "routes": [
    { "src": "/", "dest": "/website/pages/ngdb.html" },
    { "src": "/pages/(.*)", "dest": "/website/pages/$1" },
    { "src": "/(.*)", "dest": "/website/src/index.js" }
  ]
}

The code directs to my main page which is website/pages/ngdb.html. It relies on some express code located at the end of index.js.

    app.get('/', (req, res) => {
		render(res, req, 'ngdb.html'); //Main Page
	});
}

//Others

	app.get('/discord', (req, res) => {
		res.redirect(config.bot.support) 
	})

  app.get('/dc', (req, res) => {
		res.redirect(config.bot.support)
	})

	app.get('/invite', (req, res) => {

		res.redirect(`https://discord.com/oauth2/authorize?client_id=990044779800825856&permissions=2080374975&scope=bot`)
	})

app.get('/inv', (req, res) => {

	res.redirect(`https://discord.com/oauth2/authorize?client_id=990044779800825856&permissions=2080374975&scope=bot`)
})

  app.get('/vote', (req, res) => {

		res.redirect(config.bot.botlist)
	})

app.get('/omen', (req, res) => {
  res.redirect('https://omenlist.xyz/bot/990044779800825856/vote')
})

app.get(`/ngdb`,(req,res) => {

res.sendFile(__dirname + '/website/pages/ngdb.html')
  
})

app.get(`/privacy`,(req,res) => {

res.sendFile(__dirname + '/website/pages/privacy.html')

})

app.get(`/tos`,(req,res) => {

res.sendFile(__dirname + '/website/pages/tos.html')

})

app.get(`/commands`,(req,res) => {

res.sendFile(__dirname + '/website/pages/commands.html')

})

app.get(`/proof`,(req,res) => {

res.redirect('https://i.makeagif.com/media/3-29-2016/Zzt9Il.gif')

})

app.get(`/ngdbgif`,(req,res) => {

res.sendFile(__dirname + '/website/pages/ngdb.gif')

})

app.get(`/ngdb.gif`,(req,res) => {

res.sendFile(__dirname + '/website/pages/ngdb.gif')

})

app.get(`/ngdbloading.gif`,(req,res) => {

res.sendFile(__dirname + '/website/src/images/ngdb_loading.gif')

})

app.get(`/finishingImageLogo.gif`,(req,res) => {

res.sendFile(__dirname + 'ngdb_logo_coding.gif')

})

app.use(function(req, res) {
  res.status(404).sendFile(__dirname + '/website/pages/404.html');

	});

Sometimes it is also directly importing css and js file directly from their located path.
Such as this example:

 <link href="src/assets/css/style.css" rel="stylesheet">

This directly accesses the path in the code; however, it seems it doesn’t work with the style.

I uploaded the project on railway and onrender and it worked perfectly. Is there a certain way to do the same thing that railway and onrender do with a vercel.json? Thank you again for taking the time to help me. I really appreciate it.

Expected Result:

Useful Links:

NGDB™

Haven’t updated the link, I still have it as my old one ngdb.replit.app. But this one is railway.

NGDB™

The one in onrender.

[legends-of-ngdb]

I updated it a bit because index.js is located /index.js

{
"version": 2,
"builds": [
{ "src": "index.js", "use": "@vercel/node" },
{ "src": "website/pages/**/.html", "use": "@vercel/static" }
],
"routes": [
{ "src": "/", "dest": "/website/pages/ngdb.html" },
{ "src": "/pages/(.)", "dest": "/website/pages/$1" },
{ "src": "/(.*)", "dest": "index.js" }
]
}

It displays the .html page but when I try to go to /tos is throws a 500 error. Also I saw this in vercel and it doesn’t look good. The styles don’t work either for my root html file.

[legends-of-ngdb]

Updated it again and I got the /tos and /privacy to work but they are really slow and the styles are still missing…

{
  "version": 2,
  "builds": [
    { "src": "index.js", "use": "@vercel/node" },
    { "src": "website/pages/**/*.html", "use": "@vercel/static" },
    { "src": "website/src/**/*", "use": "@vercel/static" }
  ],
  "routes": [
    { "src": "/", "dest": "/website/pages/ngdb.html" },
    { "src": "/tos", "dest": "/website/pages/tos.html" },
    { "src": "/privacy", "dest": "/website/pages/privacy.html" },
    { "src": "/website/pages/(.*)", "dest": "/website/pages/$1" },
    { "src": "/website/src/assets/(.*)", "dest": "/website/assets/$1" },
    { "src": "/(.*)", "dest": "index.js" }
  ]
}

[legends-of-ngdb]

@pawlean are you the only one that can help me in this ticket?

[pawlean (Pauline P. Narvas)]

@legends-of-ngdb We’re a small team in the community, and I’m sure you’ve seen, we have several topics going through in the community. Appreciate your patience with this!

As I dig deeper, it looks like it’s an issue with how you’re calling your stylesheet and other assets. I deployed your app, and see that the static assets path are as follows:

I recommend checking your codebase and updating the paths to these.

[amyegan]

I just tried it myself and I also see in the deployment Source → Output tab that the static files are nested within /website. For example, bootstrap.min.css needs to be imported from /website/src/assets/vendor/bootstrap/css/bootstrap.min.css instead of /src/assets/vendor/bootstrap/css/bootstrap.min.css

I’m marking Pauline’s suggestion as the solution. But I also recommend reviewing the guide to using Express.js with Vercel. That walks through the recommended approach to configure an Express app for Vercel’s serverless environment.