overwrite -platform=darwin -arch=圆4 -prune=true -out=release-builds", For that, we will use “electron-packager” which helps in packaging the app and publishing it. It will start the app and you will see the Youtube music desktop app. Now go to the terminal and run “npm start”. Now go back to package.json and add the following line under “scripts” Let’s write a function “createWindow” in which we will create our browser window and after creating it we will load the youtube music URL in it.įinally, we will use “app” API to call this function when the “app” is ready. “app” provides the interface for the whole desktop app and gives hooks for various events such as “ready”, “quit” etc. For our case, we will be loading Youtube Music URL in it. It can be used to load an HTML file or load any URL in it. “ BrowserWindow” provides a chromium browser window as clear from its name. These two are one of the most essential native APIs provided by electron. What are PWA or progressive web apps? Now, let’s try to understand what is happening here.įirst, we are importing “ app” and “ BrowserWindow” from electron. LICENSE- index.js- package-lock.json- node_modules/ Develop the appĬonst = require('electron') Our folder structure now looks like as followsYourProject/ So let’s create an index.js file in that folder. Our main entry point to the app is denoted by the “main” field in the package.json which in our case is “index.js”. Now lets install electron by typing following command – "test": "echo \"Error: no test specified\" & exit 1" "description": "A minimal introductory tutorial for Electron by building a Youtube desktop app", Once it’s completed you will have the following folder structure-Īnd your package.json would look something like as follows – Create an empty directory – YourProject and run following commands from that folder:Īnd follow along, it will prompt you to enter a few details, just enter as per your liking and can also leave for default values. In a nutshell, desktop app development using an electron is actually a NodeJs development with a focus on desktop development. It is powered by chromium engine and thus each application of electron is actually a self-contained minimal web browser. It can be thought of as the Node.js variant focused on desktop application. It provides javascript runtime with rich native (Operating system) APIs and thus takes care of the hard part and lets the developer focus on the core of their application. Electron OverviewĮlectron is built and open-sourced by Github. I have also added a github repository to help you along the way. We will use Electron to build the app and then port it to Mac, Linux, and Windows. So, today we will build a desktop app for Youtube using Electron which is a cross-platform framework to build desktop apps using web technologies such as javascript, HTML and CSS.
0 kommentar(er)
