-
-
Notifications
You must be signed in to change notification settings - Fork 90
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 #18
Comments
@ruohki I had a similar issue with an Angular frontend app. My issue was the default base href setting, in that project's index.html file, it's configured to:
The
Not sure about React frontend app, but it may be a similar system. |
Thing is it will change it back to /, you can however set baseHref in the option object of the workspace.json config for your react app, but this will break the dev build so its switching back and forth all the time |
Yeah, I have that issue with Angular frontend apps too, I often need a the "/" setting for dev mode and a different setting for the packaged app. I don't know what the "best practice" is, but I've approached this issue 2 ways before. The first way is to set the baseHref for a specific configuration in the angular.json/workspace.json: {
"projects": {
"my-app": {
"root": "apps/my-app/",
"sourceRoot": "apps/my-app/src",
"projectType": "application",
"prefix": "my-app",
"schematics": {
"@nrwl/schematics:component": {
"style": "scss"
}
},
"architect": {
"build": {
"builder": "@nrwl/builders:web-build",
"configurations": {
"production": {
"baseHref": "./"
}
}
}
}
}
}
} Then I can run:
The second way is to have a "build script" and pass the special baseHref as a CLI argument, something like:
I haven't built a react app in nx workspace before, but it looks like the configuration for baseHref works basically the same way as Angular apps. Sorry, these are just some made-up examples, hope it could help give some idea to get started. |
@patrick-entinux thanks for answering. I believe that issue is related to the frontend platform rather to 'nx-electron'. |
@bennymeg I mainly only have experience on the Angular side, so apologies if I've gotten something wrong, but let me try to explain:
Actually, after thinking about it, I don't know why in this case the "./" broke the development build. In general, for an SPA (single page application) targeted to Electron only, I believe you must use base href "./" and hash router in production. Usually the default is base href "/" and not hash routing, so you have to change this for an Electron-targeted app. In develop mode, it might not be necessary to use "./", but I think it should still generally be fine always, even if you access your frontend app directly in the browser. That said, I have has similar problems between develop/production in Ionic/Cordova based mobile apps, which also have some weirdness about urls, so maybe there is some situation I've missed? More info about routing/URL resolution in Electron apps: Usually, for an Angular or React SPA (single page application) targeted to the web, we use some routing solution like These tools take pretty urls like
Inside the index.html file are some lines to load some scripts:
These script sources depends on base href of "/" to resolve correctly:
If we use "./", on some pages it will try to load In Electron dev mode, we usually use the dev server for Angular or React, so we load from a URL like However in Electron production mode, we usually serve the files directly from the file system and cannot do any "magic" in the server layer. In other words, we can only load from So for an SPA targeted to Electron, we usually change our Router to use the simpler hash "#" system instead:
Actually if you use the hash router in the browser, I think it should basically always work:
Anyways, using the hash router solves the first problem of serving files in Electron. But there's also a second problem, the base href problem. If we still use "/" for the base href, then Electron starts trying to load the files from the root of our file system.
So to support Electron packaging, we have to use a base href setting of "./" AND use hash router for SPA (single page apps). Coming back to the question:
In my my opinion, yeah, frontend code in Electron apps does require some special configuration. However, I'm not sure that nx-electron package could do anything differently. Even if nx-electron tried to modify the build config of your frontend app, it seems really "magical" and maybe confusing. Maybe on the nx-electron side you could just suggest in the documentation to use base href "./" and the |
@patrick-entinux thank you for the elaborated explanation!
I agree.
I agree, that would be confusing. What I can do is create a schematics that configure both backend electron project and a frontend project (i.e. electron-angular, electron-react, etc...). I believe that would be a good solution and would be coherent with nx.
I will add a section about it to the documentation, and I will link it to your explanation since you have done a great job explaining it in details. |
For anyone who's struggling to get it working with NextJS - add
Furthermore, you'd want to do
I haven't explored much more the integration between the two, but the welcome page loads fine with all styles and scripts. The |
For NX 15 onwards, baseHref will be in project.json file for your React app. e.g.
|
For anyone struggling using the export default defineConfig({
root: __dirname,
base: './',
...
}); |
Describe the bug
After packaging the app (and running it) web windows stays empty.
To Reproduce
Steps to reproduce the behavior:
Desktop (please complete the following information):
Additional context
Using a React frontend app
The text was updated successfully, but these errors were encountered: