DEV Community

Robert Matyszewski
Robert Matyszewski

Posted on • Updated on • Originally published at blog.graphqleditor.com

Junior Web Developer environment setup

This article will give you a detailed introduction on how to set up your computer as a web developer. It was created for MacOS cause I mostly work on MacOS, however, you can easily interchange those instructions for Windows. Setting up a web development environment is the first challenge on a road to become a web developer today. Don't give up, try right away!

There are a few ways you can set up your development environment. You can have everything in one IDE alternatively you can use many lightweight tools to combine them with their purposes. The following short checklist reflects my favourite tools in lightweight combination. In some cases, I prefer to use lightweight tools and for example, for react I use one IDE. Follow me to get more, in the next article I'll cover the basics of React Development Environment.

Agenda:

  • Homebrew
  • Git & GitHub
  • Sublime as Editor
  • Node and NPM
  • iTerm2

Homebrew

You will need to use the Mac Terminal app to install Homebrew. The Terminal app is located in the Utility folder in the Applications folder.

Homebrew is a package manager for MacOS. Rather than having to download every app from a web, Homebrew enables you to install and control applications from the command line. It’s an excellent tool to get used to the command line at the beginner's journey. You should feel relaxed on the command line as developer thus it makes sense to perform as many tasks as possible there. In addition, Homebrew gives you the ability to manage all of your applications with only one tool. You can get all the necessary instructions for Homebrew on their website. Otherwise, simply type the following command in your command line (terminal) to install Homebrew.

ruby -e "$(curl -fsSL
https://raw.githubusercontent.com/Homebrew/install/master/install)" 
Enter fullscreen mode Exit fullscreen mode

To verify if the installation was successful type:

brew --version
Enter fullscreen mode Exit fullscreen mode

Afterwards, Homebrew should be ready for you. It should be accessible on the command line when you type brew. Whenever you install another tool with Homebrew, type brew update in your command line to update the Homebrew repository with all the recent versions of the packages. Afterwards, you can install the desired tool with brew install or upgrade it with brew upgrade .

Git and GitHub

Git will be your distributed version control system. It manages your local projects on your machine and your remote projects on platforms such as GitHub and GitLab. Sooner or later, you will need it to cooperate on projects with other developers. Git should have been installed along the way with the Homebrew installation. Type git --version to verify that it is there. Otherwise, you can use Homebrew for the first time to install it with the following command on the command line:

brew install git
Enter fullscreen mode Exit fullscreen mode

To verify if the installation was successful type:

git --version
Enter fullscreen mode Exit fullscreen mode

Next, you have to create a GitHub account and connect it from a terminal. GitHub is a web-based hosting service for version control using Git. It offers all of the distributed version control and source code management (SCM) functionality of Git as well as adding its other features. It provides access control and several collaboration features such as bug tracking, feature requests, task management, and wikis for every project. To learn more how to setup GitHub over terminal check this link.

Sublime as Editor

Sublime is one of the top editors for developers. That’s the part where everybody has their own opinion. You can use any editor or IDE of your choices like Visual Studio Code, Atom and VIM.

Unfortunately, Sublime isn’t directly accessible via Homebrew. But you can use Cask to install it. Cask is another package manager within Homebrew for GUI tools. For instance, Chrome could be installed on your machine with Cask as well. Just type selected commands in a terminal:

brew install caskroom/cask/brew-cask
brew tap caskroom/versions
brew cask install sublime-text
Enter fullscreen mode Exit fullscreen mode

To verify if the installation was successful type:
subl -v

Node and NPM

If you are working with JavaScript, node and npm is a must. The node package manager is used to install libraries/frameworks (node packages) on the command line to your project.

brew install node
Enter fullscreen mode Exit fullscreen mode

To verify if the installation was successful type:
node -v
npm -v

iTerm2

MacOS and other OS’s already come with their own command line terminal tool. Thus, another command line tool is optional, but you might want to install iTerm2 because of various advantages. It comes with powerful integrations, beautiful themes and other useful utility tools that will enrich your daily toolset. Homebrew with Cask helps you to install it, just type:

brew cask install iterm2
Enter fullscreen mode Exit fullscreen mode




Summary

That are all the basic tools you need to set up a development environment. Homebrew is used to install all the tools for you on the command line. Cask is used on top of Homebrew to install graphical user interfaces apps applications such as Chrome, iTerm2 and Sublime. The later stage you can choose any code editor as you want since you'll spend most of the time in it. As a JavaScript developer, there is no way around node and npm and thus you should install them with nvm to manage multiple node versions. Git and GitHub should be used to handle your projects.

Would you add anything to my list?

Top comments (14)

Collapse
 
kailouu profile image
Louis Connors

I'm currently a junior dev, so thanks for the quick tutorial. (Though i'm already set up) I think it might be useful to know about setting up a virtual environment with Vagrant and containerising an app with Docker also. As these are the two setup things that took me the longest to figure out.

Collapse
 
grantralls profile image
Grant Ralls

I second this!

Collapse
 
zooly profile image
Hugo Torzuoli

Interesting. However, I'm not sure to understand the presence of "junior" word in the title. Why a setup would change with the experience?

Collapse
 
iamrobert profile image
Robert Matyszewski

This is a checklist for junior dev. I was trying to be explain everything from scratch, therefore, it's for juniors ;) a mid-dev wouldn't need know the importance of git, right?

Collapse
 
zooly profile image
Hugo Torzuoli

That's true for the explanation of tools, but not for the "environment setup". Nevermind, just about words ;)

Thread Thread
 
iamrobert profile image
Robert Matyszewski

I get it - there are different ways to approach your setup. That's what I've tried myself.

Collapse
 
onrul profile image
Logan

I think it's misleading to say you can use these instructions on Windows. You'll be using 2/4 different tools, such as chocolatey instead of homebrew and CMDER or hyper instead of iTerm2.

Collapse
 
horus_sky profile image
Cedric W • Edited

According to the brew site, in 2.0 (brew.sh/2019/02/02/homebrew-2.0.0/)

Homebrew officially supports Linux and Windows 10 with Windows Subsystem for Linux (WSL).

Collapse
 
moopet profile image
Ben Sinclair

I'd suggest using something other than Sublime. You mention people have opinions, but everything else is you list is free, so why pick Sublime?

Collapse
 
iamrobert profile image
Robert Matyszewski

You're right! I love Sublime so I've picked it :) What do you suggest instead of Sublime?

Collapse
 
moopet profile image
Ben Sinclair

VSCodium is pretty good :)

Collapse
 
edisonpappi profile image
Edison Augusthy

Oh Vs-code not in the list ...?

Collapse
 
moopet profile image
Ben Sinclair

VS Code is mentioned in the article.

Collapse
 
ricoet22 profile image
Kamil Pawlak

Homebrew can also be run on Linux distros and Windows Subsystem for Linux via linuxbrew, which is essentially the same tool.