Skip to content
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)