Vvv: Is there a way to access vagrant on mac from a mobile device ?

[dwainm]

I would like to access Vagrant running on my mac from and iPhone or any other mobile device.

I have have managed to access the server general settings page by following the instructions below but how can local.wordpress.dev be accessed from a mobile device.

https://github.com/10up/varying-vagrant-vagrants/wiki/Configure-for-a-Public-Network

I could only access the page below using the instructions above and the ip address http://192.168.50.4/:

I have also tried the instructions here: http://docs.vagrantup.com/v2/networking/public_network.html

I hope I've given enough information here.

[westonruter]

I think you need to use a service like http://xip.io/

This is because you can't modify the hosts file on your mobile device.

[dwainm]

Ok, thanks for the link but I think it will require the urls within VVV to correspond to :

default.[ip address].xip.io

trunk.[ip address].xip.io

dev.[ip address].xip.io

src.[ip address].xip.io

Maybe one of the VVV experts can add support for this so after caging the network settings one can access the sites through these urls.

On Mon, Jan 27, 2014 at 4:12 PM, Weston Ruter [email protected]
wrote:

I think you need to use a service like http://xip.io/

This is because you can't modify the hosts file on your mobile device.

Reply to this email directly or view it on GitHub:
https://github.com/10up/varying-vagrant-vagrants/issues/263#issuecomment-33370251

[jeremyfelt]

@dwainm This is a great question and one of the tougher scenarios to deal with. As @westonruter (VVV expert) mentioned, the limitation is on the mobile device rather than VVV.

I can imagine a couple scenarios for a custom setup:

1. If you have an iPhone and a Mac, you can load the site via Safari (and possibly Chrome now?) and Webkit on your phone.
2. Configure Nginx to send dev.[ip address].xip.io to the site you are debugging.
3. Configure Nginx to send 192.168.50.4 to the site you are debugging.
4. Setup a DNS server, possibly through router firmware, that directs local traffic. Tomato

If there is something specific we can do in VVV to ease one of these processes, we should try. Documentation is probably the best bet.

[westonruter]

@jeremyfelt in addition to documentation, one change we could make is to add xip.io subdomain aliases for the sites bundled with VVV. For example:

-     server_name  local.wordpress.dev *.local.wordpress.dev;
+     server_name  local.wordpress.dev *.local.wordpress.dev *.local.wordpress.dev.*.xip.io;

This would also need to be done for all domains fed into vagrant-hostsupdater, for each host adding one with .*.xip.io appended.

[dwainm]

Sorry @westonruter was not aware that you are an expert :) much respect and thanks for the direction once again.

@jeremyfelt. I still need this solution so I'll dig into it a bit and add my findings here for further discussion and a possible doc's addition.

​
On Mon, Jan 27, 2014 at 8:10 PM, Jeremy Felt > wrote:

@dwainm This is a great question and one of the tougher scenarios to deal with. As @westonruter (VVV expert) mentioned, the limitation is on the mobile device rather than VVV.
I can imagine a couple scenarios for a custom setup:
If you have an iPhone and a Mac, you can load the site via Safari (and possibly Chrome now?) and Webkit on your phone.
Configure Nginx to send dev.[ip address].xip.io to the site you are debugging.
Configure Nginx to send 192.168.50.4 to the site you are debugging.
Setup a DNS server, possibly through router firmware, that directs local traffic. Tomato
If there is something specific we can do in VVV to ease one of these processes, we should try. Documentation is probably the best bet.
—
Reply to this email directly or view it on GitHub.

[jeremyfelt]

Whoa, xip.io seems like magic. We should definitely think about adding that in to the default configs.

[westonruter]

VVV: “Magic by default.”

[dwainm]

I think we've found our answer :

http://www.vagrantup.com/blog/feature-preview-vagrant-1-5-share.html

Still need to test it but this surely is a great feature .

[westonruter]

:heart_eyes: WOW. Integrating ngrok/localtunnel with Vagrant? Yes please.

However, it doesn't seem that Vagrant Share allows you to specify the share name, does it? By default it picks randomized obscure host names, but this will be obviously problematic for Nginx since it has to have a stable sever_name.

[dwainm]

Yes that maybe the case but if the share URL doesn't change we could find a way to add it. Maybe a plugin that automatically creates a sure URL and adds it to Nginx ?

On Thu, Feb 27, 2014 at 5:54 PM, Weston Ruter [email protected]
wrote:

:heart_eyes: WOW. Integrating ngrok/localtunnel with Vagrant? Yes please.

However, it doesn't seem that Vagrant Share allows you to specify the share name, does it? By default it picks randomized obscure host names, but this will be obviously problematic for Nginx since it has to have a stable sever_name.

