Any electron app essentially comprises of the following components
Steps to setup development environment
- Clone the repo locally.
$ git clone https://github.com/fossasia/susi_desktop.git $ cd susi_desktop
- Install the dependencies listed in package.json file.
$ npm install
- Start the app using the start script.
$ npm start
Structure of the project
The project was restructured to ensure that the working environment of the Main and Renderer processes are separate which makes the codebase easier to read and debug, this is how the current project is structured.
The root directory of the project contains another directory ‘app’ which contains our electron application. Then we have a package.json which contains the information about the project and the modules required for building the project and then there are other github helper files.
Inside the app directory-
Display external web content in an isolated frame and process, this is used to load chat.susi.ai in a BrowserWindow as
Adding event listeners to the app
Various electron APIs were used to give a native feel to the application.
1. A quick article to understand electron’s main and renderer process by Cameron Nokes at Medium link
2. Official documentation about the webview tag at https://electron.atom.io/docs/api/webview-tag/
3. Read more about electron processes at https://electronjs.org/docs/glossary#process
4. SUSI Desktop repository at https://github.com/fossasia/susi_desktop.