nx-electron
nx-electron copied to clipboard
Packaged app not working for nextjs frontend project
I have read through and tried out the solutions in #18 but no success.
Steps to reproduce:
-
Create a nextjs app with
npx nx generate @nx/next:application --name=my-app --directory=apps/my-app
-
Create an electron app with
npx nx generate nx-electron:application --name=my-electron-app --frontendProject=my-app
-
Since my nextjs my-app runs on localhost:3000, I went to
apps\my-electron-app\src\app\constants.ts
and changedexport const rendererAppPort = 4200;
toexport 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:
What I have tried so far:
- In my-app's next.config.js, specify
{ output: "export" }
for nextconfig to serve static nextjs. In my-electron-appapps\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,
})
);
}
}
- Adding the following to my-app project.json:
{
"configurations": {
"development": {
"mode": "development",
"baseHref": "/"
},
"production": {
"mode": "production",
"baseHref": "./"
}
}
}
- 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?