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.

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

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

• 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:
  • Add preload.ts
  • Add index.html
  • Add index.tsx (hello world version)
  • Add index.css for styles
• 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.

• 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.

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

• 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

• 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

• 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.

• 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

• 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.