#How can I prevent the react application from launching in the browser?

18 messages · Page 1 of 1 (latest)

fast breach
#

Hi, I'd like to know how I can prevent my react app from starting in the web browser and leaving it in the electron application?

#

I currently launch my application like this:

const { app, BrowserWindow } = require('electron');
const isDev = require('electron-is-dev');
const path = require('path');

let mainWindow;
let loadingWindow;

function createLoadingWindow() {
  loadingWindow = new BrowserWindow({
    width: 400,
    height: 300,
    frame: false,
    transparent: true,
    alwaysOnTop: true,
    webPreferences: {
      nodeIntegration: true,
    },
    show: false, // Masquer la fenêtre de chargement au départ
  });

  loadingWindow.loadFile('loading.html'); // Créez un fichier HTML pour la fenêtre de chargement
}

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
    },
    show: false, // Masquer la fenêtre principale au départ
  });

  mainWindow.loadURL(
    isDev
      ? 'http://localhost:3000' // URL de développement
      : `file://${path.join(__dirname, '../build/index.html')}` // URL de production
  );

  mainWindow.on('closed', () => {
    mainWindow = null;
  });
}

app.on('ready', () => {
  createLoadingWindow();

  // Une fois que la fenêtre de chargement est prête, affichez-la
  loadingWindow.once('ready-to-show', () => {
    loadingWindow.show();
    // Ensuite, chargez la fenêtre principale
    createWindow();

    // Écoutez l'événement 'ready-to-show' de la fenêtre principale
    mainWindow.once('ready-to-show', () => {
      mainWindow.show(); // Affichez la fenêtre principale lorsque tout est prêt
      loadingWindow.hide(); // Cachez la fenêtre de chargement
    });
  });
});

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  if (mainWindow === null) {
    createWindow();
  }
});
#

And package.json:

"scripts": {
    "start": "react-scripts start",
    "electron": "electron main.js",
    "dev": "npm-run-all -p electron start",
    "build": "react-scripts build",
    "eject": "react-scripts eject"
  },
keen knoll
#

use an env variable

#

BROWSER=false

fast breach
keen knoll
#

might not work on Windows

fast breach
keen knoll
#

because you need to use something like cross-env to make it work like this

fast breach
#

I'll give it a try, thanks for the information!

keen knoll
#

otherwise you can use a .env file

fast breach
#

Can you recommend a .env pu cross-env?

keen knoll
#

what?

fast breach
#

Would you recommend a .env or cross-env?

keen knoll
#

humm, with the .env you don't need the extra dependency, and it's useful if you want to set other variables. But it's up to you

#

I was using both when I was still on CRA 🤷‍♀️