Skip to content

Commit

Permalink
✨ Better template with electron 17.1
Browse files Browse the repository at this point in the history
  • Loading branch information
barbarbar338 committed Feb 26, 2022
1 parent 8887a94 commit a6526eb
Show file tree
Hide file tree
Showing 34 changed files with 6,324 additions and 6,410 deletions.
2 changes: 1 addition & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@

# production
/build
/dist

# misc
.DS_Store
Expand All @@ -22,3 +21,4 @@
npm-debug.log*
yarn-debug.log*
yarn-error.log*
dist
3 changes: 3 additions & 0 deletions .prettierignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
build
dist
node_modules
9 changes: 9 additions & 0 deletions .prettierrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
{
"tabWidth": 4,
"useTabs": true,
"bracketSpacing": true,
"singleQuote": false,
"endOfLine": "crlf",
"trailingComma": "all",
"semi": true
}
675 changes: 671 additions & 4 deletions LICENSE

Large diffs are not rendered by default.

10 changes: 8 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,11 +1,13 @@
# ⚛ Electron - React Template With Router
# ⚛ Electron - React - TailwindCSS Template With Router

A very simple and functional template for you to use Electron and React together.
A very simple and functional template for you to use Electron, React and TailwindCSS together.

# 🎀 Features

- Use React for creating interfaces
- Use `react-router-dom` for routing
- Use TailwindCSS for styling
- Basic functions are ready to use such as creating tray icon, creating notifications etc.

# 🤓 Insatllation

Expand All @@ -17,3 +19,7 @@ A very simple and functional template for you to use Electron and React together
# 🧦 Contributing

Fell free to use GitHub's features.

# 📄 Copyrights

Copyrights for `public/favicon.ico`, `public/icon.ico` and `public/icon.png` are owned by [Brawlhalla, Blue Mammoth Games](https://www.brawlhalla.com/)
85 changes: 49 additions & 36 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,66 +1,64 @@
{
"name": "electron-react-starter-template",
"version": "0.1.0",
"private": true,
"name": "electron-react-tailwind-template",
"author": {
"email": "demirci.baris38@gmail.com",
"name": "Barış DEMİRCİ",
"url": "https://bariscodes.me/"
"url": "https://338.rocks"
},
"description": "⚛ Electron app template with react and router.",
"license": "MIT",
"description": "Electron app template with React and Tailwind CSS",
"repository": {
"type": "git",
"url": "https://github.com/barbarbar338/electron-react-template"
"url": "https://github.com/barbarbar338/electron-react-tailwind-template"
},
"license": "GPL-3.0",
"version": "1.0.0",
"private": true,
"devDependencies": {
"@types/node": "^12.0.0",
"@types/react": "^17.0.0",
"@types/react-dom": "^17.0.0",
"@types/react-router-dom": "^5.1.7",
"concurrently": "^6.0.1",
"@types/node": "^17.0.21",
"@types/react": "^17.0.39",
"@types/react-dom": "^17.0.11",
"@types/react-router-dom": "^5.3.3",
"autoprefixer": "^10.4.2",
"concurrently": "^7.0.0",
"cross-env": "^7.0.3",
"electron": "^12.0.2",
"electron-builder": "^22.10.5",
"react-scripts": "4.0.3",
"typescript": "^4.1.2",
"wait-on": "^5.3.0"
"electron": "^17.1.0",
"electron-builder": "^22.14.13",
"postcss": "^8.4.7",
"prettier": "^2.5.1",
"react-scripts": "^5.0.0",
"rimraf": "^3.0.2",
"tailwindcss": "3.0.23",
"typescript": "^4.5.5",
"wait-on": "^6.0.1"
},
"dependencies": {
"@electron/remote": "^1.1.0",
"@electron/remote": "^2.0.5",
"auto-launch": "^5.0.5",
"electron-is-dev": "^2.0.0",
"electron-reloader": "^1.2.3",
"electron-squirrel-startup": "^1.0.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^5.2.0"
"react-icons": "^4.3.1",
"react-router-dom": "^6.2.1",
"react-toastify": "^8.2.0",
"react-use": "^17.3.2"
},
"main": "public/main.js",
"homepage": "./",
"scripts": {
"prebuild": "rimraf build && rimraf dist",
"react:build": "react-scripts build",
"react:dev": "react-scripts start",
"electron:build": "electron-builder -c.extraMetadata.main=build/main.js",
"electron:dev": "wait-on tcp:3000 && electron .",
"electron:dev": "electron .",
"build": "npm run react:build && npm run electron:build",
"dev": "concurrently -k \"cross-env BROWSER=none npm run react:dev\" \"npm run electron:dev\""
},
"build": {
"extends": null,
"appId": "com.example.app",
"files": [
"dist/**/*",
"build/**/*",
"node_modules/**/*",
"package.json"
],
"directories": {
"buildResources": "assets"
}
"dev": "concurrently -k \"cross-env BROWSER=none npm run react:dev\" \"npm run electron:dev\"",
"format": "prettier --write ."
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
"react-app"
]
},
"browserslist": {
Expand All @@ -74,5 +72,20 @@
"last 1 firefox version",
"last 1 safari version"
]
},
"build": {
"extends": null,
"appId": "com.example.app",
"files": [
"dist/**/*",
"build/**/*",
"node_modules/**/*",
"package.json",
"build/icon.*"
],
"directories": {
"buildResources": "assets"
},
"icon": "./build/icon.ico"
}
}
6 changes: 6 additions & 0 deletions postcss.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
Binary file modified public/favicon.ico
Binary file not shown.
Binary file added public/icon.ico
Binary file not shown.
Binary file added public/icon.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion public/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>Electron - React Template</title>
<title>Electron React Tailwind Template</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
Expand Down
61 changes: 28 additions & 33 deletions public/main.js
Original file line number Diff line number Diff line change
@@ -1,42 +1,37 @@
const { app, BrowserWindow, Tray, Notification, Menu } = require("electron");

