This is a auto translation version of a post from my previous blog. I’m sharing it here so I don’t forget who I was and where I was.
A few days ago, for one of the systems I was working on, we needed an admin panel. But I really didn’t want the admin to be web-based! Why? I don’t know!
Even though I had little time to finish this project, and on the other hand, I was thinking about how to create the admin panel (whether to build it as a web app or write an Android app), all of a sudden, I came across Electron. Of course, I had heard about it before and knew in general that you can write desktop apps with JavaScript, but I didn’t understand how it actually worked.
I thought, “There aren’t many days left, so maybe I’ll throw myself into a new challenge and gain a new experience.” I started reading Electron’s own documentation. It provided some good initial explanations, and with a few searches, I realized, “Jesus Christ! You can connect React, Vue, Angular, etc. to it!” Basically, anything JavaScript-based can be connected (along with a loud ‘WoooooW!’).
So I decided to don’t check the official documentation! Let’s head straight to the world’s largest free virtual university, YouTube! And also the great articles on Medium!
I still don’t know why YouTube is filtered here in Iran, and every time I want to visit this beloved university, I have to turn on a VPN. Hey, you who filtered it, shame on you 🙁
Anyway, I read a few articles and watched some videos, and I fully grasped how it works. I set up a few sample projects, everything looked fine. So now it was time to install React, the hardest thing in the world! From the very beginning, I had issues with configuring React and Webpack, and I still do, and probably always will…
Right when I was at the trial-and-error stage, I found a really good live video by Tim Ermilov in which, in 45 minutes (with solid explanations), he configures and installs Electron, Webpack, and React. After that, he has a series of about 10 episodes where he does some cool stuff (although, for a beginner, they’re interesting but not super-special apps). It’s worth watching. I didn’t watch those 10 episodes because I moved straight on to React itself, and it was simple. I ran into a few issues here and there, but with some quick searches, I was able to solve them.
I also put the React + Webpack configuration project on GitHub, thinking maybe someone would want to move faster, and it would also be good for me later…
So I reached the point where I wanted to use Axios. Holy sh*t! Yet again, my recurring problem with the Webpack server—CORS!
In general, in React projects, I install a no-cors extension on Chrome to get rid of this error. But this time, no matter what I did, it wouldn’t work! I changed server settings, configured Webpack, configured Express, set the mode to no-cors, but nothing worked! Darn Webpack! It’s all its fault, leaving us hanging!
I thought, “Well, what’s the solution? I’ll just remove Webpack!” Then I went to the Electron team’s own repo and saw that apparently they removed Webpack in later sections, too. Great, so there’s no problem in principle—other than losing the dear Hot Reloader!
What could I do? I was short on time and had to finish fast. I started removing it and reconfiguring the project (I used some of the team’s own commits), and I also updated GitHub. I figured if it didn’t help now, it probably wouldn’t help in the future. In the end, I packaged my own project and that was it!
All of this took place over three days. That’s not a lot, but it’s not too little, either. I could have moved even faster.
I recommend you include Electron in your work plans. And you really don’t need to buy courses on Udemy or Egghead or any of that; you can handle it through the series I mentioned and other YouTube videos. If you’re already working with Vue, React, Angular, or any other framework, your job will be much easier. Even if you aren’t, I suggest you first learn one of them (again, via YouTube and Medium articles). Know that once you do, you’ll automatically understand Electron! (It’s still just JavaScript, and you’ll learn two more commands.) Of course, it does have some packages and tools of its own, but they are definitely easy to work with, and you can get the hang of them in a few days (in this project, aside from Electron’s dialog—which is basically the operating system’s message box—I didn’t use any other special Electron tools; I didn’t need to).
I hope you are always successful and keep learning. Believe in learning under the pressure of delivering a project!
Published on: 29 Nov 2018