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)"
To verify if the installation was successful type:
brew --version
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
To verify if the installation was successful type:
git --version
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
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
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
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.
Top comments (14)
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.
I second this!
Interesting. However, I'm not sure to understand the presence of "junior" word in the title. Why a setup would change with the experience?
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?
That's true for the explanation of tools, but not for the "environment setup". Nevermind, just about words ;)
I get it - there are different ways to approach your setup. That's what I've tried myself.
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.
According to the brew site, in 2.0 (brew.sh/2019/02/02/homebrew-2.0.0/)
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?
You're right! I love Sublime so I've picked it :) What do you suggest instead of Sublime?
VSCodium is pretty good :)
Oh Vs-code not in the list ...?
VS Code is mentioned in the article.
Homebrew can also be run on Linux distros and Windows Subsystem for Linux via linuxbrew, which is essentially the same tool.