If you want to create instead of a Squirrel based installer, a MSI (Microsoft Installer) setup, please follow this tutorial instead.

  1. Npm Create Command
  2. Pass Opts To Create Dmg Npm Download
  3. Pass Opts To Create Dmg Npm Server
  4. Npm Create Module

As a developer, you may know that Linux has package managers so the developers don't 'need' to make the installers. Developers just need to provide a package for a distribution, each distribution then has a way to install this package and this way can be in a terminal (apt-get) or via a graphical interface, e.g. Ubuntu Software Center. However, Windows is not Linux.

Dec 20, 2017  TL;DR: In this article, we are going to learn what tools we should take advantage of when developing NPM packages. We will start from scratch and create a GitHub Repository to host our package, then we will look into interesting and important topics. For example, we will talk about IDEs, we will configure ESLint in our project, we will publish the package on NPM and into the registry, and we. Jun 02, 2015  Hey, this can be done in two different ways right now: Add a custom run-script that manually applies those extra arguments as necessary (so you could do npm run inst -my-custom-flag); Use env variables to pass those values in.

Almost all installers are created by a tool (e.g. WiX, Nsis, Inno Setup and many others). In this article, you will learn how to create an installer for windows using the electron-winstaller module which uses Squirrel, the installation and update framework for Windows desktop apps.

1. Prepare your work area

And with this, we don't mean that you should clean your computer. To make this tutorial easy to understand, we are going to create a folder in the desktop with the name electron-workspace, this folder will contain inside a folder that contains the source code of your Electron Project:

In this case, the folder will be located at C:UserssdkcaDesktopelectron-workspace and the source code of the electron project will be inside of it (myapp-source).

2. Install the Electron winstaller module

Now, we need to install the module that will help us to create the installer, in this case we are going to use electron-winstaller. This NPM module builds Windows installers for Electron apps using Squirrel. Start the NodeJS command prompt and Navigate to the workspace using (note that the module needs to be installed in the workspace, not in your project):

And then install the module with:

After the installation of the module, our workspace will have now 2 folders:

3. Manage desktop shortcuts (install, update and uninstall events)

An application that can be installed, but the executable can't be found to start it once it's closed doesn't work for nothing. Therefore, we are going to use the electron-squirrel-startup module that will help you to achieve our goal. It handles the most common commands, such as managing desktop shortcuts (installation event, update event and uninstall event).

This module needs to be installed inside your project, not in the workspace, therefore navigate to the folder of the source code of your Electron project with the NodeJS command prompt, in this case we are going to use:

And then install the module using:

After the installation of the module, we need to instruct with some code what we are going to do. We are going to add some code, specifically in the main.js file of your Electron Project. At the start of your file (after the declaration of the app variable) add the following lines:

The handleSquirrelEvent function expects as first argument the app variable, this function can be added at the end of your main.js file:

Note

The following code will be only executed if the application is within an installer, so this code will be not executed while you work on your project.

The previous code should handle the basic things that happens when a new app is installed in your system e.g the shortcut will be added to the Start Menu and Desktop and it will remove the shortcut when the uninstaller is executed, besides it should work without any modification. Feel free to add more code if you need to.

4. Build your app

The required modifications to accomplish the basic tasks of an installed applications were made, now proceed to build your application. We assume that you know how to build your application using tools like electron-packager. If you don't, please read the following article about how to create a distribution from your app using electron packager in Windows.

After know how to build your application, proceed to do it. Navigate to the workspace (in order to build the project inside of it):

And build the project, for example, we are going to build our project using the following command:

That will create the myapp-source-built-win32-x64 folder inside the electron-workspace folder that has the following structure:

5. Create an installer from your application

Once your project has been built, you can create an installer from it. Create a folder where the installers will be created, specifically in our workspace (C:UserssdkcaDesktopelectron-workspace) with the name you want, in this case it will be myapp-source-built-installers. You won't touch this folder as the installers will be created in the next step automatically. At this step, you should have 4 folders (myapp-source-built-installers is empty):

Now create a script that will create our installers, create the build.js file in our electron workspace (C:UserssdkcaDesktopelectron-workspace) with the following code inside:

Note

If you don't feel comfortable working with relative paths, you can use absolute paths in your first try to know what's happening.

Note