const { app, BrowserWindow } = require("electron");
const { createTray } = require("./utils/createTray");
const { createMainWindow } = require("./utils/createMainWindow");
const { createPopupWindow } = require("./utils/createPopupWindow");
const { showNotification } = require("./utils/showNotification");
const AutoLaunch = require("auto-launch");
const remote = require("@electron/remote/main");
const config = require("./utils/config");

if (config.isDev) require("electron-reloader")(module);
if (require("electron-squirrel-startup")) app.quit();

const path = require("path");
const isDev = require("electron-is-dev");

require("@electron/remote/main").initialize();

const icon = path.join(__dirname, "/favicon.ico");
let mainWindow = null;
remote.initialize();

function createWindow() {
mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
enableRemoteModule: true,
devTools: false,
contextIsolation: false,
},
frame: true,
icon,
title: "Electron - React Template",
});
mainWindow.loadURL(
isDev
? "http://localhost:3000"
: `file://${path.join(__dirname, "../build/index.html")}`,
const autoStart = new AutoLaunch({
name: config.appName,
});
if (!config.isDev) autoStart.enable();

app.on("ready", async () => {
config.mainWindow = await createMainWindow();
config.tray = createTray();
config.popupWindow = await createPopupWindow();
showNotification(
config.appName,
"Application running on background! See application tray.",
);
}

app.on("ready", createWindow);
});

app.on("window-all-closed", function () {
app.on("window-all-closed", () => {
if (process.platform !== "darwin") app.quit();
});

app.on("activate", function () {
if (BrowserWindow.getAllWindows().length === 0) createWindow();
app.on("activate", () => {
if (BrowserWindow.getAllWindows().length === 0)
config.mainWindow = createMainWindow();
});
4 changes: 2 additions & 2 deletions public/manifest.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"short_name": "Electron - React Template",
"name": "Create Electron App With React",
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
Expand Down
14 changes: 14 additions & 0 deletions public/utils/config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
const { join } = require("path");
const isDev = require("electron-is-dev");

let config = {
appName: "Electron React Tailwind Template",
icon: join(__dirname, "..", "/favicon.ico"),
tray: null,
isQuiting: false,
mainWindow: null,
popupWindow: null,
isDev,
};

module.exports = config;
33 changes: 33 additions & 0 deletions public/utils/createMainWindow.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
const { BrowserWindow } = require("electron");
const { join } = require("path");
const remote = require("@electron/remote/main");
const config = require("./config");

exports.createMainWindow = async () => {
const window = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
enableRemoteModule: true,
devTools: config.isDev,
contextIsolation: false,
},
frame: false,
icon: config.icon,
title: config.appName,
});
remote.enable(window.webContents);
await window.loadURL(
config.isDev
? "http://localhost:3000"
: `file://${join(__dirname, "..", "../build/index.html")}`,
);
window.on("close", (e) => {
if (!config.isQuiting) {
e.preventDefault();
window.hide();
}
});
return window;
};
53 changes: 53 additions & 0 deletions public/utils/createPopupWindow.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
const { BrowserWindow } = require("electron");
const { join } = require("path");
const config = require("./config");
const remote = require("@electron/remote/main");

exports.createPopupWindow = async () => {
const window = new BrowserWindow({
width: 260,
height: 360,
x: 0,
y: 0,
resizable: false,
alwaysOnTop: true,
webPreferences: {
nodeIntegration: true,
enableRemoteModule: true,
devTools: config.isDev,
contextIsolation: false,
},
frame: false,
icon: config.icon,
title: config.appName,
});
remote.enable(window.webContents);
await window.loadURL(
config.isDev
? "http://localhost:3000/#/popup"
: `file://${join(__dirname, "..", "../build/index.html#popup")}`,
);
window.hide();
window.on("close", (e) => {
if (!config.isQuiting) {
e.preventDefault();
window.hide();
}
});
window.on("blur", () => {
window.hide();
});

config.tray.removeAllListeners("click");
config.tray.on("click", (_, bounds) => {
window.setPosition(
bounds.x - window.getSize()[0],
bounds.y - window.getSize()[1],
false,
);
if (window.isVisible()) window.hide();
else window.show();
});

return window;
};
Loading

0 comments on commit a6526eb

Please sign in to comment.