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 project and turn it into an Vanilla JavaScript Electron app. If you know Vanilla JavaScript, follow me through this tutorial. Prerequisites: 1. Have installed on your computer. Node.js 2. Have a previous project sample in Vanilla JavaScript ( ) todo-list, notes-app, tic-tac-toe, etc. Building a Desktop App With Election First, write the following in your terminal, replacing “ ” with whatever name you like. my-app This command will generate the structure for our Electron app. Then, type and the . cd name of your project In the src folder, you will find an , , and files. index.html style.css index.js The file called contains the setup of “ ”. We have to make some changes to it. index.js my-app This configuration allows Electron to work with and with different modules. Node.js Now you can copy your files to the folder. src Remember that the main HTML file has to be named i because the function will use that file to start the app. ndex.html mainWindow You can also change the name of the starting file instead of “ ”. Remember that you can replace the HTML and CSS file but do not change the file. That file is the core of our application. index.html index.js 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 command check that all is working. build If you want to make some adjustments to your app now is the time. Next, type “ ” in your terminal. npm run make When this process has finished you will see a new folder called “out”. Now your app is ready to install on your machine. Go to the directory “ ” and run the file. ./out/make/squirrel.[system] setup.exe And there you have it! Click on your desktop window and access your brand new desktop app! Congratulations, you’ve now built your quick and easy desktop app using Electron! How cool is that? I hope you have found this article useful. Thanks for reading it.
