Programming

Portable Apps: A Mobile Office For A Desktop Computer

    Joseph Ucuzoglu
    Share

    While portable applications have been available for quite some time, it was only recently that I realized how incredibly useful having a complete portable web development environment could be. The best part is that such an environment can be created quickly, easily and for free. All you need is a portable drive (I use a 4GB USB Flash drive, which you can pick up for under $30 these days) and a computer.

    For the purposes of this tutorial, I’ve chosen to use the Windows operating system and only open source applications.

    Do you have 15 minutes to spare? If so, grab your portable drive! You’re only four steps away from a completely portable web development environment. Let’s get started!

    Getting Portable

    Figure 1: The PortableApps Suite

    Start by downloading and installing the Portable Apps Suite (Base Edition). This program gives you a friendly front end, and will make installing other portable applications on our flash drive a snap.

    Stacking Your Stick

    Our next step will be to install the core of our web development environment. My personal choice is XAMPP, which provides all of the essentials. In particular, we’re interested in:

    • Apache (Web Server)
    • MySql (Database)
    • PHP (Web Scripting)
    • PHPMyAdmin (Database Interface)

    Figure 2: The XAMPP logo

    To install the XAMPP Stack:

    1. Download XAMPP Lite.

    2. Extract the contents of this archive to the root directory of your portable drive.

    3. Download XAMPP Launcher 1.2.

    4. Launch the PortableApps Suite, and click Options.

    5. Select the downloaded file. The installer will take care of the rest.

    Figure 3: The XAMPP Control Panel

    To test the stack, follow these steps:

    1. Open the XAMPP Control Panel, shown in Figure 2 above.

    2. Click the Start button for both Apache and MySQL.

    3. Launch your web browser of choice, and enter http://localhost/ in the address bar. You should see the XAMPP for Windows start page pictured in Figure 3.

    Figure 4. The XAMPP start page

    Now click the Status link, which is located in the left sidebar. You should see a list of green "activated" notifications next to PHP and MySQL.

    Congratulations — your portable PHP-enabled web server and database are up and running!

    Note: Not Intended For Production!
    If you’re planning on using this configuration to power a public-facing web site, you may want to think again. Read the section titled A Matter of Security on the Apache Friends site to find out more about what’s involved in securing your portable web environment.

    Figure 5: The XAMPP Security Check

    Which Apps Should You Grab?

    Now that we have a web server, a database, and a working PHP environment, let’s visit the portable apps application page and download some more applications. At a bare minimum, I like to take with me a text editor that performs code syntax highlighting, a WYSIWYG-capable editor, an FTP client, a web browser, and a graphics application. The following programs fit the bill for me:

    While tons of apps are available in a portable format, I chose these applications because they provide us with the tools to get the job done. Best of all, every single one of them is available for download from the portable apps web site, which means installation is a breeze.

    Once you’ve downloaded all of your applications, and installed them via the PortableApps installer, it’s time to get acquainted with your new development environment.

    Testing Your Environment

    Now that we have our portable development environment (and a bunch of tools) in place, let’s go ahead and create a simple helloworld.php page to test whether the stick lives up to the shtick. But before we start our scripting, let’s create a separate folder to house it.

    • Browse to K:xampplitehtdocs (substitute K: with your portable drive letter) and create a folder named HelloWorld.
    • Next, open portable Notepad++ and copy in the following program:
    <?php  
    
    Print "Hello World";  
    
?>
    • Save the file into your HelloWorld directory as index.php.
    • Open your desktop browser (or the portable version of Firefox) and go to http://localhost/HelloWorld/

    If you’re seeing the "Hello World" message, then you’re ready to move on to some of the more interesting possibilities that a portable web development environment makes possible.

    Uses for your Portable Development Environment

    Use #1: A Complete Backup of All Your Sites

    The ability to purchase a 4GB USB flash drive for under $30 means that you can carry a backup of all of your web sites in your pocket! In addition to being a useful data backup, you never know when you might want to make a quick update to a web site, so having your sites readily accessible means that your backups can become a development environment.

    Use #2: Quickly Try Out an Open Source PHP Application

    Because the XAMPP stack default setup is very lax security-wise, you can use it to easily try out PHP applications. With your portable PHP environment, you can check out the latest and greatest apps that are generating a buzz! Most of these programs contain web-based install scripts, which means that getting them running is often as easy as extracting the application’s scripts to a folder in your htdocs directory and browsing to that directory.

    If programs like SugarCRM, Knowledge Tree, Alfresco, Joomla, WordPress, and other leading open source applications aren’t on your radar, then it’s time you took a look at them. Having a portable environment in which to experiment means that your main machine remains clean and free from those apps that you’re trialing or experimenting with.

    Use #3: Bring your Complete Web Portfolio with you

    While it may be impressive to show a potential client one of the many sites that you’ve created by launching the live site, they’ll be even more impressed when you can then let them take a peek under the hood. And if you find yourself without a network connection, your demo needn’t be compromised.

    Use #4: The (Almost) Perfect Test Server

    You’re not editing any of your clients’ data live on the web, right? Right??

    An effective development model incorporates a development machine, a test server, and a production server. Use your primary computer as a development machine, just like you always have, and add a layer of security by using your portable web environment as the test server.

    Once you’ve tested your changes and determined that everything looks good, you can feel confident to upload the information to the live server. Not to mention that you can brag to all your clients that you have a dedicated testing environment. (There’s no need to mention it might also be in your pocket at that moment!)

    Summary

    In this article I showed you how to create a portable development environment for your Windows machine. Having a portable development environment on hand can deliver both technical and business benefits. Considering a suite like PortableApps is easy to set up, easy to use, and costs nothing (other than the cost of your USB storage device), there’s really no reason why you shouldn’t create yourself a web development environment on a stick!