DEV Community

Discussion on: How to deploy a Node/Express App to Vercel

View post
Collapse
 
chema profile image
José María CL •

In my case, I needed to use the same base URL to load both the page request and the assets that are included in each page.

Requests:

GET: mywebsite.com/customer/favorites
  \- GET: mywebsite.com/assets/images/logo.svg
  \- GET: mywebsite.com/assets/css/bootstrap.min.css
  \- GET: mywebsite.com/modules/shared/web-components/item-list.js
Enter fullscreen mode Exit fullscreen mode

Files structure:

public
 \- assets
    \- images
    \- css
 \- modules
    \- admin
    \- customer
    \- shared
server.js
package.json
Enter fullscreen mode Exit fullscreen mode

So, I wrote a vercel.json file that takes all the request URLs without file extensions and pass them to the server.js file, while the request URLs that have a file extension (like .css, .js, .img) are taken as static calls to the public directory

{
  "name": "express-static-website",
  "version": 2,
  "public": true,
  "builds": [
    {
      "src": "server.js",
      "use": "@vercel/node"
    },
    {
      "src": "public/**",
      "use": "@vercel/static"
    }
  ],
  "routes": [
    {
      "src": "/((?!.*\\.\\w+$).*)",
      "dest": "/server.js"
    },
    {
      "src": "/(.+\\.[a-z]+)$",
      "dest": "/public/$1"
    }
  ]
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
sunny-unik profile image
Sunny Gandhwani •

I tried to apply the same settings with other src regex and struggled a lot but nothing worked till I tried your solution.

Thank You, so much bro 🙏

Collapse
 
chema profile image
José María CL •

I'm happy it helped you :)