Getting Started

Overview

This guide will help you get up and running with the correct tech stack and tools. It avoids ejecting your framework configuration which is used for customization of your project components and modules. Ejecting your application is generally an unwanted technique. This process is not reversible and should only be used if ... just avoid it.. You can find more info about this process here

This build stack doesn't require yucky webpack. However you can integrate it if you wish to make more work for yourself. GulpJS is a more streamlined build framework and is utilized by Semantic-UI. There are many reasons why we prefer this that will be discussed later on in this guide.

There is a fantastic tool the bright minds at the Facebook Incubator created for generating react web applications. This wizard will create and setup the project skeleton that will be integrated into our electron framework. It is a pretty extensible tool, and we will only be scratching the surface. Many of its features becomes automated with this project stack which is why we will not go into full detail about all that it can do. Mainly it lets the developer use simple commands, such as npm start and npm run build to run and build their apps.

Pre-Requistes

• Text Editor such as Sublime or Notepad++
• NodeJS - download
• Yarn - download

Goals

• avoid ejecting the React app
• minimize glue to get React and Electron working together
• preserve the defaults, assumptions and conventions made by Electron and create-react-app/React. (This can make it easier to use other tools that assume/require such conventions.)
• integrate better process and package management
• allow for automated build distribution on target platforms
• implement a snazzy and elegant ui component library

Basic Recipe

1. run create-react-app to generate a basic React application
2. run npm install --save-dev electron
3. add main.js from electron-quick-start (we’ll rename it to electron-starter.js, for clarity)
4. modify call to mainWindow.loadURL (in electron-starter.js) to use localhost:3000 (webpack-dev-server)
5. add a main entry to package.json for electron-starter.js
6. add a run target to start Electron to package.json
7. npm start followed by npm run electron
8. install foreman Profile for runtime
9. install yarn for better package management
10. add semantic ui into the project for ui components
11. write some test units to make sure everything works okay
12. add build distribution scripts to create runtime binaries
13. review distribution and CI automation
14. Done! Ready to add your own code