/react-electron-workshop

Primary LanguageTypeScript

react-electron-workshop

This repo contains a react electron sample app that we used for a workshop on building react desktop apps with electron. It is a simple app to view photos stored locally on your computer. We use typescript because things normally work out better that way.

Screenshot

To Use

To clone and run this repository, you'll need Git and Node.js (which comes with npm) installed on your computer. From your command line:

# Clone this repository
git clone https://github.com/miniak/react-electron-workshop.git
# Go into the repository
cd react-electron-workshop
# Install dependencies
npm install
# Build
npm run build
# Run the app
npm start

To make this app step by step

For development we use vscode, Git, Node.js and electron-fiddle.

Creating hello world with react, typescript and electron

  • create empty folder: mkdir react-photo-viewer
  • go into the folder: cd react-photo-viewer
  • Initialize npm: npm init
  • Install electron: npm install --save-dev electron
  • Install react: npm install --save react react-dom
  • Install typescript: npm install --save-dev typescript @types/react @types/react-dom
  • Create .gitignore git init (optional)
  • Create tsconfig.json
  • Create src folder: mkdir src
  • In the src folder: Create main.ts
  • Create renderer folder: mkdir src/renderer
  • In the src\renderer folder:
  • Edit package.json to add build steps and update main "main": "src/main.js",
  • Try to build: npm run build
  • Try to run: npm start
  • 💡 Try to inspect and debug the render process using developer-tools: control+shift+I
  • 💡 Try to inspect and debug the main process using chrome://inspect in a seperate chrome instance.

Add photo viewing features

  • Upgrade index.tsx with basic viewer (diff)
  • 💡 Note the use of remote.app.getPath('pictures') and fs.readdirSync electron api's. This API is only available in the main process – so we access it via remote.

Directory selection

  • Upgrade index.tsx with context menu and thumbnail optimizing (diff)
  • 🏃 build and run: npm run build && npm start

Add context menu

  • Upgrade index.tsx with context menu and thumbnail optimizing (diff)
  • 💡 Note the use of remote.Menu.buildFromTemplate electron menu api.
  • 🏃 build and run: npm run build && npm start

Add exif info

  • Install exif module npm install --save exif
  • Add popup.html and popup.tsx to display exif info
  • Upgrade index.tsx to show exif info (diff)
  • 🏃 build and run: npm run build && npm start
  • 💡 notice an additional rendering process when the exif popup is visible

Packaging the app

  • An app package can be made by just copying folders
  • But there are packages packages to do this: npm install --save-dev electron-packager
  • Create the packaged app: node_modules\.bin\electron-packager.cmd ./
  • 💡 Review the created packaged app folder. Run the packaged app, note it has no native menu. The menu came from the default app.

Creating an installer on Windows

  • Install a package to create an installer: npm i --save-dev electron-wix-msi
  • Install wix toolset
  • Add wix to the path C:\Program Files (x86)\WiX Toolset v3.11\bin;
  • Create make-msi.js with script to create an insaller
  • Build the installer: node make-msi.js
  • 💡 Install and run

Tips

  • Read the security guide IMPORTANT
  • We didn't cover Native Node Modules. They provide full access to the native platform – for when electron does not have an api.
  • Electron processes communicate using IPC. It is good to understand potential performance implications.