How It Works
CodeKit has a built-in server that always hosts the active project. The app automatically refreshes every browser that's connected to this server.
Just Click Preview
Click the Preview Button in the top right corner of the window. Copy the address to your other devices and be sure each is connected to the same WiFi network as your Mac. For static sites, that's it.
Sites With Dynamic Content
If your site uses server-side processing (like PHP) or you're doing something advanced:
- Configure an external server (like MAMP) to host your project
- Open Project Settings and choose the Browser Refreshing category
- Flip the External Server Required switch ON
- Enter the address of your external server
What Address Do I Enter In The Textfield?
The address of the server you set up in step one. If you're using MAMP and have not changed any defaults, it's usually http://localhost:8888 or it might be a custom virtual host you configured, like http://mysite.dev
What Address Do I Load In My Browser?
ALWAYS go to the address for CodeKit's internal server (the one that opens when you click the "Preview" button). That's the only one CodeKit will auto-refresh. When you use an external server, CodeKit becomes a reverse-proxy; it talks to your external server to load content.
Injection vs. Full Reload
When you save a stylesheet, CodeKit refreshes the browser by injecting changes without reloading the entire page. This lets you easily style modal content. When you save a page or script, however, the whole site reloads to capture those changes.
The Server Popover
Click the Server Button at the top of CodeKit's window. The popover that appears shows three addresses.
This will always have the form http://[your computer name]:5757. If your computer's name is long, you can shorten it in the Sharing Pane of macOS's System Preferences.
The non-Bonjour address is for devices like Android or Windows, which don't support Bonjour networking. It will always be: http://[your Mac's local IP address]:5757
This Mac Only
The final address is always just localhost:5757. Use this if your Mac is not connected to any network.
WARNING: On some networks, the Bonjour address may not behave correctly. (Bonjour can sometimes be a bag of hurt.) In those cases, use the Non-Bonjour address.
CodeKit supports TLS (SSL) connections to the Preview Server. This is required to test things like Facebook integration, etc. Click the checkbox in the Server Popover to enable TLS. CodeKit's server will restart and you'll see https:// addresses.
WARNING: This is for development testing only. DO NOT rely on this connection to safeguard real, sensitive data.
NOTE: When TLS is enabled, if you forget to type https:// instead of http://, the page will hang and fail to load. You MUST use https when TLS is on.
CodeKit automatically generates a new self-signed certificate every time your computer's IP address changes. Because the certificate is self-signed, you'll see scary warnings in your browser the first time you open CodeKit's secure preview address:
On The Desktop
On macOS, things are easiest if you use Chrome. On the screen above, click Advanced and then continue to the site to bypass the warning. In Firefox, you'll see an overlay with instructions. In Safari...you're gonna have a bad time.
On Mobile Devices
When TLS is enabled and you preview on an iOS or Android device, you'll see an overlay like the one to the right.
While CodeKit can serve the page just fine, in order to auto-refresh the browser over TLS, you must manually approve the self-signed certificate. Follow the directions to do so. You'll be asked to install the certificate in iOS's system preferences.
Alternately, you can tap I'll refresh manually. CodeKit will still serve the page, it just won't be able to auto-refresh the browser.
This Seems Complex
Yes. TLS is complicated. It was also designed to stop exactly what CodeKit needs to do: inject a bit of code into your page to enable auto-refresh.
I recommend that you work with TLS turned off most of the time and only enable it when you need to test certain aspects of your site that require it.
It's Not Working!
See the Troubleshooting page for things to check.
CodeKit strips all domain= values from each Set-cookie: header returned by your External Server. This causes the browser to store the cookie for the current document's domain, which is exactly what we want. The domain returned by your External Server will not match the domain of CodeKit's built-in server, so the browser would normally not store the cookie as instructed. Simply removing the domain value is more reliable than trying to modify it.
GZIP & Deflate
If your External Server returns gzipped or deflate-ed content, CodeKit will uncompress that data before sending it to the browser. This allows the app to inspect the page content and inject its reload script, if needed.
If your site accepts large uploads (such as videos or photos submitted through a form), you should not test those features while previewing the site through CodeKit's server. The upload will likely time out.