Local Setup and MAMP
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 localhost:8888.
Sharing Localhost with ngrok
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!
Gadgets featured image is All rights reserved by Peter.liehu.
Thank you for this tip! This will significantly improve my development workflow.
Thanks for showing me ngrok. So great for what it does. Lately, I have been using modulus to push my projects, but this is better since I don’t have to zip and push changes every time. Now, if I were using something like Heroku, which has automation with Git, I wouldn’t need ngrok. But I do, and I am thankful for this post!
If your doing dev on your macbook and just want to see things on your iphone: .local:5000/ . This assumes both are on same wifi network. . Thanks for the article though, ngrok seems a lot better than localtunnel so far.
I think you might be on to something in keeping your sites in subdirectories of the htdocs folder. I currently keep them all in client folders in the ‘sites’ directory and use name-based resolution (i.e. mysite.dev) but that’s a pain when sharing across networks/the internet as obviously those names don’t resolve. I think I’ll give your way a go.
This is awesome! Thank you!
hello,I want to build ngrok service on my iphone(jailbreaked) ,what should i do?
(I installed openssh,i want use other devices on internet to connect this device use ssh terminal)