bennymeg / nx-electron

Electron schematics for nrwl nx platform
Apache License 2.0
307 stars 82 forks source link

Packaged app not working for nextjs frontend project #292

Open knamnguyen opened 1 month ago

knamnguyen commented 1 month ago

I have read through and tried out the solutions in #18 but no success.

Steps to reproduce:

  1. Create a nextjs app with npx nx generate @nx/next:application --name=my-app --directory=apps/my-app

  2. Create an electron app with npx nx generate nx-electron:application --name=my-electron-app --frontendProject=my-app

  3. Since my nextjs my-app runs on localhost:3000, I went to apps\my-electron-app\src\app\constants.ts and changed export const rendererAppPort = 4200; to export const rendererAppPort = 3000;

At this point, If I run the my-app on a dev server and serve my-electron-app, the main window seems to load fine.

However, when I build my-app and then package my-electron-app, running the application file results in a blank window:   image

What I have tried so far:

  1. In my-app's next.config.js, specify { output: "export" } for nextconfig to serve static nextjs. In my-electron-app apps\poppy-electron\src\app\app.ts, adding reference to the default "out" folder like
  private static loadMainWindow() {
    // load the index.html of the app.
    if (!App.application.isPackaged) {
      App.mainWindow.loadURL(`http://localhost:${rendererAppPort}`);
    } else {
      App.mainWindow.loadURL(
        format({
          pathname: join(__dirname, '..', rendererAppName, 'out', 'index.html'),
          protocol: 'file:',
          slashes: true,
        })
      );
    }
  }
  1. Adding the following to my-app project.json:
{
"configurations": {
    "development": {
      "mode": "development",
      "baseHref": "/"
    },
    "production": {
      "mode": "production",
      "baseHref": "./"
    }
  }
}
  1. Adding the following to my-app next.config.js:
const isProd = process.env.NODE_ENV === 'production';

/**
 * @type {import('@nx/next/plugins/with-nx').WithNxOptions}
 **/
const nextConfig = {
  nx: {
    // Set this to true if you would like to use SVGR
    // See: https://github.com/gregberge/svgr
    svgr: false,
  },
  output: 'export',
  assetPrefix: isProd ? '.' : '',
};

How can I get nextjs to work with electron within nx?

juancarlosgzs commented 1 month ago

Were you able to fix this? I'm facing a similar issue but with Angular instead