How I made a desktop application for my portfolio using electron JS

syedmurtjiz

Murtjiz Naqvi

Posted on November 25, 2024

How I made a desktop application for my portfolio using electron JS

1: First of all I am building my react app using npm run build
command.
2: After that I run npm i electron --save-dev command that's
installs Electron as a development need.
3: After that I run npm i cors express --save command that's
installs Express and CORS in your portfolio project.
4: After that i will create a electron-main.js file inside the
root and that's place after the src folder.you can view that
structure in the given image below
Image description
5: After that inserting that code -->

const { app, BrowserWindow } = require("electron");
const path = require("path");
const express = require("express");
const cors = require("cors");
const localServerApp = express();
const PORT = 8000;
const startLocalServer = (done) => {
  localServerApp.use(express.json({ limit: "100mb" }));
  localServerApp.use(cors());
  localServerApp.use(express.static('./build/'));
  localServerApp.listen(PORT, async () => {
    console.log("Server Started on PORT ", PORT);
    done();
  });
};

function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, "preload.js"),
    },
  });

  mainWindow.loadURL("http://localhost:" + PORT);

}

app.whenReady().then(() => {
  startLocalServer(createWindow);

  app.on("activate", function () {
    if (BrowserWindow.getAllWindows().length === 0) createWindow();
  });
});
app.on("window-all-closed", function () {
  if (process.platform !== "darwin") app.quit();
});
Enter fullscreen mode Exit fullscreen mode

6: After that inserting "electron": "electron ." that command
inside the script and inside the package.json file.you can
view it in the given image below:

Image description
7: Ater that inserting the "main" to point the electron-main.js
file in package.json.you can view it in the given image below:

Image description
8: After that i am running the electron desktop app by running
the npm run electron command in terminal. and that will show
my portfolio in electron desktop app.You can view it in the
given image below:

Image description

💖 💪 🙅 🚩
syedmurtjiz
Murtjiz Naqvi

Posted on November 25, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related