How to set up your local server

Now that we know what we need in order to set up a server on a computer it’s time to prep your own one. This article will create a MAMP environment – meaning a server based on MacOS, Apache, MySQL, and PHP.

Understanding Bash, iterm, and vim

First thing to know is that the “Finder” won’t help much for most of the things you’re going to do. The Finder and the rest of the GUI makes it easy to find your way around applications and files, but it also hides a lot of the OS and its functions from you. Not so the “Shell” which will be the “Bash” shell if you’re using a Mac (and a lot of times also when you’re using Linux). Oddly enough, this was once created to make conversation between the OS and the user easier, although nowadays it just looks like a black screen with some cryptographic code.

The nice thing about Bash is that it allows you to access stuff that is usually hidden from the user on the GUI. To do so, you need a terminal window, either the pre-installed one on mac, or you can download iterm. The terminal is used to interact with Bash. Finally, for editing stuff on the terminal, you need vim, which is basically a text editing program without a GUI. It’s usually pre-installed on macs.

Apache and PHP

Apache is usually pre-installed on macs, but if it’s not, you need to download it from the net. To find out if it’s installed use the command “httpd -v” – if it’s installed, it should show you the version of Apache on your computer. But what you need to do is making it usable for PHP files. PHP should be preinstalled on Apache and you just need to comment it in. Other programming languages have to be downloaded I guess. For PHP, you simply have to remove the “#” in front of the PHP module in the Apache file. This will program Apache to process PHP files. Where is the Apache config file located? Most likely either in the var directory or the etc directory of your root. Since it’s a config file you want to edit, etc is more likely to have it. So cd /etc/apache2 should bring you to the right folder. Then, open the config file with vim by typing “sudo vim httpd.conf”. it will ask for your password. After entering the password for your computer and hitting enter the file will be open in vim.

  • Finding the file in vim: /php will search for the php module. keep in mind that these programs are case sensitive.
  • Editing: hit “i” which will start the insert mode. Delete the “#” in front of “LoadModule php5_module libexec/apache2/libphp5.so”
  • Quit editing: hit “escape”
  • Save: type “:w” this will “write” (save) the file.
  • Quitting vim: “:q” will go out of vim and into the terminal again.

Installing MySQL

Follow the instructions on coolestguidesontheplanet: http://coolestguidesontheplanet.com/get-apache-mysql-php-phpmyadmin-working-osx-10-10-yosemite/

Creating a new file on localhost

Use iTerm (bash) to edit some files:

  • httpd-vhosts.conf: Do that by going to /private/etc/apache2/extra (that’s where the file is located)
  • open vim to edit the file (always use sudo command before that: sudo vim httpd-vhosts.conf will open the file
  • in vim edit the config file similar to an html file:

    DocumentRoot “/usr/docs/dummy-host.example.com”
    ServerName dummy-host.example.com
    ServerAlias http://www.dummy-host.example.com
    ErrorLog “/private/var/log/apache2/dummy-host.example.com-error_log”
    CustomLog “/private/var/log/apache2/dummy-host.example.com-access_log” common

    This will create a new “server” on localhost (which is basically just a folder):

    DocumentRoot is where all your web files are located (it’s a directory, inside the directory put your web files)
    ServerName is the website domain (awesomephototours.com)
    ServerAlias is optional if you like to modify your server name
    ErrorLog is where stuff gets stored when something goes wrong
    CustomLog remembers requests to web pages (like history in web browser)
    DirectoryIndex specifies which file to go to when not specified

    After that you need to tell your computer that the folder is on your computer by editing the hostfile (“hosts”):

    “hosts” is located in the /etc directory.
    Use sudo vim hosts to edit the file
    Create a new IP and tell it what website it is
    Now everytime you type that URL in your browser it will first serve that URL mentioned in the hosts file
    A # in front of the file will deactivate that line, to activate it again delete the #.

    Important! When you make changes to virtual host file you need to restart apache for it to restart the file again
    Before restarting apache you need to run the command “sudo apachectl configtest” to make sure there are no syntax errors in your code. Otherwise the server won’t start. It should spit out the line “Syntax OK” if you read that it means you can restart Apache.

    Keep in mind that if the URL in the hosts file is activated (so not “commented out” with a # in front of it) it means that the browser will ALWAYS show the URL specified in your computer. So if you have a WordPress blog it won’t show the version on your www server but the “dev” version on your computer. To show the “real version” again, you need to place the # in front of the URL in the file.

    Apache and VirtualHost

    In order for Apache to read the virtual host file, you need to allow Apache to process virtual host. Go back to /etc/apache2 and remove the # in front of “Include /private/etc/apache2/extra/httpd-vhosts.conf” (underneath “Virtual hosts”)

    What is a local server and why do I want one

    A local server is a server that is running exclusively on your computer. You don’t need to connect to the internet to actually create a website (at least not a website that only you want to see). Any website can be created on a computer. Any server basically is a computer – just one that is optimized to run web applications and is connected to the www. This also means that any computer can be turned into a server – you just need to install the right applications and software.

    Why would I wanna have a local server?

    Local hosts are awesome if you want to create a local web development environment. It allows you to run an application (e.g. a WordPress blog) directly from your computer so you can play around with it as much as you like without anyone knowing about it. You basically have a cheap and secure dev server where you can test all the changes you want to make on your website without changing the actual site. Nice.

    Stuff you need for setting up the server

    Since the computer is a machine and machines are quite powerful but (still) also pretty dumb you first need to install and configure every program and software you need for running a web application. Machines haven’t figured out how to learn on their own yet so the computer can only do what someone else programmed and “taught” it to do. Since a personal computer is usually not used to run web applications a few things are missing and need to be configured in order to create a web development environment.

    An OS

    This would most likely be either Mac, Windows, or Linux. The operating system is where all of the applications and software that you need is installed.

    Apache

    Apache is used to connect the outside world with the stuff that is saved on the server. A lot of people refer to it as actually being the web server, as this is basically what it does. It “serves” web pages to the internet. When someone visits a website in a browser the browser will go to Apache and ask for the website. Apache then processes this request by either grabbing everything it needs by itself (which basically is the case for static pages) or it uses someone else (the programming language) in order to get everything it needs to serve the requested website. But, Apache is a program and therefor it can only do the things someone else has taught it to do. If, for example, no one has taught Apache how to read PHP files it can’t process requests from pages based on PHP. So always make sure that Apache is set up correctly and can read and process all the requests that are necessary to gather together the information needed to serve the browsers request.

    Data Base

    In my (and the most common) case: This would be MySQL. What does the database do? It stores your (dynamic) data. This is a bit difficult to understand. Static pages, those that actually need to be overwritten by using an FTP server every time you change the text or picture or other components of the website, don’t need a database. Most of the time they’re purely based on CSS and HTML and stored on a disk inside the server, as you would store any other file in your computer. Dynamic pages are the ones you can actually change on the fly, for example in WordPress. You just hit the “save” button and the new version magically appears on the screen. The frame (the WordPress theme) stays the same – only the content changes. That content is saved in the database. So if you lose your database, you basically lose all of your content. Bad.

    Programming Language

    The programming language is the bridge between Apache and the database. When a request for a page comes in Apache asks the programming language to get everything it needs in order to serve the request. The programming language looks at the list and goes to the database in order to get everything, puts it together, and serves it back to Apache. One of the most popular programming languages is PHP. This is what WordPress uses to interact with the database.

    In the real world

    My favourite teacher likes to find real world examples to explain heavy and abstract stuff, and he is pretty good in it:

    When a customer (the browser) comes into a restaurant (the OS), he calls the waiter (Apache) to order something from the menu. The waiter (Apache) then goes to the cook (Programming language) which looks at the dish to see what kind of ingredients it needs. The cook (programming language) then goes into the storing room (database) to get all the necessary ingredients, preps them, and gives the end product to the waiter (Apache) who serves it to the customer (browser).

    But this whole process is only needed when the content is constantly changing, or when the content has to be prepared freshly every time someone visits the website. This is what a dynamic website does.

    But if, for example, all the food is precooked, the waiter (Apache) can skip all the cooking (programming language) and prepping (database) stuff and just hands an already prepped sandwich over the counter. This would be the static website.