https://github.com/h5sh/firstelectronapp
My first Electron App, a cross platform desktop App builder
https://github.com/h5sh/firstelectronapp
Last synced: about 1 year ago
JSON representation
My first Electron App, a cross platform desktop App builder
- Host: GitHub
- URL: https://github.com/h5sh/firstelectronapp
- Owner: H5SH
- Created: 2024-03-13T15:18:26.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-06-06T22:48:18.000Z (about 2 years ago)
- Last Synced: 2025-05-19T13:16:31.617Z (about 1 year ago)
- Language: JavaScript
- Size: 360 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# firstElectronApp
`https://www.electronforge.io/guides/framework-integration/react`
`https://dev.to/navdeepm20/electron-with-react-create-cross-platform-desktop-app-easily-1a13`
## For build and Packaging
`https://www.electronjs.org/docs/latest/tutorial/tutorial-packaging`
## Notification
### Electron Api's
Electron api's are only available for main.js file, so notification function must be declared there using ipcMain
`ipcMain.on(, function())`
and ipcRenderer, contextBridge declare a variable
```
const {contextBridge, ipcRenderer} = require('electron')
contextBridge.exposeInMainWorld('electronAPI', {
: ()=> {
ipcRenderer.send(, )
},
});
```
where electronAPI is a variable which can be accessed using
`const {electronAPI} = window`
anywhere in react files
### react-desktop-notification
so used react desktop notification instead.
### Import React
import React from 'react'
is a must to make file renderable.
### For Tailwind Intigration
` npm i --save-dev tailwindcss postcss-loader autoprefixer
or
yarn add -dev tailwindcss postcss-loader autoprefixer`
And then in webpack.renderer.config.js write
`rules.push({
test: /\.css$/,
use: [{ loader: 'style-loader' }, { loader: 'css-loader' }, {loader: 'postcss-loader'}],
});`
## Build Command
yarn make or npm run make (with electron-forge install make command listed in package.json example in this project)