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.

Javascript/HTML is pretty much all you hear nowadays and it’s definitely a valuable skill to have under your belt, so I had this great idea:

“I will learn Javascript, React, Mobx, HTML, CSS by coding an Electron database driven app, it will be super easy…” Oh boy…

After many (many!) hours of trial and error I have a working prototype that I’m quite pleased with:

https://pointbleepstudios.com/speechr

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.

TL;DR:

npm install -g electron-forge
electron-forge init my-new-project --template=react
cd my-new-project
electron-forge start

And finally, some tips from a noob:

  1. 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.
  2. Do some hello worlds apps with plain Javascript before starting with Electron or React.
  3. Familiarize with these tools and terminologies, at least know what each thing does (be ready to learn a plethora of terminology…):
    1. VSCode/Atom
    2. Javascript/HTML/CSS
    3. Nodejs
    4. Npm / Yarn
    5. eslint
    6. ECMAScript
    7. GIT
    8. Electron
    9. electron-compile
    10. electron-hot reload
    11. Electron-builder
    12. Electro-Update
    13. Babel
    14. Webpack
    15. React
    16. Mobx-react
    17. IndexedDB/LocalStorage/LokiJS/neDB
    18. MaterialUI / Ant-Design
    19. Typescript
    20. Arrow functions
  4. 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.
  5. Try to do a hello world app with Electron only. Then:
  6. Avoid creating react app electron, try electron forge instead (electron-forge init my-new-project –template=react).
  7. Try to build. Fail miserably. Repeat.
  8. Use some UI library like MaterialUI or Ant-design, it makes it a lot easier
  9. Try mobx instead of redux, its easier to get it going.
  10. Build with electron builder, it needs a little setup but its awesome!
  11. Don’t be afraid to use electron-updater, is super simple to set up!
  12. My favorite you-tuber on the subject: Traversy Media
  13. Make some coffee, or even better, yerba mate.

Hope it helps!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: