1

I am trying to start my new project with react and electronjs. I've already installed react-app with babel and web pack which works fine but now I am struggling to launch it with electron but without any luck :/. I looked at many articles about react and electron but there was no suggestions and real examples how to connect (react, web pack, babel, and electron) together.

electron-starter.js looks like that: 

const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;

const path = require('path');
const url = require('url');
const isDev = require('electron-is-dev');

let mainWindow;

function createWindow() {
    mainWindow = new BrowserWindow({width: 900, height: 680});
    mainWindow.loadURL(isDev ? 'http://localhost:3000' : `file://${path.join(__dirname, '../build/index.html')}`);
    mainWindow.on('closed', () => mainWindow = null);
}

app.on('ready', createWindow);

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

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

and package.json:

{
  "name": "hostelpro-app-2",
  "version": "0.1.0",
  "private": true,
  "homepage": "./",
  "main": "./electron-starter.js",
  "dependencies": {
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "react-scripts": "1.1.4"
  },
  "scripts": {
    "start": "webpack-dev-server --open --mode development",
    "build": "webpack --mode production",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "electron": "electron .",
    "electron-dev": "concurrently \"BROWSER=none npm start\" \"wait-on http://localhost:3000 && electron .\""
  },
  "babel": {
    "presets": [
      "env"
    ]
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^1.0.0",
    "electron": "^2.0.6",
    "foreman": "^3.0.1",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "node-sass": "^4.9.2",
    "prop-types": "^15.6.2",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.21.0",
    "webpack": "^4.16.3",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.5"
  }
}

right now the error message is: "'concurrently' is not recognized as an internal or external command", but if I delete 'concurrently' word from package.json then it "'BROWSER' is not recognized as an internal or external command" error occurs.

any suggestions will be helpful. Thank you! :)

Vano
  • 690
  • 3
  • 8
  • 25
  • 1
    "but without any luck" is a bit vague. Do you get an error? If so, what does it say? If not, what happens? Nothing at all? No indication as to what went wrong at all? Not an `electron` user, but are there any logs you can check? – s.m. Aug 03 '18 at 08:33
  • sorry to don't add error messages, I will correct. – Vano Aug 03 '18 at 08:39
  • Well, "X not recognized as an internal or external command" means that X is an executable that is being used assuming it either is in the current directory or in a directory included in the `%PATH%` environment variable, but actually could not be found in either place. Googling that exact error message takes you to [this answer](https://stackoverflow.com/questions/35811633/concurently-is-not-recognized-as-an-internal-or-external-command-operable-pro), did that not help you? – s.m. Aug 03 '18 at 10:06
  • @s.m. you were right, I've installed 'concurrently' and this error disappared, but now I have 'BROWSER' and 'wait-on' is not recognized errors. I will google those myself and I hope I will find something valuable,thanks : ) – Vano Aug 03 '18 at 11:21