So, when we looked into how to modernize the Mac app, moving to a unified codebase across Mac, Windows, and Linux was an easy choice. Technology Stack Despite being the first production Electron application outside of Atom, the Slack Desktop application has been kept fairly up-to-date with regards to web technologies. In this blog, I am going to run you through how I setup a production ready work flow for creating a desktop app with React in Electron and SQLite3 as a database packaged with the application. In my most recent pers o nal project, I built a Daily Build Updater for the 3D application Blender.
If you can build a website, you can build a desktop app. Electron is a framework for creating native applications with web technologies like JavaScript, HTML, and CSS. It takes care of the hard parts so you can focus on the core of your application. Electron is by far the most popular and fastest growing library for building cross-platform desktop applications using HTML, JavaScript & CSS. This course will provide a very practical and concise approach to learning Electron from scratch. You will be able to start building real-world desktop applications immediately.
- Node.is
- Node Package Manager
- Electron
Introduction
AppStudio now supports the use of some of the most important new technologies in the web development world.
Node.js is a runtime environment that executes JavaScript code outside the browser. That makes it suitable for writing server side software, which would normally be done in PHP or other languages. It works by having an executable stub which is able to call the V8 JavaScript engine, which powers Chrome.
npm is a repository of code which can be used with Node.js. It's included when you download Node. There is a huge number of packages available - over 750,000 at last count. You can include these packages in your Node project to add functionality. It might be for convenience: there are a lot of libraries which are much easier to include in your project than to write yourself. It might be for functionality: the modules can implement features which would not be available in the browser.
An example of a convenient library would be Lodash which adds hundreds of additional functions to JavaScript. A missing feature library would be fs-extra which allows full access to the file system.
Electron is framework which allows for the development of desktop GUI applications. Since it's built on Node.js, it already has the ability to run JavaScript code. It also uses Chrome's browser engine to render the UI using regular HTML. Each Electron app includes the V8 Runtime as well as the Chrome browser. Slack, Github Desktop and WhatsApp are examples of apps built using Electron.
How is this compare to PhoneGap?
PhoneGap (Cordova) is used to package apps for iOS and Android. Electron is used to package apps for Windows, MacOS and Linux. It's quite reasonable to have one AppStudio project that you use with both PhoneGap and Electron, letting you build for all 5 platforms.
Nodejs/npm modules are similar to PhoneGap Plugins. Since they are operating system specific, PhoneGap Plugins will not work with Electron (and vice versa).
Tutorial: Make an Electron app
AppStudio allows you to make normal AppStudio apps (programmed in Javascript or BASIC) into full blown Electron apps. You can distribute these apps as regular executables, able to run on Windows, MacOS and Linux.
In this tutorial, we're going to use a module from npm called weather-js to create an app which gets weather data from weather.service.msn.com. It's very convenient: we don't have to figure out the MSN API to use it.
We recommend using AppStudio 8 (or later) with this tutorial.
Set up the project
1. Download and install Node. (This also installs npm.)
2. Using AppStudio, create a new project called ElectronWeather and save it. (You can also use the ElectronWeather sample with comes with AppStudio by opening it and doing a 'Save As' elsewhere, to create a fresh copy. If you do this, several steps below can be skipped - follow the instructions)
3. Enter 'Weather App' into description in Project Properties.
4. In Project Properties, go to the Electron section and open package.json. Modify the 'dependancies' line as follows: (Skip this step if you're using the sample).
This includes the Weather-js Node library from npm.
5. To add your own icon, follow these steps. (Skip this step if you're using the sample).
- Put an png file at least 512x512 in your project directory.
- Set PhoneGap icon(1024) to that icon in Project Properties.
Add the Weather Code
1. Add a button to Form1.
2. In the Code Window for Form1, paste the following code. You'll notice there is a new function called 'require' in the first line. This function is part of Node.js: it loads the module of that name.
Since this function is not part of JavaScript, the project will not run in the browser as a normal project would.
Run the App
Now we're ready to run the app. On the Run menu, choose 'Run Desktop App using Electron'
Some notes
- The Chrome Dev Tools window opens by default. We'll need this if we are going to debug the app.
- To turn off the Chrome Dev Tools, set 'Chrome Dev Tools' to false in Project Properties.
- The 'Electron Security Warning' in the console can be ignored.
Distributing the App
We now have a running app. The next step is to package it for distribution. We can make regular executables for distribution on MacOS, Windows and Linux. The packaging has to done on a computer running the OS we are targeting: the MacOS version needs to be build on a Mac, etc.
There is more documentation on packaging at https://www.electron.build/. You'll need to pay special attention to code signing requirements.
On the Run menu, choose 'Make Desktop App for Distribution using Electron'. If the build fails, look at the log in 'About AppStudio' for more information.
When the build is complete, you will find the executable in your project folder, in
electron/ElectronWeather/dist/*
Tips
Setting Electron Runtime Options
The operation of Electron apps at runtime can be changed by modifying the electronMain.js module. It's in the Electron section of Project Properties.
You can learn more about the options in ElectronMain.js.
How to tell if you are running Electron at runtime
How to tell if you are running Windows or MacOS at runtime
Debugging
- Check the AppStudio Log in 'About AppStudio'. It will have more info.
- To reset the Electron environment, simply delete the electron folder in your project. It will be recreated next time you start your app.
- To start your Electron app in a console, open it in the electron folder of your project directory and enter:
Electron Desktop App Mac Computer
- To build your Electron distributable in a console, open it in the electron folder of your project directory and enter:
Retrieved from 'https://wiki.appstudio.dev/index.php?title=Using_Node_and_Electron_to_build_Desktop_Apps&oldid=10850'
ELECTRON APPS
![Mac Mac](https://hackernoon.com/hn-images/1*j0RCS6dCDeqwfle1knhjEA.png)
Electron Desktop App React
![Mac Mac](https://i.ytimg.com/vi/GHXgRBWb634/maxresdefault.jpg)
GitHub Electron (or simply Electron) allows you to build desktop applications .Electron is a blend of two incredibly popular technologies: Node.js (or simply Node) and Chromium. Thus,any web application you have written can run on Electron. Similarly, any Node application you have writtencan run on Electron. But the power of Electron is that you can use both solutions together.The two technologies together create a rich and engaging desktop applications.
Who Is Using Electron?
The very popular team messaging application Slack is built atop Electron, enabling them to develop a commonUI across the operating systems. If Atom is not your code editor of choice, then Microsoft’s Visual StudioCode might be. This popular editor is also built atop Electron. This is currently our editor of choice at themoment. The team at Basecamp, a popular project management tool, now supports an out of browser experience. If you haveworked with Zeplin.io to inspect your visual designs, then the desktop version was developed with Electron.The Postman API inspection tool is another great example of what is possible as an Electron application.These are just some of the examples of some first-class web applications that have been able to breakfree from the browser and create desktop-centric versions of their applications. If you would like to exploresome other applications that have been built with Electron, visit https://electronjs.org/apps
Electron’s Advantages
Electron applications are just like any other desktop application as they are installed locally on the user’shard drive. They can be launched directly from the Windows taskbar or from the OSX Dock, and there is noneed to launch a browser and navigate to some url to run your application. When you need to open or save afile, these dialogs are native in appearance and interaction. Your Electron application can support full dragand-drop interaction with a local file system, or even associate itself with a file type, so when a user doubleclicks the associated file your app will open.
How Does Electron Work?
Electron-based applications run in two distinct processes: the main process and the render process Each of these two processes has a specific responsibility within your application. While Electronprovides a good collection of Node modules for use within your application, many of these modules are onlyavailable within a specific process