Setting up development environment for Magento (my way)

Recently I have been getting a lot of inquiries on Magento trough my site ActiveCodeline. I really appreciate all your feedbacks so far. Almost all of them have been positive. There’s something interesting in giving someone a positive credit for a job, it keeps that someone wanting to do and give more. I’m not a big fan of that sucks or that rules comments. They are by no means constructive or helpful. Although everything above is not related to the topic of this post, I just felt I needed to let it out

Back to Setting up developer environment for Magento. For some of us, this is already a trivial task. Not to mention there is already a quite a number of tutorials out there covering this topic. But each of them (each I saw) is missing the full deal setup. What do I mean by full deal. Well… I get really pissed when I do var_dump($_product) or print_r($_product) on lets say view.phtml file and get blank screen. Here is my way of setting things up.

Installing

1. Download Magento (http://www.magentocommerce.com/download). I suggest you download the Full Release version. As of time of this writing latest Magento version is 1.1.6 and basic .zip file is about 15MB in size (magento-1.1.6.zip (15,0 Mb)).
2. Download Magento sample data (http://www.magentocommerce.com/download). As of time of this writing latest Magento sample data version is 1.1.2 and basic .zip file is about 10.3MB in size (sample-data-1.1.2.zip (10,3 Mb)).
3. I use WAMP as my web server on Windows Vista laptop. By default WAMP is installed in C:\wamp\ folder. Default web folder is C:\wamp\www\. Create a folder magento116 or anything other you would like to call it. Unpack the sample-data-1.1.2.zip and copy entire media folder from sample data archive to your newly created magento116 folder.
4. Inside the sample data archive there is magento_sample_data_for_1.1.2.sql file. Open your PhpMyAdmin (by default its url is http://localhost/phpmyadmin/). Create a database magento116, then import the magento_sample_data_for_1.1.2.sql into it. This might take few minutes, so be patient.
5. Unpack the magento-1.1.6.zip file and dump all of its content into the C:\wamp\www\magento116\ folder.
6. Open your browser and point it to http://localhost/magento116/. You should see the installation screen at this point. Follow the on screen instructions. If you installed the WAMP by default and made no changes to it, you are most likely to see the following errors in Magento installation (PHP Extension “mcrypt” must be loaded and PHP Extension “curl” must be loaded). If you see these errors go to Windows tray, and click the Wamp icon. Go to PHP, extensions, and click on the curl and then to the same for mcrypt. Your Wamp will restart automatically. Refresh the Magento installation page now. If PHP extensions installed ok,  you should be redirected to one step further now. Remember the name of the databse magento116 we have imported our sample data? Write it down now into the Database Connection > Database Name field. Since I made no changes to Wamp, my default root account has no password so there is nothing else to change here besides database name. At this point if we click the continue we are directed to Create Admin Account page
7. Fill in the information requested on Create Admin Account page. Among all those input fields, there is Encryption Key field at the very bottom of the page. YOu do not need to enter anything here. After you enter your username password and all other required information click the Continue. Remember to save your automatically generated Encryption Key for future needs. After this, your done with the installation.

After we have installed the Magento localy on out developer machine, with some sample data we now need to set few of the other thing to have useful development environment.

Configuring

1. First we need to create the custom theme on which we will be working on. Since we don’t want to modify any of the original Magento files. To do this, open your c:\wamp\magento116\ folder, go to C:\wamp\www\magento116\app\design\frontend\default\ folder and make a copy of it’s subfolder called default. This copy is to be blaced also in C:\wamp\www\magento116\app\design\frontend\default\ just give it a diferent name. If you do the Copy > Paste action in Windows it will paste the default folder with the new name default – Copy. All you need to do now is to rename it to mycustom. This is the name I will use in this tutorial. And the name i use in my working environment. Feel free to name it anything you like. You can see the folder structure at the picture I provided.
2. Next we create custom skin folder. We do this the same way we have done the custom theme folder. We go to C:\wamp\www\magento116\skin\frontend\default\ folder and make a copy of it’s default subfolder naming it mycustom. See the screenshot provided.
3. Now we activate our theme and skin. Go to System > Configuration. On the upper left area from the Current Configuration Scope choose Main Website. Now go to the Design > Themes, remove the checkbox mark from each input field and write down mycustom in them then click the Save config.
4. We are still inside the System > Configuration, go to the very bottom of the page and choose the Developer > Debug, remove the defualt checkbox values and set the Profiler, Template Path Hints and Add Block Names to Hints to Yes.
5. In Developer > Debug area, set the Enabled option to Yes. You can leave the File Name and the Exception Log File Name at default setting. Remember to click the Save config button at the top of the page.
6. Now comes one of the most important steps (saves you a lot of later frustration). Go to System > Cache Management and under the All Cache dropdown select the Disable and click the Save cache settings.
7. And for the end go to the C:\wamp\www\magento116\ folder. Select index.php file for edit, go to the bottom of the file and uncomment the last three commented lines (Varien_Profiler::enable(); Mage::setIsDeveloperMode(true); and ini_set(‘display_errors’, 1);). I suggest you leave this uncommented in your development environment.

Conclusion
As you might notice, there is only one file in all this walk trough that would get affected by the Magento update process, index.php. This is the file we modified at the very end in step 7 of configuring our development environment. Which is good, since replacing our modified index.php with some updated version should not broke any code in let’s say live version of site. If anything gets broken, we can be sure it’s due to changes in our mycustom theme folder.

Some of you might want to turn off the page hints since they look kind of, hmm, ugly. Turning this off in development environment is not something i recommend. Leave it, does not cost you anything. Will save you a lot of time.

There is one more important thing. At some pages var_dump and print_r do not work. They work, but you get the empty page after few seconds of waiting.

To deal with this I suggest you download the xdebug from their official site (last version of xdebug as of time of this writing is http://www.xdebug.org/link.php?url=xdebug203-52-win). Place the downloaded xdebug .dll file into the C:\wamp\bin\php\php5.2.6\ext\ folder then click the Wamp icon in the Windows tray and select PHP > php.ini, somewhere around line 630 after the Dynamic Extensions title.

zend_extension_ts=”C:/wamp/bin/php/php5.2.6/ext/php_xdebug-2.0.3-5.2.5.dll”

If you are using Windows Vista like I do on my laptop this probably won’t work. It will cause yor Wamp to crash at almost any page refresh. This is because this .dll has some serious problems running under Windows Vista.

At work I use Windows XP and it works just fine. To see if your xdebug installation went trough fine, you can open the http://localhost/. You should see xdebug under the Loaded Extensions. Installing XDebug makes your var_dump and print_r work under Magento. You won’t be getting empty pages any more when you do stuff like var_dump($_product); in files like app/design/frontend/default/mycustom/template/catalog/product/view.phtml.

For detailed instruction on installing and working with XDebug, please use their official site http://www.xdebug.org.

Hope someone finds this artice helpful. Wish you all the best in mastering Magento.