- Started with
electron-quick-start
application cloned locally yarn add electron-builder --dev
- Walk through Electron Builder setup. Add appID, category for Mac, copyright information, product name, icons in a
build
folder yarn add electron-packager --dev
- Add cross-platform build setup in
package.json
from AutoEdit2. See blog post for more information on how to do this. - Add FFmpeg packages:
yarn add ffmpeg-static ffprobe-static fluent-ffmpeg
- Add a
config.js
file at the root of the project so thatfluent-ffmpeg
grabs static versions offfmpeg
andffprobe
- Install
electron-packager
globally for easy packaging from the command line:npm install electron-packager -g
Note: At some point I started usingnpm
instead ofyarn
. Pick one if possible. I recommendyarn
since most Electron boilerplates use it. - At this point, you can create an Electron application that successfully uses FFmpeg in both development and production environments.
- Walk through this tutorial to set up React in a development environment in Electron. This setup alone doesn't mount the React components in a packaged application.
- Add the following npm script in
package.json
: "start:prod": "webpack && electron ." This script allows you to test whether added components/functionality will work in a packaged app and does mount React components in a production environment. - To be positive a new addition works in a production environment (a packaged desktop app), run
npm run bundle
in order to bundle all React components via Webpack before packaging the application. Then package the app using your global installation ofelectron-packager
: electron-packager
- Clone repo:
git clone https://github.com/NUKnightLab/videojam.git
- Install dependencies:
yarn
- To start the app in development environment:
npm start
- To start the app in production environment:
npm run start:prod
- To package the app:
- Install Electron Packager:
npm install electron-packager -g
- Run
electron-packager <project-directory-name>