Symfony Project on Ubuntu 13.10, using PhpStorm

This is far more complicated than it should be, and I've not found a reliable guide on it. But this is what we're going to end up with:

A Symfony 2 project running under a puphpet controlled virtual machine using Vagrant. We're going to be able to edit the project and run all the commands via PhpStorm.

Technically you probably don't need the Ubuntu bit ... but there are some specific gotchas in here. I've included the version numbers I've used in parentheses where applicable.

1. Install Vagrant (1.4.2
2. Install Virtual Box  (4.3)
3. Use PuPHPet to create your manifest file. 
1. Create 2 virtual hosts. One just for flat files to make sure editing our host works fine, and one for Symfony. I call them flathtml.vagrant and symfony.vagrant, so I know what they're referring to. 
2. The document root for these is /var/www/flathtml/ and /var/www/symfony/ respectively.
3. These map to the folders /var/www/vagrant/flathtml/ and /var/www/vagrant/symfony/ respectively. 
4. At least, they will if I run Vagrant from /var/www/vagrant/.
5. The mapping is taken care of automatically in the PuPHPet manifest, in the "Box Sync" section.
4. Download those files to wherever it is you want the virtual server to be. I chose /var/www/vagrant/ 
5. In the Vagrantfile, fine the line that starts with "config.vm.synced_folder" and add ":mount_options => ["dmode=777,fmode=777"]" to the end. Otherwise Symfony will not run.
6. Using terminal, in /var/www/vagrant/, run "Vagrant Up"
7. That should work after a while.
8. Edit your hosts file "sudo gedit /etc/hosts/" and add your two virtual hosts to the file. 
9. The ip address is your Local VM IP Address. Most likely you left it as 192.168.56.101
10. Get a test site with flat html working within Vagrant. This ensures that your Virtual server works.
1. I ran into a problem here once of not being able to get the flat html site working, because the IP address I was being assigned came from DHCP, or similar. The trick is to change the Vagrantfile networking section. I can't remember the exact details of that fix sorry.
11. Once that is working, then we can start with Symfony
12. In Terminal, type "cd /var/www/vagrant/symfony"
13. Install composer by "curl -s https://getcomposer.org/installer | php"
1. Personally, I like to install it in a central location, such as /var/www/includes/. 
14. Now install Symfony by "php composer.phar create-project symfony/framework-standard-edition /var/www/vagrant/symfony/ 2.4.*"
15. You may have to apt-get install php5-json as well.
16. Now we can initialise the project in PhpStorm. We couldn't earlier as the create-project command will fail if anything is in the folder.
1. Set up all your version control stuff now.
2. I found this guy has some very good tips on setting up as well. In particular, steps 3-8.
17. In app_dev.php and config.php, remove the lines that stop people on none localhost accessing. This will allow you to get to the configurator and make sure everything is working.

There are a lot more things you should be doing, but this is enough to get you up and running at least. I hope this helps someone.

PHPStorm, grunt.js and File Watchers

I had a pickle of a time getting grunt.js to work on my Mac. So eventually I gave up and decided to use PhpStorm's built in watchers to do my tasks.

I highly recommend you get this all working in Grunt first. Once things work as expected there, then you can set up PhpStorm.

Tested with PhpStorm 7.1.1, node 0.10.25, grunt-cli 0.1.13 and grunt 0.4.2.

Project Structure

In this project, we have a bunch of HTML sections that are baked together. For example, the header, nav, and footer are html files that are "baked" into a final file in the build directory. In a css subfolder we have all our css (/css/styles.less and /css/custom/, /css/vendor/ for Bootstrap) which are combined via Less into one final /build/css/styles.css file. And the JS files are also copied to the build folder.

LESS

This was by far the easiest. If you've already got this to work then you don't need any help. I simply had to change the default "Output paths to refresh" from "$FileNameWithoutExtension$.css" to be "$ProjectFileDir$/build/css/$FileNameWithoutExtension$.css" and it worked.

Grunt Tasks

This was the tricky bit, as I wasn't methodical enough. Assuming that you have installed grunt globally then the following settings will work. 

• Name: Grunt Bake
• Description: Builds HTML (obviously change these two to what you want them to be)
• Turn off immediate file synchronization
• File type: HTML files
• Scope: Changed files. This is under VCS, probably at the bottom of the drop down. This stops the watcher being triggered when the file is created in the final build folder.
• Program: On a mac, with grunt installed globally, it is /usr/local/bin/grunt. Run "which grunt" in your terminal to figure it out (sorry Window's users, I don't know the command for you).
• Arguments: This is the name of the task. For me, I added this line to the Gruntfile.js. "grunt.registerTask('phpstorm-bake', ['bake'] );" Which means my argument is phpstorm-bake
• Working directory: $ProjectFileDir$

That's it. 

It's beyond the scope of this article how to get grunt and it's associated tasks up and running. There are plenty of handy tutorials and documentation on the web for that already.