search

tonistiigi / styler

CSS/Stylus live editor
MIT License
133 stars 9 forks source link

Live preview on mobile? #13

Closed elgerlambert closed 11 years ago

elgerlambert commented 11 years ago

Hi,

I installed styler through npm -g, aswell as the chrome extension.

I'm working on a "localhost" node.js project.

Loading my app in chrome works great, if I open more chrome browser windows (same page) they appear in the menu (top left).

However opening the same page/app in other browsers, but more importantly on my mobile devices, they don't connect to styler.

Is this because I used the chrome extension to set everything up, should I be using 1 of the other 3 options if I want to benefit from styler's live preview on my mobile devices? Also, is the "allowed" parameter needed to accomplish this?

Great project, keep up the good work! Would love to get this working on mobile, that be a real killer feature!

tonistiigi commented 11 years ago

Chrome extension only works for connecting Chrome client. Firefox extension only works for Firefox. It just automatically adds the Javascript snippet to your page.

Styler should work fine with iOS 5+ and Android 4.0+. This is what you need to do.

  1. Include the Javascript snippet on the first page to you webpage source. You don't have to use that exact HTML, just need to include the Javascript file it points to. If the file points to your localhost you have to replace it with you local IP.
  2. By default you can't access Styler from other machines. You can try it by loading that same JS file. You should get a forbidden message. To fix this start Styler with --allowed option passing in the IPs of you mobile devices. You can also use wildcards to allow all LAN with something like styler --allowed "192.168.1.*"
  3. Thats it. One other thing to check is that you probably created the project with a Base URL pointing to localhost. You need to change this also to your local IP, otherwise it thinks it belongs to another project.
elgerlambert commented 11 years ago

Thanks @tonistiigi! I got everything working by following your instructions.

I have a feeling this is going to be a real timesaver!

You might want to consider adding something like you've written in your comment above to your readme or wiki - to help others like me get started. You might even want to add a comment to the "lazy" section on the "Hi, lets get started page" (i.e. http://localhost:5100/). Just a quick mention that the chrome and firefox extentions will only enable styler on their corresponding browser.

Anyways, thanks for helping me out! And thank you for styler!!