Setting up a Development Environment: A Guide for New Web Developers
Tags: webdev, beginners, programming, tutorial
Published: 2023-10-08 16:14:50

## Table of Contents 

- [Introduction](#introduction)

- [Choosing an Operating System](#choosing-an-operating-system)

- [Text Editors and IDEs] (#text-editors-and-ides)

- [Programming Languages](#programming-languages)

- [Version Control System](#version-control-system)

- [Package Managers](#package-managers)

- [Browser Developer Tools](#browser-developer-tools)

- [Testing Frameworks](#testing-frameworks)

- [Database Management System](#database-management-system)

## Introduction 

Setting up a developer environment refers to providing a computer system with all the tools, software, and settings required to write, test, and deploy code effectively. It's a digital workspace where developers can create, edit, and run software projects.

This list will go through the foundational elements of setting up a developer environment. Depending on your specific project, you might need additional tools and frameworks. 

## Choosing an Operating System


![Windows, macOS, and Linux Logos](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3fillxz42p4exhr3o6uc.png)

An operating system (OS) is the software that makes your electronic device function properly and helps run other programs. It manages your desktop, laptop, tablet, or mobile device. 

Some of the most popular operating systems, for web developers, include Microsoft Windows, macOS, and Linux. 

## Text Editors and IDEs



![Text Editor Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/19050lf671sr5kh393nf.jpg)


A text editor and an Integrated Developer Environment (IDE) are both software tools developers use. However, they serve different purposes and have different features.  

IDEs are more of a comprehensive package for software development. It typically includes a text editor, a debugger, version control, and more. IDEs are best for building a big project with lots of parts. Some common examples of IDEs include Visual Studio, Eclipse, and PyCharm. 

Text editors are versatile tools for writing code, creating documents, taking notes, and more. They don't have the same complexities that IDEs typically do. Text editors are best for building smaller, less complex projects. Some common examples of Text Editors include Visual Studio Code, Sublime Text, and Atom. 

Visual Studio is unique because it has the features of a text editor and an IDE. 

## Programming Languages


![Programming Languages](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nzctazyzq734nkrfqb5p.jpg)

Depending on the project you work on and its requirements, you will need to install the appropriate programming language and its associated packages and dependencies. For example, if you are working with JavaScript and its frameworks, such as React for front-end development, you would need to install Node.js as the runtime environment and use a package manager like npm to install necessary libraries like React, Redux, and other supporting modules. 

## Version Control System


![Git Logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mgrwausv94tv7z9hzec0.png)

Version Control Systems (VCS) are tools that allow you to track and manage changes to your code or files over time with commands. They also provide a way to collaborate on projects with other developers. Git is one of the most widely used version control systems. 

To perform git commands on your computer, you'll need to open a terminal or command-line interface (CLI). Each operating system comes with a built-in terminal. 

To learn more about git and the command line, [read the documentation on GitLab](https://docs.gitlab.com/ee/gitlab-basics/start-using-git.html). 

## Package Managers 



![npm logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dd2ygktr28bpwkogudem.png)

As briefly mentioned, these tools manage libraries, dependencies, and third-party packages needed for your projects. Examples include npm for JavaScript, pip for Python, and Maven for Java. 

## Browser Developer Tools 


![Chrome DevTools Logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6s6l18k74l4mzgfy7saq.jpg)

Browser developer tools are built-in features in web browsers that allow developers to inspect, debug, and optimize web applications. A popular example is Chrome DevTools.

You can access developer tools in your browser using two methods, depending on your operating system:

**Windows/Linux:**

1. Press `Ctrl + Shift + I` or `F12.`

2. Right-click on the page and select "Inspect" or "Inspect Element".

**Mac:**

1. Press `Cmd + Option + I` or `Cmd + Option + J.`

2. Right-click on the page and select "Inspect" or "Inspect Element".

This will open up a panel at the bottom or side of your browser window with various tabs for inspecting and modifying elements, monitoring network activity, debugging JavaScript, and more.

## Testing Frameworks 


![13 Types of Testing](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tyebmpu6785u1o40tsgw.png)

If you're developing applications, it's important to have testing frameworks in place to make sure your code is working as expected. Examples include Mocha for JavaScript, JUnit for Java, and Unittest for Python.  

In software engineering, there are various types of testing. While the type of testing may vary depending on the project's scope and complexity, testing is regarded as a fundamental best practice. 

## Database Management System 


![SQL Vs. NoSQL](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sxbzi2nqsjt7fiops6ln.jpg)


A Database Management System (DBMS) creates, organizes, retrieves, and manages data in a database. 

If your project involves databases, you need a Database Management System like MySQL, PostgreSQL, MongoDB, etc. 

There are two main types of databases: 

1. **Relational Databases:** Suited for handling structured data with a specific, predefined format like a table. An example of a relational database is PostgreSQL. 

2. **Non-Relational Database (NoSQL):** Suited for handling unstructured data like text documents, emails, and social media posts. An example of a NoSQL database is MongoDB.