You can change the icon and other properties in the settings of the previous script. Check all the supported options here.

To build an installer from your app, you just need to execute this script. However, in case that you find this error:

The Component/@Id attribute's value, 'your-app-exe-name.exe', is not a legal identifier. Identifiers may contain ASCII characters A-Z, a-z, digits, underscores (_), or periods (.). Every identifier must begin with either a letter or an underscore.

Is necessary to edit the name property of your project in the /your-built-project/resources/app/package.json file and remove or replace all the hyphen (- symbol) e.g if your package.json looks like:

Change it to:

If you already verified this, proceed to execute the build.js script navigating to the workspace with the NodeJS command prompt:

And execute the script:

The installer files will be created and it will took a while. Once the installers are created you will see the following message in the console:

Finally, open the installers folder (in this case located in C:UserssdkcaDesktopelectron-workspacemyapp-source-built-installers) and you will find there 3 installers (msi installer, executable installer and a nuGET package):

Npm Create Command

You can try to install your app locally executing as administrator the Setup.exe file. Then a mini setup will install the application on your system and you will be able to see it in the start menu of Windows and as a shortcut in the Desktop:

Note

The setup loading animation can be changed if you provide the path of a gif file to show during the installation in the loadingGif option in your build.js script.

Note that the name of the executable, description and other properties can be changed in the package.json of your app and in the options of the winstaller module, for more information please visit the repository to see the documentation.

Important notes

For development or internal use, creating installers without a signature is okay, but for a production app you need to sign your application. Internet Explorer's SmartScreen filter will block your app from being downloaded, and many anti-virus vendors will consider your app as malware unless you obtain a valid cert.

Any certificate valid for 'Authenticode Code Signing' will work here, but if you get the right kind of code certificate, you can also opt-in to Windows Error Reporting. This MSDN page has the latest links on where to get a WER-compatible certificate. The 'Standard Code Signing' certificate is sufficient for this purpose.

Happy coding !

Working with environment variables is a great way to configure different aspects of your Node.js application. Many cloud hosts (Heroku, Azure, AWS, now.sh, etc.) and Node.js modules use environment variables. Hosts, for example, will set a PORT variable that specifies on which port the server should listen to properly work. Modules might have different behaviors (like logging) depending on the value of NODE_ENV variable.

Here are some of my tricks and tools when working with environment variables in Node.js.

The Basics

Accessing environment variables in Node.js is supported right out of the box. When your Node.js process boots up it will automatically provide access to all existing environment variables by creating an env object as property of the process global object. If you want to take a peek at the object run the the Node.js REPL with node in your command-line and type:

This code should output all environment variables that this Node.js process is aware of. To access one specific variable, access it like any property of an object:

You should see that the value of PORT is undefined on your computer. Cloud hosts like Heroku or Azure, however, use the PORT variable to tell you on which port your server should listen for the routing to work properly. Therefore, the next time you set up a web server, you should determine the port to listen on by checking PORT first and giving it a default value otherwise:

The highlighted line will take the value of the PORT if it’s available or default to 3000 as a fallback port to listen on. Try running the code by saving the it in a file like server.js and run:

The output should be a message saying Server is listening on port 3000. Stop the server with Ctrl+C and restart it with the following command:

The message should now say Server is listening on port 9999 since the PORT variable has been temporarily set for this execution by the PORT=9999 in front of node.

Since process.env is simply a normal object we can set/override the values very easily:

The code above will set or override the value of MY_VARIABLE. However, keep in mind that this value is only set during the execution of this Node.js process and is only available in child processes spawned by this process. Overall you should avoid overriding environment variables as much as possible though and rather initialize a config variable as shown in the PORT example.

Explicitly loading variables from .env files

If you develop on multiple different Node.js projects on one computer, you might find you have overlapping environment variable names. For example, different messaging apps might need different Twilio Messaging Service SIDs, but both would be called TWILIO_MESSAGE_SERVICE_SID. A great way to achieve project specific configuration is by using .env files. These files allow you to specify a variety of different environment variables and their values.

Typically you don’t want to check these files into source control so when you create one you should add .env to your your .gitignore. You will see in a lot of Twilio demo applications .env.example files that you can then copy to .env and set the values yourself. Having an .env.example or similar file is a common practice if you want to share a template file with other people in the project.

