Pass Opts To Create Dmg Npm
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 (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:
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
.
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!