Serving an HTML File with the Built-In Web Server

Let's create the simplest web application by “serving” .html files using PHP’s built-in web server.

We'll cover the following

Setting up the environment

To run a PHP application on Educative, you do not need to set up any environment. All the code will run inside the special environment that we have created for you within the browser.

Educative saves you from getting entangled in dependencies and gets you right into learning.

For some of you who might still want to run PHP applications locally, all the steps have been explained in detail in this course. The steps for installing PHP have not been included for simplicity, though.

Creating a PHP web application

First, create a directory for your project. This could be anywhere on your computer. For example, We have created a directory called /home/matthias/Projects/php-for-the-web. Open this directory in your IDE (preferably PhpStorm). Now, create a file in your project directory called index.html. In that file, paste the following HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Index</title>
</head>
<body>
    <h1>This is the index</h1>
</body>
</html>

On the command-line, navigate to your project directory using cd (or if you’re on Windows, go to your project directory, right-click on it, and select “Open Git-Bash here” in the menu that pops up).

cd /home/matthias/Projects/php-for-the-web

Let’s now look at how the application is run.

Running the application

We can start PHP’s built-in web server:

php -S localhost:8000

In the terminal, you should see something like this:

[...] PHP [...] Development Server (http://localhost:8000) started

This means that the PHP Development Server (also known as the built-in server) has started. The server is “listening” on localhost:8000. That’s because we told PHP to do so using the -S command-line option:

php -S localhost:8000

To see if the server works, open a browser and go to http://localhost:8000. You should see “This is the index”.

Note: You don’t actually have to go anywhere and open any URL as we have already set things up for you. Coding environments have been provided where you can practice everything you’ve learned within a lesson. Also, the URL to run the application is different on our platform as we won’t be using localhost.

From now on, we will be using http://APPLINK as a substitute for localhost. The actual URL link on which the application will be available after running the code is present below the Run button of all the coding areas given in a lesson. Keep in mind that the link won’t work until the execution of the code has been completed.

Long-running process

The server is a program that keeps running; you don’t have to restart it every time you want to see the homepage. Such a program is usually called a long-running process. To verify that the server indeed keeps running, open your browser and reload the page. It will just show you the index page again.

Let’s see if the server also picks up the changes we make to index.html. Open index.html in your IDE, and change the text to something else, like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Index</title>
</head>
<body>
    <h1>This is the homepage</h1>
</body>
</html>

Go back to the browser and refresh the page. You should now see “This is the homepage” instead of “This is the index”.

Great! So we can keep the server running, make a change to an .html file, and refresh the page to find out if that change worked out well.

Execute the example

For your convenience, we have already set things up for you. Just hit the Run button below to run the application and see the output. Click the URL given below the Run button to view the webpage in a separate tab.

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Index</title>
</head>

<body>
    <h1>This is the index</h1>
</body>

</html>

Now, make changes to the file and re-run it. You’ll see that the changes will be made to the application. When you go to the terminal tab, you’ll see that the server didn’t restart.

Terminal tab

Let’s go back to the terminal now. Here we see something interesting. Every time we’ve requested the index page, a new line has shown up here. Each line contains a date and a time (Mon May 11 10:45:08 2020), a number (200), and the URL that was requested (/).

[Mon May 11 10:45:08 2020] [...] [200]: /
[Mon May 11 10:51:27 2020] [...] [200]: /

You may also see a line that looks like this:

[...] [...] [404]: /favicon.ico - No such file or directory

This is something your browser did: it wanted to show an icon (called favicon) in the browser tab and tried to find it on your server.

  

Browser not making a request for favicon.ico

In some cases, your browser may not make this request to /favicon.ico. One possible reason could be that you have served another website on http://APPLINK and the browser uses this website’s favicon. Another reason may be that the browser “wasn’t interested” in the favicon. Either way, it isn’t a problem if you didn’t see that 404 request. Just continue to the next section.