Code Monkey home page Code Monkey logo

electron-with-express's Introduction

electron-with-express

A simple project demonstrating how to spawn an Express app from Electron as well as providing server logs directly in the Electron app.

Express App:

Express-App

Press CommandOrControl+Shift+L to show the server log:

Server-Log

How to run

  • npm install
  • npm run start

How to package

  • npm run pack

NOTE: This assumes electron-packager is installed globally

Author

Frank Hale <[email protected]>

Updated on: 8 February 2024

License

MIT - see LICENSE

electron-with-express's People

Contributors

dependabot[bot] avatar frankhale avatar haithamoumerzoug avatar m-kkhan avatar mastereva avatar minimallyexceptional avatar vzqzac avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

electron-with-express's Issues

electron-with-express rewrite

electron-with-express is getting a rewrite!!! The current code is showing it's age so things are going to change a bit and get much more modern. The current state of the rewrite is in the rewrite branch. There are some things that still need to be worked out but it's already working. I will need to take some time to update the README to make all the steps necessary to run this thing documented.

Here are the core things being used to modernize this code:

  • TypeScript
  • Next.js with custom Express Server
  • Socket.IO
    • An instance at the Express server so you can do things from your API level
    • An instance at the Electron main process so you can talk to that process if you need to
  • Material-UI

Rough edges / Things that will be fixed:

  • README doesn't have much info yet =(
  • Getting started. Cloning the repository and running this. There are some steps that need to be documented to make this easy.
  • Processes exiting cleanly when the app exits. Currently I am working pretty hard to figure this one out because this is vital in my opinion. Nobody wants to use an app that starts a bunch of processes and then leaves them hanging around when the app is quit. It's super annoying and something I really want to solve as quickly as possible.

how would you make this work on linux?

Hello this is exactly what I want but I want to run it on linux and I'm kind of an electron noob.

Has anyone already done that or know what changes I need to do in order to get it working.

Thanks

Security warnings

npm install gives

found 6 vulnerabilities (1 moderate, 4 high, 1 critical)
run npm audit fix to fix them, or npm audit for details

npm audit gives

                   === npm audit security report ===


                             Manual Review
         Some vulnerabilities require your attention to resolve

      Visit https://go.npm.me/audit-guide for additional guidance

Critical Prototype Pollution

Package handlebars

Patched in >=4.0.14 <4.1.0 || >=4.1.2

Dependency of hbs

Path hbs > handlebars

More info https://npmjs.com/advisories/755

High Prototype Pollution

Package handlebars

Patched in >=4.3.0

Dependency of hbs

Path hbs > handlebars

More info https://npmjs.com/advisories/1164

Moderate Denial of Service

Package handlebars

Patched in >=4.4.5

Dependency of hbs

Path hbs > handlebars

More info https://npmjs.com/advisories/1300

High Arbitrary Code Execution

Package handlebars

Patched in >=4.5.2

Dependency of hbs

Path hbs > handlebars

More info https://npmjs.com/advisories/1316

High Arbitrary Code Execution

Package handlebars

Patched in >=4.5.3

Dependency of hbs

Path hbs > handlebars

More info https://npmjs.com/advisories/1324

High Prototype Pollution

Package handlebars

Patched in >=4.5.3

Dependency of hbs

Path hbs > handlebars

More info https://npmjs.com/advisories/1325

found 6 vulnerabilities (1 moderate, 4 high, 1 critical) in 203 scanned packages
6 vulnerabilities require manual review. See the full report for details.
P

can´t scroll logs

HI, awesome project.
Is there a way to see the latest logs?
When window is complete I don´t know what is happening

Support both win32 and win64

I'm trying to create installers for both win32 and win64.
Which copy of node.exe should I copy? (32/64).

And how running npm install should be related to node version? (lets say my machine is win64 and I want to create installer which can be use be win32)

What is the best approach to treat this use case?

Express process is not killed if app closes before window has created

After starting electron app, In case:
Express process has spawned, Browser-window hasn't created yet and app has closed (signal or error) then
node-express process is not been killed (I can see the 'dangling' node process in Task-Manager)

This is how I'm starting the express process (not detached):

serverProcess = spawn(nodeDotExe, args, {
    cwd: app.getAppPath(),
    shell: true,
    env: process.env,
    windowsHide: true
})

Killing the app (just like the rewrite):

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

Catching process events (exit, SIGINT, SIGUSR1, SIGUSR2) didn't help.

Node server not running when built with asar

Hi,

I did insert the following lines of code:
const app = require('electron').remote.app; const node = spawn(".\\node.exe", ["./express-app/bin/www"], { cwd: app.getAppPath() });

Im running the following command to package:
electron-packager . --overwrite --platform=win32 --arch=x64 --prune=true --out=release-builds --version-string.CompanyName=CE --version-string.FileDescription=CE --version-string.ProductName=\"Electron Tutorial App\" --asar

When I run the program, the node server isnt starting..

When I'm running the following command ( no asar flag):
electron-packager . --overwrite --platform=win32 --arch=x64 --prune=true --out=release-builds --version-string.CompanyName=CE --version-string.FileDescription=CE --version-string.ProductName=\"Electron Tutorial App\"

It runs fine.. What im doing wrong?

Thank you in advance!

How to use ipcRenderer from Express?

How to use ipcRenderer from Express? Because I want to pass some Electron parameters to Express. For example: I want to pass the getAppPath path. Because I want to create a file in userPath. But from Express, I can't get userAppPath

