reactron: A JavaScript repository from Teddy95

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! ❤️ ✨

File structure

Development in `/app`

/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

Production in `/build`

/build Electron index.html & main.js copied from /app
/build/assets Files copied from /app/assets
/build/css Here you find the style.min.css generated from all Css files in /app/css
/build/js Here you find the bundle.min.js which contains the Js code of your React application

Packaging in `/release`

/release Compiled applications for Mac OS X, Windows and Linux

Scripts

Start App

$ npm start

Start App in dev mode

# 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

Watch Scripts

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

Build App

Compile application and generate /build directory.

$ npm run build

Release App

Configurations

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"
		}
	}
}

Install Electron Packager

$ npm install electron-packager -g

Packaging

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

Teddy95/reactron