How to share your local dev environment using ngrok

Update 5-16-2015: I wrote a new article explaining How to get VVV and ngrok working

This one goes out to all you web developers out there. If you are developing sites, you are probably using version control & working locally (if you’re not- you should be). Your current workflow probably looks something like: make changes locally, push them to staging evnironment, test, push to live. Thats a perfectly good workflow.. for a solo developer.

What if you are working in a team environment? You have probably run into needing to quickly show a coworker (or even a client) something and get some immediate feedback. You might go over to their desk, push your unfinished code to staging, or maybe even meet up somewhere to show them the work right on your computer. What if you could just send them your local site link and they could view your local environment from their computer, live, and right through the browser? Well… you can!

ngrok to the rescue

ngrok is a phenomenal tool that lets you share your localhost environment to anybody. Set up is usually painless, and the benefits plentiful.

How to install ngrok

You need to have node installed. To check, you can go into terminal and run node -v. If you have node installed, you should also have npm installed. To check, run npm -v in terminal. If you don’t have either of those, go install them and come back. Actually installing ngrok is really simple thanks to how powerful npm is. Just run the following command: $ sudo npm install -g ngrok Once it’s finished installing, try running ngrok 80 and see if you get any errors. If you don’t- congratulations! You just set up and installed ngrok.

Authenticate your connection with your ngrok account

If you don’t already have one, create a free ngrok account. Once you login, you will see your authtoken. With it, run the following line in terminal:

$ ngrok -authtoken YOUR_TOKEN_HERE 80

It’s default configuration is to work with http://127.0.0.1. If this is your configuration, than you are all set to use ngrok.

How to use ngrok with custom local domains

What if you have custom URLs set up thorugh your vhosts? For example, all my sites go something like site-name.dev. Well, this isn’t an issue! Within your apache vhosts file you can update your VirtualHost definitation with a ServerAlias property. Find your Apache vhosts file and find the lines where you are defining your VirtualHost and add the following line (replace ‘example’ with whatever you want to use to access your site through the ngrok tunnel): ServerAlias example.ngrok.com

How to set ServerAlias in MAMP Pro

In MAMP Pro, under the ‘hosts’ tab, select the host you want to add the ServerAlias to. Then, on the right site, click ‘advanced’, and at the bottom you should see a text box for ‘Customized virtual host general settings’. Put the ServerAlias definition in there. Now, run ngrok and specify the server alias: $ ngrok -subdomain example 80 You should see the standard ngrok tunnel screen in your terminal.

How to use ngrok with Vagrant

If you are using Vagrant for your local environment, then there are a few extra steps to getting ngrok working. I won’t go into details about installing and setting up vagrant in this posdt. I’m going to assume that you have one up and running. The following commands are tested and working in the PuPHPet generated Debian Wheezy 7.5 x64 vagrant environment. You will need to vagrant ssh into your vagrant environment.

• Download & Install node

  • $ sudo apt-get install nodejs-legacy

• Download & Install NPM

  • $ curl https://www.npmjs.org/install.sh | sudo sh

• Download & Install ngrok

  • $ sudo npm install -g ngrok

From here, you can work with ngrok just like you would outside of Vagrant. Make sure you have your server alias defined in your vhosts (located in /etc/apache2/sites-available/25-random_string_here.conf). To view this file, just run the following in terminal:

$ sudo nano /etc/apache2/sites-available/25-drjF0S4rYXK3.conf

That will open it up within your terminal. Use the arrows to move up and down the file, make your changes, and use ctrl+o to save and ctrl+x to quit. If you had to change your vhosts, make sure you restart apache:

$ sudo service apache2 restart

Enjoy Sharing your local environment!

Remember that ngrok doesn’t replace a staging environment and it shouldn’t be something you leave running all the time. Use this tool wisely, and easily sharing your local environemnt!