How to build a simple desktop application using Electron

This article mainly explains "how to use Electron to build a simple desktop application". The content of the article is simple and clear, and it is easy to learn and understand. Please follow the editor's ideas to study and learn "how to use Electron to build a simple desktop application".

Prerequisites:

1. Install Node.js on your computer.

two。 There is an example of a project previously in Vanilla JavaScript (todo-list, notes-app, tic-tac-toe, etc.)

Use elections to build desktop applications

First, write the following in the terminal, replace my-app, and take whatever name you want.

This command will generate structures for our Electron application.

Then, enter cd and name of your project

In the src folder, you will find an index.html, style.css, and index.js file.

The file name is index.js, which contains the settings my-app. We have to make some changes to it.

This configuration allows Electron and Node.js with different modules.

You can now copy the files to the src folder.

Keep in mind that the main HTML file must be named index.html because the mainWindow function will use it to start the application.

You can also change the name of the starting file instead of index.html. Remember, you can replace the HTML and CSS files, but do not change the index.js file. Because this file is the core of our application.

Now that your project is ready to run, type npm start.

You must see a Chromium pop-up window when the application is running.

The build command checks that everything is fine before running it.

If you want to make some adjustments to your application, now is the time. Next, type npm run make in your terminal.

When this process is complete, you will see a new folder called "out".

Now your application is ready to be installed on your machine.

Enter the directory. / out/make/squirrel. [system] and run the setup.exe file.

Concluding remarks

Click on your desktop window and visit your brand new desktop application!

Thank you for reading, the above is the content of "how to use Electron to build a simple desktop application". After the study of this article, I believe you have a deeper understanding of how to use Electron to build a simple desktop application. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!