Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings
This repository was archived by the owner on Jun 20, 2019. It is now read-only.

Commit de5706b

Browse files
committed
Extracted project setup as boilerplate
0 parents commit de5706b

30 files changed

+16252
-0
lines changed

‎.babelrc

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
{
2+
"presets": [
3+
"react",
4+
["env", {
5+
"targets": {
6+
"node": "8.9.3",
7+
"uglify": true
8+
},
9+
"debug": true,
10+
"exclude": ["transform-regenerator", "transform-async-to-generator"],
11+
"modules": false,
12+
"loose": true
13+
}]
14+
],
15+
"plugins": [
16+
"async-to-promises",
17+
"transform-object-rest-spread"
18+
],
19+
"env": {
20+
"test": {
21+
"presets": [
22+
"react",
23+
["env", {
24+
"targets": {
25+
"node": "8.9.3",
26+
"uglify": true
27+
},
28+
"exclude": ["transform-regenerator", "transform-async-to-generator"],
29+
"modules": false,
30+
"loose": true,
31+
}]
32+
],
33+
"plugins": [
34+
"async-to-promises",
35+
"transform-es2015-modules-commonjs",
36+
"transform-object-rest-spread"
37+
]
38+
}
39+
}
40+
}

‎.gitignore

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
# See https://help.github.com/ignore-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
6+
# testing
7+
/coverage
8+
9+
# production
10+
/build
11+
/dist
12+
13+
# misc
14+
.DS_Store
15+
.env.local
16+
.env.development.local
17+
.env.test.local
18+
.env.production.local
19+
20+
npm-debug.log*
21+
yarn-debug.log*
22+
yarn-error.log*

