with React, Babel, Browserify and Gulp.
# Begin with installing Gulp!
$ npm install gulp -g
# Clone Repository
$ git clone https://github.com/Teddy95/reactron.git my-project
# Go into root directory
$ cd my-project
# Install dependencies
$ npm install
# Compile & run App...
$ npm run build
$ npm start
# ...or run App in dev mode
$ npm run dev
- Live reloading of web contents in all browser windows after filechanges 🔥
- Watch task for live compiling of Sass/Scss and Jsx files after changes 💫
- Compiling React Jsx with Babel and Browserify 🔮
- Gulp included + Tasks for compiling, packaging & more 🍷
- Included Electron Packager configurations for packaging application for Mac OS X, Windows and Linux 🎁
Happy Coding! ❤️ ✨
/app
Electron index.html & main.js/app/assets
Logos, images, icons, .../app/css
Your Css files/app/js
Your React Js files/app/sass
Your Sass/Scss files
/build
Electron index.html & main.js copied from/app
/build/assets
Files copied from/app/assets
/build/css
Here you find thestyle.min.css
generated from all Css files in/app/css
/build/js
Here you find thebundle.min.js
which contains the Js code of your React application
/release
Compiled applications for Mac OS X, Windows and Linux
$ npm start
# 1. Compile Sass/Scss & Jsx
# 2. Build application
# 3. Start `gulp watch` for recompiling Sass/Scss & Jsx after filechanges
# 4. Start Electron
$ npm run dev
Watching the following scripts and compile they, if there were changes.
app/assets/**/*
app/sass/*.scss
app/css/*.css
app/js/**/*
app/*.html
app/*.js
$ npm run watch
Compile application and generate /build
directory.
$ npm run build
Set product name & icons in package.json
.
{
"name": "reactron",
"productName": "Reactron - Electron Boilerplate",
"build": {
"icon": {
"mac": "build/assets/icons/icon.icns",
"windows": "build/assets/icons/icon.ico",
"linux": "build/assets/icons/icon.png"
}
}
}
$ npm install electron-packager -g
Packaging for Mac OS X:
$ npm run build
$ npm run package-mac
Packaging for Windows:
$ npm run build
$ npm run package-windows
Packaging for Linux:
$ npm run build
$ npm run package-linux
...or release it all at once:
$ npm run release