All my code is divided into folders, with each folder being a separate “project”. Instead of opening files through
file://, I use MAMP. The parent directory for all of these “project” folders is the
htdocs/ directory that MAMP uses as the root of my local server. This folder resides in
/Applications/MAMP/. Say I’m working on Tipsy, I would view its index.html at
localhost:8888/tipsy/, the “tipsy/” folder within “htdocs/”.
Of course, the above only applies to static assets that can be served over a server. Most of the time, you’re writing an app that has a server-side component. I usually use NodeJS, but you could use RoR or Django or something else. For Node, I usually have to fire up a local Express server. I follow some similar steps to accomplish this:
$ cd htdocs/ $ cd mynodeapp/ $ npm start $ Your webserver is now running on localhost:5000...
Now, I can view the app on
localhost:5000, and view my other projects on
When it comes to testing in environments other than my local machine, I use ngrok. It’s free, secure, and open-source. For the longest time, I used localtunnel, but I find ngrok to be more reliable. If I want to view localhost:5000 on my iPhone, I just run ngrok like this:
$ ngrok 5000 Tunnel Status online Version 0.14/0.8 Protocol http Forwarding http://5c921ed7.ngrok.com -> 127.0.0.1:5000 Web Interface http://localhost:4040 # Conn 0 Avg Conn Time 0.00ms
This is really nice! I get a nice URL (http://5c921ed7.ngrok.com) that points to my localhost port, along with a web interface that shows me the requests and responses flowing through the server. I can even secure these URLs with usernames and passwords for added protection and they are all SSL-encrypted.
Another benefit of ngrok is that the URL persists even when you lose your connection, or your computer goes to sleep.
What’s your development and testing workflow? Share them below, so I can improve mine!