title: How to integrate and run existing ReactJS Application in Electron
body: <p>For instance, I have an ReactJS application: <a href="https://iaya-664f3.firebaseapp.com/" rel="nofollow noreferrer">https://iaya-664f3.firebaseapp.com/</a>
  You can see in the HTML source the <code>bundle.js</code> file.</p>
  
  <p>I have tried to run this application as desktop application using Electron, which should launch this web application in chromium window but it is not working. </p>
  
  <h2>Following is my main React application file <code>app.js</code> sitting in root directory. However compiled files <code>bundle.js</code> and <code>index.html</code> are in <code>./public/</code>directory.</h2>
  
  <h2><code>./app.js</code><br></h2>
  
  <pre><code>import React, {Component} from 'react';
  import ReactDOM from 'react-dom';
  import { Router, Route, browserHistory } from 'react-router';
  import routes from './routes';
  
  import {Provider} from "react-redux";
  import { createStore, applyMiddleware } from 'redux';
  import ReduxPromise from 'redux-promise';
  import rootReducer from './reducers/index';
  
  const store = applyMiddleware(ReduxPromise)(createStore)(rootReducer);
  
  ReactDOM.render(  &lt;Provider store={store}&gt;
                      &lt;Router history={browserHistory}  routes={routes} /&gt;  
                  &lt;/Provider&gt; , 
  
                  document.getElementById('react-app'));
  </code></pre>
  
  <h2><code>./index.js</code></h2>
  
  <p>In this file I'm embedding my application to Electron to run in chromium.</p>
  
  <pre><code>var app = require("./app");
  var BrowserWindow = require("browser-window");
  
  // on electron has started up , booted up, everything loaded (Chromium ,goen, live)
  app.on("ready", function(){
      var mainWindow = new BrowserWindow({
          width:800,
          height:600
      });
      mainWindow.loadUrl("file://" + __dirname+ "/public/index.html");
  });
  </code></pre>
  
  <p>But this give some error on <code>import React from 'React'</code> line in my <code>./app.js</code>. </p>
  
  <p>So I assume that, I should only give <code>./public/index.html</code> file to load which includes the compiled <code>bundle.js</code>. But I wonder, how that will work as the line <code>app.on("ready", function(){</code> expect an <code>app</code>.</p>
  
  <p>Moreover I have also tried following way in <b><code>./index.js</code></b> but it gives some other error.</p>
  
  <pre><code>const electron = require('electron');
  
  // Module to control application life.
  const app = electron.app;
  
  // Module to create native browser window.
  const BrowserWindow = electron.BrowserWindow;
  
  const path = require('path');
  const url = require('url');
  
  // Keep a global reference of the window object, if you don't, the window will
  // be closed automatically when the JavaScript object is garbage collected.
  let mainWindow;
  
  function createWindow () {
      // Create the browser window.
      mainWindow = new BrowserWindow({width: 800, height: 600});
  
      // and load the index.html of the app.
      /*mainWindow.loadURL(url.format({
          pathname: path.join(__dirname, 'public/index.html'),
          protocol: 'file:',
          slashes: true
      }));*/
      mainWindow.loadURL("file://" + __dirname+ "/public/index.html");
  
      // Open the DevTools.
      mainWindow.webContents.openDevTools();
  
      // Emitted when the window is closed.
      mainWindow.on('closed', function () {
          // Dereference the window object, usually you would store windows
          // in an array if your app supports multi windows, this is the time
          // when you should delete the corresponding element.
          mainWindow = null;
      });
  }
  
  app.on('ready', createWindow);
  
  // Quit when all windows are closed.
  app.on('window-all-closed', function () {
      // On OS X it is common for applications and their menu bar
      // to stay active until the user quits explicitly with Cmd + Q
      if (process.platform !== 'darwin') {
          app.quit();
      }
  });
  
  app.on('activate', function () {
      // On OS X it's common to re-create a window in the app when the
      // dock icon is clicked and there are no other windows open.
      if (mainWindow === null) {
          createWindow();
      }
  });
  </code></pre>