If you want to create instead of a Squirrel based installer, a MSI (Microsoft Installer) setup, please follow this tutorial instead.
- Npm Create Command
- Pass Opts To Create Dmg Npm Download
- Pass Opts To Create Dmg Npm Server
- 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 (
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:
handleSquirrelEvent function expects as first argument the app variable, this function can be added at the end of your
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:
If you don't feel comfortable working with relative paths, you can use absolute paths in your first try to know what's happening.
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:
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
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.
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
Here are some of my tricks and tools when working with environment variables in Node.js.
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
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
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
Explicitly loading variables from
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:
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
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
Now execute the file first normally:
The script should print that the current value for
undefined. Now execute it with the appropriate flag to require
The result is that
FOO is now set to
bar since the
.env file has been loaded.
An alternative way to load
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
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
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
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.
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
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:
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
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: email@example.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!