A Modern Web Development Workflow

Posted on by Glen Wheeler

A sketch drawing of my web development workflow

A modern web development workflow is key to any website project. Maintaining it and building upon it, to make it more effective and efficient should always be at the back of everyone's mind when working in a web design and development team. Having a solid web development workflow will save time and money and will decrease project development time significantly.

In this post I write about how I work from local to live. I generally work in small to medium size teams with the workflow I am about to write about.

Step 1 - Winning The Project

So, the project has been won. After weeks of pitching, meetings and spending time with the client you now have the project in your hands ready to go. Lets talk project specifications and deliverables. You should also have a written agreement and contract in place ready to start the work.

Step 2 - Chasing Paper Work

Getting the project specification and its deliverables down on paper is critical. A project scoping document basically acts as an agreement between the client and the development team. This document states everything about the project and how it should work as a final product. If for some reason the client asks for additions during the project and this does not exist in the specification that was initially drawn up, then this will be charged for as a separate piece of work.

For brief information on the previous two steps of the workflow you should have a quick read of the process page on my website.

Step 3 - Your Local Environment

We all have different set-ups when it comes to a local development area. It totally depends on the type of projects you work on. For me I work 100% on Apple Mac and have done for several years. I have a very specific set-up when it comes to my local development space as I work on multiple machines, a Macbook Pro at home and a Macbook when out and about working on site for companies and in coffee shops. So, my local set-up. Here's what's involved.

Content From Industry Leaders Direct To Your Inbox!

Thanks for viewing A Modern Web Development Workflow article. Month to month we release a great mailer full of information from myself as well as other leaders in web industry. Including Jeffrey Zeldman of AListApart, Harry Roberts of CSS Wizardry, Rachel Andrew of edgesofmyseat and Jeremy Keith of ClearLeft! Signup today for some great content

  1. Install Dropbox - Dropbox is a software service that allows me to host my files on cloud. I can then be logged in to my Dropbox account on both machines I work so all files sync across, basically giving me a mirror of my files on both machines. By purchasing a yearly subscription of Dropbox Pro I have more than enough space (1TB) to store my files.
  2. Install MAMP Pro - One computer, multiple servers. MAMP allows easy installation and administration of local development environments. The software allows multiple servers running different PHP versions as well as services like Dynamic DNS, SMTP, Apache and Virtual Servers.
  3. Install Mail Catcher - I often find myself testing email notification and forms on my local environment. MailCatcher is a simple SMTP server that catches messages sent to it from a web interface.
  4. Install Sequel Pro - phpMyAdmin comes packaged with MAMP Pro but I much prefer to manage my databases with Sequel Pro. The interface is so simple to use and navigate which makes database management so simple.
  5. Installing Gems - Depending on what you are working on you may need to install certain Ruby Gems such as s3 for Amazons Simple Storage Service or Sass if you are working with Sass. You can grab your gems and get them installed quite easily using the rubygems.org website
  6. Installing a Code Editor - This is total preference to the developer. I prefer to useSublime Text because of its extensiveness and its community. Sublime has some great plug-ins as well as its split editing, instant project switch and distraction free mode features. Sublime also has a beautiful gallery of themes you can easily apply to your code environment that is personal to you. Other editors you might find useful are CodeKit, Coda, Atom or even Vim. The choice is yours, whatever you feel most comfortable with.
  7. Install Live Reload - Live page updating without refreshing your page manually. Save yourself some time with this great tool.
  8. Install GhostLab - Building a website for mobile devices? Then having this tool is critical. GhostLab allows you to broadcast your local website across many devices connected to a single IP address, giving you a preview of how your website will look across devices in real time. The software is extremely easy to set-up with just a few clicks to get going.

Step 4 - Creating the local website directory

The first step is to add a "development" directory which will store all of your local websites. Because I want my local development space to be mirrored across multiple machines I create my development directory in Dropbox. I then perform the following actions to set-up a local website.

  1. The first step to setting up a website project is to create a remote repository. I do this at bitbucket.org. Bitbucket is a Git and Mercurial based source code management system which stores versions of your website commits from the local server to remote. On my account I set-up my repository, which will eventually be synced together with my local website directory stored on my local machine. For this example I will call the project "Quality Books". Once we have set-up the repository "Quality Books" we then need to pull this down and point it to a directory on my local machine.
  2. In this next step I use a fantastic piece of software called Tower. This software allows us to produce git flow from our remote repository on Bitbucket to our local directory and vice versa. There are of course other options to Tower such as Github for Mac and SourceTree. So, getting the website from remote to local. Upon creating your remote repository you will be given an option to "Clone". It does exactly what it says on the tin. To clone the repository to local all we do is select "clone" and grab either the SSH URL or Grab the http URL.
  3. Once we have the command we can then go to our Tower software, select "add", select "clone remote repository" and then paste in our repository URL.
  4. At this stage in the set-up you will also be asked where to clone the repository to. This is an important step in my set-up as I need to make sure I clone the repository to my development directory inside Dropbox. You can of course clone your repository where ever you need to. I just need to do this so it syncs up with my other machine.
  5. Once this has been complete we are now ready to start setting up the website. For this specific project I am using Wordpress. I download the set-up files from Wordpress and drop them into the new cloned directory inside of my "development: directory in Dropbox.