How to build using electron-builder

How to use electron-builder to pack this app because using electron-packager there is a folder which contains all the code extracted from the asar. But using electron-builder there is only one package *.asar. Please provide details on how to pack with electron-builder.

Steps to run on OSX

The following steps worked for me:

  • Download node binaries for OSX and extract the file.
  • Copy the file called "node" into the root folder. There is no need of any other file (node.lib)
  • In index.html change the line
node = spawn(".\\node", ["./express-app/bin/www"], {

to

node = spawn("./node", ["./express-app/bin/www"], {
  • In package.json change the line
"start": ".\\node start-electron.js"

to

"start": "./node start-electron.js"

Cannot find node.dll

I have installed node, After that I have followed the instructions to run this app.

In step 3 it is mentioned that a copy of node.exe and node.dll should be copied in the root directory of project. So, I searched for Node.exe and Node.dll in the folder where I installed node.

I found Node.exe but I am unable to find node.dll.

The problem here is when I run the app, I can see a window. But it has a round progressbar. I don't get any content in short.

Sending messages to main process from express-app process

I followed your tutorial to use express server with electron application.
Is it possible to send message from express-process to renderer-process or/and main-process?

The problem I'm facing:
After electron-app started, there's a login screen, after successful authentication (username and password) cookie is created, then, for every API request I'm checking if cookie exists.

Tried to test it on the browser and everything is working well.
When I start the electron-app, it seems like the renderer and the main process doesn't know about the cookies.

I tried to pass the ipcRenderer object to the client code like this: https://stackoverflow.com/a/48506328/2274300 but it doesn't seems to work (window is undefined)

Electron version: 3.0.13
React version: 16.7.0

electron-packager build not starting express server.

Describe the bug
When running the application normaly from the command line everything works fine.

Once you make the changes to fit either the normal packaging or the ASAR packaging you will run into problems. After a bit of debugging I found out that the express server is not being started. I came to that conclusion because you can't access the usual routes through a normal webbrowser.

To Reproduce
Steps to reproduce the behavior:

  1. Pull the Code from the master branch
  2. Adjust the node and app variables based on the information in the readme
  3. Install electron-packager globaly or as dev dependency
  4. Run the build Script found in the readme (remove the asar flag if you adjusted your set up for a non asar build)
  5. Start the newly build application as admin or non admin user
  6. The Screen will be stuck on "Loading..." and the Command line is not accessible

Expected behavior
The Backend Server Should start. Allowing the frontend to get the routes from it.

Screenshots

Desktop (please complete the following information):

  • OS: Windows
  • Version 10

Additional context

After create exe jquery module not found is showin

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

  1. Go to '...'
  2. Click on '....'
  3. Scroll down to '....'
  4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

  • OS: [e.g. iOS]:-Windows
  • Version [e.g. 22]

Additional context
Add any other context about the problem here.
Everything working fine in vscode after crate exe node server is not started and Jquery not found.Please help
exe

Express / Electron Lifecycle flaw

The way it is currently working the Express server start up spawns Electron. While this works it's not ideal in my opinion for the following reason. Electron has no way to stop the Express server if Electron is closed. Instead we should fire up Electron and then spawn Express internally. This way when Electron is closed we can stop the Express server at the appropriate time.

I already have a working implementation of this and will upload it next week.

Question: Why use a html to load the server file?

Hello, i wonder why do you need to use a index.html to load the server.js file?

I'm trying to do something similar with nextjs but instead i'm loading the server on the main.js file.

It works in development mode, but not on the bundled version, and i don't know why.

Came here to ask to see your reasoning and see if it helps me

License mismatch between package.json and LICENSE

When looking through the repo I noticed that the license reported in the GitHub UI and present in the LICENSE is MIT, but the package.json still lists GPL-3.0.

I believe it was merely overlooked and may want to be made consistent.

server is still working after quitting the app

what about adding something like that?

main.js:

mainWindow.on('close', function() {
    mainWindow.webContents.send('stop-server');
});

index.html:

const {ipcRenderer} = require('electron');
...
ipcRenderer.on('stop-server' , function(event , data){
  node.kill('SIGINT');
});

No logging anymore

Hi there,

Thanks for this repo. It helped me out to get Express and Electron to work together.

You pushed a commit on the second of March (e50c752) which caused electron to not log anymore. It isn't showing page requests nor does it show console.log() and other debug functions in the terminal. Could you please help me out with why this is happening and how I can get these messages again?

Thanks in advance!

add mongodb to the app

i think it will be much better to add mongodb to the app, so that the project will demonstrate how to create a fullstack app with electron, which has transportable embedder db within exe package.

console.log() doesn't work

console.log() , window.console.log(), they don't work both in client-side js as well as in node. Is there some other logging implementation to be used? Cannot see any logs here.

Key binding for F1 (Server Log) doesn't work anymore

Originally when this started you could grab global key bindings to do various things. Sometime a while ago Keymaster stopped working. This isn't a problem with Keymaster. This is something that happened in Electron. Keybindings no longer work with respect to webviews so you can't open up the server log. It's a shame but I don't really feel like fixing it. If anyone does I'll accept a pull request.

Building the application with electron-builder, it doesn't work.

Building the application with electron-builder, it doesn't work.
After installing, when run the app it don't get done the load, and the api are not work on browser in localhost:3000.

Steps to reproduce the behavior:

  1. Install electron-builder
  2. Install de dist .exe
  3. run;

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.