Express static assets don't load

[dev-paperplane]

Hi,

I am using Vercel to host a project developed in NodeJS. In this project, I created the following commands in my package.json:

"scripts": {
    "start": "node --watch app.js",
    "dev": "npm start & webpack serve --config webpack.dev.js",
    "build": "webpack --config webpack.prod.js"
}

In the ‘build’ command, I need run the webpack.prod.js file, which among other things, copies my static files and places them in the ‘public’ folder of my project, which is the folder where I direct my static files using Express.

app.use(express.static(path.join(__dirname, 'public')))

And this is my vercel.json file:

{
	"version": 2,
	"builds": [
		{
			"src": "app.js",
			"use": "@vercel/node"
		}
	],
	"routes": [
		{
			"src": "/(.*)",
			"dest": "app.js"
		}
	]
}

This project works perfectly in a local environment, but when I upload it to GitHub and run it on Vercel, it doesn’t load any static files.

My question is whether I need to run the ‘build’ command locally before uploading my project to GitHub, or if Vercel is supposed to handle this and generate the static files?

What could be happening?

[amyegan]

Hi @dev-paperplane. Vercel’s serverless environment works a little differently from a traditional server. I recommend following the Express.js with Vercel to adapt an Express app to a serverless environment.

How to Deploy an Express.js Application to Vercel

[dev-paperplane]

I solve it making this changes to my Vercel.json

{
  "version": 2,
  "builds": [
    {
      "src": "app.js",
      "use": "@vercel/node"
    },
    {
      "src": "webpack.prod.js",
      "use": "@vercel/static-build",
      "config": {
        "distDir": "public"
      }
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "app.js"
    }
  ]
}