Download Ghost apps for Mac, Windows, Linux and Android with our. Ghost Desktop Screenshot. For OS X 10.9 & newer Download v1.7.0 Windows Logo. Electron: Create a single app for Windows, Linux, and Mac Posted by Ernie Salazar on November 30, 2016 The days of the Microsoft Windows operating system domination are over.
In my I described building a desktop application with framework using. It's a great library to create a fast and small-sized desktop app with native platform components but it has its own downsides like no CSS styling or images support. Now it's time to try to build a desktop app. Electron is an open source library developed by GitHub for building cross-platform desktop applications with HTML, CSS, and JavaScript.
Electron accomplishes this by combining and into a single runtime and apps can be packaged for Mac, Windows, and Linux To have a quick start I've used an boilerplate. It provides a developer with vue-cli scaffolding, common Vue plugins, packager, testing, devtools, and other features. ? What are we going to build We will build the same application as in the previous article: an app to check the weather in the city of user's choice built on top of. If you want just to check the final Electron-powered app code, it's. ?️ Installation An electron-vue boilerplate is built as a template for 2.x and includes options to customize an application.
So you need to install it globally. Vue init simulatedgreg/electron-vue weather-app This will start an installation project with a couple of choices you need to make during it.
The cool thing is if you need some commonly used plugins and libraries such as, you can pick them up during the installation process. Almost all choices were clear but there was one concern ?: I decided to google it and found on StackOverflow.
According to it, electron-builder seemed to be a better choice for me, so I went with it. After the project is set up, you need to go to the application folder and run npm install or yarn install and we are ready to go. ? Understanding an application structure Right after installation is finished you can see two folders inside the src one: main and renderer. First one is required for Electon main process According to electron-vue docs, in Electron the process that runs package.json’s main script is called the main process.
The script that runs in the main process can display a GUI by creating web pages. There are two files in the main folder: index.js and index.dev.js. First one is your application's main file, the file in which electron boots with.
It is also used as webpack's entry file for production. All main process work should start here.
Index.dev.jsis used specifically and only for development as it installs electron-debug & vue-devtools. You don't need to touch it while developing an application. Renderer folder is required for renderer process. Since Electron uses Chromium for displaying web pages, Chromium’s multi-process architecture is also used.
Each web page in Electron runs in its own process, which is called the renderer process. As you may notice, it's a 'normal' Vue application structure with assets and components folders, main.js and App.vue files. Here is the structure of the latter.