Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
How to run Express inside an Electron app

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() {
  mainWindow = new BrowserWindow({
    width: 1280,
    height: 720,
    autoHideMenuBar: true,
    useContentSize: true,
    resizable: false,


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');

you have to do this:

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

AshwinKR commented Jun 15, 2016

If I load up HTML content via an Express server embedded in the Electron app, then does the HTML source have access to node.js functionality? I just started experimenting with Electron and my understanding is that loadUrl("file://...") is very different from loadUrl("http://...") in that the former facilitates access to node.js functionality while the latter is serving up HTML as with any web server, which cannot do any server side JS (node.js code).

Copy link

kaluabentes commented Dec 5, 2016

No, absolutely not, the Node.js functionality works well, but one thing you must know is: all of the JavasScript code written in a Electron app will work properly with Node.js even using a server to load the initial file and handling requests, but if you just has tried to using Node.js functionality in AngularJS templates so you will have problems, of course, because AngularJS templates will be compiled by AngularJS and the same with others engines and AngularJS and others Front-End Template engines don't know Node.js code, so if you want to use some data generated by Node.JS in html templates you will must use a template engine like AngularJS provides one, then you will need to bind the data in variable scope and then use it in AngularJS template in question (AngularJS template case), I did tests with only AngularJS templates and using the variable scope binding aproach i could work nicely.

$scope.nodeVersion = process.versions.node


<p>{{ nodeVersion ]}</p>



Copy link

corvinrok commented Feb 27, 2017

The problem with this approach is that you are putting your Express server on the same process as the Electron main process (while the browser window is on the render process). This is fine for very simple apps that have no significant work on the server side, other than pushing a few files to the browser. But it will absolutely hang the main process (which manages the electron shell, border and menus) when you have significant server work going on.

This is not a solution if you have any strenuous work to be done in your express server. This is ironic, and basically an antagonistic way of using Electron, since it goes against the architecture of node. That is, by running the server inline with the electron main process (the express server could be doing anything such as file conversions, extensive i/o, etc : basically anything blocking), you are running electron against what is normally a primary benefit of using nodejs at all-- to run I/O calls as async so that you don't hang on such requests.

If you are going to spin up a server in Electron, you should do so on another process.. not run that server on the main Electron process, or its render process. You should launch a separate process for your server (spawn/exec/execFile or a new BrowserWindow loaded as headless, I suppose), so it is unhinged from your Electron operation. That all said, there are very few concise and clear examples of proper use of any of these separate process launchers working- at least, I can find few that work for this application that run on Windows. Most of the examples out there seem to run well on Linux, but not on Windows. One article online (at ) suggests using the var backgroundWindow = new BrowserWindow({show: false}) approach , but this is not clear how to run a server script in a browser window (even headless) context.

Copy link

kikill95 commented Jun 6, 2017

In electron you can create different windows, I did 2 windows:

mainWindow = new BrowserWindow(windowOptions)
mainWindow.loadURL(path.join('file://', __dirname, `/electron/views/preview.html?ip=${config.ip}&port=${config.port}`))


hiddenWindow = new BrowserWindow({show: false})
hiddenWindow.loadURL(path.join('file://', __dirname, '/electron/views/server.html'))

In the first mainWindow a load html-page and with query params looking for the server running on http://${config.ip}:${config.port}
On the second hiddenWindow I just have <script type="text/javascript" src="../../server.js"></script>
I am running a server there. So for my particular case this did a trick

Copy link

dcooney commented May 30, 2018

A bit of an aside question, but how would you handle http://localhost:5000 URLs in the file production bundle?
Say my app runs 100% locally to the users machine, what URL would Express want to use for the server?

Assigning :5000 might not work if other apps are using this port.

Copy link

rafayck commented Nov 23, 2018

When the electron app is build using electron-packager. The app is blank as the server is not running. i want to run my app in a different machine without having to run the server all the time (which is the point). How can i keep the server running.

Copy link

devyaz commented Nov 27, 2018

@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 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

Copy link

qasim911 commented Jun 8, 2019

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?

Copy link

EdmarPereira commented Jun 27, 2019

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.

Copy link

rickco75 commented Sep 22, 2019

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

Copy link

lokeshjain2008 commented Jan 9, 2020

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

Copy link

ashish-1689 commented Sep 6, 2020

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?

Copy link

Aymeriic commented Sep 24, 2020

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

Copy link

ashish-1689 commented Sep 24, 2020

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.

Copy link

Brijeshlakkad commented Dec 12, 2020

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

Copy link

skandonkumar commented Mar 17, 2021

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?

Copy link

Brijeshlakkad commented Mar 17, 2021

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.

Copy link

skandonkumar commented Mar 17, 2021

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment