Browsing to a Simple Web Server on a Mac from Sublime Text | John Papa

John Papa

Evangelist on the loose

Browsing to a Simple Web Server on a Mac from Sublime Text

...

sublimeLately one of the computers I have been using is a Mac Air with the Haswell chip. The combination of the Mac Air’s sleek and lightweight design along with the super long life and power of the Haswell chip is just fantastic! I’m using both OSX and Windows (in Parallels) and I spend most of my time on the Air in Xcode, Sublime Text, and Visual Studio (also tinkering with AppCode from Jet Brains … but more on that later).

When I want to write and test some quick HTML/JavaScript/CSS that requires a web server on the Mac Air I use Sublime Text. Sublime is pretty cool as an editor and the plug-in ecosystem is reach. But many of the plug-ins lack polish, some don’t seem to work well, and it can be daunting to know which one to choose at times. Overall I love the plug in model, but its very similar to Visual Studio’s in that you need to try them out to know which you like. So why did I go down this road? Well, when writing and testing some SPA code I often want to run it in the context of a web server. Simple HTML/JS is fine off the file system, but somethings require a bit more. For example, to avoid getting Cross Origin request errors when using AngularJS and routing for templates.

I found a quick and easy way to solve this with some built in OS features on the Mac.

Browsing from Sublime

I wanted to browse HTML code without a web server on a Mac. So i could simply right click the HTML file in Sublime and open it in the browser and have it point to localhost on a specified port (and not file://)

Why? If you open a HTML file in the browser from Sublime it may run, but it also may produce an error about cross origin request if your code has any of that (like with routing of templates). This is because you may be serving everything off the file system and not a web server.

Quick Solution

Run the SimpleHTTPServer on the Mac using the Terminal, for the folder where your code lives.

  • CMD + SPACE (open Spotlight)
  • Type Terminal and hit ENTER
  • Navigate to your development folder.
  • Type python -m SimpleHTTPServer 8000
  • Right click in Sublime and Open in Browser

This should browse to your code at http://localhost:8000/SublimeTest/index.html

I made some assumptions here. For example, when you navigate to your development folder, I put all my demos under the same folder to make life easy. My folder is called develop, so this is where I set up the server.

Thanks to Ward Bell and Jesse Liberty to helping test this with me.

tags: javascript mac sublime
  • Alastair Lockie

    Good tip. You can actually launch one directly from ST2 using https://sublime.wbond.net/packages/SublimeServer. Not compatible with ST3 though afaik.

    • http://learningcn.com/ Yongning Liang

      now it compatible with ST3

  • Greg

    Hi John – about to replace my old MBP for a new one – was considering the 13″ I5 with 8gb and 512 – it has haswell and iris… I often do my web dev on mac using webstorm and server-side dev in VS 2013 running vmware – how is the performance? Debating whether I should opt for the more pricy 15″. I do a lot of spa dev and lately I’m doing spa’s which have dashboards that surface BI data (sql star schema…). Any thoughts?

  • xtalx

    You might want to take a look at Pow. http://pow.cx

    Install with: curl get.pow.cx | sh
    After installing it you simply

    $ cd ~/.pow
    $ ln -s /path/to/myapp

    Your app will be up and running at http://myapp.dev/

%d bloggers like this: