├── .gitignore
├── README.md
├── index.html
├── main.js
├── package-lock.json
├── package.json
├── preload.js
├── src
└── js
│ ├── App.js
│ ├── index.js
│ └── index.scss
└── webpack.common.js
/.gitignore:
--------------------------------------------------------------------------------
1 | # Mac Files
2 | .DS_Store
3 |
4 | # Logs
5 | logs
6 | *.log
7 | npm-debug.log*
8 | yarn-debug.log*
9 | yarn-error.log*
10 | lerna-debug.log*
11 |
12 | # Diagnostic reports (https://nodejs.org/api/report.html)
13 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
14 |
15 | # Runtime data
16 | pids
17 | *.pid
18 | *.seed
19 | *.pid.lock
20 |
21 | # Directory for instrumented libs generated by jscoverage/JSCover
22 | lib-cov
23 |
24 | # Coverage directory used by tools like istanbul
25 | coverage
26 | *.lcov
27 |
28 | # nyc test coverage
29 | .nyc_output
30 |
31 | # Compiled binary addons (https://nodejs.org/api/addons.html)
32 | build/Release
33 |
34 | # Dependency directories
35 | node_modules/
36 | jspm_packages/
37 |
38 | # TypeScript v1 declaration files
39 | typings/
40 |
41 | # TypeScript cache
42 | *.tsbuildinfo
43 |
44 | # Optional npm cache directory
45 | .npm
46 |
47 | # Optional eslint cache
48 | .eslintcache
49 |
50 | # Optional REPL history
51 | .node_repl_history
52 |
53 | # Output of 'npm pack'
54 | *.tgz
55 |
56 | # Yarn Integrity file
57 | .yarn-integrity
58 |
59 | # dotenv environment variables file
60 | .env
61 | .env.test
62 |
63 | # parcel-bundler cache (https://parceljs.org/)
64 | .cache
65 |
66 | # Uncomment the public line if your project uses Gatsby
67 | # https://nextjs.org/blog/next-9-1#public-directory-support
68 | # https://create-react-app.dev/docs/using-the-public-folder/#docsNav
69 | # public
70 |
71 | # Storybook build outputs
72 | .out
73 | .storybook-out
74 |
75 | # Temporary folders
76 | tmp/
77 | temp/
78 |
79 | dist/
80 | build/
81 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # electron-react-boilerplate
2 | 1. First install dependencies: ```npm install```
3 | 2. In one terminal window run: ```npm run watch``` to compile react code
4 | 3. In other one run: ```npm start``` to start Electron app
5 |
6 | [Electron & React JS: Build a Native Chat App with Javascript
7 | ](https://www.udemy.com/course/electron-react-js-build-a-native-chat-app-with-javascript/?referralCode=F5BF439DB5494218B31C)
8 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/main.js:
--------------------------------------------------------------------------------
1 |
2 | const { BrowserWindow, app, ipcMain, Notification } = require('electron');
3 | const path = require('path');
4 |
5 | const isDev = !app.isPackaged;
6 |
7 | function createWindow() {
8 | const win = new BrowserWindow({
9 | width: 1200,
10 | height: 800,
11 | backgroundColor: "white",
12 | webPreferences: {
13 | nodeIntegration: false,
14 | worldSafeExecuteJavaScript: true,
15 | contextIsolation: true,
16 | preload: path.join(__dirname, 'preload.js')
17 | }
18 | })
19 |
20 | win.loadFile('index.html');
21 | }
22 |
23 | if (isDev) {
24 | require('electron-reload')(__dirname, {
25 | electron: path.join(__dirname, 'node_modules', '.bin', 'electron')
26 | })
27 | }
28 |
29 | ipcMain.on('notify', (_, message) => {
30 | new Notification({title: 'Notifiation', body: message}).show();
31 | })
32 |
33 | app.whenReady().then(createWindow)
34 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "electron-react-app",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "main.js",
6 | "scripts": {
7 | "test": "echo \"Error: no test specified\" && exit 1",
8 | "watch": "webpack --config webpack.common.js --watch",
9 | "start": "electron ."
10 | },
11 | "keywords": [],
12 | "author": "",
13 | "license": "ISC",
14 | "dependencies": {
15 | "electron": "^10.1.2",
16 | "react": "^16.13.1",
17 | "react-dom": "^16.13.1"
18 | },
19 | "devDependencies": {
20 | "@babel/core": "^7.11.6",
21 | "@babel/preset-env": "^7.11.5",
22 | "@babel/preset-react": "^7.10.4",
23 | "babel-loader": "^8.1.0",
24 | "css-loader": "^4.3.0",
25 | "electron-reload": "^1.5.0",
26 | "sass": "^1.26.11",
27 | "sass-loader": "^10.0.2",
28 | "style-loader": "^1.2.1",
29 | "webpack": "^4.44.2",
30 | "webpack-cli": "^3.3.12"
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/preload.js:
--------------------------------------------------------------------------------
1 |
2 | const { ipcRenderer, contextBridge } = require('electron');
3 |
4 | contextBridge.exposeInMainWorld('electron', {
5 | notificationApi: {
6 | sendNotification(message) {
7 | ipcRenderer.send('notify', message);
8 | }
9 | },
10 | batteryApi: {
11 |
12 | },
13 | filesApi: {
14 |
15 | }
16 | })
17 |
--------------------------------------------------------------------------------
/src/js/App.js:
--------------------------------------------------------------------------------
1 |
2 | import React from 'react';
3 |
4 |
5 | export default function App() {
6 |
7 | return (
8 | <>
9 | I am App Component!!!
10 |
13 |
14 | )
15 | }
16 |
--------------------------------------------------------------------------------
/src/js/index.js:
--------------------------------------------------------------------------------
1 |
2 |
3 | import React from 'react';
4 | import ReactDOM from 'react-dom';
5 |
6 | import App from './App';
7 |
8 | import './index.scss';
9 |
10 | ReactDOM.render(, document.getElementById('root'))
11 |
--------------------------------------------------------------------------------
/src/js/index.scss:
--------------------------------------------------------------------------------
1 | h1 {
2 | color: blue;
3 | }
4 |
--------------------------------------------------------------------------------
/webpack.common.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 |
3 | module.exports = {
4 | mode: 'development',
5 | entry: './src/js/index.js',
6 | devtool: 'inline-source-map',
7 | target: 'electron-renderer',
8 | module: {
9 | rules: [
10 | {
11 | test: /\.js$/,
12 | exclude: /node_modules/,
13 | use: {
14 | loader: 'babel-loader',
15 | options: {
16 | presets: [[
17 | '@babel/preset-env', {
18 | targets: {
19 | esmodules: true
20 | }
21 | }],
22 | '@babel/preset-react']
23 | }
24 | }
25 | },
26 | {
27 | test: [/\.s[ac]ss$/i, /\.css$/i],
28 | use: [
29 | // Creates `style` nodes from JS strings
30 | 'style-loader',
31 | // Translates CSS into CommonJS
32 | 'css-loader',
33 | // Compiles Sass to CSS
34 | 'sass-loader',
35 | ],
36 | }
37 | ]
38 | },
39 | resolve: {
40 | extensions: ['.js'],
41 | },
42 | output: {
43 | filename: 'app.js',
44 | path: path.resolve(__dirname, 'build', 'js'),
45 | },
46 | };
47 |
--------------------------------------------------------------------------------