Skip to content

Latest commit

 

History

History
146 lines (81 loc) · 3.67 KB

Lesson-04.md

File metadata and controls

146 lines (81 loc) · 3.67 KB

ACS 3340 - Electron Build

Review

  • Name three reference types in JS?
  • Name three value types in JavaScript?
  • What is Electron?

Review the Current Project

You should be using your product/project (remember that dog fooding disucssion?) looking for improvements.

  • How did you use your product?
  • What did you observe that was working well?
  • What did you observe that needed improvement? Name three things...

Building Electron

The instructions here continue from what was covered in class. If you haven't followed the instructions from class 3 be sure to do that now before continuing.

Import Electron forge to build the app binary:

npm install --save-dev @electron-forge/cli
npm exec --package=@electron-forge/cli -c "electron-forge import"

This should add some new scripts to your package.json. Check teh scripts section and look for:

"package": "electron-forge package",
"make": "electron-forge make"

Electron Forge will changed your start script to: "start": "electron-forge start", change this back to:

"start": "react-scripts start",

You need this start script to launch your react code.

Still in package.json edit the package and make scripts:

"package": "react-scripts build && electron-forge package",
"make": "react-scripts build && electron-forge make"

These scripts will build the electron app but they need to run the react scripts first before running electron forge packager.

Now add this new script:

"electron": "wait-on tcp:3000 && electron-forge start",

If you see an error:

An unhandled rejection has occurred inside Forge: Error: ENOTEMPTY: directory not empty, rmdir ...

Try:

npm remove node_modules 
npm remove package-lock.json
npm install

These instructions follow the guide here: https://www.electronforge.io/import-existing-project

Customizing the App

The electron.js file has configuration code that is used to by the process that runs the electron app. The HTML/CSS/JS code that was your original CRA project is displayed by electron and is the user interface for your project.

You can modify the application in a few says. Try changing the size of the app and adding an icon.

While the icon might not sound important in reality it is. It's the first thing people see when they use your app. So it's a chance to brand your product and set impressions. It's also required to publish your apps to the app store. Without an icon your app will automatically be rejected.

Icons are actually more complex than you might think. You'll need images for all of the different screen resolutions your app might support.

Here are some alternative instructions for building Electron with Electron Builder: https://reactjsexample.com/electron-integration-with-react/

Build an Electron App

Your goal is to build a desktop application from your React project. Follow the guide above. Your deliverable is a functioning native app that runs on Mac or Windows.

  • Native App

After Class

Build your Electron app. This will conclude the first assignment.

Resources