#Electron api with angular how to
#Electron api with angular install
#Electron api with angular pro
#Electron api with angular code

Open the folder containing the code in VS Code.

Running the appĪssuming you're using the same template that I am using in this example, getting started is very easy. So now, let's jump right in and get to that. That's it! That's all you need in order to build and run your Electron + Angular 7 app.

#Electron api with angular install

Once you have Visual Studio Code installed, install the VS Live Share extension from the Extensions pane in VS Code. I haven't tested this on Linux, but in theory it should still work. You will want the latest versions for your operating system, which you can download from the VS Code download page. Install Visual Studio Code and the Visual Studio Live Share extension This is due to a trick I use in order to make this whole thing work, which I will explain later. The code will be needed on both environments even though you technically only need it on the host for Visual Studio Live Share. I also have a somewhat up to date fork here since I wanted to make sure I (and thus you) have a fork. If you want a really quick demo, you can grab the code I use from maximegris's github which is actively being maintained. In this article, I tested with 11.10.0 installed. I recommend having the latest version of Node from the Node download page. Setting up your environmentįirst things first, before diving into the details, let's make sure your environments are set up properly. After a few debug sessions, my coworker and I stumbled upon an even cooler method of utilizing Live Share and Electron.shared debugging! Well, kind of. When running a web app in Visual Studio Code, Live Share is able to create a tunnel between the collaborators' machines and allow a shared debugging session to be set up, complete with the web app running on both machines! Needless to say when working in a distributed environment, this kind of tooling greatly increases the capacity for development collaboration and pair programming. The Live Share team is constantly adding new features, and one really cool one is shared debugging of web apps. Even better, I was able to collaborate with my coworker using Visual Studio Live Share.

I was able to run and debug the Angular web app in Visual Studio Code.

When running the Electron app locally, I was able to make modifications and instantly see the changes upon saving a code file using Visual Studio Code.

#Electron api with angular pro

For the first time in a long time, I was able to completely develop all of the system components on my iMac Pro without having to constantly spin up different virtual machines for different components. This was the first time I had worked with Electron and I was pleasantly surprised how efficient my workflow became. Recently, I was on a very interesting project with a coworker that we were building using Electron and Angular 7. Note: This does not actually share debugging breakpoints within VS Code, but it does allow everyone in the live share session to run the app locally with any changes made during the session. Now any participant in the live share can reload the rendered page in the Electron app and see the changes being performed in the live share.

Run npm start on Environment B on its local code base, not the code being shared in the live share session.

This should be done on the local code base of Environment B, not the code base being shared in the live share session.

In Environment B, modify the package.json file to launch the node web server on port 4201 (or something other than the default 4200).

In the main environment (Environment A), start a live share session and join it from Environment B.

Install VS Code and the Visual Studio Live Share extension.

Setup two Electron development environments on different machines.

Here's a quick synopsis of getting a Visual Studio Live Share session working with Electron. TLDR Share an Electron session using Live Share

#Electron api with angular how to

Want an easier way? Read on for how to debug shared code using Electron, Visual Studio Code and VS Live Share.