Blog PostEssential Setup as a Front-End Developer: Step-by-Step

Welcome to Our PC's Essential Setup Guide

At Mediaweb, we understand the importance of a streamlined and effective workstation setup. This guide is curated from our collective experience and is designed to equip our new recruits and interns with the essential tools needed for success in our front-end development team.

While we focus on the core software and setups that we use and recommend at Mediaweb, we also provide a brief look at alternative options, giving you the flexibility to adapt as needed. This step-by-step guide aims to simplify your setup process, ensuring you're ready to contribute to our projects with efficiency and confidence.

Step by Step

In this section, we'll showcase the fundamental tools required for us as a front-end developer. We will cover essential browsers, development environments (IDEs), Git and Git GUI tools, and key platforms such as OutSystems. Additionally, we'll guide you through setting up Node.js, npm, and nvm to manage your JavaScript and Node projects effectively.

Disclaimer: This guide does not cover every step in detail, as installation processes can vary depending on your operating system. For most applications that involve installers, simply follow the standard installation procedure provided by the software. We will provide detailed command-line instructions only where necessary.

Choosing a Browser

Selecting the right browser is a critical first step for any front-end developer. While there's an ongoing debate about the best browser, as a front-end developer, your primary goal is to ensure that your code functions across a broad spectrum of modern browsers — apologies to Internet Explorer users! 😅 Ideally, you should test your products on several browsers to guarantee optimal cross-browser compatibility.

Here are some browsers you might consider:

Google Chrome: Widely used, supports a vast array of extensions.

Mozilla Firefox: Known for robust privacy settings and developer tools.

Microsoft Edge: Benefits from its Chromium base, offering high compatibility.

Opera: Integrates unique features like a built-in VPN and ad blocker.

Safari: Best for optimizing performance on Apple devices.

Brave: A Chromium-based browser that prioritizes privacy with built-in ad-blocking and anti-tracking. However, it lacks some features such as profile management and full device synchronization.

Vivaldi: Highly customizable and offers unique user interface adjustments, though it is less mainstream.

At Mediaweb, we recommend Google Chrome for its extensive features, comprehensive extension support, and seamless integration with Google services. Additionally, as browsers like Edge and Brave are based on the Chromium engine, we prefer to utilize the most feature-rich option available.

Choosing an IDE (Integrated Development Environment)

When working with low-code platforms, selecting the right IDE is crucial. An IDE will link your project to a Git repository, where the SCSS and/or JS code of your projects will be stored. This setup is vital for enabling effective version control, helping you manage changes and recover from errors efficiently.

Examples of IDE’s you can choose from:

Visual Studio Code: Highly popular for its extensive plugin ecosystem and strong community support.

Atom: Known for its customizability and user-friendly interface.

Sublime Text: Praised for its speed and efficiency in handling large files.

JetBrains Fleet: Offers a robust set of features for professional development.

For our needs, we generally prefer lightweight and free IDEs. We recommend Visual Studio Code for this step due to its versatility and comprehensive support.

Installing OutSystems or Mendix Development Environments

As you set up your new PC, the specific team you are joining at Mediaweb will determine whether you need to install OutSystems Service Studio or Mendix Studio Pro. Both platforms are leaders in the low-code market, enabling rapid application development with efficient setup processes.

• OutSystems Service Studio: Download OutSystems Service Studio here. After downloading, run the installer and follow the on-screen instructions to complete the setup.

• Mendix Studio Pro: Mendix can be downloaded here. The installation process is similar to that of OutSystems, designed to be straightforward and user-friendly.

Note: For team members working with React, particularly on Windows, Docker is crucial for creating consistent development environments across different systems by leveraging the Windows Subsystem for Linux (WSL). However, the setup process for Docker and WSL is not covered in this guide due to the complexity and variability of the setup.

Installing Git

Git is a version control system that is indispensable in modern software development. It allows developers to track and manage changes to source code, coordinate work among team members, and maintain a history of all changes. By using Git, you can ensure that iterations are documented and conflicts between changes are efficiently resolved. At Mediaweb, we utilize our internal Git server to house all our projects, providing a centralized "source of truth" for our codebase. This is essential not only for complex software projects but also for simpler tasks such as tracking changes in CSS.

To start using Git for version control:

1. Download the Git installer: You can download it here.
2. Install Git: After the download is complete, run the setup file and follow the on-screen instructions.

This installation enables you to use Git from the command line, Git Bash, or through context menu options if installed.

Installing a Git GUI (Graphical User Interface)

While the Git Command Line Interface (CLI) is powerful, many users prefer using a Git GUI for its visual simplicity and ease of use. A GUI can simplify many common Git operations and enhance your workflow. At Mediaweb, SourceTree is widely used, but we recognize that different developers may prefer different tools.

Recommended Git GUIs:

