This concise cheatsheet will give you an overview on how to setup your development environment as a web developer. It was created for MacOS developers. However, you can substitute the instructions and tools for Windows and Linux as well. So don’t give up yet if you are not a MacOS user. After all, setting up your development environment all by yourself is your first challenge as a striving web developer these days. So let’s get started!
The following short checklist reflects my own development environment as being a developer who operates on MacOS. There are different philosophies to shape your development setup. Whereas there are people who prefer to have everything in one IDE, there are also people who use several lightweight tools (e.g. editor, command line) but combine them for their purposes. Personally, I follow the latter philosophy. That’s why you will find a bunch of lightweight tools in the following list. However, if you want to have a more thorough guide on how to setup your machine with a sophisticated IDE, head over to these guides. They are dedicated for a React setup, but you can simply leave out React.js from the equation and you have an up and running IDE after following one of these guides. Still, the list below might offer you a couple of useful tools to complement your IDE as well.
What if you are not sure which philosophy to follow? If you are just beginning with web development, I encourage you to start out with an IDE which would mean you should follow one of the guides from above. There you get everything out of the box and don’t need to worry about the tooling around your code. Once you become an intermediate developer, checkout the more lightweight approach below.
Table of Contents
If you are a MacOS user, you should use Homebrew to install every other tool on your machine with it. Homebrew is a package manager for MacOS. Rather than having to download every application from a website, Homebrew allows you to install and manage applications from the command line. It’s great tool to get used to the command line in the first place. You should feel comfortable on the command line as developer thus it makes sense to perform as much 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.
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
Afterward, Homebrew should be installed for you. It should be available 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. Afterward, you can install the desired tool with
brew install <tool> or upgrade it with
brew upgrade <tool>.
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 collaborate on projects with other people, to manage your own projects and to showcase your projects to the public as portfolio for hiring purposes. Git should have been installed along the way with the Homebew 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
Now you can setup a GitHub account to manage your projects (repositories) on GitHub. It will be your place to share, collaborate on and discuss about exciting projects. Therefore, follow the setup instructions from the GitHub and Git Essentials article. In addition, you may want to setup a SSH connection to GitHub. It allows you to connect to your remote repositories in a secure way. Therefore, follow the instructions on GitHub. Once you have an account on GitHub, you can make your first social connection on GitHub by following me there. I publish lots of educational projects to learn about web development which might be interesting for you.
Sublime as Editor
Sublime is my editor of choice when I get into coding. That’s the part where it becomes opinionated. You can use any editor or IDE of your choice. It’s up to you. Other popular code editors are Visual Studio Code, Atom and VIM.
Unfortunately, Sublime isn’t directly accessible via Homebrew. But we can use Cask to install it. Cask is a another package manager within Homebrew for GUI tools. For instance, Chrome could be installed on your machine with Cask as well. Since I mentioned Chrome here, I recommend you using Chrome for your web development purposes. It comes with powerful development tools. Otherwise, you can use Firefox as viable alternative as well. But enough talking here, let’s install Cask and Sublime by using Homebrew.
brew install caskroom/cask/brew-cask brew tap caskroom/versions brew cask install sublime-text
Again, you can verify on the command line whether the installation for Sublime was successful:
Another little trick can be used to make sublime open the current directory from the command line. In your command line type:
link: ln -s "/Applications/Sublime Text.app/Contents/SharedSupport/bin/subl" /usr/local/bin/sublime
Now you should be able to open any directory from the command line with
sublime . Sublime comes with powerful settings and amazing customizations. You can choose from a wide range of themes and packages to make your experience as a developer even more comfortable. Here a list of a couple of my installed packages for Sublime:
- Agila Theme
- All Autocomplete
- Color Highlighter
MacOS and other OS’s already come with their own command line (terminal) tools. Thus, another command line tool is optional, but you might want to install one anyway because of various benefits. Other command line tools often come with lots of advanced features and thus they will enrich your daily toolset. I suggest iTerm2 whereas Homebrew with Cask helps you to install it.
brew cask install iterm2
After a successful installation, you can open iTerm2 instead of the default terminal on your machine. You could install further stuff for iTerm2 like the solarized theme or Oh My Zsh as well. As mentioned, it comes with powerful integrations, beautiful themes and other useful utility tools. Since this article is only a checklist, you have to dive deeper into iTerm2 on your own.
Node and NPM
There exists an alternative to install and manage node: nvm. You should be able to install it via Homebrew as well. In addition, there exists a Windows version for nvm too. I highly recommend to use nvm, because you can install and manage multiple node versions with it. Furthermore, it helps you to install your node version as well.
Did the article help you? Share it with your friends on social media , support me on Patreon, become a React developer with my books
The Road to learn React
Build a Hacker News App along the way. No setup configuration. No tooling. No Redux. Plain React in 190+ pages of learning material. Learn React like 33.000+ readers.Get the Book