CODEWITHSUNDEEP
node.jselectron
fedeteka
fedeteka

Reputation: 963

How to use Electron with an existing Express application

I read and tried samples like the one on https://github.com/frankhale/electron-with-express but still I don't understand how to convert an Express app into Electron

How can I use Electron with an existing Express application?

Take for example this Express application:

app.js

var express = require("express");
var app = express();

var request = require("request");

app.set("view engine", "ejs");

app.get("/", function(req, res) {
    res.render("search");
});

app.get("/results", function(req, res){
    var query = req.query.search;
    var url = "https://yts.am/api/v2/list_movies.json?sort=seeds&limit=15&query_term='" + query + "'";
    request(url, function(error, response, body){
        var data = JSON.parse(body);
        if(!error && response.statusCode == 200){
            //res.send(data["data"]["movies"][0]["title"]);
            res.render("results", {data: data});
            //["movies"][0]["title"]
        }
        else
        console.log(data);
    });
});

app.listen(process.env.PORT, process.env.IP, function(){
    console.log("IMDB server has started");
});

search.ejs

Search for a movie
    
<form action="results" method="GET">
    <input type="text" placeholder="search term" name="search">
    <input type="submit">
</form>

results.ejs

Results page
<ul>
    <% data["data"]["movies"].forEach(function(movie){ %>
        <li>
            <strong><%= movie["title"]%></strong> - <%= movie["year"]%>
        </li>
    <% }) %>
</ul>

<a href="/">Search again</a>

Upvotes: 7

Views: 19286

Answers (1)

user4639281
user4639281

Reputation:

In the Electron main.js file, you should require your app.js file to start the Express application, then create a new instance of BrowserWindow and load the URL that your Express application is listening on.

Note that you'll either have to hard code the IP and PORT in Electron, or export them from Express and import them into the Electron main.js script.

./main.js

const { BrowserWindow, app } = require('electron')
require('./app.js')

let mainWindow = null

function main() {
  mainWindow = new BrowserWindow()
  mainWindow.loadURL(`http://localhost:3000/`)
  mainWindow.on('close', event => {
    mainWindow = null
  })
}

app.on('ready', main)

./package.json

{
  "name": "your-app-name",
  "version": "1.0.0",
  "description": "A description of your application",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "repository": "https://github.com/link/to/repo",
  "keywords": [ "some","keywords" ],
  "author": "You",
  "license": "Your License",
  "dependencies": {
    "ejs": "^2.6.1", // required for your specific example where `ejs` package is used
    "electron": "^3.0.9",
    "express": "^4.16.4"
  }
}

Then you'll want to make sure that the node_modules directory is in the same directory as main.js and package.json.

Finally, you can start your Express/Electron application using:

> npm start

If your Express application is not in the same directory as Electron, you will have to set the views directory for express accordingly:

app.js

var path = require('path')
var request = require("request");
var express = require("express");
var app = express();

app.set('views', path.join(__dirname, '/views'));

...

Where /views is a directory relative to app.js that contains your views.

Upvotes: 23

Related Questions