Creating 'Hello World' using Silex 2 and Twig

You can use the Symfony framework to create websites, a lot of stuff will be there right out of the box. Today I will use the slimmed-down Silex framework to create a basic website, to get to know the building blocks of Symfony in isolation. Silex is build using Symfony components, but you will have to add your own bundles (Symfony modules) and structure if you want to go beyond the basic services Silex offers.

This tutorial will be split into chunks to keep it manageable, this is part one.

You can follow along with the tutorial by checking out the repository on Github. I will be tagging the parts of the tutorial as tags.

Installation

Before we start I assume you have PHP, Apache and Composer installed, and are using a Unix based OS like MacOS or Linux.

We will start by installing Silex using Composer, create a directory in your webroot and run the following command to create a composer.json file and install Silex 2:

composer require silex/silex "~2.0"

If all goes well, you will end up with a composer.json, a composer.lock and a "vendor" directory. The vendor directory contains all the Symfony bundles we need to run a basic website.

Creating the basis for our app

Next, we set up the entry point for our website, where we initialize the Silex instance, Turn on debugging for more verbose error messages. To start with we will render a response when visiting the root of our site.

<?php

// Load the autoload file to make all the classes in the vendor
// directory available to our app.
require_once __DIR__.'/vendor/autoload.php';

// Instantiate the Silex application.
$app = new Silex\Application();

// Enable debuggin mode for developer friendly error messages.
$app['debug'] = true;

// Create route for the root of the site and return 'hello world'.
$app->get('/', function () use ($app) {
    return 'hello world';
});

// Actually run our app.
$app->run();

Reading the comments will give you a good idea of the code that is being run. The get() function is where all interesting stuff happens. This function maps the 'get' request with the given pattern to the provided callback function. In our case, the callback function is just a simple anonymous function to which we hand over our Silex app, which returns a string. We will be adding more functionality to this section later.

It is now time to configure a virtual host in your server, pointing to the directory where our files are. In this example, I used the hostname simple-cat-site.localhost.

So if you enter the hostname in your browsers address bar, it will return the string hello world.

Adding more pages

To add a page you simply implement another get() function. Our site needs some more pages, we are implement the 'get' function for each of the pages. Add the following lines before the $app->run() call:

// Route for more kittens.
$app->get('/more-kittens', function () use ($app) {
    return 'We will add the kittens later';
});

// Route to about page.
$app->get('/about', function () use ($app) {
    return 'about';
});

When you save the index.php and visit the new routes, you will notice your webserver can not server the pages. This is because we did not tell the server what to do with these routes. You can simply set up your server according to the instructions on the Silex site. When you are using Apache2 you can add the following .htaccess file to the site root, given you have activated 'mod rewrite':

<IfModule mod_rewrite.c>
    Options -MultiViews

    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.php [QSA,L]
</IfModule>

After saving your .htaccess file you can visit the new pages under /more-kittens and /about.

So far we have setup a basic site using Silex, with 3 pages, there are nonono kittens yet, we will add them in part two.