Skip to content

Commit d947e04

Browse files
committed
initial commit
0 parents  commit d947e04

File tree

10 files changed

+315
-0
lines changed

10 files changed

+315
-0
lines changed

.babelrc

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"presets": ["env", "react"]
3+
}

.gitignore

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
node_modules
2+
dist
3+
package-lock.json

README.md

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
# React Webpack Starter
2+
> This is a boilerplate for React 16 & Webpack 4. It includes webpack-dev-server and a build script
3+
4+
## Quick Start
5+
6+
``` bash
7+
# Install dependencies
8+
npm install
9+
10+
# Serve on localhost:3000
11+
npm start
12+
13+
# Build for production
14+
npm run build
15+
```
16+
17+
## App Info
18+
19+
### Author
20+
21+
Brad Traversy
22+
[Traversy Media](http://www.traversymedia.com)
23+
24+
### Version
25+
26+
1.0.0
27+
28+
### License
29+
30+
This project is licensed under the MIT License

package.json

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
{
2+
"name": "react_webpack_starter",
3+
"version": "1.0.0",
4+
"description": "Boilerplate for React apps",
5+
"main": "src/main.js",
6+
"scripts": {
7+
"start": "webpack-dev-server --mode development --open --hot",
8+
"build": "webpack --mode production",
9+
"electron": "electron ."
10+
},
11+
"author": "Brad Traversy",
12+
"license": "MIT",
13+
"dependencies": {
14+
"react": "^16.2.0",
15+
"react-dom": "^16.2.0",
16+
"react-rnd": "^8.0.2"
17+
},
18+
"devDependencies": {
19+
"babel-core": "^6.26.0",
20+
"babel-loader": "^7.1.4",
21+
"babel-preset-env": "^1.6.1",
22+
"babel-preset-react": "^6.24.1",
23+
"css-loader": "^0.28.11",
24+
"electron": "^2.0.5",
25+
"html-webpack-plugin": "^3.1.0",
26+
"style-loader": "^0.20.3",
27+
"webpack": "^4.4.0",
28+
"webpack-cli": "^2.0.13",
29+
"webpack-dev-server": "^3.1.1"
30+
}
31+
}

src/components/App.js

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import React, { Component } from 'react';
2+
import Rnd from 'react-rnd';
3+
import '../style.css';
4+
5+
6+
class App extends Component {
7+
render() {
8+
const style = {
9+
display: 'flex',
10+
alignItems: 'center',
11+
justifyContent: 'center',
12+
border: 'solid 2px green',
13+
};
14+
return (
15+
<div>
16+
<h1>My react app</h1>
17+
</div>
18+
);
19+
}
20+
}
21+
22+
export default App;

src/index.html

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
8+
<title>My React App</title>
9+
</head>
10+
11+
<body>
12+
<div id="app"></div>
13+
</body>
14+
15+
</html>

src/index.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import React from 'react';
2+
import ReactDOM from 'react-dom';
3+
import App from './components/App';
4+
import './style.css';
5+
6+
ReactDOM.render(<App />, document.getElementById('app'));

src/main.js

Lines changed: 169 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,169 @@
1+
const { app, BrowserWindow, dialog, Menu } = require('electron');
2+
const fs = require('fs');
3+
4+
5+
// Keep a global reference of the window object, if you don't, the window will
6+
// be closed automatically when the JavaScript object is garbage collected.
7+
let mainWindow
8+
9+
function createWindow() {
10+
// Create the browser window.
11+
mainWindow = new BrowserWindow({
12+
width: 1000,
13+
height: 900,
14+
});
15+
16+
// and load the index.html of the app.
17+
console.log(__dirname);
18+
mainWindow.loadURL(`file://${__dirname}/../dist/index.html`);
19+
20+
21+
const { app, Menu } = require('electron')
22+
23+
const template = [
24+
{
25+
label: 'File',
26+
submenu: [
27+
{
28+
label: 'Save File',
29+
accelerator: 'CmdOrCtrl+S',
30+
click() {
31+
mainWindow.webContents.send('save-file');
32+
}
33+
},
34+
]
35+
},
36+
{
37+
label: 'Edit',
38+
submenu: [
39+
{ role: 'undo' },
40+
{ role: 'redo' },
41+
{ type: 'separator' },
42+
{ role: 'cut' },
43+
{ role: 'copy' },
44+
{ role: 'paste' },
45+
{ role: 'pasteandmatchstyle' },
46+
{ role: 'delete' },
47+
{ role: 'selectall' }
48+
]
49+
},
50+
{
51+
label: 'View',
52+
submenu: [
53+
{ role: 'reload' },
54+
{ role: 'forcereload' },
55+
{ role: 'toggledevtools' },
56+
{ type: 'separator' },
57+
{ role: 'resetzoom' },
58+
{ role: 'zoomin' },
59+
{ role: 'zoomout' },
60+
{ type: 'separator' },
61+
{ role: 'togglefullscreen' }
62+
]
63+
},
64+
{
65+
role: 'window',
66+
submenu: [
67+
{ role: 'minimize' },
68+
{ role: 'close' }
69+
]
70+
},
71+
{
72+
role: 'help',
73+
submenu: [
74+
{
75+
label: 'Learn More',
76+
click() { require('electron').shell.openExternal('https://electronjs.org') }
77+
}
78+
]
79+
},
80+
{
81+
label: 'Developer',
82+
submenu: [
83+
{
84+
label: 'Toggle Developer Tools',
85+
accelerator: process.platform === 'darwin' ? 'Alt+Command+I' : 'Ctrl+Shift+I',
86+
click() {
87+
mainWindow.webContents.toggleDevTools();
88+
}
89+
}
90+
]
91+
}
92+
]
93+
94+
if (process.platform === 'darwin') {
95+
template.unshift({
96+
label: app.getName(),
97+
submenu: [
98+
{ role: 'about' },
99+
{ type: 'separator' },
100+
{ role: 'services', submenu: [] },
101+
{ type: 'separator' },
102+
{ role: 'hide' },
103+
{ role: 'hideothers' },
104+
{ role: 'unhide' },
105+
{ type: 'separator' },
106+
{ role: 'quit' }
107+
]
108+
})
109+
110+
// Edit menu
111+
template[2].submenu.push(
112+
{ type: 'separator' },
113+
{
114+
label: 'Speech',
115+
submenu: [
116+
{ role: 'startspeaking' },
117+
{ role: 'stopspeaking' }
118+
]
119+
}
120+
)
121+
122+
// Window menu
123+
template[4].submenu = [
124+
{ role: 'close' },
125+
{ role: 'minimize' },
126+
{ role: 'zoom' },
127+
{ type: 'separator' },
128+
{ role: 'front' }
129+
]
130+
}
131+
132+
const menu = Menu.buildFromTemplate(template);
133+
Menu.setApplicationMenu(menu);
134+
135+
136+
137+
// Open the DevTools.
138+
// mainWindow.webContents.openDevTools()
139+
140+
// Emitted when the window is closed.
141+
mainWindow.on('closed', function () {
142+
// Dereference the window object, usually you would store windows
143+
// in an array if your app supports multi windows, this is the time
144+
// when you should delete the corresponding element.
145+
mainWindow = null
146+
})
147+
}
148+
149+
// This method will be called when Electron has finished
150+
// initialization and is ready to create browser windows.
151+
// Some APIs can only be used after this event occurs.
152+
app.on('ready', createWindow)
153+
154+
// Quit when all windows are closed.
155+
app.on('window-all-closed', function () {
156+
// On OS X it is common for applications and their menu bar
157+
// to stay active until the user quits explicitly with Cmd + Q
158+
if (process.platform !== 'darwin') {
159+
app.quit()
160+
}
161+
})
162+
163+
app.on('activate', function () {
164+
// On OS X it's common to re-create a window in the app when the
165+
// dock icon is clicked and there are no other windows open.
166+
if (mainWindow === null) {
167+
createWindow()
168+
}
169+
})

src/style.css

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
h1 {
2+
color: blue;
3+
}

webpack.config.js

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
const path = require('path');
2+
const HtmlWebpackPlugin = require('html-webpack-plugin');
3+
4+
module.exports = {
5+
entry: './src/index.js',
6+
output: {
7+
path: path.join(__dirname, '/dist'),
8+
filename: 'index_bundle.js'
9+
},
10+
module: {
11+
rules: [
12+
{
13+
test: /\.js$/,
14+
exclude: /node_modules/,
15+
use: {
16+
loader: 'babel-loader'
17+
},
18+
},
19+
{
20+
test: /\.css$/,
21+
use: ['style-loader', 'css-loader']
22+
}
23+
]
24+
},
25+
plugins: [
26+
new HtmlWebpackPlugin({
27+
template: './src/index.html'
28+
})
29+
],
30+
devServer: {
31+
contentBase: path.join(__dirname, '/dist'),
32+
}
33+
};

0 commit comments

Comments
 (0)