How to Create a Cross-Platform Desktop App Using Electron?
How to Build desktop weather App with HTML, CSS, and Javascript
Hi, in this article, I will show you how to create a simple weather app using Electron.
So before we go into that, I would like to talk about what is Electron and how it works?
What Is Electron?
Electron is an open-source framework that allows you to create desktop applications with JavaScript, HTML, and CSS.
It does this by Combining chromium and Node.js into a single runtime. These applications can then be packaged to run directly on macOS, Windows, or Linux.
Typically, you create a desktop application for an operating system (OS) using each operating system’s specific native application frameworks. Electron makes it possible to write your application once using technologies that you already know.
Before we see how Electron work lets just take a look at some of the application built on it.
Famous Apps Built With Electron
How Does Electron Work?
Electron has two types of processes: Main and Renderer.
The main process creates web pages by creating BrowserWindow instances. Each BrowserWindow instance runs the web page in its Renderer process.
Prerequisites
- Node JS installed on your PC.
- Basic understanding of JavaScript.
- A text editor or IDE of your choice.
Get Started
There are many different ways to create an Electron app, in this article I will use Electron Forge.
Electron Forge is a complete tool for creating, publishing, and installing modern Electron applications.
npx create-Electron-app weather-app
or
yarn create Electron-app weather-appThen
cd weather-appFolder Structure
This is what the folder structure looks like
The Main Script :
The main script specifies the entry point of your Electron application (in our case, the index.js file) that will run the Main process.
An Electron application can have only one Main process.
The main script may look as follows:
index.html
This is the web page you want to display once the application is initialized. This web page represents the Renderer process.
You can create multiple browser windows, where each window uses its independent Renderer.
Running The App
npm startYour running Electron app should look as follows:
Next, we gonna create our HTML code in index.html
Add Some Basic Styles
Add The JavaScript File
Before coding the render.js file, get an API key from OpenWeatherMap API.
It allows us to make calls to a restful API to return the current weather data.
When a user enters a city name in the search box and presses Enter, the addEventListener is invoked, which calls the getInput() function and passes the city name as an argument to the getResults() function.
The getResults() function is used to get the weather API data from the URL containing the city name and API key, then return the Response (weather) in JSON format.
The displayResults() function displays the temperature, and icons into the HTML page.
if you want to learn more about Fetch API please check the documentation
That’s the end. Your Weather App is ready.
Result
Run the application using the following command:
npm start
Package And Distribute The Application
So you’ve got an amazing application there, and you want to pack it all up and share it with the world.
npm run makeElectron-forge creates the out folder where your package will be located.
