Set Up Twig for Web Projects in WampServer on Windows
Tags: twig, php, tutorial, webdev
Published: 2022-04-17 09:54:33

[Twig](https://twig.symfony.com/) is a popular template engine for PHP programming.
[WampServer](https://www.wampserver.com/en/) is a web development environment on Windows, and it allows you to create web applications with Apache, PHP and MySQL. In this post, we will show you how to set up Twig in WampServer on Windows.

### 1. Install Composer
Go to the website of [Composer](https://getcomposer.org/), the dependency manager for PHP. Download and run the Composer's Windows installer, Composer-Setup.exe. It will install the latest Composer version on your Windows. PHP 5.3.2 is the minimum requirement for Composer to run, while Twig 3.x needs at least PHP 7.2.5. Therefore, we can choose PHP 7.2.10. During the installation, it will ask you the PHP's installation path.
If PHP is under the WampServer folder, you can select its path, for example:
```
C:\wamp64\bin\php\php7.2.10
```
By default, the Composer batch file, `composer.bat`,  is installed in the directory as below under Windows 10:
```
C:\ProgramData\ComposerSetup\bin
```
Once the installation is complete, the above path is added to the system's path so that 
we can run Composer in any directory through Windows command line.

### 2. Create a new web project in WampServer
It is simple to create a new web project in WampServer.
Go to the WampServer's root directory: `C:\wamp64\www`. 
Create a folder for your web project, for example: `C:\wamp64\www\twig-test`. Done!

### 3. Install Twig for your web project 
To install Twig, we need to open the Command Prompt in Windows and 
change the current directory to the new web project's folder: `twig-test`
```
cd C:\wamp64\www\twig-test
```
After that, install Twig via Composer:
```
composer require "twig/twig:^3.0"
```
Then, Twig 3.0.5 is installed under the folder `twig-test\vendor`.

### 4. Test the Twig template
First, under the web project folder `twig-test`, create a subfolder `themes` for template files. In this folder, we create the template file `index.twig` as below.
```html
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Testing the Twig Template</title>
</head>
<body>
    <h1>Hello world</h1>
    <p>I love {{ fruit }} !</p>
</body>
</html>
```
In the above code, `fruit` is the variable passed to the template. 
The double-curly-brace `{{}}` is used to print out the value of the variable `fruit`. 

Second, under the folder `twig-test`, create a PHP file `test.php` to render the template.
```php
<?php
require_once './vendor/autoload.php';

$loader = new \Twig\Loader\FilesystemLoader('./themes');

$twig = new \Twig\Environment($loader);

echo $twig->render('index.twig', array("fruit" => "watermelon"));

?>
```

In the above code, first, Composer's PHP file `autoload.php` is included to map the Twig's namespaces to real folders. The loader `\Twig\Loader\FilesystemLoader` is then created to look up templates in the `./themes` directory. The `\Twig\Environment` object, `$twig`, is initialized with default configurations. The template file `index.twig` is finally loaded and rendered with an array as the parameter. In the array `array("fruit" => "watermelon")`, the variable `fruit` and its value are defined.

To check the result, open an Internet browser and access the PHP file `test.php`. For example, in the address bar, type `http://localhost/twig-test/test.php`. You will see that the template file is rendered and the variable's value `watermelon` is passed to the template.
![A36-twig-hello.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1626167992706/-Gn4gEvAs.png)


Thanks for reading!
To find more programming tutorials, please visit: [CodeBilby.com](https://www.codebilby.com)