Moving to Cloud-Based Web Development

I recently found myself in need of a laptop or netbook which I’ve somehow managed to go without for years. I settled on a Samsung Chromebook because the price was right and I’m fond of Google. I knew going into this purchase that the Chromebook was designed without a hard drive and is intended more for casual web surfers rather than power users, but that didn’t stop me. I also knew I wanted to take full advantage of the Chromium OS as an on-the-go platform so installing a LAMP-based development environment or tinkering with the system would just defeat the purpose. I decided it was time for change, time for liberation!

In this article I’ll share with you how I made the transition from a familiar desktop environment to Cloud-based web development.

Cloud Your Mind

The Cloud is nothing new. It’s just yet another buzzword for something you’re already quite familiar with – the Internet. The only technical difference between the Cloud (err, the Internet) and the Internet is how you use it.

In the Cloud, all of your tools and information reside “out there” on the Internet rather than on your local machine. This allows you to easily access your files from anywhere and from almost any device with a browser and Internet connection. If your computer crashes or is otherwise damaged, all of your tools and data are safe. In other words, moving to the Cloud is simply a matter of changing where you save your data and how you access it.

Moving forward, forget that you have a hard drive. Close your eyes and take a moment to clear it from your mind… Breathe… Relax, you can still keep your memory cards and USB sticks; people still need to carry data with them every once in a while.

Git Control

The first step in making the transition to the Cloud was to find a version control system to manage my code base. If you’ve never used version control before, there’s nothing to it. Version control software lets you:

  • Checkout your code
  • Track revisions
  • Roll back
  • Document the development process
  • Work with others without overwriting each other’s work
  • And more

It really is a tool that no developer, professional or hobbyist, should be without.

There are several offerings to choose from, Mercurial and Subversion amongst others, but I chose Git. Git was originally created by Linus Torvalds and is very easy to use. Although I was installing Git on my local desktop for when I’m developing at home in the comfort of my LAMP environment, there are browser-based Git clients so I wouldn’t need to install it again on any other device I happen to be using.

A detailed explanation of using Git is beyond the scope of the article, but feel free to read the following sources if you’d like to learn more:

On my Linux desktop, I install Git by executing the following commands:

sudo apt-get install git
git config --global user.name "First_name Last_name"
git config --global user.email "email@example.com"

For Windows or Mac, you can download the appropriate installer. After installing, open the program and execute the last two configuration lines above.

Code Repository

With Git up and running the next step was to find a new home for my code base to reside, preferably at no additional cost. I already pay for hosting complete with a control panel and web-based file manager, but that would be a pain to do any serious editing and it’s a good idea to keep development and production code in separate locations.

Some obvious choices were Dropbox or Google Drive. I also considered GitHub, but as much as I am an advocate of open source I didn’t like the fact that they force the free repositories to be public. I might not want to share a work in progress with the rest of the world.

In the end I chose to go with Bitbucket although any of the aforementioned options will work with Git.

After registering a free account and creating a private repository I was ready to transfer my development code, but first I needed to make sure that files containing sensitive information were ignored. To do this, I created a file named .gitignore in my project directory root with the following contents:

# files to ignore
lib/config.php

Next, I created a file lib/example.config.php just for reference. Using the terminal, I then navigated to the code directory on my local machine, initialized it with Git, added all of the files to source control, and committed the code:

cd /var/www/my_project
git init
git add .
git commit -m "adding source control to my project"

On the dashboard of my new Bitbucket repository, I located the getting started panel and chose “I have code I want to import.”

cloud01

The site gave me a few more commands to execute in my terminal, for example:

git remote add origin https://username@bitbucket.org/username/repo_name.git
git push -u origin --all   # to push up the repo for the first time

Now I had a full copy of my code saved on Bitbucket.

Choosing an IDE

As someone who started out with Windows’ Notepad I’m not partial to any particular IDE; if it has line numbering and syntax highlighting, I’m more than happy. However, since now I was searching for a good browser based IDE, it would be nice to have a few specific features:

  • Integration with Git out of the box
  • Built-in server for testing PHP
  • The ability to upload files to my production server

In considering Dropbox and Google Drive, the best IDE I could find was ShiftEdit, but the only way to test server-side code appears to be limited to FTP and that feels so 1990s. I found Codenvy, but as with GitHub they force all of the projects to be public unless you want to pay up.

I finally settled on Cloud 9 which allows one free private project, and that’s all I really needed. As an added bonus, once you’re signed up and viewing your dashboard you can tie your account to Bitbucket and it will automatically import your projects.

