Using Ionic behind a proxy server

June 3, 2018, 10:00 am Categories:


If you've found yourself working in an environment where network security is heavily emphasised you may experience non-access issues such as the following error message when attempting to install npm packages or create ionic projects behind a proxy server:

npm ERR! network read ECONNRESET
npm ERR! network This is most likely not a problem with npm itself
npm ERR! network and is related to network connectivity.
npm ERR! network In most cases you are behind a proxy or have bad network settin
npm ERR! network
npm ERR! network If you are behind a proxy, please make sure that the
npm ERR! network 'proxy' config is set properly.  See: 'npm help config'
^CTerminate batch job (Y/N)? Y

Not the nicest of messages to be greeted by (although it does provide us with the answer to what is causing the error to manifest).

As frustrating as these issues can be they are, thankfully, quite easy to resolve with the following configurations (you will, of course, need the proxy server settings from your network administrator in order for these to be successfully implemented).

Configuring your system environment

Depending on your OS of choice (Windows or Mac OS for the purposes of this tutorial) you can configure proxy server access via your preferred command line software for each platform (I.e. Command Prompt, Terminal etc) as follows:

// ---- Windows ----
// Set proxy configuration for current session
set http_proxy=[proxy server]:[proxy port]
set https_proxy=[proxy server]:[proxy port]

// OR set proxy configurations from an administrative command prompt as a global
// system environment variable (once entered you will need to close the command prompt 
// and re-open for the settings to take effect)
setx http_proxy=[proxy server]:[proxy port] /M
setx https_proxy=[proxy server]:[proxy port] /M

// View these settings (you should see the proxy server entry being printed to the screen)
echo %http_proxy%
echo %https_proxy%

// ---- Mac OS ----
// Open up your .bash_profile shell and enter the following configurations:
export http_proxy=[proxy server]:[proxy port]
export https_proxy=[proxy server]:[proxy port]
export npm_config_proxy=[proxy server]:[proxy port]
export npm_config_https_proxy=[proxy server]:[proxy port]

// Once saved activate the configuration for the current shell session
// with the following command:
source ~/.bash_profile

Configuring npm

*NOTE - IF you are using a Mac OS platform and have implemented the npm configuration within your bash shell file (as per the previous section) then you can safely ignore the following section.

Open up a command line terminal and enter the following configurations for http and https port access via npm:

npm config set https-proxy http://[proxy server]:[proxy port]
npm config set proxy http://[proxy server]:[proxy port]

Once entered test that these have been registered with the following commands:

npm config get https-proxy
npm config get proxy

If these have been entered correctly you should see the proxy server address and username/password/port details being printed to the screen.

Using with Ionic

Now that your system has been configured to allow access to network addresses outside of the proxy server you can simply go ahead and run your ionic commands as normal.

If the Ionic CLI prompts you to install the @ionic/cli-plugin-proxy npm package (I experienced this request with the Ionic CLI on Windows 10 - so not sure if this is specific to one platform, the network configuration within the corporate environment I'm currently working in or standard across all platforms/network environments) simply answer yes.

More information on the @ionic/cli-plugin-proxy npm package.

In summary

Proxy servers can make command line work with Ionic, npm and similar software feel incredibly restricted at first but, as this tutorial demonstrates, bypassing these restrictions is fairly straightforward.

If you've enjoyed what you've read and/or found this helpful please feel free to share your comments, thoughts and suggestions in the comments area below.

I explore different aspects of working with the Ionic framework in my e-book featured below and if you're interested in learning more about further articles and e-books that I'm writing please sign up to my FREE mailing list.



Post a comment

All comments are welcome and the rules are simple - be nice and do NOT engage in trolling, spamming, abusiveness or illegal behaviour. If you fail to observe these rules you will be permanently banned from being able to comment.