Electron app webpack example with npm

1

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.

2

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.

3

you probably need --device=dri in the finish-args

4

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.

5

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.