Magento Dev Environment on Windows 7

In this post, I’m going to walk through how our development team configured our development environment on a Windows OS for Magento.  The impetus for this was to support an out sourced site running Magento in a LAMP environment; keeping in mind the need for continued support of current projects on the Windows stack.  Thus we’ve moved to using XAMPP on Windows to support a company site on Linux.  Fun right!?

We decided to go with the XAMPP Package to install Apache, MySQL and PHP.  The version may be unimportant, but XAMPP 3.1.0 Beta 6 was used at the time of this writing.  When finished with our environment, we had three sites we could hit from our development machines:

  1. The XAMPP Startup/Splash page on the root (Example: http://local.dev:100/)
  2. A fresh Installation of Magento at a subdomain (Example: http://magento.local.dev:100/)
  3. A copy of the company site (running Magento) configured at a subdomain (Example: http://company.local.dev:100/)

The following is a list of downloads we found useful for setting up the development environment:

  1. XAMPP (the platform)
  2. NetBeans IDE (the development tool)
  3. XDebug (debugger for PHP)
  4. WinSCP (used to move files off Linux server on to development machine)
  5. Git (Distributed Version Control System)
  6. 7-zip (used to unzip compressed database and folders from Linux environment)
  7. MySQL WorkBench (MySQL GUI for development)

Below is a general outline of steps taken to establish these three sites on our development machines:

  1. Using a Zip Package of XAMPP
  2. We Kicked off the setup_xampp.bat file after storing the folder structure in the desired location
  3. Configured Port to use 100 instead of 80 (optional) due to IIS using port 80 (under install-path\xampp\apache\conf\httpd.conf)
  4. Added new domain names in the Hosts file (c:\windows\system32\drivers\etc\hosts)
  5. Configured Virtual Hosts File (install-path\xampp\apache\conf\extra\httpd-vhosts.conf)
    1. Referenced domain names from the Hosts file
    2. Added MAGE_IS_DEVELOPER_MODE “1” to Each Virtual Host configured
    3. Each Virtual Host referenced a folder under the default install-path\xampp\htdocs\ path using the DocumentRoot attribute

      Sample vhost file

      Sample vhost file

  6. Launch/Restart Apache and MySQL services under XAMPP control panel  (install-path\xampp\xampp-control.exe)
    1. open default website based on configured domain and port and confirm “XAMPP For Windows” site opens
    2. Local XAMPP Site Complete
  7. Obtained Copy of Magento Enterprise Edition (Community will suffice)
    1. Copied Magento folder structure under the install-path\xampp\htdocs\ path
    2. Created a new database for Magento using mysql (or MySql Workbench)
    3. Site opened with installation page for Magento.
    4. Began Installation
    5. Magento Out of the Box Development Site Complete
  8. Obtained Copy of Company Site (developed on Magento)
    1. Used WinSCP to retrieve a copy of Company Site from Linux servers (or pull from Git repository)
    2. Retrieved a copy of the database as well (using MySqlDump)
    3. Retrieve a copy of the media folder as well
    4. Create database schema for the new database in mysql (or MySql Workbench)
    5. Imported SQL file into new database
    6. Confirm app/code/etc/local.xml exists and configured accordingly
    7. Change domain name in core_data_config table to reflect development URL
    8. Run Site
    9. Company Magento Site Complete

Creating an Orchard Module

In my last post, Prep-Work to Developing an Orchard Module, I outlined the steps I took to fork the Orchard Source Code and clone it to my local development machine using TortoiseHg and VisualHg.  Now that I have the Orchard Project on my machine, I’m ready to create an Orchard Module.  There is already good documentation on creating an Orchard Module from the community (Walkthrough Writing An Orchard Module – Orchard Documentation,Creating a module with a simple text editor – Orchard Documentation, etc.), but I’ll regurgitate some of it here hopefully to solidify the process in my mind and perhaps yours too!

Here’s how I created the module structure:

Creating a Module Project from the Command line:

I followed the steps outlined in the Orchard Documentation, Creating a module with a simple text editor, using the code generation module and the Orchard console to build the module project shell.

  1. Run Orchard.exe located within the bin folder of the Orchard Project (Console application)
    image
  2. Run the Orchard Instance in the browser and search in the Module Gallery for Code Generation module; install this module.
  3. Ensure the Code Generation module is enable by running the following command in the Orchard console environment:

    feature enable Orchard.CodeGeneration

  4. Finally, create the module structure by using the Code Generation command within the console environment:

    codegen module Slider

    Where Slider is the name of your module.

When finished, you should see the new module structure in the Orchard Project under the Modules Solution folder (in addition, you’ll see the module physically located in the Orchard.Web\Modules folder of the project):

image

If you now run the Orchard project, you’ll see a new feature in the modules section labeled Slider (or whatever name you chose).

image

This is coming from the Module.txt file that was created by the Code Generation:

image

If the Module.txt file did not exist, Orchard would not be able to pick up your Module and list it in the administrative section.

Also pertinent to point out, the Project includes references to Orchard.Core and Orchard.Framework among other typical MVC references:

image

And the Scripts and Styles folders all contain their own Web.config file in addition to a Web.config file in the root of the project.  These configuration files tell Orchard that any files requested from these folder should be handled by a StaticFileHandler.  The details of why this is needed eludes me right now, but suffice to say these are important attributes to displaying the content (JavaScript files, CSS files, etc.) in these folders.

So there you have it!  A module shell that provides you with the starting point for bending Orchard to your will.  Now time to harness the power of the module by doing something useful.

Prep-Work to Developing An Orchard Module

In my last post, I discussed the need to perform some custom development within the Orchard Platform to provide specific functionality in the form of a widget that the site owner could include in pages within the site.  The Projector Module, though very customizable, did not allow me the flexibility to inject a precise html structure based on a list of content items.  A module called Featured Item Slider from NimblePros had very similar functionality that I was looking for, so I decided to roll up my sleeves, pop the hood to all the goodness that is Orchard and dare to build (or at least adapt) a custom module.

To do that though, there are some steps to take before hand.  You need the ability to debug the code and the Web Matrix IDE is just not going to be adequate enough; especially considering my crutch to using F12 on objects in Visual Studio 2010 (Function Key F12 traces an object back to it’s declaration from within code).

Here are the steps I took to get Orchard’s source code on my machine in an attempt to build a custom module:

  1. Getting familiar with the Source Code strategy
    So I joined up with CodePlex and read up on some tutorials on using Mercurial the source control system that Orchard/CodePlex is using.  The TekPub episode to Mercurialwas a valuable resource; the video quality is poor, but the content is enlightening to new users.Installed TortoiseHg and VisualHg to allow me to pull the source code and work with the repository within VS2010.

    Steps to creating a repository for the code (using TortoiseHg):
    While the functionality is the same between versions, the tutorial shows an outdated version of TortoiseHg.  Don’t let this hinder you understanding the concepts!

    1. Create a fork in the Orchard Project and clone the forked repository (TekPub episode @ 23:18).
      Or if starting a new Project (this is not related to Orchard development but good to know):
      Create repository in solution directory of project (TekPub episode @ 5:17)
      Keeping in mind that:

      1. The .hg folder that is created is the repository
      2. The .hgignore file represents all the files Mercurial should not track.
    2. Enable Visual Studio Integration for VisualHg (TekPub episode @ 8:37)
      1. Enabled in: Tools | Options | Source-Control | Plug-in Selectionimage
      2. To commit changes right-click on the project or file and select commitimage
    3. Sending code changes back to CodePlex (TekPub episode @ 17:32)
      1. Use the Clone URL from your CodePlex fork with the Synchronize command in TortoiseHg/VisualHg.
        image
  2. Fork the Orchard Project to my development branch titled DebuggingEnvironment and Clone it to my development machine (using Steps in 1A above)
    I now have a branch of the project in CodePlex that I have cloned to my local development machine and can begin creating a module.

In my next post, I’ll explain how to actually create a development module within the Orchard Project.

Orchard’s Projector Module: the tool of choice?

Being new to Orchard, I was hoping I could minimize the learning curve and get by with just theming a site and using the out-of-the-box functionality so-to-speak to quickly get a website up and running.  I picked a theme from Script Tutorials called Mono that I wanted to implement on the Orchard platform.  While I’m still in the process of working this theme into Orchard, I wanted to share some of what I’ve learned along the way.  Keep in mind, probably less than a month ago, I had only heard of Orchard as being a viable open source platform for CMS.  I’m still only scratching the proverbial surface with Orchard.  My hope is I can retain more through sharing my experiences along the way.  If it turns out to be a help and encouragement to you, I’d love to know and may consider sharing more of my experiences working with the platform.

One problem that has broadened my understanding of the Orchard platform was coming up with a solution that would let Orchard inject a specific HTML stream to the client based on a list of Content Items.  Simple, you say, just use the new Projector Module and whip out some custom queries and your well on your way!  Well, almost.  I love the flexibility of the Projector Module and I intend to use it extensively if I become married to this platform, but I couldn’t quite get the Projector Module to succumb to my will for what I see could be a very common pattern.  Projector Module is great when you want to sequentially iterate over a list of content items and display information.  For example, if I had a Content Type consisting of Name, and ImagePath, the Projector Module could easily filter by that Content Type an produce HTML similar to the following:

<div>
	<img src="~/images/image1.jpg" name="Image1" />
	<img src="~/images/image2.jpg" name="Image2" />
	<img src="~/images/image3.jpg" name="Image3" />
</div>

But my problem was that I needed to generate output similar to this instead:

<div id="slider">
	<img src="~/images/image1.jpg" title="#htmlcaption-1">
	<img src="~/images/image2.jpg" title="#htmlcaption-2">
	<img src="~/images/image3.jpg" title="#htmlcaption-3">
</div>
<div id="htmlcaption-1">
	<h5 >Headline 1</h5> <p>Sub-Headline 1</p>
</div>
<div id="htmlcaption-2">
	<h5>Headline 2</h5> <p>Sub-Headline 2</p>
</div>
<div id="htmlcaption-3">
	<h5>Headline 3</h5> <p>Sub-Headline 3</p>
</div>

Where a Content Type consisting of Name, ImagePath, Headline, SubHeadline is used to populate the pattern above.  I could not see a feasible way to do this with the Projector Module.  I could have created two Projector Widgets on the same page I suppose; one to generate the content in the “slider” div and another to produce the other div tags; but that seems to be too expensive having two widgets essentially iterating over the same data twice!  Maybe not; but it does make it more complex for the contributor who has to keep up with it in the Administrative Section.  And what about the dependencies?  I need to make sure the page running these widgets references jQuery among other custom scripts and styles.  Using Projector for this just seemed like using a Flat-head screw driver on a Phillips-head screw.  It may do the job, but it’s probably not the best tool of choice.

This leads me to the decision maybe it’s going to require a custom module.  Reviewing similar modules in the gallery, I ran across one that essentially solved this problem.  NimblePros has produced the Featured Item Slider, a module that creates a slide show that comes very close to the functionality I was aiming for in my selected theme.  I tried using the Featured Item Slider and was mostly successful, but it wasn’t producing the *exact* functionality.  But now, I have a good idea that this is the direction I need to head toward, so I’m in the process of modifying the Featured Item Slider to create a simpler, less configurable, module that produces exactly what I need!

Stick around and I’ll share what I’ve learned as I dive into the details of Creating an Orchard Module!