PHP with Twig, using Vagrant, for quick-starting your projects

This article will show you what tools i use for PHP development, how to fast start your PHP project with these tools, and how to make your project organized, easy to deploy on a Linux server and make sure that all library dependencies are correct and working. At the end, there will be a GitHub project that you can pull, with all files from this tutorial, and just vagrant up.

Okay, as you guessed it, it will be a long one :), so lets start.

I am using Mac, so this tutorial will be for Mac users, but probably with minor differences, it would work on Windows too, because all tools have windows alternative also.

Tools you will need (more on the tools, later in the tutorial):

  1. Text editor (I use Eclipse for PHP, but you could try Sublime or Atom). For eclipse, you might want to get some plugins too, like Twig for Eclipse, and Composer for eclipse
  2. Composer (as dependency manager)
  3. Vagrant, (as it says, Development enviroments made easy, for creating and configuring lightweight reproducable and portable development enviroments) but you need it just installed for now, because later (with PuPHPet), you will have all what you need
  4. VirtualBox (needed for Vagrant, just install it for now)
  5. PuPHPet.com is the magic that makes previous 2 logical: its gui configurator for creating Virtual machines for Vagrant.
  6. GIT, where i will put the final project, and you can take it readily

Let’s go from the beginning:

1. Eclipse: I was looking for good editor for my PHP OOP needs, that is easy to use, has autocorrect and code suggestions, can format PHP code in standards, CMD + click on function to take you to its Definition file, and many more. Since i have also worked in Java inside Eclipse, i decided to give it a go for PHP, and now i like it a lot. Plus it has good plugins, ex. for Composer, where you can visualise your dependencies and dont need to remember all Composer commands. Twig plugin, is just for formatting of Twig files, which is really helpful also, since you visually see your code

image-1

2. Composer – if you are in PHP long time, probably you use it, if not, its the first thing you need to learn 🙂 i will not explain much on composer except the basic steps that you will need in this project

3. Vagrant and VirtualBox, you only need to install these programs, and learn 3 commands, vagrant up (start virtual machine), vagrant halt (stop it), and vagrant ssh (ssh inside it). They serve to create virtual machine (development enviroment) much like that VPS or Dedicated linux server that you will need to deploy your project, hoping that would work. But if you installed vagrant, and you used the next tool (PuPHPet) GUI to configure your dev virtual machine same like your live production server, you will be sure that your code works there too, without doubt. And Vagrant is so easy to use, with PuPHPet:

