A Modern Web Development Workflow Explained
By: Przemyslaw Jarzynski
Tags: Programming, Deployment, Coding, Web, Web Development

One of the things that modern web developers need to understand first is a web development workflow. In this article, I will explain how web developers these days get the code from their local machines and deploy it to the live servers where internet users can access their website or a web application in their web browser.

Everything starts on a local machine

When web developers start working on the website or a web application this typically starts on their local computers. The code is typically split into two main parts — frontend and backend.

The frontend is something that developers call HTML, CSS, Javascript and everything else that is sent to the user opening the website and interpreted by the web browser.

The backend is everything that happens on the server-side and all the scripts that run there. These scripts are usually written in PHP, Python, Node.js, Ruby, Java and .Net. Quite often, we also have a database on the backend that stores information like registered users details, the content of the articles on the website or products for an online store. Most commonly used databases are MySQL and PostgreSQL as well as Microsoft SQL.

Git tracks changes in the code

All the source code on the local computer (apart from the database content) is typically stored in a version control system called Git. Git enables developers tracking changes to the code, creating different versions of the project by creating branches, going back to any of the previous versions of the committed code, and much more.

Git is really a standard for version control of any modern software development project.

GitHub, GitLab, Bitbucket — Git in the cloud

But where the Git really starts to shine is where it is pushed and stored in the cloud in services like GitHub, GitLab or Bitbucket. There are several benefits of having a source code in the cloud; the latest version of the code can be accessed from any computer connected to the internet, an entire team can safely and efficiently work on the same project without worrying about damaging the code, storing the code in the Git cloud enables better deployment processes for the code.

Continues Integration and Continues Delivery (CI/CD)

Once we have the code in the cloud in services like GitHub, GitLab, Bitbucket we can use continues integration and continues delivery services to automate the source code deployment. These services can use the code stored in the Git in the cloud, check the code (at least to some degree) and deploy the code to our hosting environment if the code passes all the tests. Services that can be used here include Codeship, CircleCI and GitHub Actions. Once configured, CI/CD services can use our committed to cloud Git repository code and automatically deploy to our hosting provider testing and live environments.

Hosting — Website code and the database

This is where our code ends up from our local git repository though Git in the cloud and CI/CD service. If we have a domain name reserved and configured for our website or application, this enables the user to view our project in the web browser. There are sometimes additional tasks that need to be performed on the server using shell scripts via SSH connection (like creating a database structure for the database on the server).

FTP

Instead of using GitHub, GitLab or Bitbucket and one of the CI/CD cloud services, developers sometimes use FTP or SFTP to transfer their code to the online server. This is a simple but less commonly used these days and not a recommended way to deploy the code to the server.

Web Browser

Once the code is on the live server and we have a domain name allocated to it, internet users can open our website or web application in their web browsers. Any requests (e.g. domain.com/blog) are sent to the server from the web browser, this triggers backend scripts that need to run to generate the page and the frontend (HTML, CSS and Javascript) is returned, interpreted and displayed to the users’ web browsers.

Repeat

If we need to make any further changes to our project, we repeat the same process; we make the changes in our local repository, push the changes to Git in the cloud (GitHub, GitLab, Bitbucket), this triggers an action in CI/CD service and our code is deployed again to our hosting provider.

Summary

Above is a description of a modern web development workflow. This workflow may be slightly different depends on the company and individuals working on the project but I think it gives any new developer starting the web development journey a good idea how and effective and efficient web deployment process looks like these days.

If you want you can also watch a video where I describe the same web development workflow.