Reply to this email directly or view it on GitHub:
https://github.com/Varying-Vagrant-Vagrants/VVV/issues/263#issuecomment-36256401

[sftsk]

UPDATE:

has some issues when navigating to other pages, will tell you when I fixed it

Got it to work for me:

I added this very open string in the ngninx conf to pretty much accept anything containing the project name in the url:
server_name ~^(.*)project_name(.*)$

Then I added a line in the Vagrant file to forward its 80 port:
config.vm.network :forwarded_port, guest: 80, host: 8484

Now it is possible to access the project with xip.io:
http://project_name.YOUR_IP.xip.io:8484

hope this is going to help somebody :)

[jonathan-dejong]

sftsk I couldnt get that to work.. but then again I'm kind of new to this whole thing..
Could you provide a more detailed approach (which files etc)?

thanks

[sftsk]

Hey, depending on what you are going to use my solution is not going to work.
I had encountered some errors back then and did not really have the time since then to look them up and used my own Vagrantbox where I have set up this future myself (it runs with Apache though).

If I find the time to fix this in VVV I will keep you posted!

Anyway to get working what I had add this server_name ~^(.*)project_name(.*)$ into the vvv-nginx.conf file of the project that you want to access.

Then add config.vm.network :forwarded_port, guest: 80, host: 8484 to the Vagrantfile in the root directory of VVV.

Do a vagrant reload --provision and you should be able to access your project with a url like this one http://project_name.YOUR_IP.xip.io:8484 from devices within the same (local) network.

I hope this helps!

[aronwp]

Hi Guys. I have not played around with Vagrant Share yet but use ngrok to access the local domains via the public ngrok domain. It's very simple using their subdomain feature with a paid account (well worth it).

All you have to do reserve a domain ie domain.ngrok.com in your ngrok dashboard and add that to the vvv-nginx.conf file under server_name like this server_name domain.dev domain.ngrok.com;

You will also have to install this plugin before you access your website at the public domain http://wordpress.org/plugins/root-relative-urls/

Then run ngrok -hostname domain.ngrok.com 192.168.50.4:80

After you complete those steps you will be able to access your domain at http://domain.ngrok.com

one of the best features is that you can also access the secure domain at https://domain.ngrok.com and get the site ready for ssl

[jonathan-dejong]

Hi Aron,

Sounds interesting.. Is there a restriction to how many reserved domains you can have with a paid account? Can you for example discontinue a domain in order to be able to select a new one?
(Imagine that you're working on say 5 projects at a time which gets replaced by new ones regularly)

[jamesmehorter]

I connect to my Vagrants (or any hostname in hosts) on my computer from my iPad by setting up a simple proxy server on the computer like so..

1) Install VVV on your computer (so that local.wordpress.dev works while on the computer)
2) Install SquidMan (If you're on a Mac or something like WinGate if you're on Windows) and make sure it's running.
3) On your iPad/iPhone in your Settings > Wi-Fi click the little '(i)' icon to view your connected network info (Where you can view your IP Address and such). And along the bottom set HTTP PROXY to 'Manual'. Enter the local IP of your computer running VVV and the port the proxy server is running on (SquidMan uses 8080 by default). Here's a screenshot of my iPad's Wi-Fi settings showing the proxy settings.. http://postimg.org/image/3uxstgf25/

That's it! Now on the iPad in Safari navigate to http://local.wordpress.dev.. and viola! Basically the iPad is just tunneling through the computer and using it's internet, so any hosts entries will automatically work on the iPad.

Hope that helps someone else! :)

[jonathan-dejong]

I have a different solution now which doesn't really require much setup!

Using the new and fantastic version of codekit you can have it setup a LAN accessible address.. So for you who aren't extremely keen on lots of setup and also look towards simplifying your SASS/LINT etc. usage take a look at codekit.. definitely worth the money imo!

It's even possible to setup a worldwide adress with some port forwarding :)

[ericmann]

Wow, there are a lot of solutions here ... but it doesn't need to be this difficult.

When I run my Vagrant boxes on Windows I use a program called Fiddler as a local web proxy. It allows me to inspect any requests going across the network and, conveniently, ships with its own version of a dynamic hosts file. I can then tell my iOS device to use my Windows machine (port 8888, which is used by Fiddler) as a proxy and all requests pass dynamically through the proxy, use its hosts file, and can see the VM.

For Mac users, there's a similar program called Charles that will allow you to active the same - use the iOS device's native proxy settings to pipe traffic through the proxy running on your local machine directly to the VM.

[simonwheatley]

Here's the Charles, Mac Proxy, instructions for proxying so you can view on a mobile device: http://www.charlesproxy.com/documentation/faqs/using-charles-from-an-iphone/

[msouden]

Wow. Great thread. Will be interested to see which direction VVV goes. My as-yet-unimplemented solution goes like this: 1. Configure VVV for public network. 2. Edit the host file on LAN's router. Granted, this only allows for testing across LAN, but that satisfies my needs. This might require modded (or "upgraded") router firmware.

Any glaring holes in this plan?

[zbtirrell]

Another series of instructions on how to do this using Squid proxy: http://egalo.com/2012/05/29/testing-mac-web-site-using-local-hostname-on-mobile-device/

[mcnitt]

@jamesmehorter @zbtirrell SquidMan was easy to set up (I was up and running in minutes) and it's free. Thanks!

[aubreypwd]

Great tip @sftsk to over-clarify his post, in my vvv-nginx.conf it ended up looking like:

server {

    listen 80;
    listen 443 ssl;

    server_name letsryde.com.dev;
    server_name ~^(.*)letsrydecomdev(.*)$;

    root {vvv_path_to_folder};

    include         /etc/nginx/nginx-wp-common.conf;

}

And I modified my ~/VVV/Vagrantfile to have (at line 9):

# -*- mode: ruby -*-
# vi: set ft=ruby :

dir = Dir.pwd
vagrant_dir = File.expand_path(File.dirname(__FILE__))

Vagrant.configure("2") do |config|

  config.vm.network :forwarded_port, guest: 80, host: 8484

  # Store the current version of Vagrant for use in conditionals when dealing
  # with possible backward compatible issues.
  vagrant_version = Vagrant::VERSION.sub(/^v/, '')

  # Configurations from 1.0.x can be placed in Vagrant 1.1.x specs like the following.
  config.vm.provider :virtualbox do |v|
    v.customize ["modifyvm", :id, "--memory", 512]
    v.customize ["modifyvm", :id, "--natdnshostresolver1", "on"]
    v.customize ["modifyvm", :id, "--natdnsproxy1", "on"]
  end
...

Which then allowed me to access it using: http://letsrydecomdev.70.184.101.234.xip.io:8484/

Note: I had to port forward 8484 to my internal IP via my router for this to work.

[salcode]

There is a lot of information on Network Configurations at https://jeremyfelt.com/2015/01/31/various-networking-configurations-vvv/.

I've had trouble getting the Public Network working (see #566) but I've had a lot of success with the Port Forwarding.

I have full write up about what I'm doing at http://salferrarello.com/vagrant-vvv-setup-wordpress/ but the short version is I've added a Customfile in the root vvv directory, which overrides some of the settings in the Vagrantfile. I've copied my Customfile below.

Requirements

• pfctl needs to be installed on your system. It is included by default on a Mac. I don't know if you can set it up on other OSes
• vagrant-triggers needs to be installed.

Customfile

  # set port forwarding from host 8080 to guest 80
  config.vm.network "forwarded_port", guest: 80, host: 8080


  if defined? VagrantPlugins::Triggers
    # port forwarding setup and removal for running on your host primary IP address
    config.trigger.after [:up, :reload, :provision], :stdout => true do
      system('echo "
rdr pass on lo0 inet proto tcp from any to self port 80 -> 127.0.0.1 port 8080
rdr pass on en0 inet proto tcp from any to any port 80 -> 127.0.0.1 port 8080
rdr pass on en1 inet proto tcp from any to any port 80 -> 127.0.0.1 port 8080
" | sudo pfctl -ef - >/dev/null 2>&1; echo "Add Port Forwarding (80 => 8080)"')
    end
    config.trigger.after [:halt, :suspend, :destroy], :stdout => true do
      system('sudo pfctl -F all -f /etc/pf.conf >/dev/null 2>&1; echo "Removing Port Forwarding (80 => 8080)"')
    end
  end

Result

My machine is running on 10.0.1.6 and I can access the sites at

• http://10.0.1.6/, the VVV page found at http://vvv.dev/
• http://local.wordpress.10.0.1.6.xip.io/, the site http://local.wordpress.dev/
• http://local.wordpress-trunk.10.0.1.6.xip.io/, the site http://local.wordpress-trunk.dev/
• http://src.wordpress-develop.10.0.1.6.xip.io/, the site http://src.wordpress-develop.dev/
• http://build.wordpress-develop.10.0.1.6.xip.io/, the site http://build.wordpress-develop.dev/

[koppenhoefer]

I'm late to the game,.. but I find that ngrok solves this problem for me...: local ipads and even network-remote ipads (different country) can access my non-default sites :) It is _slow_ however.

@westonruter NGROK worked for me to target a domainsite rather than the vvv default,.. by specifying the -host-header="mysite.dev" option. So Nginx answered with mysite.dev rather than the default even though I was using the randomised ngrok url. I didn't need to do 'vagrant share' to reach my site from my ipad. Too bad I can't do something like '%vagrant share -hostname=mysite.dev' so that clients accessing the randomish url get an automatic rewrite of the Host header :-)