Here is what the directory structure looks like

 
				|- Dropbox
				|-- Development
				|--- Quality Books
				|---- Website Files
			

Step 5 - Sending Files to the remote repository

Getting the websites to the remote repository on Bitbucket is extremely easy. In fact we have already done the hard work. Once you start adding and working on files in your local directory you will notice that Tower (or which other software you choose to use) will start recognising changes within that working local repository. Tower is now recording everything you do

Making your first commit is easy. In Tower You will see a full list of files that have been added to your local directory. To commit these files to the remote repository on Bitbucket I simply select the files I want to commit. In my case I want to stage all of my new files, so I simply select stage all which selects all buttons. Don't forget to add a commit subject and message. This will give other developers in your team information about what the commit is about. In this area you should briefly and accurately explain what the commit is about. In my case I add "Initial Wordpress Set-up Files". Once committed, you will notice all files have disappeared. This is because they are now ready to push. Simply click the "push" button to send all files to the remote repository.

And like magic! All of your files are now backed up on you remote repository. Started editing files again locally and you will note Tower records them. Commit the files and push and you will see that the remote repository now has those new files. In bucket you can then compare files, see archived files, what changes have been made and so on. Bitbucket provides a great service all free of charge, we owe so much to its service!

Step 6 - Getting Ready For Deployment

Clients always like to see progress. Bitbucket keeps a backup of that progress as the project moves forward, however I would say this is more for the design and development team. Clients don't want to see code, they want to see a beautiful working website, and we must prepare for this.

What we need next is a deployment service and then a staging server so that the client can see a working demo from a live link.

Step 6.1 - Setting up the Staging Environment

This one comes down to preference again. I prefer to keep all of my demo sites on my own dedicated server. To do this I simply set-up a sub domain for whatever the project is I am working on e.g. https://qualitybooks.glenwheeler.co.uk. I then provide the sub domain with certain services and features such as a database, the latest version of PHP and anything else that the website demo requires. Once this is set-up I will then have space to deploy my files to. All files will be pulled from my Bitbucket repository. This might be from a development or master branch on Bitbucket and could consist of the latest committed files or a selection of committed files, which ever the developer requires.

A note on database versions. It's hard to keep on top of database versions. Databases are not included in your commits from local development to BitBucket. At the present time the best way for me to do this is to keep updated database versions in Bitbucket by uploading the SQL dumps to the file area on my BitBucket Account. There is however a service I recently discovered to manage database versions a little better. This service is called vizuina. It's not something I have looked into deeply yet, so I will comment more on this once I start to use it a little more, I might an article on it at a later date. Maybe you would like to comment on this one at the end of this post? It's one problem I know a lot of development teams struggle with.

Great Content, Great Advice, Greater Learning...

This postA Modern Web Development Workflow has proved to work successfully for many of my clients including the folks over at VeryCheapHolidays and the guys at Real Madrid FC. This post was written and put together due to the people I network with, follow and listen to. The content and advice I gather from industry leaders is incredible and you can recieve that information too.

Step 6.2 - Deployment Services & Configuration

We're lucky enough to have some great deployment services available to use these days. My favourite, and the one I use on a regular basis is Deploybot (formerly Deploy.io). The service enables me to deploy my code anywhere I need to using its simple to use web application interface. The application comes at a very cheap price of around £11 a month and is well worth the money. Simply create an account, login, create a repository, connect it to your Bitbucket account, select the repository from Bitbucket, add and configure it's environment and then add the staging server ready for deployment. Just like other services I have mentioned in this post, there are also other alternatives to Deploybot. Some of these are DeployHQ, Beanstalk, Codeship and Travis CI.

Deploybot offers a wide range of deployment options including Digital Ocean, Heroku, SFTP, FTP, Shopify, Rackspace, Atomic SFTP and Amazon Web Services. You also have the option to use Shell by running your commands and deployment scripts

Step 6.3 - Going Public

Once you have configured the deployment service of your choice, you are then ready to push the button. Click "deploy" and you'll see your files will start deploying from bit bucket to the staging server. Deploybot will send you a notification once the deployment process has complete. If for some reason the deployment process fails, you will also be notified of the issues ready foe debugging. Be sure your database is in place on the staging server and is configured correctly with your configuration.php file or what ever file you might be using to connect your website to the database.

Just like that, your website which has taken the journey from your local machine to a live staging server is complete.

Step 7 - Review, Change, Commit, Deploy, Stage, Review

Now that we have a full web development workflow in place, all we do now is just follow the process right back around again starting from step 5

  1. Make the changes to your web development files
  2. Record them automatically via Tower
  3. Commit the files you require to your Bitbucket repository via Tower
  4. Check and compare your files on Bitbucket
  5. Pull files from Bitbucket to Deploybot
  6. Deploy files to Stage from the Deploybot service
  7. Review stage area
  8. Follow the loop back to changing local web project files
  9. And so on...

Below is a diagram which shows the development workflow I have written about above. The diagram outlines the simple steps to the workflow.

A UML Diagram showing my Modern Day Web Development workflow
A simplistic diagram of my modern web development workflow.

Closing Comments

As I have already mentioned in this post, everyone has their own workflow which they are comfortable with. There are probably parts of my workflow that you find confusing, incorrect or none preferred, but it's what suites me and allows me to work quicker and more efficient. Time is expensive so don't waste it without a workflow in place.

Share this post with your friends, create discussion: