Add support for http://xip.io/

[xiwcx]

I ran in to a problem where typekit won't serve fonts because it needs some part of the address to be reliable. http://xip.io/ was the answer to that problem, but now if a server opens in the browser at 192.168.1.5:3002 i have to manually add 192.168.1.5.xip.io:3002, which is not the end of the world, but I can see it adding confusion down the road with other developers on my team. It would be great if this functionality could be added or—if this is already possible—if the functionality could be documented.

Thanks.

[shakyShane]

That's an interesting problem.

Are you using the server, proxy or just the snippet?

[xiwcx]

I'm using the static server to build a living styleguide (so the fonts are important). More or less using the plugin out of the box:

        browser_sync:
            serve:
                bsFiles:
                    src: [
                        '.docs/*.html'
                        '.docs/css/*.css'
                    ]
                options:
                    watchTask: true
                    server:
                        baseDir: '.docs'

[shakyShane]

Just looked at xip.io - that's a pretty cool service. I could easily add an option for this.

xip: true

I think I'll put this in the next release - thanks for bringing it to my attention!

[xiwcx]

That's fantastic, thanks for responding so quickly!

[shakyShane]

Does this seem like it would work for you?

http://quick.as/w7ph7kr

[xiwcx]

Hey, I had some thoughts on this, I'm sorry I didn't write them down sooner as I didn't realize you would be so on top of this.

1.) It might make sense to have something more open ended like a string called "append". Instead of a boolean called "xip":

     append: 'xip.io'

This might help future proof the feature if alternate services arise or potentially replace xip.io. Obviously, I'm not picky about this and you should do what you think is best, I just thought it might save you additional work down the road.

2.) The more time I've spent working on my project, I've noticed that if i'm using 10.5.5.195.xip.io:3002 instead of 10.5.5.195:3002 browsing and scrolling are still synced, but livereload only works the first time and subsequent livereloads result in a white page. If you then manually refresh the browser the changes show up. You might want to test this out yourself before you push the changes.

Just wanted to make those notes, but otherwise that solution looks great and would definitely work for me.

[shakyShane]

Haha! I like to implement other people's ideas as soon as possible with the hope of increasing community contributions/ideas :)

1. totally agree on that idea.
2. will look into this - the next release is a full re-write so many bugs like this will be squashed.

[shakyShane]

In version 0.7.0 now with either

hostnameSuffix: ".xip.io"

or simply

xip: true

[DanielTate]

Is this suppose to work with local addresses?
It seems typekit isn't loading for my local network even when using this...

I have added *.xip.io to my typekit settings and enabled xip: true in my gulp file.

My local address on the network is 192.168.1.75, when accessing this from my machine it's fine, from any other machine on the network it doesn't load typekit.

Any insights? Has this functionality changed?

[xiwcx]

Yes, @DanielTate, the exclusive purpose is to work with LAN addresses. Let me know if you've followed all of the steps in this article: http://welchcanavan.com/developing-locally-with-typekit-and-xip/

If you have, I'm not quite sure what could be going wrong, but I'll try to think of something.

[codeengie]

I ran into a similar problem, tried the settings for *.xip.io, localhost, mylocaldev.com but it didn't work. Long story short if you are using Adblock and Ghostery plugins in your browser make sure you disable/whitelist the domain you are using for your local development as in my case Ghostery was the culprit and was blocking Typekit. Now my Typekit fonts show up in my local development with or without the *.xip.io setting in my gulpfile.js or typekit domain.