A typical workflow of a web developer

Hi there I work as a web developer for one company so this post is meant to be an introduction for all new developers who came and will come here. I’ll explain stuff like Text Editors, setting up BitBucket, Git, Branching, Pull Requests, setting up Putty for an SSH connection on the server and so on. It’s meant to them but it can also be helpful to many other developers who have just started, in getting a bigger picture of what does a typical day in web development looks like.

Text Editors

First I’ll list some text editor that we can use but not limited to them in any way. If you have another good text editor feel free to use it and share it with us. I personally prefer using Sublime Text Editor 3. It has a nice interface, lots of plugins, great community and offers lots of customizations. Other editors that I think are good are Atom and Visual Studio Code, they are not ordered by any way they are all equally good it just depends on your preferences and taste. More about them you can find here.

BitBucket

We use BitBucket as our version control system that makes it easy for us to collaborate with our team. BitBucket is a Git-based solution, so we will use Git and it’s commands like add, commit, push and pull, every day. At first, you’ll have to reference back to the list to know the order of those commands but in no time they will become your second nature. First, you need to download Git and GitBash from here. After that, you need to set up an SSH key if you don’t want to be asked for your git password every time you push your code. Here is an easy step by step guide on how to do it, expand “Set up SSH for Git on Windows” and follow the steps listed there.

Downloading the project from BitBucket

First, you will need to clone the project to your local machine. Open up BitBucket, navigate to the project you are working and click the + sign in the left sidebar, there will be a GET TO WORK section and click the “Clone this repository”. You will get a nice popup with a link that you will use. Next, open up a directory where you want to download the project and right click and you’ll have Git Bash Here. Git Bash will open and positioned in the desired directory. Now just paste the link you got from the BitBucket. Wait a bit and you should have your project downloaded, which you can open now in your chosen text editor.

Setting up a local environment

When you have your project downloaded and ready, you need to set up the local environment. This part is easy and can be used for most of our projects. You will need to set up Apache, MySQL, PHP (in most cases). This can be easily achieved by installing XAMPP.
XAMPP is a free and open source cross-platform web server developed by Apache Friends. XAMPP stands for Cross-Platform (X), Apache (A), MySQL (M), PHP (P) and Perl (P). It is a simple, light-weighted Apache server that makes it extremely easy for developers to create a local HTTP server with just a few clicks.
Atlassian Jira and task management
We use Atlassian Jira as our task management system. Login to jira and navigate to your project. In the sidebar, you’ll see a Issues, click that one and choose My open issues or All issues if you want to see all the tasks/issues on that project. There you can see the task’s ID, status, priority and mostly a short description of what needs to be done (if a title is not enough).

Connecting to your server using SSH and putty

If you are on a windows machine you’ll need putty for establishing an SSH connection. You can download it here. Now we use Amazon ec2 servers so here is a step by step tutorial on how to set up everything and connect to them using putty.

Workflow

Now that you have your project downloaded, you received your first task and you are fired up, you just want to start working you are tired of setting everything up. Let’s start. Every task on jira has its own ID. We will use this part in naming our branches, so write it down somewhere.
Open up Git Bash in your project directory and enter “git branch” it should display all branches on your local machine, you should be currently on a master branch. For every task, you will create a new branch so that you don’t interfere with other developers.
Every time before you start working on a new task you should pull the latest changes on master branch (or your main branch). To do so you do

git pull origin master

#general command for pulling origin branch
git pull origin <branch-name>

for getting the latest changes of any branch. Now you are up to date with the remote branch.
In order to create a new branch, you will do

git checkout -b ID123-BranchName

git checkout -b <branch-name>

where ID123 is the task ID from jira (jira ID is not required but it helps organize stuff). If you do “git branch” now it should show that you are currently on your new branch.
Now you do your work on the project, test everything and when you think you are done you need to push that to the remote (BitBucket). You can achieve that by using the following commands:

git add .

This command updates the index using the current content found in the working tree, to prepare the content staged for the next commit. More on git add you can find here:

git commit -m “I did that and that…”

git commit -m "<commit-message>"

Stores the current contents of the index in a new commit along with a log message from the user describing the changes.

git push origin D123-BranchName

git push origin <branch-name>

Updates remote refs using local refs, while sending objects necessary to complete the given refs.

At this point, you pushed your changes to the remote, and now you have 2 options if you want to push this to your production server you’ll need to go to BitBucket and create a pull request from your branch to master. Choose your reviewer and after he or she approves it needs to be pulled to the server using git pull origin master. The second scenario is you want to push this to your development server then you log in using SSH to your dev server and do the following:

git fetch origin <branch-name>
git checkout <branch-name>

In short:

git checkout master
git pull origin master
git checkout -b <branch-name>

• do coding

git add .
git commit -m "<commit-message>"
git push origin <branch-name>

• connect to your server
• navigate to the right directory

git fetch origin <branch-name>
git checkout <branch-name>

• repeat for a new task

Useful git commands

Abort Changes of a File

git checkout -- <fileName>

Undo the Previous Commit

git revert HEAD^

Temporarily Stash Changes, Restore Later

# After changes have been made...
git stash

# Do some other stuff here, like switch branches, merge other changes, etc.

#Re-apply the changes
git stash pop

Reset all the current changes (my friends favorite one)

git reset --hard

Leave a Reply

Your email address will not be published. Required fields are marked *