Hi. I am working on an electron app. I use npm, and webpack. I have been following the guide here:
https://docs.flatpak.org/en/latest/electron.html
I get my app to build but when I run the app the contents of the electron window are empty. This, I believe is due to the webpack contents. I have found the flatpak-builder-tools github repository. I see the webpack-quick-start project in the node directory. This project uses yarn.
Is there a project or repository out there that explains making a flatpak package from electron and uses npm?
This is the url to my yaml file.
Thanks for your time.
here is an exerpt from my output when the app is run.
[3 preload-host-spawn-strategy] Running: /app/bin/zypak-helper child - /app/main/gpt-etc --type=zygote --enable-crashpad
libGL error: MESA-LOADER: failed to retrieve device information
[46:0306/102317.684665:ERROR:angle_platform_impl.cc(44)] renderergl_utils.cpp:496 (GenerateTextureFormatCaps): glGetInternalformativ generated error 0x00000500 for format 0x00008D62. Skipping multisample checks.
[46:0306/102317.684892:ERROR:angle_platform_impl.cc(44)] renderergl_utils.cpp:496 (GenerateTextureFormatCaps): glGetInternalformativ generated error 0x00000500 for format 0x0000906F. Skipping multisample checks.
[46:0306/102317.685104:ERROR:angle_platform_impl.cc(44)] Display.cpp:940 (initialize): ANGLE Display::initialize error 12289: OpenGL ES 2.0 is not supportable.
[46:0306/102317.685213:ERROR:gl_surface_egl.cc(808)] EGL Driver message (Critical) eglInitialize: OpenGL ES 2.0 is not supportable.
[46:0306/102317.685296:ERROR:gl_surface_egl.cc(1430)] eglInitialize OpenGL failed with error EGL_NOT_INITIALIZED, trying next display type
[46:0306/102317.686000:ERROR:angle_platform_impl.cc(44)] Display.cpp:940 (initialize): ANGLE Display::initialize error 12289: Could not create a backing OpenGL context.
[46:0306/102317.686103:ERROR:gl_surface_egl.cc(808)] EGL Driver message (Critical) eglInitialize: Could not create a backing OpenGL context.
[46:0306/102317.686186:ERROR:gl_surface_egl.cc(1430)] eglInitialize OpenGLES failed with error EGL_NOT_INITIALIZED
[46:0306/102317.686269:ERROR:gl_ozone_egl.cc(20)] GLSurfaceEGL::InitializeOneOff failed.
[46:0306/102317.688666:ERROR:viz_main_impl.cc(188)] Exiting GPU process due to errors during initialization
false here.
libGL error: MESA-LOADER: failed to retrieve device information
[69:0306/102317.804770:ERROR:angle_platform_impl.cc(44)] renderergl_utils.cpp:496 (GenerateTextureFormatCaps): glGetInternalformativ generated error 0x00000500 for format 0x00008D62. Skipping multisample checks.
[69:0306/102317.804926:ERROR:angle_platform_impl.cc(44)] renderergl_utils.cpp:496 (GenerateTextureFormatCaps): glGetInternalformativ generated error 0x00000500 for format 0x0000906F. Skipping multisample checks.
[69:0306/102317.805097:ERROR:angle_platform_impl.cc(44)] Display.cpp:940 (initialize): ANGLE Display::initialize error 12289: OpenGL ES 2.0 is not supportable.
[69:0306/102317.805168:ERROR:gl_surface_egl.cc(808)] EGL Driver message (Critical) eglInitialize: OpenGL ES 2.0 is not supportable.
[69:0306/102317.805216:ERROR:gl_surface_egl.cc(1430)] eglInitialize OpenGL failed with error EGL_NOT_INITIALIZED, trying next display type
[69:0306/102317.806001:ERROR:angle_platform_impl.cc(44)] Display.cpp:940 (initialize): ANGLE Display::initialize error 12289: Could not create a backing OpenGL context.
[69:0306/102317.806108:ERROR:gl_surface_egl.cc(808)] EGL Driver message (Critical) eglInitialize: Could not create a backing OpenGL context.
[69:0306/102317.806181:ERROR:gl_surface_egl.cc(1430)] eglInitialize OpenGLES failed with error EGL_NOT_INITIALIZED
[69:0306/102317.806268:ERROR:gl_ozone_egl.cc(20)] GLSurfaceEGL::InitializeOneOff failed.
[69:0306/102317.808346:ERROR:viz_main_impl.cc(188)] Exiting GPU process due to errors during initialization
libva error: vaGetDriverNameByIndex() failed with unknown libva error, driver_name = (null)
[91:0306/102317.841194:ERROR:sandbox_linux.cc(377)] InitializeSandbox() called with multiple threads in process gpu-process.
[57:0306/102317.848955:ERROR:command_buffer_proxy_impl.cc(125)] ContextResult::kTransientFailure: Failed to send GpuControl.CreateCommandBuffer.
(node:3) electron: Failed to load URL: file:///app/main/resources/app.asar/dist/index.html with error: ERR_FILE_NOT_FOUND
(Use `gpt-etc --trace-warnings ...` to show where the warning was created)
[3:0306/102318.034159:ERROR:interface_endpoint_client.cc(658)] Message 0 rejected by interface blink.mojom.WidgetHost
I think that one crucial line from the output is:
(node:3) electron: Failed to load URL: file:///app/main/resources/app.asar/dist/index.html with error: ERR_FILE_NOT_FOUND
There is, in the ‘dist’ folder, an ‘index.html’ file. I tried making a link to that file, and later a link to the dir (‘dist’) but it did not work.
you probably need --device=dri in the finish-args
That’s great. Thanks. This cuts out a lot of the messages. Here again is my output when the app is run.
[3 preload-host-spawn-strategy] Running: /app/bin/zypak-helper child - /app/main/gpt-etc --type=zygote --enable-crashpad
[45:0306/141310.425242:ERROR:sandbox_linux.cc(377)] InitializeSandbox() called with multiple threads in process gpu-process.
(node:3) electron: Failed to load URL: file:///app/main/resources/app.asar/dist/index.html with error: ERR_FILE_NOT_FOUND
(Use `gpt-etc --trace-warnings ...` to show where the warning was created)
Again this line stands out. The line from the output is:
(node:3) electron: Failed to load URL: file:///app/main/resources/app.asar/dist/index.html with error: ERR_FILE_NOT_FOUND
Thanks for your response.
I think flatpak uses the dev folder, while I used the ‘dev’ folder for my index.html and other files. I changed the vue.config.js file so that it looked like this. Then my vue used another folder, called ‘out’ and flatpak found the index.html file. I also had to edit the /main.js file so that it looked for the index file in the right place.
const path = require("path");
module.exports = {
publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
outputDir: "./out/",
indexPath: path.resolve(__dirname, "out", "index.html")
}
thanks for your time.
