Vercel config example

[gazpachu]

I've been searching up and down everywhere but can't find an example of how to setup a razzle app to be deployed in Vercel. I found this #900 and tried to modify it but still, the server.js doesn't seem to be loaded:

My vercel.json:

{
  "version": 2,
  "builds": [
    {
      "src": "package.json",
      "use": "@vercel/static-build",
      "config": { "distDir": "build" }
    },
    {
      "src": "build/public/**",
      "use": "@vercel/static"
    },
    {
      "src": "build/server.js",
      "use": "@vercel/node"
    }
  ],
  "routes": [
    { "src": "/favicon.ico", "dest": "build/public/favicon.ico" },
    { "src": "/robots.txt", "dest": "build/public/robots.txt" },
    { "src": "/static/(.*)", "dest": "build/public/static/$1" },
    { "src": "/(.*)", "dest": "build/server.js" }
  ]
}

What I see in the deployed app:

The vercel deployment log:

Cloning gitlab.com/....
Cloning completed in 1111ms
--
17:59:49.419 | Analyzing source code...
17:59:49.421 | Warning: Due to `builds` existing in your configuration file, the Build and Development Settings defined in your Project Settings will not apply. Learn More: https://vercel.link/unused-build-settings
17:59:50.313 | Installing build runtime...
17:59:50.717 | Build runtime installed: 404.347ms
17:59:51.122 | Looking up build cache...
17:59:51.230 | Build cache found. Downloading...
17:59:53.580 | Build cache downloaded [59.55 MB]: 2349.142ms
17:59:53.994 | Installing dependencies...
18:00:05.101 | up to date in 10.672s
18:00:06.009 | 84 packages are looking for funding
18:00:06.009 | run `npm fund` for details
18:00:06.066 | Running "npm run build"
18:00:06.272 | > project@0.0.0 build /vercel/workpath0
18:00:06.272 | > tsc -b && razzle build
18:00:17.650 | Using .babelrc defined in your app root
18:00:17.883 | Using .babelrc defined in your app root
18:00:17.897 | Creating an optimized production build...
18:00:17.897 | Compiling client...
18:00:25.906 | Compiled client successfully.
18:00:25.906 | Compiling server...
18:00:33.293 | Compiled server successfully.
18:00:33.293 | Compiled successfully.
18:00:33.293 | File sizes after gzip:
18:00:33.420 | 519.69 KB  build/public/static/js/bundle.fb7b7e17.js
18:00:33.420 | 220 B      build/public/manifest.json
18:00:33.420 | 109 B      build/chunks.json
18:00:56.376 | Uploading build outputs...
18:00:58.991 | Uploading build outputs...
18:00:58.998 | Done with static build
18:01:00.903 | Build completed. Populating build cache...
18:01:25.083 | Uploading build cache [59.55 MB]...
18:01:26.294 | Build cache uploaded: 1210.105ms
18:01:26.312 | Done with "package.json"

My src/index.tsx:

import express from 'express';

let app = require('./server').default;

if (module.hot) {
  module.hot.accept('./server', () => {
    console.log('🔁  HMR Reloading `./server`...');
    try {
      app = require('./server').default;
    } catch (error) {
      console.error(error);
    }
  });
  console.info('✅  Server-side HMR Enabled!');
}

const port = process.env.PORT ? parseInt(process.env.PORT, 10) : 3000;

export default express()
  .use((req, res) => app.handle(req, res))
  .listen(port, () => {
    console.log(`> App started http://localhost:${port}`);
  });

The express part of my src/server.tsx:

const server = express()
  .disable('x-powered-by')
  .use(express.static(path.join(__dirname, '../build/public')))
  .use(express.static(process.env.RAZZLE_PUBLIC_DIR!))
  .use(cookieParser())
  .get('/', routeHandler)
  .get('/*', routeHandler);

Relevant scripts from my package.json:

"scripts": {
 "build": "tsc -b && razzle build",
 "start": "concurrently --kill-others \"npm run start:tsc\" \"npm run start:razzle\"",
 "start:tsc": "tsc -w --incremental --preserveWatchOutput",
 "start:prod": "NODE_ENV=production node build/server.js",
 "start:razzle": "razzle start"
},

[izzuddinraffar]

@gazpachu do you found solution for this?

[gazpachu]

No. Vercel's support team said that Vercel is not meant to be used with an always-on express server. That's an anti-pattern. It's meant to be used with short-lived serverless functions.

Closing ticket.