In this super quick screencast, we use MAMP to set up a URL we can use for local development. This is useful for a bunch of reasons:
- We can link to resources via relative links from the root, e.g.
background: url(/images/something.jpg); - TypeKit fonts can work because we can “allow” this specific URL to work
- We’ll need this later anyway when we start using PHP.
- It’s fun to think of weird TLD’s (top level domains). Our’s is called v10.whatup
Without MAMP, add this line to the /etc/host file:
Edit Apache configuration (/etc/apache2/extra/httpd-vhosts.conf):
Finally to activate this add this line to /etc/apache2/httpd.conf file:
… then restart Apache with Terminal command:
I literally went through 3 days of hell stuck on this process. Apparently the new conventions require the line order allow, deny
allow from all
to
require all granted
voila, i can move on now :)
For the rest of you that don’t have MAMP Pro, or anything else that gives you a nice GUI to create local urls, you can do this manually by editing your hosts file:
– Mac: /private/etc/hosts
– Windows: /system32/drivers/etc/hosts
Add a new record to the bottom of the hosts file in this format:
Next open apaches “httpd-vhosts.conf” file, you might need to hunt around for the file, but this is where it is on my install (Standard MAMP for mac).
– /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf
**DocumentRoot should be the path to your website**
Hit save, and reload Apache. You should now be able to access your website via http://v10.whatup
Oh, Nelson beat me to it :(
after following all steps (with mamp free version), I get that message. Any Idea why? Forbidden
You don’t have permission to access / on this server.
Additionally, a 403 Forbidden error was encountered while trying to use an ErrorDocument to handle the request.
When I download the file the download progress is not moving , I usually download it because it really takes time to buffer the videos on this page and this is a quite large files even though some are just less than 10-15 min :(
Best results == refresh page before clicking download button.
For those of you that have MAMP Pro and want to be able to access your sites on other devices (like mobiles/tablets) use ServerAlias to setup your devsites, for example;
ServerAlias mysite.*.xip.io
ServerAlias mysite.whatup
Then if you whip out your phone/tablet etc on the same network and go to mysite.(whateveryourserveripis).xip.io it will load that badboy up.
For example, mine would be mysite.192.168.0.100.xip.io – this is also super awesome if you’re using Adobe Shadow with Chrome as you can remote debug.
Just as an addendum to the above. If you are accessing the site through mysite.192.xxx.yyy.zzz.xip.io – make sure that if you’re using WordPress (for example) that your siteurl/wordpress URL are set to it in your SQL, otherwise you will have a bad time as WordPress will make all the URL’s etc relative to mysite.whatup rather than the domain your entering from.
Safari 6 will also let you use the inspector to interact with Safari on iOS… at least on iOS 6.
I just got mamp pro – because I thought it be cool. when I installed it, the mysql does not work and instead of the website mywebsite.v1 to work I need to write mywebsite.v1:8888
is there a quick fix to this. I havent deleted the free version of mamp yet though
Thanks
Change the Apache port to 80. I think that should do it.
http://cl.ly/JUrU
Great thank you
Hi Chris, simply changing ports to “standard” (80,3306) in MAMP caused a clash with standard Apache (at least in my system). But found this nice article Working apache port 80 localhost in MAMP which in fact worked pretty fine for me. (… and I’m usually boned using terminal uahhh) For all that wonder that you don’t see any activity when you type in your password in the terminal: it’s standard behavior (nobody can look over your shoulder) – just type and hit enter. Cheers Thomas
This video seems out of place and would fit better as #015 because it’s picking up where #014 left off. Videos #015 and #016 added the icon fonts and media queries, but those things aren’t present in this video. Just my thoughts…
I’m having the same idea.
Just thought I’d comment this in case someone else might be troubleshooting.
Small but possibly huge thing when using MAMP Pro. Took me two days to realize that MAMP Pro won’t serve a page with the extension .htm – no kidding, I was baffled as to how Chris did it effortlessly in the vid, but the only way I could get my page to show up in a browser was to use an index.php and drop in the index.htm page as an include.
Prior to this, whenever I tried to open the server using Mamp Pro I’d get the message “You don’t have permission to access / on this server. As soon as I changed the index.htm to index.html the actual page came up. Hope someone might find this useful.
Was there an easy fix for the font flash when the page loads?
As well, I could probably surf the other videos, but what was the fix for the font flash when the page loads?
1) You don’t have to worry about it if you use the regular TypeKit embed code.
2) If you go async, you just need to add a class of wf-loading to your HTML element and then target elements that use that font and set visibility: hidden; to them until that class goes away (which the TypeKit JS does)
http://help.typekit.com/customer/portal/articles/6852-Controlling-the-Flash-of-Unstyled-Text-or-FOUT-using-Font-Events