how to build a standalone desktop app built with react, using a node backend, and wrap both frontend and backend in electron as a desktop app?

Question

As the title, I currently all 3 parts done individually. I have a react app, node/express server, and an electron wrapping the react app.

I aiming to wrap the react app and node server in Electron. the react app runs on localhost:3000, node running on localhost:8080, so i am not sure how the localhost part will work.

What I got working right now is when I individually run the react app and node server in dev, and then in electron open the mainWindow like this then it works.

  mainWindow = new BrowserWindow({ 
    width: 1100, 
    height: 1000, 
    webPreferences: {
      nodeIntegration: true,
      webSecurity: false
    }
  });
  mainWindow.loadURL("localhost:3000");

I also built the react app in build folder and the react build is fine when using an nginx server to serve it. but when I change the startUrl to be this the index.html shows a blank screen. I also noticed that if i open the index.html in chrome it is the same blank screen so it only works when there's a server to serve it.

  const startUrl = url.format({
pathname: path.join(__dirname, '../build/index.html'),
protocol: 'file:',
slashes: true,
  });
  console.log(startUrl)
  
  mainWindow = new BrowserWindow({ 
width: 1100, 
height: 1000, 
webPreferences: {
  nodeIntegration: true,
  webSecurity: false
}
  });
  mainWindow.loadURL(startUrl);

Any general directions or steps I should do to create this standalone app or is this even possible?

this is the index.html when I run the production build. it seems to have everything it should have for a react app but it's a blank screen

Answer 1

I figured out the solution. When wrapping electron using react, the react app has to use a hashRouter instead of browserRouter. For details checkout my other question: How to use React HashRouter for route query parameters?

Then to wrap the node server, put the node server folder as a dependency in React app folder's package.json. then run npm install to install it as an dependency. Then require the main starting file for node server in electron's starting file this starts the server.

Answer 2

Wow. That certainly seems interesting.

You can build the react app and then wrap Electron around it instead of running a react server. yarn build should do the trick if you are using create-react-app boilerplate.

You need to make sure the build path is correct. This is the reason why your built react app is empty in the Electron.

So, that all the variables are correctly being called from index.html. You can achieve this functionality by specifying "homepage":"./" in package.json. You will have to find out what path Electron for absolute reference. Or perhaps you can open a static endpoint for all files in build directory. You will have to figure that out. I have never worked with Electron. Check this. Here it says "homepage":"./" should work. https://medium.com/@brockhoff/using-electron-with-react-the-basics-e93f9761f86f

As for node server I am sure you must be making calls to the API endpoints you have written. If not you can do so using native Javascript. I personally prefer using axios.

import axios from 'axios';

async componentWillMount(){
    const result = await axios.get(localhost:8080/get)
    console.log(result)
    // You can now directly display result on the react app or save it save. 
    this.setState({result:result})
}

Axios Package: https://www.npmjs.com/package/axios