@aronwp So with -host-header option, you don't really need a paid account.

[salcode]

@koppenhoefer Can you post the ngrok command with parameters you're using? I'd love to try it out.

[koppenhoefer]

@salcode Sure! Note that I used vv create to generate that separate wordpress site in my vvv... for a site 'tangolausanne.dev'.

_this worked for me_:
ngrok http tangolausanne.dev:80 -host-header=tangolausanne.dev
My local ipads can visit the site,.. and even remote clients (different countries) get access. And there's no need to use 'vagrant share' for this. Slow though.

_this worked for me but not as expected_:
Using your Customfile solution and visiting tangolausanne.dev.192.168.50.4.xip.io did allow the host machine to access the the vv default site,.. but not the intended tangolausanne.dev site,.. The ipad couldn't get any response at all using that url; Unexpectedlyy, on the host, this fails: http://localhost:8080 whereas this works: http://localhost:80. Of course, from the iPad I _can_ reach 192.168.0.42:80 (the hosts ip) and from the iPad I _can_ reach 192.168.0.42:8080... but in all those cases nginx serves up the default folder rather than the tangolausanne.dev folder in the VM :( The solution sas to use this instead: tangolausanne.192.168.50.4.xip.io (_that's right... remove the 'dev'_). It also works to visit the default wordpress site (local.wordpress.dev).... using local.wordpress.192.168.50.4.xip.io (_that's right... remove the 'dev'_). Of course, none of this gives you access to remote users from outside your local network.

_and just to be complete..._
Using vagrant share works for every device... local or remote... but only to access the default folder configured in nginx. The trick of setting that to the hosted site does indeed work (ie. to /srv/www/tangolausanne). And @zbtirrell's solution with Squid (and gui Squidman) also worked for me.

[MickeyKay]

Question - I've played with ngrok before for this very thing, however the free version doesn't allow for the standard VVV-generated subdomains, right? Example: local.wordpress-trunk.dev

Any workarounds for this issue, or do I just need to generate a new site that's got a non-sub domain?

[salcode]

@MickeyKay
I'd check out this article on using ngrok 2.0
http://zachwills.net/setting-up-ngrok-and-vvv-to-share-your-local-wordpress-environment-with-the-world/

[topdown]

I found a solution using Grunt that does not require changing anything with the vagrant setup but is for working on 1 site at a time.
Links are in the top of the Gruntfile for the places that I pulled the setup from.

I have been using it to build themes and do full device testing and it has been working great.
It syncs browsers across the Wifi network and acts like Live Reload.
There is a Gist here https://gist.github.com/topdown/940a0af716fc386517ed2169fa7ffc4f
One setting must be set in the Gruntfile var $proxy = 'vvv_domain.dev';
The gruntfile should be in your theme.
I have it setup to use Chrome as the parent browser see browser: "google chrome"

Once you run grunt and node modules are loaded it will open the site in your browser
http://localhost:3000/
with access URLs output in the command line

Access URLs:
 -------------------------------------
       Local: http://localhost:3000
    External: http://192.168.1.24:3000
 -------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.1.24:3001
 -------------------------------------

It uses browser sync and has a nice UI.
NOTE: I have it stripped down for speed, Eg. I am only watching html,php and css
And using compass outside of this to watch my SASS files. Having grunt manage sass was to slow for me.

I could write this all out in a Wiki page here. Let me know.

[dingo-d]

Could you use webpack for this as well? Setting up webpack-dev-server maybe?

There is: https://www.npmjs.com/package/browser-sync-webpack-plugin

I will try to implement this with webpack and post back the gist with the settings if it works.

[dingo-d]

I can confirm, the above works with webpack 3 :) Just follow the instructions on the link above.

First you need to enable port forwarding and public networks in your Vagrantfile

~rb
config.vm.network :public_network
config.vm.network "forwarded_port", guest: 80, host: 8080, auto_correct: true
~

Add the browser-sync and browser-sync-webpack-pluginwith npm install --save-dev PACKAGE, which should add them in the devDependencies key in package.json.

Then in your webpack.config.jsadd

~~~js
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');

module.exports = [
// context, entry etc. goes here...
plugins: [
new BrowserSyncPlugin({
host: 'localhost',
port: 3000,
proxy: 'localhost:8080'
})
]
];
~~~

Then just start webpack with --watch and that's it. Works like a charm :)

You can check the full config here: https://github.com/infinum/wp-boilerplate/blob/master/webpack.config.js

[tomjn]

At the moment VVV 2 doesn't provide this out of the box, but there is discussion and attempts to bring xip.io like services to the site provisioners elsewhere, so I'm going to close this particular ticket out in favour of those

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.