Loadcoach42

If the app works correctly, run electron-forge make to build the macOS executable. The build process will create a folder called Out in the r-shiny-electron directory. In Out/r-shiny-electron-darwin-x64, you will have an executable ( r-shiny-electron.app ) that you can run to test that the app is working correctly.

• Build App For Macos Electron Capture
• Build App For Macos Electronic
• Build App For Macos Electron Configuration
• Build App For Macos Electron Microscopy
• Build App For Macos Electron Drive
• Build App For Macos Electron Transfer
• Build App For Macos Electron Software

The goal is to generate a.exe file for Windows, a.app for macOS, a.deb for Debian-based Linux distributions, and so on. Electron Packager is the official Electron tool to help us convert our source code to a bundle specific for macOS, Linux, or Windows. How To Create Your First Cross-Platform Desktop Application with Electron on macOS Step 1 — Creating the Project. First you’ll install Electron to your machine and create the project folder to build the. Step 2 — Installing Electron. Now you’ll implement the configuration of the package.json file. Aug 21, 2020 To illustrate the cross-platform capabilities of Electron.NET, let's replace the default home page content with a list of active system processes. Later on, we'll build a Linux version and observe the differences on that platform. First, open Pages/Index.cshtml.cs and add the following using statement for process APIs: using System.Diagnostics.

Follow the guidelines below for building Electron.

Platform prerequisites

Check the build prerequisites for your platform before proceeding

Build Tools

Electron's Build Tools automate much of the setup for compiling Electron from source with different configurations and build targets. If you wish to set up the environment manually, the instructions are listed below.

GN prerequisites

You'll need to install depot_tools, the toolset used for fetching Chromium and its dependencies.

Also, on Windows, you'll need to set the environment variable DEPOT_TOOLS_WIN_TOOLCHAIN=0. To do so, open Control Panel → System and Security → System → Advanced system settings and add a system variable DEPOT_TOOLS_WIN_TOOLCHAIN with value 0. This tells depot_tools to use your locally installed version of Visual Studio (by default, depot_tools will try to download a Google-internal version that only Googlers have access to).

Setting up the git cache

If you plan on checking out Electron more than once (for example, to have multiple parallel directories checked out to different branches), using the git cache will speed up subsequent calls to gclient. To do this, set a GIT_CACHE_PATH environment variable:

Getting the code

Instead of https://github.com/electron/electron, you can use your own fork here (something like https://github.com/<username>/electron).

A note on pulling/pushing

If you intend to git pull or git push from the official electron repository in the future, you now need to update the respective folder's origin URLs.

📝 gclient works by checking a file called DEPS inside the src/electron folder for dependencies (like Chromium or Node.js). Running gclient sync -f ensures that all dependencies required to build Electron match that file.

So, in order to pull, you'd run the following commands:

Building

Or on Windows (without the optional argument):

This will generate a build directory out/Testing under src/ with the testing build configuration. You can replace Testing with another name, but it should be a subdirectory of out. Also you shouldn't have to run gn gen again—if you want to change the build arguments, you can run gn args out/Testing to bring up an editor.

To see the list of available build configuration options, run gn args out/Testing --list.

For generating Testing build config of Electron:

For generating Release (aka 'non-component' or 'static') build config of Electron:

To build, run ninja with the electron target: Nota Bene: This will also take a while and probably heat up your lap.

For the testing configuration:

For the release configuration:

This will build all of what was previously 'libchromiumcontent' (i.e. the content/ directory of chromium and its dependencies, incl. WebKit and V8), so it will take a while.

To speed up subsequent builds, you can use sccache. Add the GN arg cc_wrapper = 'sccache' by running gn args out/Testing to bring up an editor and adding a line to the end of the file.

The built executable will be under ./out/Testing:

Packaging

On linux, first strip the debugging and symbol information:

To package the electron build as a distributable zip file:

Cross-compiling