‎README.md

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
## basic-react-redux-electron-tailwindcss
2+
3+
Based on [this basic-electron-react-boilerplate](https://github.com/pbarbiero/basic-electron-react-boilerplate)
4+
5+
This boilerplate may be useful to those who wants a small basic setup to not waist time configuring most of the tools that they usually use in their electron and react-based projects.
6+
7+
I extracted it from one of my private projects that I am working on and I hope that you will find it useful.
8+
9+
The following list of tools was used and configured in this boilerplate:
10+
- React 16
11+
- Redux
12+
- React-Router 4
13+
- [React-Intl](https://github.com/yahoo/react-intl#react-intl)
14+
- Enzyme
15+
- Jest
16+
- [Tailwindcss](https://tailwindcss.com/)
17+
- Purgecss
18+
- Webpack 3
19+
- Electron-packager (basic configuration)
20+
21+
## Build an application
22+
- Set the name of your application in the `package.json` as `productName`.
23+
- Run `npm run package`
24+
Feel free to edit the `postpackage` command to include more options or flags for `electron-packager` to match your needs
25+
26+
## Dev hot-reload mode
27+
`npm run dev`
28+
29+
You can also build and run your prod bundle with `npm run prod`
30+
31+
## Add language
32+
- Create a json file in the `src/locale` directory
33+
- Import it in the `src/reducers/locales.reducer.js`
34+
For more information, please refer to the documentation of the [react-intl module](https://github.com/yahoo/react-intl#react-intl)
35+
36+
## Remove Tailwind
37+
You might be looking for the same boilerplate without Tailwindcss.
38+
To remove it, follow the steps described:
39+
- `npm uninstall -D tailwindcss postcss postcss-loader purgecss-webpack-plugin`
40+
- Delete `tailwind.js`, `postcss.config.js` files from the root.
41+
- Remove the invokation of `postcss-loader` in both `webpack` configuration files
42+
```
43+
// remove this line specifically
44+
{ loader: 'postcss-loader' }
45+
```
46+
as well as `PurgeCssPlugin` from the list of plugins in`webpack.build.config.js`
47+
- The last thing to do is to remove `@tailwind` directives from `src/App.css`

‎__mocks__/styleMock.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export default {};

‎intl-enzyme-test-helper.js

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
/**
2+
* Components using the react-intl module require access to the intl context.
3+
* This is not available when mounting single components in Enzyme.
4+
* These helper functions aim to address that and wrap a valid,
5+
* English-locale intl context around them.
6+
*/
7+
8+
import React from 'react';
9+
import { IntlProvider, intlShape } from 'react-intl';
10+
import { mount, shallow } from 'enzyme';
11+
12+
// You can pass your messages to the IntlProvider. Optional: remove if unneeded.
13+
import en from './src/locale/en.json';
14+
15+
// Create the IntlProvider to retrieve context for wrapping around.
16+
const intlProvider = new IntlProvider({ locale: 'en', messages: en }, {});
17+
const { intl } = intlProvider.getChildContext();
18+
19+
/**
20+
* When using React-Intl `injectIntl` on components, props.intl is required.
21+
*/
22+
function nodeWithIntlProp(node) {
23+
return React.cloneElement(node, { intl });
24+
}
25+
26+
/**
27+
* Export these methods.
28+
*/
29+
export function shallowWithIntl(node) {
30+
return shallow(nodeWithIntlProp(node), { context: { intl } });
31+
}
32+
33+
export function mountWithIntl(node) {
34+
return mount(nodeWithIntlProp(node), {
35+
context: { intl },
36+
childContextTypes: { intl: intlShape }
37+
});
38+
}

‎main.js

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
'use strict';
2+
3+
// Import parts of electron to use
4+
const { app, BrowserWindow } = require('electron');
5+
const path = require('path');
6+
const url = require('url');
7+
8+
// Keep a global reference of the window object, if you don't, the window will
9+
// be closed automatically when the JavaScript object is garbage collected.
10+
let mainWindow;
11+
12+
// Keep a reference for dev mode
13+
let dev = false;
14+
if ( process.defaultApp || /[\\/]electron-prebuilt[\\/]/.test(process.execPath) || /[\\/]electron[\\/]/.test(process.execPath) ) {
15+
dev = true;
16+
}
17+
18+
function createWindow() {
19+
// Create the browser window.
20+
mainWindow = new BrowserWindow({
21+
width: 1024, height: 768, show: false
22+
});
23+
24+
// and load the index.html of the app.
25+
let indexPath;
26+
if ( dev && process.argv.indexOf('--noDevServer') === -1 ) {
27+
indexPath = url.format({
28+
protocol: 'http:',
29+
host: 'localhost:8080',
30+
pathname: 'index.html',
31+
slashes: true
32+
});
33+
} else {
34+
indexPath = url.format({
35+
protocol: 'file:',
36+
pathname: path.join(__dirname, 'dist', 'index.html'),
37+
slashes: true
38+
});
39+
}
40+
mainWindow.loadURL( indexPath );
41+
42+
// Don't show until we are ready and loaded
43+
mainWindow.once('ready-to-show', () => {
44+
mainWindow.show();
45+
// Open the DevTools automatically if developing
46+
if ( dev ) {
47+
mainWindow.webContents.openDevTools();
48+
}
49+
});
50+
51+
// Emitted when the window is closed.
52+
mainWindow.on('closed', function() {
53+
// Dereference the window object, usually you would store windows
54+
// in an array if your app supports multi windows, this is the time
55+
// when you should delete the corresponding element.
56+
mainWindow = null;
57+
});
58+
}
59+
60+
// This method will be called when Electron has finished
61+
// initialization and is ready to create browser windows.
62+
// Some APIs can only be used after this event occurs.
63+
app.on('ready', createWindow);
64+
65+
// Quit when all windows are closed.
66+
app.on('window-all-closed', () => {
67+
// On macOS it is common for applications and their menu bar
68+
// to stay active until the user quits explicitly with Cmd + Q
69+
if (process.platform !== 'darwin') {
70+
app.quit();
71+
}
72+
});
73+
74+
app.on('activate', () => {
75+
// On macOS it's common to re-create a window in the app when the
76+
// dock icon is clicked and there are no other windows open.
77+
if (mainWindow === null) {
78+
createWindow();
79+
}
80+
});

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /