So, it is about time that you learn what those famous web servers are. A web server is no more than a piece of software running on a machine and listening to requests from a specific port. Usually, this port is 80
, but it can be any other that is available.
The following diagram represents the flow of request-response on the server side:
The job of a web server is to route external requests to the correct application so that they can be processed. Once the application returns a response, the web server will send this response to the client. Let's take a close look at all the steps:
http://myserver.com/app1/hi
would try to pass the request to the app1
application, wherever it is in the filesystem. However, another scenario would be http://app1.myserver.com/hi
, which would also go to the same application. The rules are very flexible, and it is up to both the web server and the user as to how to set them.There are powerful web servers that support high loads of traffic, such as Apache or Nginx, which are fairly simple to install and manage. For the purpose of this book, though, we will use something even simpler: a PHP built-in server. The reason to use this is that you will not need extra package installations, configurations, and headaches as it comes with PHP. With just one command, you will have a web server running on your machine.
Production web servers
Note that the PHP built-in web server is good for testing purposes, but it is highly recommended not to use it in production environments. If you have to set up a server that needs to be public and your application is written in PHP, I highly recommend you to choose either of the classics: Apache (http://httpd.apache.org) or Nginx (https://www.nginx.com). Both can run almost on any server, are free and easy to install and configure, and, more importantly, have a huge community that will support you on virtually any problem you might encounter.
Finally, hands on! Let's try to create our very first web page using the built-in server. For this, create an index.php
file inside your workspace
directory—for example, Documents/workspace/index.php
. The content of this file should be:
<?php echo 'hello world';
Now, open your command line, go to your workspace
directory, probably by running the cd Documents/workspace
command, and run the following command:
$ php -S localhost:8000
The command line will prompt you with some information, the most important one being what is listening, which should be localhost:8000
as specified, and how to stop it, usually by pressing Ctrl + C. Do not close the command line as it will stop the web server too.
Now, let's open a browser and go to http://localhost:8000
. You should see a hello world message on a white page. Yay, success! If you are interested, you can check your command line, and you will see log entries of each request you are sending via your browser.
So, how does it really work? Well, if you check again in the previous diagram, the php -S
command started a web server—in our case, listening to port 8000
instead of 80
. Also, PHP knows that the web application code will be on the same directory that you started the web server: your workspace
. There are more specific options, but by default, PHP will try to execute the index.php
file in your workspace
.
Let's try to include our first project (index.html
with its CSS and JS files) as part of the built-in server. To do this, you just need to open the command line and go to the directory in which these files are and start the web server with php -S localhost:8000
. If you check localhost:8000
in your browser, you will see our two-link page, as is expected.
Let's now move our new index.php
file to the same directory. You do not need to restart your web server; PHP will know about the changes automatically. Go to your browser and refresh the page. You should now see the hello world message instead of the links. What happened here?
If you do not change the default options, PHP will always try to find an index.php
file in the directory in which you started the web server. If this is not found, PHP will try to find an index.html
file. Previously, we only had the index.html
file, so PHP failed to find index.php
. Now that it can find its first option, index.php
, it will load it.
If we want to see our index.html
file from the browser, we can always specify it in the URL like http://localhost:8000/index.html
. If the web server notices that you are trying to access a specific file, it will try to load it instead of the default options.
Finally, if we try to access a file that is not on our filesystem, the web server will return a response with status code 404—that is, not found. We can see this code if we open the Developer tools section of our browser and go to the Network section.
Developer tools are your friends
As a web developer, you will find very few tools more useful than the developer tools of your browser. It changes from browser to browser, but all of the big names, such as Chrome or Firefox, have it. It is very important that you get familiar with how to use it as it allows you to debug your applications from the client side.
I will introduce you to some of these tools during the course of this book.