A brief guide to setting up MAMP Pro, VirtualBox and Windows on a Mac for web designers and developers.
Working locally is always a good thing. Nothing beats designing and developing on your local machine. What I mean by local is not where you live or work. In my case in Ringwood, in the New Forest. Locally in this instance means on your local machine.
Using MAMP Pro it is easy to set up a new server on your Mac. However I often get stumped when trying to test my designs in IE. I use VirtualBox which is fantastic. Running IE8 on a vintage Windows NT install within VirtualBox I can see how my new site design looks and works. BrowserShots and other similar services are good for giving you a static picture of your website running on various flavours of Windows and IE. But to develop quickly you want to be doing this locally.
First things first, create a new server instance using MAMP Pro. I use the standard Apache and MySQL ports so I don’t need to append anything on the end of the local url. My Apache port is 80.
- So once you have created a new virtual host in MAMP Pro, let’s call it: mywebsite.local
- Load this address in your browser of choice and you should see your website. If so you can then then get this working on your Windows install.
- For this you need to open your Terminal app. Gulp.
- Open Terminal, then enter the following command: ifconfig
If you get a command not found message, enter this: export PATH=”/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/bin:/usr/X11/bin”
Then enter ifconfig again.
You should then see a whole load of stuff appear. Scan through it and you should see an IP address. In my case it is after the “en1:” paragraph. My IP address is: 192.168.0.5
- Then fire up Windows and find your hosts file: C:WINDOWSsystem32driversetchosts
- Open it in Notepad. And enter your ip address and the name of your local site at the end of the hosts file:
ie: 192.168.0.5 mywebsite.local
Save the file.
- Then open IE and type the name of your local site in the browser address bar and BANG! You should see your website.
Now comes the real tricky part getting your design to look great in IE. But that’s another story…