To compile for a platform that isn't the same as the one you're building on, set the target_cpu and target_os GN arguments. For example, to compile an x86 target from an x64 host, specify target_cpu = 'x86' in gn args.

Not all combinations of source and target CPU/OS are supported by Chromium.

If you test other combinations and find them to work, please update this document :)

See the GN reference for allowable values of target_os and target_cpu.

Windows on Arm (experimental)

To cross-compile for Windows on Arm, follow Chromium's guide to get the necessary dependencies, SDK and libraries, then build with ELECTRON_BUILDING_WOA=1 in your environment before running gclient sync.

Or (if using PowerShell):

Next, run gn gen as above with target_cpu='arm64'.

Tests

To run the tests, you'll first need to build the test modules against the same version of Node.js that was built as part of the build process. To generate build headers for the modules to compile against, run the following under src/ directory.

You can now run the tests.

If you're debugging something, it can be helpful to pass some extra flags to the Electron binary:

Sharing the git cache between multiple machines

It is possible to share the gclient git cache with other machines by exporting it as SMB share on linux, but only one process/machine can be using the cache at a time. The locks created by git-cache script will try to prevent this, but it may not work perfectly in a network.

On Windows, SMBv2 has a directory cache that will cause problems with the git cache script, so it is necessary to disable it by setting the registry key

to 0. More information: https://stackoverflow.com/a/9935126

This can be set quickly in powershell (ran as administrator):

Troubleshooting

gclient sync complains about rebase

If gclient sync is interrupted the git tree may be left in a bad state, leading to a cryptic message when running gclient sync in the future:

If there are no git conflicts or rebases in src/electron, you may need to abort a git am in src:

I'm being asked for a username/password for chromium-internal.googlesource.com

If you see a prompt for Username for 'https://chrome-internal.googlesource.com': when running gclient sync on Windows, it's probably because the DEPOT_TOOLS_WIN_TOOLCHAIN environment variable is not set to 0. Open Control Panel → System and Security → System → Advanced system settings and add a system variable DEPOT_TOOLS_WIN_TOOLCHAIN with value 0. This tells depot_tools to use your locally installed version of Visual Studio (by default, depot_tools will try to download a Google-internal version that only Googlers have access to).

© GitHub Inc.
Licensed under the MIT license.
https://www.electronjs.org/docs/development/build-instructions-gn

Today we’ve just shipped a new version of the Slack Desktop application for macOS. We built it with Electron, and, as a result, it’s faster, sports a frameless look, and has a number of behind-the-scenes improvements to make for a much better Slack experience.

There are, of course, different ways to build desktop applications with web technologies. Unlike a 100% in-box approach that some other apps take, Slack takes a hybrid approach where we ship some of the assets as part of the app, but most of the assets and code are loaded remotely. Since there isn’t much information out there about how to do this with Electron, we wanted to dive into a bit more detail about how our hybrid application works.

First, Some History

Originally, the Slack desktop application was written using the MacGap v1 framework, which internally used WebView to host web content inside of a native app frame. While that served us well for a long time (including the retrofitting of multiple-team support), this architecture was starting to show its age. New features such as HTTP/2 are only coming to Apple’s new WKWebView view, and moving to this would effectively require a complete rewrite of the application. Furthermore, WebView was tied to the operating system’s version of Safari, meaning that we didn’t have many options when older versions of macOS had an issue in Safari that affected our app.

Separately, when we created the Slack Windows application, we couldn’t use the existing codebase, so we decided to bet on a brand new platform called Electron.

We’ve written about Electron before, but to summarize, Electron is a platform that combines the rendering engine from Chromium and the Node.js runtime and module system.

Since very early in the development of the Slack Electron app, we’ve had a working macOS version (albeit with many missing features). It was useful for us to be able to share our app with coworkers using macOS, for things like design feedback. 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

Build App For Macos Electron Capture

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. Our app has migrated from a CoffeeScript application written with vanilla DOM APIs to a modern ES6 + async/awaitReact application, and we’re currently incrementally moving our app to TypeScript.

