In this post I will be covering the basics to set up a local development environment with WampServer, Composer, Git, SourceTree, Bitbucket, a dynamic stylesheet language like Sass and a PHP framework to get you going! This will get you up and running in about an hour or so, then you can start creating your next project. I will not explain how Sass or the framework works, it’s just to set up the local development environment.
Step 1: Download WampServer
WampServer is a Windows web development environment. If you have never heard of it, it installs a local environment for you to create web applications using Apache, PHP and MySQL databases. Download the latest version for your machine on http://www.wampserver.com. If you are running Mac or Linux you could choose to download XAMPP. During the installation you will have to choose an installation folder. I will install Wamp on the default location: c:\wamp.
After installing WampServer you have to start it! We are not going to do anything with it yet, but you can check if WampServer is running by visiting localhost in your browser! If the install succeeded you should see the WampServer Homepage with information about your server and projects.
Step 2: Download Composer
Composer is a so called dependency manager in PHP. You can choose which libraries you need for your project, and Composer will handle everything else. If a library depends on other libraries, Composer will automatically download them for you. Also Composer is a very neat tool to keep your libraries up to date. Even when you hand over your project to another developer, the only thing he has to do is get all the libraries, and he is ready to go! Download Composer at http://getcomposer.org/download/ and choose for the Windows Installer. This is the easiest option and will setup everything for you.
During the install, it will ask you to locate php.exe on your computer. We need to tell Composer to use the PHP install that is located in our Wamp environment. Click browse and locate to C:\wamp\bin\php\php5.4.12\, and you will find your php.exe in there!
Next you want to enable openSSL, this is something that Composer requires during the install of your dependencies. You can do this by editing the php.ini file of your WampServer located at C:\wamp\bin\php\php5.4.12\php.ini. In this file you want to search for:
And remove the ; in front of it! Save it, restart Wamp and Composer is ready to go!
Step 3: Installing a framework!
Now it’s time to install a framework on your local server, this way we will have some files to start a project with and to commit to BitBucket, something that we will do later on!
For this next part you have to use the command prompt, you can find your command prompt by searching for cmd in your Windows Start menu search. We will have to navigate to our www folder in Wamp and load a framework there! Open up your command prompt, and type:
The command cd is used to navigate to a certain folder through your command line. You can directly navigate to the folder we need by typing:
Or you can press Tab after typing c:\, this way the command prompt will loop through every folder that is in the directory that is located at c:. The same thing goes for pressing tab after typing c:\wamp\. Eventually you will get the www folder!
When you are in the correct folder, you can install several frameworks through Composer. I will list some examples on installing the frameworks below, where ‘foldername’ is the name you want for your projects folder:
composer create-project laravel/laravel foldername
composer create-project cakephp/cakephp foldername
composer create-project symfony/symfony foldername
You can find the full list of available packages on https://packagist.org/
For this example, I will install Laravel by executing the code from above in my command prompt. What this does, is download all the packages that are required for the Laravel framework and place them in your Wamp environment.
When Composer has finished downloading all the packages needed, you can check if Laravel is installed correctly by visiting your localhost. You will see the folder you have created under the Your Projects heading, click it and navigate to the Public/ folder. If you see the following message you have succeeded in everything so far!
Optional Step 4: Sass or LESS
You might know them already, if not here’s an explanation. Sass and LESS are CSS preprocessors. They allow you to write CSS in a whole other way, using variables, tiny functions called mixins and other helpful things!
I’ll be covering the install of Sass! Sass uses Ruby to monitor your files and convert them to compressed CSS files. So we need to install Ruby first, visit http://rubyinstaller.org/ and download the installer. During the install it is needed to check the box that says: Add Ruby executables to your PATH. This will guarantee that you can perform Ruby commands through your command prompt.
Once again, if you would like to check if the install went correctly, open up your console and type:
Now Ruby is installed on your system, you can easily install Sass by entering the following command in your command prompt:
gem install sass
The only step left is to let Sass know which file has to be monitored and converted to a regular .css file. In my wamp\www\foldername\public folder I created two folders, one called css, and the other sass. In your sass folder you create an empty style.scss file. This is the file where you will be creating all your Sass magic! Open up your command prompt again and browse to your public folder using the cd command. When you are there, use the following command to tell Sass which file to monitor, and where to output the results!
sass --watch sass/style.scss:css/style.css
When you run this command you can’t use this command prompt for other commands, because Sass is constantly checking if there are changes in your .scss file. You could open up another command prompt, or end the monitoring by pressing CTRL-C.
Using Sass is very intuitive, for a simple tutorial to get you started I would like to redirect you to the Sass tutorial at http://sass-lang.com/guide. When saving your style.scss file, you should see that your regular .css file will get updated!
Next up is installing Git and committing your project to your repository on BitBucket.