How to run Express inside an Electron app

express_in_electron.md

How to run Express inside an Electron app

You can run your Express app very easily inside your Electron app.

All you need to do is to:

• place all the files of your Express app inside a new app folder in your_electron_app\resources\app
• reconfigure the app.js file
• refactor some relative pathes in your Express app

Configure app.js

You should start your Express app before opening a new BrowserWindow and the load a new mainWindow like this:

const express = require('./express'); //your express app

app.on('ready', function() {
  express();
  mainWindow = new BrowserWindow({
    width: 1280,
    height: 720,
    autoHideMenuBar: true,
    useContentSize: true,
    resizable: false,
  });
  mainWindow.loadURL('http://localhost:5000/');
  mainWindow.focus();

});

Refactor pathes

Pathes in Electron don't work the same way they do in your Express app.

You have to make them all from relative to absolute pathes first.

So instead of doing this:

app.set('views', '/client/views');
app.use(express.static(/client/dist/static));

you have to do this:

app.set('views', __dirname + '/client/views');
app.use(express.static(__dirname + '/client/dist/static'));

@rafayck the server has to be powered up all the time and with backup power, just like any web server! you can try it by tethering your phone and visiting the server address it should show it. if you are on linux open terminal on your Server and run ifconfigand look for "inet" this will show you the machines ip addresses

in my case thats http://192.168.15.103so if i want to access my laptop from another Pc or my mobile via my wifi router, i can simply type that in my mobile browser and boom! same for an electron App
which you should use from a different PC/mobilePhone to access your server. on windows run ipconfig. we are assuming that your Desctop/Laptop is wireless, but the same can be done if you will be wired

I am unable to understand how to use refactor paths. This is my code, how to modify it accordingly. Also, I am a beginner in electron JS.
app.use('/', require('./routes/index'));
app.use('/users', require('./routes/users'));

When you write const express = require('./express'); //your express app, does this means the .js file of my express project, in my case it is located in ./node_passport_login/app. How should I modify my code?

I had just created a simple React app + Express in Electron, when I run the scripts for dev express works perfectly. I only create a message on express server for test and a request on React an it works, but when I create the package for distribute, my express server is not working.

A current express / hbs / electron tutorial would be awesome. Seems hard to find searching on the webz. I have a shopping cart I have been working on in express that uses stripe for merchant transactions (many diff. api's) as well as a mongodb hosted that I would loveto wrap in Electron. I am very new to Electron and just trying to make sense of everything. Thanks for all the info thus far, take care - Rick

@EdmarPereira I am doing the same, were you able to run Electron App after the build?

I am trying to the same thing with NextJs. Instead of exporting the app as static html files, I am spinning up a local server and trying to achieve the same thing what next start does.

But it doesn't work once I bundle my app using electron-builder. Did you guys find anything?

Same here, Express + socket.io + react in my electron app, build doesn't work, but developpment mode is working

For me, the build was failing because one of the devDependency was not getting bundled, so I moved it to the dependencies and it started working.
Just build the app and run locally to see the error.

@dcooney
You can get a port that is available at production time by using the get-port-electron

How do I send the data from express app to main.js? For example, I use express to receive data to PORT 3000 in app.js. Now I send data from external device to PORT 3000 and I want to send that data to main.js. Is there a way to do this?

Yes, you can have a class that extends EventEmitter and just create a single instance of that class. Use this instance everywhere and listen to the event.

The second way: You can import a function into the file which has express Js from main.js which can be called to manipulates the data of main.js.

Yes, you can have a class that extends EventEmitter and just create a single instance of that class. Use this instance everywhere and listen to the event.

The second way: You can import a function into the file which has express Js from main.js which can be called to manipulates the data of main.js.

I will try the EventEmitter. Thank You

Starting express in a forked child process works great when you want to keep the main thread from freezing:

const { fork } = require("child_process");

  let ps;
  //...
  ps = fork(`${__dirname}/../out-tsc/server-app/main.js`, [], {
    cwd: `${__dirname}/../`,
  });

Starting express in a forked child process works great when you want to keep the main thread from freezing:

const { fork } = require("child_process");

  let ps;
  //...
  ps = fork(`${__dirname}/../out-tsc/server-app/main.js`, [], {
    cwd: `${__dirname}/../`,
  });

You are the man.

When I try to make a fetch() request I get a CORS violation. Not sure how to handle this locally.

When I try to make a fetch() request I get a CORS violation. Not sure how to handle this locally.

Enable CORS (https://expressjs.com/en/resources/middleware/cors.html

Starting express in a forked child process works great when you want to keep the main thread from freezing:

const { fork } = require("child_process");

  let ps;
  //...
  ps = fork(`${__dirname}/../out-tsc/server-app/main.js`, [], {
    cwd: `${__dirname}/../`,
  });

You are my hero. I've been looking for this for the last 12 hours. THANKS

Is it better to use fork or utilityprocess? https://www.electronjs.org/docs/latest/api/utility-process