How to setup electron-ad-blocker
A couple months ago I created a simple library that blocks ads in an electron browser window. Before I wrote this library, I never had to care about building native dependencies or mismatched node versions of my machine and my electron distribution.
In this article, I will guide you through the detailed steps needed to add electron-ad-blocker to your project without any issues of mismatched node versions by correctly building the source files. There is an alternative installation method which uses electron-rebuild, however, I prefer to manage the versions of my distribution all by myself so I have a better understanding of what I am dealing with.
Although this might look like a lot of work for adding a small dependency to your project, I think it will benefit you by knowing how to manage different versions of node in the future (and python, but don’t worry).
1. Setup nvm
Let’s start out by installing nvm. Chances are this is the first time you are going to be caring about which version of node you use. Trust me, all tools used in this article should be common knowledge and will keep you out of a lot of trouble in the future. In case you are already familiar with the node version manager, you can skip this step.
You should install nvm by following the instructions on their website. It is recommended to follow these steps instead of using homebrew to install nvm. After the installation is completed, fire up a new terminal window and you are ready to start installing different versions of node.
2. Setup node-gyp
Since we will be using dependencies from npm which contain .cpp files, we will need a tool to compile these native addon modules for the correct version of node that we want to use. This is exactly what node-gyp will do for us, so make sure to install it on your machine.
3. Setup pyenv
You should be able to manage different versions of node by now and have the most recent version of node-gyp on your machine. Awesome! Since you have already found out how easy it is to manage different versions of node, there has to be said something about managing different python versions.
Since node-gyp uses python in order to compile native addons for node, the version of your python distribution should be supported by node-gyp. The python version on your machine should be at least 2.5 and below 3.0. In case your python version is not supported, you should follow the steps below in order to install pyenv, the python version manager (like nvm for node), and install a supported version. We will use homebrew to install pyenv, so make sure you have the newest version of homebrew installed.
4. Setup electron-ad-blocker
For this tutorial, I will use the electron quickstart project and add electron-ad-blocker to it. Let’s start by cloning the repository, install the dependencies and run the basic application.
Before we proceed to the installation of the electron-ad-blocker, you should find out which version of node your electron version uses. The quickstart example will already show this version on the screen when you start your application. If you are using an existing electron project, you can find out which version of node it uses by logging the process.versions.node variable.
In this example, we use electron v1.8.2 which comes with node v8.2.1. That’s all we need to know to add electron-ad-blocker to the project. Now switch to the version of node that electron uses, as well as to a supported version of python. By using the correct versions of node and python, electron-ad-blocker will automatically be compiled to the right version of node.
5. Start blocking ads
That’s it. You can now start using electron-ad-blocker as it is described in the readme of the repository. Basically, you can now block ads in any window that is spawned by electron.
Conclusion
Although it might be a lot of work to install a small library like this, I think it will be in your favor to know how to manage different versions of node and python anyway. I have had a lot of trouble in the past when I had to work with native modules together with electron, but knowing how to properly manage versions of different node distributions definitely helped me out in these situations.
Oh, and if you like electron-ad-blocker, please star it on Github!
Happy Coding 🎉
