to start the project setup from scratch:
- Started with
electron-quick-startapplication cloned locally
yarn add electron-builder --dev
- Walk through Electron Builder setup. Add appID, category for Mac, copyright information, product name, icons in a
yarn add electron-packager --dev
- Add cross-platform build setup in
package.jsonfrom 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.jsfile at the root of the project so that
fluent-ffmpeggrabs static versions of
electron-packagerglobally for easy packaging from the command line:
npm install electron-packager -gNote: At some point I started using
yarn. Pick one if possible. I recommend
yarnsince 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 bundlein order to bundle all React components via Webpack before packaging the application. Then package the app using your global installation of
to use the existing setup
- Clone repo:
git clone https://github.com/NUKnightLab/videojam.git
- Install dependencies:
- To start the app in development environment:
- To start the app in production environment:
npm run start:prod
- To package the app:
- Install Electron Packager:
npm install electron-packager -g