Understand Web Development Workflows

Web development workflow is very important. However, you may be wondering: “What is a web development workflow?” That is a very good question, and it is one that I have been asking myself for a long time. Basically, a web development workflow is how you go about creating your websites, and there are many ways to do it, but read ahead to blow your mind.

The Old Web Development Workflow

This is how we all start out in the world of web development. It’s a simple one way thing, and it is very easy.

First, you edit our HTML, CSS, and JS files on your computer and double click on the index.html file to view it, but no one else can see it.

Next, you take the leap of faith and head on over to GoDaddy.com (known as a hosting provider) and stumble through the process of setting up your very first website. You find out many confusing things such as: hosting providers, servers, domain names, name servers, IP addresses, FTP and many other confusing things, but you get through it.

You, finally, figure out how to upload your HTML files to this mysterious thing called the server with a program called FileZilla, and you very happily visit your yournewwebsite.com.

But then it hits you. If your HTML files are in this mysterious thing called the server, how in the world are you supposed to edit them?

At this point, you get your first taste of the web development workflow. Frustrated, you do some research and discover something called cPanel and another wonderful thing called the File Manager which allows you to edit your files on the server. Everything is good in the world, again.

Simple. Instead of editing your files on your computer, you edit them on the server.

This goes on for a couple months until you hear that you’re not supposed to edit your files on the server. You do some more research and begin to read about things like ‘local environment,’ ‘staging server,’ ‘production server,’ and ‘version control,’ but they don’t make any sense to you.

Reluctantly, you do some research and discover that you are a cowboy coder. You, you horrible person, are editing files live on the server. Disgusted with yourself, you look for an alternative.

The New Web Development Workflow

First of all, you return to editing your files on your local computer (know as your local environment), and you use git to save your project every now and then (know as version control). Once you finish your edits, you upload your files to your online website folder (known as your server) with a program called FileZilla. Everything is right in the world, again.

However, you discover that this is a very tedious process, and you look for a faster way. You discover that there are many ways to do this. You are beginning to venture in unfamiliar territory, territory that I was in for a long time. To see what I, personally, did to solve this problem, you can take a look at my old workflow using Git and Github. There are other ways to streamline the process of uploading your files to your server, but I used git and github.

With this new web development workflow, you are, now, happily editing files locally, opening your terminal (or git bash on windows) and pushing them to git hub where they are automagically sent to your server.

Everything makes sense, now. You are no longer a cowboy coder. You edit your files locally. Then, you use Git to save your project (version control). Next, you use FileZilla or Git/Github to upload your files to the server (your production server). Everything makes sense except for that thing called the ‘staging server.’

After much searching, you get your first client. He wants to see the work you’ve done on his website. You want to show your client, but the only way to show him is by uploading the files to his GoDaddy server. You know you can’t do that because doing so would upset the client’s customers who will see an unfinished website (or a broken one if something breaks while moving the website over to the server).

To solve this problem, you upload the files to a folder inside of the server instead of the server itself, allowing the client to visit hissite.com/your_incomplete_project. This is a primitive way of creating a ‘staging server.’ It is an optional step and is usually not necessary for small projects.

I could go into a LOT of detail on the web development workflow, but this post was just meant to be a broad overview of the web development workflow. It’s meant to help you wrap your head around how extensive the web development workflow really is. The web development workflow’s lack of documentation is probably due to its complexity, but I hope I cleared up some cobwebs with this article.

Keep on thundering!