Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Packaged app not working for nextjs frontend project #292

Open
knamnguyen opened this issue May 24, 2024 · 1 comment
Open

Packaged app not working for nextjs frontend project #292

knamnguyen opened this issue May 24, 2024 · 1 comment

Comments

@knamnguyen
Copy link

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
Copy link

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

@bennymeg bennymeg pinned this issue Jun 1, 2024
@bennymeg bennymeg unpinned this issue Jun 1, 2024
# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants