Next.JS + pkg for a single executable binary

[barelyhuman]

I've got a project that has both the api routes and frontend built with next, it does use SSR for a few pages and wanted to convert it to a single binary with pkg.

I've seen posts around for the older version and they seem to work for those specific version but doesn't seem to work with the latest version on next.js

Posting this here because PKG doesn't have the discussions section.

What I tried

• Custom server + package.json (assets + scripts + folder I'm using for templates)

The Issue

Server starts but then the main pages/index.js is not rendered but pages/login/index.js get's rendered if I change the url manually.

Another thing is that email-templates has a login template that needs to sent , and that doesn't get imported when using a fs.readFileSync.
there might be more issues but since I get ahead of the login right now, not really sure what else will break

• I get these warnings

   > pkg@4.4.8
   > Warning Cannot resolve ''../../../../' + ({}[chunkId] || chunkId) + '.' + { '38': '33b7cd6372fb0dc60649' }[chunkId] + '.js''
     /Users/sid/code/barelyhuman/tillwhen-ui/.next/server/static/LWdrXOXfNKUc_pnERKIZX/pages/dashboard/timer.js
     Dynamic require may fail at run time, because the requested file
     is unknown at compilation time and not included into executable.
     Use a string literal as an argument for 'require', or leave it
     as is and specify the resolved file name in 'scripts' option.
   > Warning Cannot resolve ''../../../../../../../' + ({}[chunkId] || chunkId) + '.' + { '37': 'cd4330728d7cfef7300b' }[chunkId] + '.js''
     /Users/sid/code/barelyhuman/tillwhen-ui/.next/server/static/LWdrXOXfNKUc_pnERKIZX/pages/dashboard/projects/[id]/members/[userId].js
     Dynamic require may fail at run time, because the requested file
     is unknown at compilation time and not included into executable.
     Use a string literal as an argument for 'require', or leave it
     as is and specify the resolved file name in 'scripts' option.

• package.json

  "bin": "server.js",
  "scripts": {
    "dev": "node server.js",
    "build": "next build",
    "prestart": "npm run db:migrate",
    "start": "NODE_ENV=production node server.js ",
    "prepkg":"npm run build",
    "pkg": "pkg . --target host --out-path pkg"
  },
  "pkg": {
    "assets": [
      ".next/**/*",
      "public/**/*",
      "email-templates/**/*"
    ],
    "scripts": [
      ".next/**/*.js"
    ]
  },

• server.js

  const { createServer } = require('http');
  const { parse } = require('url');
  const next = require('next');
  
  const dev = process.env.NODE_ENV !== 'production';
  const app = next({ dev, dir: __dirname });
  const port = process.env.PORT || 3000;
  const handle = app.getRequestHandler();
  
  app.prepare().then(() => {
    createServer((req, res) => {
      handle(req, res, parse(req.url, true).pathname);
    }).listen(port, (err) => {
      if (err) throw err;
      console.log('> Ready on http://localhost:3000');
    });
  });

• email.js

      const loginTemplate = fs.readFileSync(
        __dirname + '/email-templates/login.html'
      );

• email-2.js

      const loginTemplate = fs.readFileSync(
       path.join( __dirname ,'email-templates/login.html');
      );

[barelyhuman]

Things Fixed

• Fixed the importing of html template problem by modifying the file to be a js file and exporting the HTML as a string , since I was unable to get the snapshot to import the folder for some reason

• The reason the pages weren't being rendered was because the binary wasn't able to compile them and made all of these to be statically compiled by adding a dummy getStaticProps and getStaticPaths as needed to the files.

Hope that helps someone else who's on the same path and stuck at it.

[white-room]

@barelyhuman have you been using this approach since 2020? hows it going?

[barelyhuman]

Unfortunately, I had to keep fighting with the build tool since the requirement was custom and moved the project to golang instead.

Write up on what was done to get it to work, the site is now down but the concept still applies
https://reaper.is/writing/status-vercel-and-how-did-it

A recent project (not hosted on vercel) but uses golang's embed library to handle similar situations
https://github.com/barelyhuman/notdone