SourceTree: Popular for its robust interface and comprehensive integration capabilities.

GitHub Desktop: Ideal for those deeply embedded in the GitHub ecosystem.

Git Kraken: Known for its visually appealing interface and powerful features.

Tortoise Git: Integrates directly into the Windows shell, making it particularly user-friendly for Windows users.

SmartGit: A versatile tool that caters to both beginners and advanced users across various platforms.

GitForce: Appeals to those who prefer a simpler, more streamlined interface.

Git Cola: Lightweight and straightforward, suitable for those who need basic functionality.

If you're new to Git GUIs and unsure which one to choose, we recommend starting with SourceTree, the tool most commonly used at Mediaweb. This choice ensures that you can easily receive support from your team if needed.

For more detailed instructions on how to install Git and SourceTree, as well as other Git GUIs, refer to our in-depth installation guide here (currently, accessible only to users within our internal Google Drive knowledge base).

Installing Node.js

Node.js is a powerful JavaScript runtime that enables developers to run JavaScript on the server side, supporting the development of scalable and fast network applications. It is essential for working with various tools and frameworks in modern web development. At Mediaweb, Node.js plays a crucial role in running SCSS projects and managing dependencies necessary for compiling our code stored in Git repositories.

Compatibility Note

Unfortunately, some of our dependencies are compatible only with Node.js 16.20, despite more recent versions being available. To ensure compatibility with our specific software stacks, it is important to install this specific version of Node.js.

Step-by-Step Installation:

1. Download Node.js 16.20
1. Choose the appropriate version for your operating system here.
2. Install Node.js
1. Once downloaded, run the installer.
2. Follow the on-screen prompts to complete the installation, making sure Node.js is added to your system's PATH to allow command line access.
3. Verify Installation
1. To confirm that Node.js is installed correctly, open your command prompt or terminal:
1. Windows: Press the Windows key, type 'cmd' and execute as an administrator.
2. MacOS: Press Command + Space to open the spotlight search, type terminal and select it.
3. Linux: Press Control + Alt + T.
2. In the terminal, run the command 'node -v' This should display the installed version of Node.js, which should be 16.20 if the installation was successful.

Checking npm and npx Versions

After confirming the Node.js installation, it's also important to verify that npm (Node Package Manager) and npx (an npm package runner) are installed correctly, as these tools are bundled with Node.js.

• In your terminal, run 'npm -v' and 'npx -v'. You should see the versions of each displayed, confirming their installation.

Installing NVM (Node Version Manager)

As just referred, at Mediaweb, we encounter scenarios where legacy dependencies in our main projects require an older version of Node.js, while our Mendix and React teams need more updated versions.

To manage these differing requirements efficiently, we use Node Version Manager (NVM). NVM is a tool that allows you to manage multiple installations of Node.js, enabling you to switch between Node.js versions as needed for various projects.

Installation Process:

• Download NVM Installation Wizard
• You can download the NVM installation wizard here. This wizard will guide you through the setup process, which can be done via the Terminal on MacOS and Linux or CMD on Windows.

• Install NVM
• Follow the instructions provided by the installation wizard to install NVM.

• Verify NVM Installation
• To ensure NVM is installed correctly, open your command prompt or terminal and run the following command:

nvm -v

• If NVM is installed correctly, you will see the version number of NVM displayed.

Using NVM:

Since NVM might be a less familiar tool for new developers, it’s valuable to know a few quick commands that can significantly enhance your workflow when managing multiple Node.js versions. NVM allows you to install, switch between, and manage multiple versions of Node.js easily, which is crucial for projects with specific version requirements.

• Install the Latest LTS Version of Node.js:

nvm install --lts

• To make a specific version your default, use:

nvm alias default <version>

• To see all installed Node.js versions, use:

nvm ls

• To switch to a specific installed version, run:

nvm use <version>

• To remove a specific version of Node.js, use:

nvm uninstall <version>

• To update NVM to the latest version, run:

nvm upgrade

Final Notes

Throughout this guide, we've outlined a variety of tools essential for front-end development at Mediaweb. While the selection of specific tools often comes down to personal preference and project requirements, we've highlighted our top recommendations based on their robust performance, extensive community support, and compatibility with our workflows.

As previously mentioned, our current selection of preferred tools includes Google Chrome, Visual Studio Code, and SourceTree. This preference is based on our collective experience as a team, and the substantial community endorsement these tools receive.

EDIT: Following some feedback, the idea emerged to create a more detailed comparison, including pros and cons of each tool mentioned. We have since developed this resource to aid in your decision-making process. You can access it here.

We Want to Hear from You

What do you think about our recommended Essential Setup for a Front-end Developer? Do you agree with our choices? We invite you to share your experiences and suggestions for this guide. Your feedback is crucial in helping us improve and update this document, ensuring it remains a valuable resource for all new Mediaweb team members.