- User can add repository link
- User can delete all repository link
- User can delete single respository from the list/box
- User can close the app
-
Download or Clone the Project
-
then run two command
npm install
npm start
- At first, we need to make a package.json file . use this command
npm init - Install necessary packages for the work
npm install --save electron
- replace this script line code from
package.jsonfile. for running the project
{
"scripts": {
"start": "electron ."
}
}- Make a gitignore file by taking help from (gitignore.io)
- Create a file called
main.jsand put below code
const electron = require("electron");
const url = require("url");
const path = require("path");
const { app, BrowserWindow } = electron;
let mainWindow;
app.on("ready", () => {
mainWindow = new BrowserWindow({});
});- Now load a html file to the mainWindow
- Make a directory called
staticand make a filemainWindow.htmlinto that directory
<!DOCTYPE html>
<html lang="en">
<head>
<title>Repository Box</title>
</head>
<body>
<h1>Repository Box</h1>
</body>
</html>- Now we need to implement this
mainWindow.htmlfile to themain.jsfile
const electron = require("electron");
const url = require("url");
const path = require("path");
const { app, BrowserWindow } = electron;
let mainWindow;
app.on("ready", () => {
mainWindow = new BrowserWindow({});
// Load the mainWindow.html file
mainWindow.loadURL(
url.format({
pathname: path.join(__dirname, "./static/mainWindow.html"),
protocol: "file",
slashes: true,
})
);
});- try to run the
npm startcommand we will get main window open
- Lets make a custom menu bar
const mainMenuTemplate = [
{
label: "File",
submenu: [
{
label: "Add Repository",
click() {
createAddWindow();
},
},
{
label: "Clear Repository",
},
{
label: "Quit",
accelerator: process.platform == "darwin" ? "Command+Q" : "Ctrl+Q",
click() {
app.quit();
},
},
],
},
];- Lets create a
createAddWindowfunction task
let addWindow;
function createAddWindow() {
addWindow = new BrowserWindow({
width: 300,
height: 200,
title: "Add Repository To The Box",
webPreferences: {
nodeIntegration: true,
contextIsolation: false,
},
});
// Load Html file to the window
addWindow.loadURL(
url.format({
pathname: path.join(__dirname, "./static/addWindow.html"),
protocol: "file",
slashes: true,
})
);
//Garbage Collection handle
addWindow.on("close", function () {
addWindow = null;
});
}- handleing OS level developer tools and sections
if (process.platform == "darwin") {
mainMenuTemplate.unshift({});
}
// Add developer tools item if not in prod
if (process.env.NODE_ENV !== "production") {
mainMenuTemplate.push({
label: "Developer Tools",
submenu: [
{
label: "Toggle DevTools",
accelerator: process.platform == "darwin" ? "Command+I" : "Ctrl+I",
click(item, focusedWindow) {
focusedWindow.toggleDevTools();
},
},
{
role: "reload",
},
],
});
}-
Lets pass our repo link from
addWindowtomainWindowusingvanillajsandipcrenderer -
at first we have to open the
static/addWindow.htmland add below code there
<script>
const electron = require("electron");
const { ipcRenderer } = electron;
const form = document.querySelector("form");
form.addEventListener("submit", submitForm);
function submitForm(e) {
e.preventDefault();
const repo = document.querySelector("#repo").value;
ipcRenderer.send("repo:add", repo);
}
</script>- after that we have to catch that submitted data using
ipcrenderer
ipcMain.on("repo:add", function (e, repo) {
console.log(repo);
mainWindow.webContents.send("repo:add", repo);
addWindow.close();
});- lets show that
ipcrendererdata to ourstatic/mainWindow.htmlfile
<ul></ul>
<script>
const electron = require("electron");
const { ipcRenderer } = electron;
const ul = document.querySelector("ul");
ipcRenderer.on("repo:add", function (e, repo) {
const li = document.createElement("li");
const repoText = document.createTextNode(repo);
li.appendChild(repoText);
ul.appendChild(li);
});
</script>- lets clear the Repo from the box.
- for doing this we have to create an event from
main.jsfile
{
label: 'Clear Repository',
click(){
mainWindow.webContents.send('repo:clear');
}
},- now we have to catch that event to our
static/mainWindow.htmlfile
<script>
// Clear Repo
ipcRenderer.on("repo:clear", function () {
ul.innerHTML = "";
});
</script>- if we want to remove Repo but double click on it
<script>
ul.addEventListener("dblclick", removeRepo);
function removeRepo(e) {
e.target.remove();
}
</script>-
lets design our application with
materializecss -
at first add the cdn from materialize website to
static/addWindow.htmlandstatic/mainWindow.html
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"
/>-
Now lets start to design our project
-
Check the
commitofe10680ba7bc0ccdb01eaf38d98fb708632a1f2b8the project and we can get the Idea how to make this project interactive to user !
- Finally we have to install electron packager for making the OS required files for running this application
npm install --save-dev electron-packager
- follow this link for doing this task https://www.christianengvall.se/electron-packager-tutorial/