The Chromium Multi-process Model

Electron inherits Chromium’s multi-process model — the main application as well as every Slack team that you’re signed into live in a separate process with its own memory space. For us, this means that we can restart individual teams that crash or have other issues without affecting the rest of the app, as well as protection from GPU driver issues via a separate GPU process.

On macOS, these renderer processes are labeled “Slack Helper;” you’ll see one for every team, plus three extra for crash reporting, the GPU, and the process that hosts the team switcher.

The WebView Tag

Build App For Macos Electronic

While we generally trust the local Slack application to run with full access to the desktop and Node.js, allowing remote content to directly access desktop features and Node.js is insecure — if someone were to Man-In-The-Middle Slack, they would have full control over user computers! To prevent this, we use a feature of Electron ported from Chrome Apps called the WebView element (unrelated to Apple’s WebView view mentioned above). Conceptually, this HTML element is similar to an iframe, in that it includes another site inline as a block element. However, it actually creates a separate Chromium renderer process and delegates rendering of content for its hosting renderer, similar to how the Flash plugin host framework works.

Before any navigation occurs, we get a chance to run custom code with Node.js integration enabled, called a “preload script.” This script runs before the DOM is created and before the page has an origin, but gives us access to Electron and Node.js APIs.

One thing that we can do in our preload script is set a key on the window object. This allows us to expose an API to the webapp side of Slack. Since we define this API, we can set up a Security Boundary that only grants the webapp certain methods.

There are a few things that you must do in order for this approach to be secure:

1. You must ensure that you don’t leak Node.js modules into your API surface.
2. You should be thoughtful about your APIs, especially ones involving file paths. Make sure that a malicious caller of your API can’t access data on a user’s file-system.
3. You only have to worry about access to JS objects via JavaScript itself, being able to see Node.js objects via the DevTools console tab is generally safe. DevTools has access to hidden V8 methods that JavaScript doesn’t, so being able to get to Node.js objects through, for example, the “closure” pseudovariable is not a concern.

Communicating between processes

Communicating between all of these different processes is Tricky Business. On top of Chromium’s low-level IPC module which lets you send messages between processes, we’ve built a library called electron-remote.

electron-remote is a pared-down, faster version of Electron’s remote module, using ES6 Proxy Objects. Using proxies, we create an object which represents the window on a remote renderer, and all method calls get sent as messages to that remote. This lets you accomplish the same things as the traditional remote module, but without the pitfalls of remote event handlers and synchronous IPC.

First, set up the API you want to create in the main window. To make our example easier to understand, we’ll use a global variable:

Build App For Macos Electron Configuration

Next, in our preload script, we’ll actually wire it up:

Now, your web application has access to a new object desktopIntegration which has a bounceDock method:

Being able to access remote objects efficiently makes implementing your webapp’s API much easier. In our case, it allows us to easily send Redux App Actions to update our app’s state and by proxy, the UI that depends on that state, to render updates to the badges on the Dock icon, or to update the unreads state on the team switcher items.

You must be careful when using electron-remote to audit your remote objects the same way that you audit your other preload objects — being able to ask another process to do something malicious is just as bad as doing it in-process!

Build App For Macos Electron Microscopy

Open Source Libraries

As part of writing the Slack Desktop application, we’ve developed a number of libraries and tools that we’ve open-sourced:

Build App For Macos Electron Drive

We’ve also spent some time contributing to the Electron project itself, to help improve the framework for developers.

Build App For Macos Electron Transfer

As you can see, the new Slack Desktop app helps our development team have the best of both worlds — the rapid iteration and ecosystem of web development, and the ability (with a bit of C++ and elbow grease!) to access the underlying Mac operating system in ways that websites can’t reach. We’re excited for the future of our Desktop apps, especially all the things we can do to bring together your team’s work together.

Build App For Macos Electron Software

If you want to help us make Slack a little better each day, check out Careers site and apply today. Apply now