How I made a desktop application for my portfolio using electron JS
Murtjiz Naqvi
Posted on November 25, 2024
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
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();
});
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:
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:
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:
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
November 27, 2024