In this tutorial I will show how to setup a basic webpage with Symfony 2.6. Using the newest best practice guidelines from Symfony themselves, you’ll see how these steps will work in real life. Following this tutorial will guide you to a basic, ready-to-go web page including bower,jQuery and Bootstrap. For added comfort in building the project, I will use a lightweight assets builder named Gulp.

1. Creating a Symfony Project

To setup a basic project you don’t have to use composer anymore. Symfony comes with it’s own installer. To install this on your Mac OS just execute these commands in your terminal/console:

Now that the Symfony software is installed, I will go to the folder where OSX Yosemite’s webserver usually stores its pages. The DocumentRoot. In my case it is “/Library/WebServer/Documents”. You can check where your DocumentRoot is defined in your httpd.conf file. To open the httpd.conf go to the finder, press CMD+SHIFT+G and type into the input field “/etc/apache2/”, open the httpd.conf and search for “DocumentRoot”.

So let’s move to the DocumentRoot and create a Symfony project with the Symfony installer. The rootfolder’s name is “mytestpage”, change it to whatever you like:

After executing the last step your console output should look like this:

Console output when Symfony is installed.

Believe it or not, that’s it! You’ve got a running Symfony website :-) …But now comes the fine-tuning stuff.
To check if your page is running, do what the setup output tells you:

and open http://localhost:8000/ in your browser. You should see the welcome screen now …

2. Cleaning your project

Symfony installs additionally some demo content. Usually you can delete this and use your own structure.

So let’s go to the project and delete the Acme folder.

Delete the include of the Acme bundle in /mytestpage/app/AppKernel.php

Delete the Acme route  in /mytestpage/app/config/routing_dev.yml

Set the default route to “/” in /mytestpage/src/AppBundle/Controller/DefaultController.php

Now you have a fresh and clean webpage to start. If you visit http://localhost:8000/ in your browser again it looks like this

3. Adding JQuery and Bootstrap with Bower

To install Bower as a package manager simply execute it in your console (ensure that you’re still in your project folder). Please note that Bower requires Node and npm and Git. If you haven’t installed these already you have to do so first by following the installation instructions on Node and npm and Git.

From now on you can install frameworks, libraries, assets, and utilities with Bower. To do so, go to the Bower website and search for your desired package. After finding the package you can install it with $ bower install {packagname}
so for jQuery and Bootstrap I’ll execute these commands:

Right after this, the jQuery and Bootstrap folders will appear in the project.

4. Getting it all together with Gulp

To use Gulp you have to install it globally and specifically in the project folder:

After Gulp is successfully is setup we will manually create a file named gulpfile.js directly in the project folder. In this file we tell Gulp exactly which files with which filters have to be processed. To make a serious asset builder you have to install some more tools for Gulp. For example, if you want to use Less in your project you have to install it first so that Gulp knows how to process Less files to proper CSS. So, for fully uglified, CSS-preprocessed, concatenated and environment dependent assets, these tools have to be installed additionally by executing the following commands:

Now you’re good to go. An example for a gulpfile that processes the jQuery and Bootstrap can look like like this:

Please note that this gulpfile.js example will also dump all files that exist in your projects like‘app/Resources/public/js/**/*.js’. So every javascript file you will add to your project will be processed to your assets after running the command “gulp” in your console. (Same for Less/CSS).

 

 

The last step is to include these built assets in the base template (a.k.a. layout) in
/mytestpage/app/Resources/views/base.html.twig

Now your basic website setup with Symfony2, JQuery, Bootstrap, Bower and Gulp is ready!

(below image see how I pasted some bootstrap code into the index.html.twig)