4. PuPHPet – its a GUI for creating your LAMP virtual machine. You could just go on their website, go trough few steps (select linux version, PHP version, server – Apache or NginX, Database) and it will make you a configuration ZIP file (small in size, its just config from what you selected), you extract this file in your Project folder root, and in Terminal, do “vagrant up”. Thats it, now you have running virtual linux server on your computer on the specified local address. (that you can configure also in Hosts, so you could access it on name, ex. http://dev.myexample.com). In this tutorial, i will also add vagrant config file I created from PuPHPet, and commit it to Git, together with all project files.

Now, since I wrote short description for all tools, and you installed them successfully, let the real tutorial start. This will explain you the steps to create a project from scratch, with your own files, but at the end in GIT you will have mine, as I made them, which you could use for quick starting your next project:

1. Create new directory for your project. Mine is called “Php Twig Vagrant quickstart”.

2. Inside the project, extract the zip that you downloaded from PuPHPet (for your configuration), but for here i will use mine. I will go trough the website configurator, with images, so you could follow:

  • Deploy Target options:

    * Deploy Locally to LocalHost
    * Provider: VirtualBox
    * Distro: Ubuntu Xenial 16.04 LTS x64
    * hostname: phptwigdemo.puphpet
    * ip address: 192.168.56.105
    * mem: 512 and CPU: 1
    * others leave default BUT:
    * Shared folders :
    – Folder source should be ./www (this will be inside project folder, ex “Php Twig Vagrant quickstart/www” in your local folder)
    – Folder target should be /var/www (this will be on the linux machine, where your saved files inside your local www will go)

image-2 image-3
  • System

    * Packages, we skip (leave default or blank)
    * Users and groups we also skip (leave default or blank)
    * Locale : Select only which timezone you are, mine is Europe/Kiev
    * Firewall rules we skip (leave default or blank)
    * Cron jobs we skip (leave default or blank)

  • Web servers

    * Nginx is selected by default, but i use Apache, so deselect it
    * Apache – select this
    Apache settings:
    – Modules – leave default
    – Virtual host: Server name i made: twigmeup.dev
    – ServerAlias: www.twigmeup.dev
    – Document Root /var/www (important)
    – Below all default, only in Directory Block, make path also /var/www

image-4

  • Languages

    * PHP – check it, i will use version 7 just because its new
    * Install Composer checked
    * Other should be default
    * you dont need other language, go to next

image-5

  • Database

    * I prefer MariaDB, but here we will go with MySQL, so deselect MariaDB, select MySQL
    * MySQL version 5.7, root password: twigmeup
    * user: dbuser pass: 123
    * dbname: twigmeup

image-6

  • Others you dont need, so next, next, next, and download your config

image-7

3. Next, extract the files, and place them in your working project, like on the picture.

image-8

Mine is in “Php Twig Vagrant quickstart“, then open terminal, go in that folder

cd "/Users/Daniel/Projects/Tutorials/Php Twig Vagrant quickstart" and type vagrant up, it will start installing the Virtual Machine we have made, so it will take some time (get coffe 🙂 )

image-9

Now, on first, it might not succeed, so it gave me this error:

image-10
“The host path of the shared folder is missing: ./www”

Its the Shared folder we choose in PuPHPet, ./www, but we havent created it in our project folder, so just
mkdir www (create the folder) and again, vagrant up

4. If all went ok, you should have it running. For me, on first try it havent, but then i went and opened VirtualBox, tried to check if the problem was because i chose newer linux distro. After fiddling around, i decided to go for different distro (it could be that i have older VirtualBox version that is not compatible with Linux Ubuntu Xenial 16.04, and went to recreate the above vagrant setup again, but this time with Ubuntu 14, so i removed all files from my project folder, except www folder, redownloaded zip configuration from PuPHPet, and extracted them in the project files, then vagrant up again)

Now, on second time, i got this screen, which means everything went fine this time. Lets take a breather 🙂

image-11

Next, visit the IP address in your browser (ours is 192.168.56.105). If it doesnt open, it means apache is not started yet, so do vagrant halt, to shut it down, then vagrant up, to start it up again. Now, apache works, but it shows Not Found, which means our HTML files are not created and uploaded yet. No worries, that is the next step.

I bet till now you are thinking “why the F*CK i did all this, just to install a linux server, then upload all my website files to the server, just to test?” Well, the answer is “Remember that WWW folder we created? Whatever you place inside, magically appears in the server” Coool, eh? So whenever you save or put in the WWW, it will save it in the Linux machine, and opposite, if Linux creates file in its /var/www, you will also have it in your local ./www. This is veeery practical on programming and testing. So, lets exercise, go to your local ./www folder.

OMG, it has html folder inside? But we havent made one? Ofcource we havent, apache created it on the server, and it copied it on our local folder, its apache’s start page. We will use this in our examples, we will put every php file inside.

Lets do another change, open your hosts file (on mac, its in /private/etc/hosts) and edit it with some text editor. For windows, the hosts file is in c:\Windows\System32\Drivers\etc\hosts, but you need to open it with Notepad, Run as Administrator.

Paste this:
192.168.56.105 twigmeup.dev www.twigmeup.dev

And in your browser, open twigmeup.dev, it will open your web site, so no need to type the IP address. Cool, eh? But dont forget to remove this from your hosts when you end working on your site, if you use real names for sites that already exist, this command is to show your local from this IP. If you use names as we use here ending with .dev, or .local, or .demo, no worries, but if you use .com, .org or .io, it could stop you from accessing the real site before the domain name.

Next, lets open Eclipse, and create new project from our project folder’s www. This is because PHP will work from this folder (its the WWW root or our web server). If you use other editors, like Sublime or Atom, you can open the WWW as project folder, but in Eclipse, we have to create one. This are the steps:
1. Create New PHP Project
2. Enter some name for the project ex “PHP Twig base
3. Select the WWW folder location like in the image

image-13

In your eclipse PHP Explorer, you should see the project, and the HTML folder Apache created inside.

image-14

In your project root, create another folder, “src”, so now you have both, html, and src. Next, create new file, composer.json, and inside paste this:

{
"autoload" : {
"psr-4" : {
"info\\angelovski\\" : "src"
}
},
"name" : "info/angelovski",
"require" : {
"php" : ">=7",
"monolog/monolog" : "1.17.2",
"twig/twig" : "1.23.1"
}
}

image-15

This is the configuration file for composer, that we will use it as dependency manager for our PHP, Twig, and other scripts that you would like, and that you can find on The Packagist. For now, we will start with Twig, later we will add a logger (Monolog) too, but using the Eclipse Composer tool (for now, we will do it the original Composer way).

To download the dependencies, open Terminal, go inside www folder, and type the following command (if you have Composer installed globally):
composer install

image-16
but on my place, it gave me error, because on my mac locally, i have PHP 5.5 installed, and composer doesnt like this (because we chose PHP 7). But since i will not use the local PHP, i will use this composer command:
composer install --ignore-platform-reqs

image-17
Done, ignore the error, i missed \\ which i fixed in the composer.json. Now you have one more folder, vendor, next to html and src.

To explain on the vendor folder, and other 3 folders, when deploying a project on the server, i just deploy my PHP code which is in html and src folders. Vendor is all dependency libraries you use aside (you don’t need to reinvent the wheel, there is a lot of small open sourced libraries that can help you out, and you dont need to deploy them manually, just include them in the composer.json, and do composer install both in your project, and on the live production server, all files will be downloaded directly).

image-18

The src folder is where i put Models and Controllers (probably i will make another tutorial on this subject), all initializers and helper functions and classes, and in HTML folder, goes all code that is available to the user for browsing (ex. index.php, about.php etc).

In this WWW folder, i also put few other folders (ex. Setup, for various installer scripts that need to be done in the beginning, Documentation folder, etc, files that should be on Git available for the team, but not public)

OK, now that i explained more on the folder organization, lets create a simple index.php with “Hello world!”. After save, it is immediately available on the “dev” server, if your vagrant is running, so go ahead, open it.

image-19

Bummer, the domain points to the parent www, (i think its some vagrant – apache config error here), instead of html like we told it to, so to fix this, we need to go on a little server hack – follow the commands in Terminal:

# cd "/Users/Daniel/Projects/Tutorials/Php Twig Vagrant quickstart" (if you are not inside already)
# vagrant ssh (logs you inside the linux, after this command you are working in the linux server)
# cd /etc/apache2/sites-available (go in the folder where apache config is)
# ls (list all files to see for the configs available)
# sudo nano 10-default_vhost_80.conf (my config for the port 80 is this, yours might be a bit different, or the same)
find the line # ServerName default and change it to
# ServerName twigmeup.dev
Add another line under,
# ServerAlias www.twigmeup.dev (and save it and exit -> CTRL+X then Y for yes, then enter to confirm)

image-20

# sudo service apache2 restart (to reboot apache server so the commands take effect)

BAM, now when you refresh, you see this screen:

image-21

Untill here it was long, but from here, your project has already taken deep cut, from here, whatever you do, its going to show up directly on that link. Also, your team (taken that they also know how to use vagrant and composer), can just GIT pull the project (with Vagrant included in your GIT), vagrant it up, composer install the dependencies, and will have exact the same setup as you do. Also, for deployment on your server, there you dont need Vagrant, only Composer, so you need to upload only your PHP files you made, but not the dependencies (like Twig, Monolog, AWS, or any other you might need). Dependencies will always be taken care from Composer.

And now, the easiest, separating your PHP coding with the HTML design, by using Twig.

Go on my Github page for this project, and view the code (or get it and try it). If you have any questions, you are welcome in the comments.