Stay with me, old girl!
I have a 6 year old laptop. If I were more cynical, I’d say companies use planned obsolescence to make me buy a new one. With cloud web development, it can still be a useful development machine.
Old Bessy is my 6 year old Macbook Pro. I’ve formatted and reformatted, added memory, and replaced batteries. Even still, I’m having a hard time using her for modern web design and development. She’s stuck on Mac OSX 10.6 Snow Leopard, since Apple won’t let me put their latest operating systems on this hardware. Apple also doesn’t make the latest versions of XCode or their command line dev tools available on this machine. Adobe won’t let me put CS6 on her. Can’t use front end dev tools like yeoman.io. While those new Macbook Pros are skinny and sexy, I’d rather not spend cash on a new laptop.
But it’s almost 2013…everything’s in the cloud these days, right. How can I do my web development work in a browser, using cloud tools?
Web Development in the Cloud: Requirements
In my day job and side-consulting jobs, I need to be able to quickly throw up HTML design prototypes. In order to make a cloud-based web development workflow work, I need to be as productive as I am working on a local dev machine:
Must Haves
- A modern text-editor/IDE (code highlighting, suggestions and auto-complete: I currently use Sublime Text 2 or Textmate)
- Git version control
- Development server, either for quick static/HTML only demos, and more complex client-server-database sites (django, rails, I’m started to play with node a bit).
- Automated deployment to production level servers, via SSH, FTP, git, or whatever means.
Nice to haves
- Watch and auto compile SCSS and coffeescript
- Live reloading after HTML/CSS changes
- Persistance layer (database, nosql, filesystem, etc. Most of the time, I’m doing front-end/interaction design type prototypes, so I don’t need this every project)
- Free 🙂
The secret sauce that makes everything go is the Cloud9 IDE. I’ve been watching them on and off for a while, checking it out, playing with it here and there. The collaboration/sharing always seemed neat. But at the end of the day, it didn’t support the tools I use or the way I work. But then I saw that Cloud9 has embedded a fully functional terminal/command prompt inside their IDE:
That is a full-blooded terminal inside Cloud9…Below the surface the terminal is connected directly to the underlying infrastructure.
…the terminal is nearly indistinguishable from a regular terminal, with one massive difference: it’s running on the web. You can access it from anywhere, without any duplicate configurations, and even share the workspace with a friend so they can connect to it.
As far as I can tell, you can’t sudo, or open arbitrary ports. But it appears you can do just about anything else that you would expect to be able to do with user-level permissions. Python and ruby are available, you can run easy_install and install gems. Heck, you can download, install, and run a database! Of course you can ls and look around…even edit files in vi if that’s what you like.
Opening up the terminal in a full unix session inside the browser is a game changer for me. I can take my existing tools and workflow and make them work within a browser! I can work on my computer at home, my parents computer, the netbook that’s been gathering dust since the iPad came out, and have the same web development environment everywhere.
Cloud Development Workflow
Set up Github Repository
- Create a new empty repo in github. Cloud9 also plays nicely with bitbucket, and can clone from any git URL.
Start Your Project in Cloud9 IDE
- Clone this new repo into Cloud9, and start editing. Cloud9 can connect to you github or bitbucket account, and will automatically show you any repos you have.
- Make some code. You can, of course, use the functionality in the Cloud9 IDE to add files and edit them, but I don’t want to start from scratch. I’m gonna just pull in Twitter Bootstrapand their fancy marketing narrow example. From inside the Cloud9 editor I press Alt-T to bring up a terminal window. I can run pretty much whatever unix commands here, including git push back to github, or wget to pull the Bootstrap code I want:
wget http://twitter.github.com/bootstrap/assets/bootstrap.zip unzip bootstrap.zip wget http://twitter.github.com/bootstrap/examples/marketing-narrow.html //Here I had to update the HTML so that the bootstrap css/js files point to the right location
- Preview your new site. With Cloud9, you can run a server-based node, python, ruby, or php app with their Run and Debug settings. But since this is just static, the simple Preview button works fine.
Deploy to Infrastructure-as-a-service provider
Cloud9 comes with close integrated with Heroku and Microsoft Azure. I happen to like dotcloud. With dotcloud, I can easily install the dotcloud command line interface right into my Cloud9 infrastructure, and use dotcloud to deploy the site. Per the dotcloud instructions, install the command line client, create a instance and dotcloud.yml file to create a static www server, and push your project up to the new servers!
easy_install pip && pip install dotcloud vi dotcloud.yml //or you can do it from the C9 IDE dotcloud create c9dotcloudgithub dotcloud push
Mine ended up at here: http://c9dotcloudgithub-fitzgeraldsteele.dotcloud.com/marketing-narrow.html
Version Control and Push to Github
Finally, you’ll want to version that code, and push it back up to the origin at github.
- Create a .gitignore file: I ignored the .dotcloud directory, and the .c9revisions files.
- Stage your code: git add .
- Commit to your local repo (this one is stored on cloud9) git commit -m “Initial commit from Cloud9” (use the command line, or the pulldown menu
- Push back to github: git push origin master
Conclusion
Like the Cloud9 blog post said, this is all pretty straightforward with one major exception: I did this all inside a browser window! I still need to explore what all can and can’t be done inside the c9 terminal, but I don’t see why I couldn’t install the scss/coffeescript watchers to get some of those nice to haves. I’m really excited to see how much of my web development needs can be handled with cloud systems through the browser. I’m also interested in learning how much can be free, and where to get these best bang for the buck in paid services. Looks like Old Bessy may still has a few good years in her yet.
What would your ideal cloud web development stack allow?
Fitzgerald Steele 
have you since been able to dig deeper into the c9 terminal? for example, have you tried yeoman, batmanjs, brunch.io, meteor or any of these modern tools? i’ve been having trouble getting things to work. but it could be bc i’m behind a corporate firewall but i don’t see why that should matter since, as i understand, nothing is downloading locally. anyways thanks for the post. i hope to see more c9 workflow posts from you.
I tried yeoman.io…it didn’t work because it needs an open port; c9 blocks that. You can fake parts of that…use c9’s native preview. You can install less/coffeescript and watch the files to auto compile, but I haven’t seen how you’d get the whole client-side build process yet.
brunch.io seems to be a better fit…don’t need a free port like you do with yeoman, and watching files seems to work as it should, and you can run C9 run configuration on the public directory to view your app. Thanks for introducing brunch to me! =)
Does your site have a contact page? I’m having problems locating it but, I’d like to shoot you an email.
I’ve got some recommendations for your blog you might be interested in hearing. Either way, great site and I look forward to seeing it develop over time.