How to start developing desktop apps with Electron / React / Mobx / LokiJS with zero knowledge and not die from a mental breakdown in the process (almost)
I’m just a hobby game developer. I’ve learned my craft only by messing around with Unity and C# and that’s about it.
In the past, we had the need for a desktop software to create and manage all of our scripting for each game because handling separate text files is lame. I’ve built a quick app on Winforms (which later migrated to WPF) but it got old very quick. I decided then it was time to take it to another level and while at it, learn a new language.
After many (many!) hours of trial and error I have a working prototype that I’m quite pleased with:
Instead of ranting about my miserable failures I will try to give you some tips to help you get started and not to repeat my mistakes and hopefully you can save you a few hours.
npm install -g electron-forge
electron-forge init my-new-project --template=react
And finally, some tips from a noob:
- Do some research, learn, watch tutorials. Watch out for outdated tutorials, this technology evolves and change at a very fast pace, and its easy to land on outdated material.
- Familiarize with these tools and terminologies, at least know what each thing does (be ready to learn a plethora of terminology…):
- Npm / Yarn
- electron-hot reload
- MaterialUI / Ant-Design
- Arrow functions
- Once ready to move to Electron choose a Boilerplate, don’t try to code it from the ground until having a good understand of how things work.
- Try to do a hello world app with Electron only. Then:
- Avoid creating react app electron, try electron forge instead (electron-forge init my-new-project –template=react).
- Try to build. Fail miserably. Repeat.
- Use some UI library like MaterialUI or Ant-design, it makes it a lot easier
- Try mobx instead of redux, its easier to get it going.
- Build with electron builder, it needs a little setup but its awesome!
- Don’t be afraid to use electron-updater, is super simple to set up!
- My favorite you-tuber on the subject: Traversy Media
- Make some coffee, or even better, yerba mate.
Hope it helps!