Example For Electron w/ SSR and API Page Routes Support

[tayloraucoin]

Describe the feature you'd like to request

Hey Next.js team!

Amazing framework. Really happy with the developer experience overall.

Looking to see if it would be possible to get an example put together on how to use Electron.js with SSR/API Page Route Support.

The first question in that is, can it be done? After some research there does not seem to be any examples of such.

I see that there is an example for Electron.js/TypeScript here: https://github.com/vercel/next.js/tree/master/examples/with-electron-typescript and the Nextron repo here: https://github.com/saltyshiomix/nextron

But those don't appear to cover the server-side features that Next.js provides. Am I wrong in that assessment?

If this kind of support does not currently exist, a suggestion towards that solution could be that instead of hosting the API Routes/Server level in the Electron app, you instead provide a way to connect it your running Web app version of the Next app server. That way it can remain more static and utilize the already running web-server.

Are there any other alternatives out there than Electron that may cover this use-case?

Thank you for your time!

Cheers

Describe the solution you'd like

Example repo of a working Electron.js integration with Next.js, that supports SSR and API Page route support (so our server routes are available for requests).

As mentioned above, a solution, if not already supported, could be to make the running web-app's server available by the Electron app.

Describe alternatives you've considered

No other alternatives seem practical. A low-budget solution would probably just be an native app that redirects to the web-app. Resources aren't available to build out something more comprehensive if Electron integration isn't possible.

[kmturley]

It is possible using a custom server:
https://nextjs.org/docs/advanced-features/custom-server

You can follow these steps to create one:

1. Clone the Electron Next TypeScript example repo:
   https://github.com/vercel/next.js/tree/canary/examples/with-electron-typescript

2. Update ./electron-src/index.ts with the following code:

import isDev from 'electron-is-dev';
import { createServer } from 'http';
import next from 'next';
import { parse } from 'url';

app.on('ready', async () => {

  // Use server-side rendering for both dev and production builds
  const nextApp = next({
    dev: isDev,
    dir: app.getAppPath() + '/renderer'
  });
  const requestHandler = nextApp.getRequestHandler();

  // Build the renderer code and watch the files
  await nextApp.prepare();

  // Create a new native HTTP server (which supports hot code reloading)
  createServer((req: any, res: any) => {
    const parsedUrl = parse(req.url, true)
    requestHandler(req, res, parsedUrl)
  }).listen(3000, () => {
    console.log('> Ready on http://localhost:3000')
  })

  mainWindow.loadURL('http://localhost:3000/')

3. Update ./package.json Electron build configuration to include the renderer src files:

  "build": {
    "asar": true,
    "files": [
      "main",
      "renderer"
    ]
  }

4. In ./package.json move next from devDependencies to dependencies. This means it will be available to run in production builds
   Then use helpful scripts to unpack the binary and see the files/folder inside:

npx asar extract ./dist/mac/ElectronTypescriptNext.app/Contents/Resources/app.asar ./dist/unpack

5. Run the unpacked version to debug:

./node_modules/.bin/electron ./dist/unpack

I have created both Express and NextJS versions to prove it is possible:
https://github.com/kmturley/electron-server/tree/feature/express
https://github.com/kmturley/electron-server/tree/feature/next

[kmturley]

You can use a TypeScript to JavaScript converter:
https://transform.tools/typescript-to-javascript

[qqpann]

This didn't work for me in latest versions.

[aguillenv]

This didn't work for me in latest versions.

Same for me. Have you been able to find a workaround @qqpann?

[spa5k]

were you guys able to make it work with app router?

[shubhamkclariont]

I'm looking for some solution wrt app router

[spa5k]

NVM, I was able to make it work with app router, check here - https://github.com/spa5k/nextjs_approuter_electron

[nandorojo]

Thanks for sharing this! I left some comments with questions about it.