cloud02

There are a few options available when creating a new project in Cloud 9. I created a hosted PHP project which gives me access to a virtual machine with a built-in terminal to execute Unix commands so I can edit php.ini, change which version of PHP I’m using, install MySQL, etc.

For now it appears to meet all of my requirements. I can setup a similar environment to my production server and test run code straight from the IDE, upload code to my production server via FTP, and I can push source code changes back to Bitbucket to make sure my repository is always up to date. Awesome!

git pull origin # make sure I'm working with the latest version of my code
git status # see if any modified files need to be added or committed
git push # update repository

Summary

In this article I shared with you how I installed Git for version control, transferred my code from a local development environment to a remote code repository, and how I can access the repository from a browser-based IDE, all in an effort to make the transition from local to Cloud-based development.

If you’ve transitioned to working in the Cloud, or have experience with any of the tools I mentioned (or other tools I may not have mentioned), please share in the comments!

Image via Fotolia

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • jbh

    Thanks for this, developing is the only thing tying me to my laptop/desktop. What can you do about cloud development and your database (mysql).

  • levancho

    how is chrome book a liberation?
    i felt more liberated when i moved to mac from windows, i have adobe suit apps on it, i have my ide on it, i have everything i need on it, and yes i do use git, and i can work on train for hours without internet , and when i do have connection, i can synch my repos , just like that, so now tell me which is more liberating?
    and to be honest, developer that is not willing to pay more than 300$ for a machine that makes him money should not be a deeloper in the first place, i think that paying for my mac almost 3000$ was one of the smartest purchases that have made in that year, after all it makes me more productive….
    i just dont see, how 300$ dollar half empty junk can simplify development?

    • http://www.psinas.com Martin Psinas

      It’s liberating because I don’t need to have my Chromebook with me, but you do need your Mac. I can develop on any computer. Cloud 9 also has an offline app so if I do have my Chromebook, I don’t need an internet connection either.

      As for insulting me as a developer, well… It’s hard to take your opinion seriously when you resort to insults. I mean really, who doesn’t like to save a few bucks?

      • Noah

        I’ll agree with you 100% on saving some cash and thank you for putting this guy back in his place. To this point, I’ve been the only one in my circles to experiment with c9, and I wawnt sure if it could replace my dev machines. But it sounds like you’ve been able to remain fully productive using it, so I think I’ll give it an honest go for my next project.

    • Tim

      I used to spend $3000 on Macs too, and then I wised up and started buying iMacs. Why all the horsepower when your keyboard – not the CPU – is the thing that takes all the abuse? $3000 is a lot to pay for a high-tech typewriter. ;)

  • http://awhite.ca Andrew

    Those of you interested in this article might enjoy Mark O’Connor’s articles on using his iPad with a VPS for development. Similar goal, different tactic: http://yieldthought.com/post/12239282034/swapped-my-macbook-for-an-ipad

    • http://www.psinas.com Martin Psinas

      That was a great read, thank you.

  • Steve Fenwick Hall

    I too have changed from Computer(Lin/Win) to Chromebook for development. Got Pixel paid big $. Now I consider old tools well .. old. Everything i used to do with “software” I have found app replacement. Including lightweight photoshop replacement. The only downside was and is the retraining my computer habits. I now find my vision of desktop/laptop computing is like vinyl records are to music.
    Tools : siftedit, webmin, phpadmin, Google Drive, Pixir Editor and AWS.
    Appreciate the article because I wanted to share my enthusiasm for this approach.
    SFH

  • moix

    Great article was worth reading , but switching to chromebook …well maybe in near future :)

  • http://www.josephtinsley.com/ Joseph Tinsley

    Great post, thanks for sharing. Can’t understand why levancho came out the gate throwing punches. Awesome to hear you settled on using Bitbucket. Nowadays it seems like everyone is on Github. But like you sometimes you just don’t want to share the code your working on. I’ve been meaning to check out Cloud 9 but most recently got a invite from Koding.com… so far seems pretty awesome. But again thanks for the post, I’ve been re-thinking my current workflow

  • http://easternshoremedia.com John Orban

    Interesting how things have developed. I don’t expect you to believe me, but I was ranting 10 years ago for web based software applications. Thank heaven they are finally getting here. I have a Chromebook and a MacBook Air. I love them both, but they serve completely different purposes for me. I really like the idea that if the Chromebook gets crushed by a truck I can whip out another one and not skip a beat. That said, I find it hard to give up my MacBook. It’s just plain amazing how the paradigms are shifting. More to come…