Build a Quick and Easy Desktop App with Electron.
How to create a Desktop App using Electron
Creating your Desktop app can be easy with Electron. You can build cross-platform applications that work in any OS.
In this tutorial, we will use a vanilla javascript project to turn it into an Electron app.
If you know vanilla JavaScript, follow me through this tutorial.
Pre-requirements:
- Have Node.js installed on your computer
- Have a previous project in vanilla JavaScript (todo-list, notes-app, tic-tac-toe, etc.)
Implementation
First, write the following in your terminal, replacing “my-app” with whatever name you like.
This command will generate the structure for our Electron app. Then, type cd and the name of your project. In the src folder, you will find an index.html, style.css, and index.js files. The file called index.js contains the setup of “my-app.” Now we have to make some changes to it.
This configuration allows Electron to work with Node.js and with different modules.
Now you can copy your files to the src folder. Remember that the main HTML file has to be named index.html because the mainWindow function will use that file to start the app.
You can also change the name of the starting file instead of “index.html”. Remember that you can replace the HTML and CSS file but do not change the index.js file. That file is the core of our application.
Now with your project ready to run, type “npm start”.
You have to see a chromium window pop-up with your application running.
Before running the build command, check that all is working. If you want to make some adjustments to your app, now is the time. Next, type “npm run make” in your terminal.
When this process has finished, you will see a new folder called “out”.
Now your app is ready to install on your machine. First, go to the directory “./out/make/squirrel.[system]” and run the setup.exe file.
And there you have it! Click on your desktop window and access your brand new desktop app!.
Conclusion
Congratulations, you’ve now built your quick and easy desktop app using Electron! How cool is that?
I hope you have found this helpful article. Thanks for reading it.