How do we load the values from this file? The easiest way is by using an npm module called dotenv. Simply install the module via npm:

Afterwards add the following line to the very top of your entry file:

This code will automatically load the .env file in the root of your project and initialize the values. It will skip any variables that already have been set. You should not use .env files in your production environment though and rather set the values directly on the respective host. Therefore, you might want to wrap your load statement in an if-statement:

With this code we will only load the .env file if the server isn’t started in production mode.

Let’s see this in action. Install dotenv in a directory as shown above. Create an dotenv-example.js file in the same directory and place the following lines into it:

Afterwards, create a file called .env in the same directory with this content:

Pass

Run the script:

Pass Opts To Create Dmg Npm Download

The output should look like:

As you can see the value was loaded and defined using dotenv. If you re-run the same command with NODE_ENV set to production you will see that it will stay undefined.

Now the output should be:

If you don’t want to modify your actual code you can also use Node’s -r argument to load dotenv when executing the script. Change your dotenv-example.js file:

Now execute the file first normally:

The script should print that the current value for FOO is undefined. Now execute it with the appropriate flag to require dotenv:

The result is that FOO is now set to bar since the .env file has been loaded.

An alternative way to load .env files

Now dotenv is great but there was one particular thing that bothered me personally during my development process. It does not override existing env variables and you can’t force it to do so.

As a result of these frustrations, I decided to write my own module based on dotenv to fix this problem and make loading environment variables more convenient things. The result is node-env-run or nodenv. It’s a command-line tool that will load a .env file, initialize the values using dotenv and then execute your script.

You can install it globally but I recommend to only use it for development purposes and locally to the project. Install it by running:

Afterwards create a file nodenv-example.js and place this code in it:

As you can see, we don’t need to require anything here. It’s just the application logic. First try running it using node:

This executed code should output The value for FOO is: undefined. Now try using node-env-run by running:

The result should be The value for FOO is: bar since it loaded the .env file.

node-env-run can override existing values. To see it in action first run the following command:

The command-line output should say The value for FOO is: foo. If we now enable force mode we can override existing values:

As a result we should be back to the original The value for FOO is: bar.

Pass Opts To Create Dmg Npm

If you want to use this tool regularly, I recommend that you wrap it into an npm script. By adding it in the package.json like so:

This way you can simply run:

Environment variables && npm scripts

There are scenarios where it’s useful to check the value of an environment variable before entering the Node.js application in npm scripts. For example if you want to use node-env-run when you are in a development environment but node when you are in production mode. A tool that makes this very easy is if-env. Install it by running:

Make sure to not install it as a “dev dependency” since we will require this in production as well.

File recovery from dmg free. Now simply modify your npm scripts in your package.json:

This script will now execute npm run start:prod and subsequently node . if NODE_ENV has the value production and otherwise it will execute npm run start:dev and subsequently nodenv -f .. You can do this technique with any other environment variable as well.

Try it out by running:

Debugging

We all know the moment where things are just not working the way you want it to and some module is not doing what it’s supposed to do. That’s the moment it’s time for debugging. One strategy that helped me a lot is using the DEBUG environment variable to receive more verbose logs for a bunch of modules. If you for example take a basic express server like this:

And start it up with the DEBUG variable set to *:

You’ll receive a bunch of extensive logging that looks something like this:

The “magic” behind it is a lightweight module called debug and its usage is super easy. When you want to use it all you have to do is to initialize it with a “namespace”. Afterwards you can log to that namespace. If someone wants to see the output all they have to do is enable the namespace in the DEBUG variable. express in this case uses a bunch of sub-namespaces. If you would want everything from the express router, all you have to do is set DEBUG with the appropriate wildcard:

Pass Opts To Create Dmg Npm Server

If you want to use debug in your own module all you have to do is to first install it:

And afterwards consume it the following way:

Now use all the environment variables!

These are by far not all the things you can do with environment variables and all the tools that exist but rather just the ones that I use most often. If you have any other great tools that you regularly use, I would love to hear about them!

  • Email: dkundel@twilio.com
  • Twitter: @dkundel
  • GitHub: dkundel

Now that you’ve learned a bit more about Environment variables in Node.js, try out Twilio’s Node.js quickstarts!

Npm Create Module

Please enable JavaScript to view the comments powered by Disqus.