Menu
I have been able to successfully run express within the electron app via repositories such as
https://github.com/theallmightyjohnmanning/electron-express
https://github.com/frankhale/electron-with-express
However, I was advised not to do so due to the GNU GENERAL PUBLIC LICENSE that they impose. I am trying to create a commercial app that will monetize. Hence, a liscene like MIT might do, but not sure about GNU.
Anyhow, I have been trying to follow his procedure: https://gist.github.com/maximilian-ruppert/a446a7ee87838a62099d
But is running into some issues. Heres what I have done so far.
# Clone the Quick Start repository
$ git clone https://github.com/electron/electron-quick-start
# Go into the repository
$ cd electron-quick-start
# Install the dependencies and run
$ npm install && npm start
Then to get express
$ express myapp
$ cd myapp
$ npm install
renamed myapp to just app
and now I am stuck at the part where i need to configure the electron main.js file or/and the render index.html file to link to the express app and have that run instead of the index.html
Any help would be appreciated.
I am running on windows 10.
996
Although you need Node. js installed locally to scaffold an Electron project, Electron does not use your system's Node. js installation to run its code. Instead, it comes bundled with its own Node.
Electron node integration refers to the ability of accessing Node. js resources from within the “renderer” thread (the UI). It is enabled by default in Quasar CLI, although Electron is encouraging developers to turn it off as a security precaution.
Packaging an Express Application in Electron
Firstly install electron in your app
npm install --save electron
Create an index.html file which contains your express application
We need a top level file which will load in our express application. If you are not using a module bundler like Webpack then simply import all the html, cs and js files that your app is dependent on into this index.html file.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>QuickMap</title>
<link href='public/css/boostrap.min.css' rel='stylesheet'>
<link href='public/css/layout.css' rel='stylesheet'>
</head>
<body>
<div id='root' />
<script src='public/js/appBundle.js' type='text/javascript'></script>
<script src='public/js/bootstrap.min.js' type='text/javascript'></script>
<script src='public/js/jquery-3.1.1.min.js' type='text/javascript'></script>
</body>
</html>
Make sure that this index.html files imports everything you need for your app to run -i.e all the necessary html, css, js and other files. Remember to include any external files that your app needs such as jQuery which we loaded in the example above.
An Aside - Packaging an Electron app that uses Webpack
In this example our entire Express app is represented by a Webpack bundle which is loaded by index.html.
Remember that you don't need to use Webpack to package Express apps with Electron. Just make sure that index.html loads in all the files you need that will launch your express application.
If you are using Webpack your bundle should be imported in this index.html file.
Here is an example index.html file that imports the webpack bundle which contains our express app.
Now create the electron config file in your project root that loads the index.html containing your Express app
Here is the main file that electron will use to launch itself. Al electron related configuration and the link to our express app (through importing the Webpack bundle) is contained here.
Note the file below belongs in our root project directory and is comprised mainly of boilerplate from the Electron quick start guide with the exception of the line explained above that imports our index.html file which loads the entire application.
main.js
const {app, BrowserWindow} = require('electron')
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 win
function createWindow () {
// Create the browser window.
win = new BrowserWindow({width: 800, height: 600})
// and load the index.html of the app.
win.loadURL(url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
}))
// Open the DevTools.
win.webContents.openDevTools()
// Emitted when the window is closed.
win.on('closed', () => {
// 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.
win = null
})
}
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow)
// Quit when all windows are closed.
app.on('window-all-closed', () => {
// On macOS 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', () => {
// On macOS 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 (win === null) {
createWindow()
}
})
// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.
The following line loads our index.html we created earlier which points our electron instance to the entry point of our application.
mainWindow.loadURL(`file://${__dirname}/index.html`)
Change the start script in your package.json to launch electron
"scripts": {
"start": "ENV=development electron .",
},
Now when we run
npm start
Electron will automatically look for and run the main.js file in our project root.
183
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
