How to run localhost on your iPhone

Requirements

• Mac
• iPhone
• Mac to iPhone connection (e.g. USB-C to Lightning cable). Note that using an adapter did not work for me (USB-C to USB, USB to Lightning)

Phone Preparation

• Connect your phone to your Mac
• Click “Trust this device” on your phone

Mac Preparation

1. Make sure your phone and mac are connected to the same WiFi network
2. On your Mac, go to System Preferences → Sharing
3. Uncheck the “Internet Sharing” checkbox if it is enabled
4. In “To computers using”, select iPhone USB
5. Turn on the Internet Sharing checkbox again. It will prompt you. Click yes.
6. In this same Sharing settings page, change your Computer Name to your first name, all lower case. http://yourname.local is the site you will navigate to on your phone

(Optional) Frontend & Backend Preparation

If you have separate applications for your frontend and backend (e.g. an API) and plan to run both locally on different ports, you must follow these steps:

Frontend

1. Your frontend will be hitting your backend (e.g. frontend sends requests tolocalhost:8000). In your frontend, you must change this API URL to yourname.local:8000 , or whatever port number your backend is on instead of 8000
2. Run your frontend on your selected port name (e.g. 3000)

Backend

1. Your backend is probably set up to allow your frontend to access your backend API. For example, in a Django app, you have a settings.py file which has a line like this:
   ALLOWED_HOSTS=[".localhost", "127.0.0.1"]
2. If your backend API only allows some domains to access it (like in the previous step), you must add more domains:
   ALLOWED_HOSTS=[".localhost", "127.0.0.1", ".local", "yourname.local"]
3. Make sure your backend API does not have a subdomain! For example, make sure your API is not at api.localhost:8000 . Make it available at localhost:8000
4. You may also have to configure CORS to allow for your phone to access the backend API (see code after Step 5)
5. Start your backend server at 0.0.0.0:8000 or whatever port number you want instead of 8000. In Django, the correct command is python3 manage.py runserver 0.0.0.0:8000

CORS_ORIGIN_ALLOW_ALL = False 
CORS_ALLOW_CREDENTIALS = True 
CORS_ORIGIN_REGEX_WHITELIST = [
     r"^http://.*\.?localhost:3000$",
     r"^http://.*\.?local:3000$",
     ... 
]

Running localhost

• Navigate to http://yourname.local:8000 on your phone and you’re all set!