Skip to content
New issue

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

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

Already on GitHub? Sign in 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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants