CODEWITHSUNDEEP
javascriptreactjselectron
Mahmoud Mousa Hamad
Mahmoud Mousa Hamad

Reputation: 687

electron-react-boilerplate splash screen

I have an electron app that was instantiated using the electron-react-boilerplate. I would like to add a splash screen. Namely, I have the following piece of code:

splash = new BrowserWindow({
        icon: getAssetPath("icon.png"),
        transparent: true,
        alwaysOnTop: true,
        frame: false,
        height: 600,
        width: 800,
    });

splash.loadURL(resolveHtmlPath("splash.html"));

Where resolveHtmlPath is defined by the following code:

let resolveHtmlPath: (htmlFileName: string) => string;

if (process.env.NODE_ENV === "development") {
    const port = process.env.PORT || 1212;
    resolveHtmlPath = (htmlFileName: string) => {
        const htmlUrl = new URL(`http://localhost:${port}`);
        htmlUrl.pathname = htmlFileName;
        return htmlUrl.href;
    };
} else {
    resolveHtmlPath = (htmlFileName: string) => {
        const myurl = url.format({
            pathname: path.resolve(__dirname, "../renderer/", htmlFileName),
            protocol: "file:",
            slashes: true,
        });
        return myurl;
    };
}

I know that electron-react-boilerplate builds the react app during packaging and creates an html index.html file that is served to the renderer process. Now, I would like to create something similar but for a splash page called splash.html

Upvotes: 0

Views: 1028

Answers (1)

Lansana Diomande
Lansana Diomande

Reputation: 294

if you are using electron-builder, you can make this like me.

In package.json file, i add extra-ressources like this:


  "build": {
    "productName": "exemple",
    ... 
    "extraResources": [
      "./assets/**",
      "./splash/**",
    ]
  },
...

All folders in extra-ressources, are available in ressources folder when your application is packaged. docs

In the main.ts, i am using the tenary operator to verify if my application is packaged and after that, i am getting the path of my splash screen.


const splash = new BrowserWindow({
    width: 1024,
    height: 728,
    movable: true,
    center: true,
    icon: getAssetPath('icon.png'),
    transparent: true,
    frame: false,
  });

  const splashScreenSrc = app.isPackaged
    ? path.join(process.resourcesPath, 'splash', 'splash.html')
    : path.join(__dirname, '../../splash', 'splash.html');

  splash.loadFile(splashScreenSrc);

Upvotes: 2

Related Questions