MacOS

A question that comes to mind for every web development beginner: How to set up my web development environment as a web developer?

The following guide will teach you how to set up a minimal web development environment for MacOS.

Tip

• Setting up your development environment all by yourself is your first challenge as beginner.
• It’s challenging, with lots of searching on the internet involved, however it will force you to improve your core skills and grow as a developer.

Prerequisites

• Apple Silicon Device 🫠
• MacOs 11 or later
• A GitHub account

Homebrew

Homebrew calls itself The missing package manager for macOS and is an essential tool for any developer.

1. Installation script

   /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

2. The Homebrew installation script will ask you to enter your Mac user password. This is the password you used to sign into your Mac.

   Password:

   You won’t see the characters as you type. Press enter when you are done.

3. Option to install XCode Command Line Tools

   If you haven’t already installed XCode Command Line Tools, you’ll see a message that The XCode Command Line Tools will be installed.

   Press return to continue when prompted by the Homebrew installation script.

4. Add to the $PATH shell configuration

   Homebrew files are installed into the /opt/homebrew folder. But the folder is not part of the default $PATH.

   echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> /Users/ak/.zprofile
   eval "$(/opt/homebrew/bin/brew shellenv)"

   Be very careful to copy the commands exactly. It’s best to copy and paste.

5. Update everything in Homebrew to recent version:

   brew update
   brew outdated
   brew upgrade

Terminal

iTerm2 is an open source replacement for Apple’s Terminal. It’s highly customizable and comes with a lot of useful features.

Installation

Use Homebrew to download and install:

brew install --cask iterm2

Customization

Here are some suggested settings you can change or set, they are all optional.

• Set hot-key to open and close the terminal to command + option + i

• Go to profiles -> Default -> Terminal -> Check silence bell to disable the terminal session from making any sound

• Download one of iTerm2 color schemes and then set these to your default profile colors

• Change the cursor text and cursor color to yellow make it more visible

• Change the font to 14pt Source Code Pro Lite. Source Code Pro can be downloaded using Homebrew

  brew tap homebrew/cask-fonts && brew install --cask font-source-code-pro

Zsh

The Z shell (also known as zsh) is a Unix shell that is built on top of bash (the default shell for macOS) with additional features. It’s recommended to use zsh over bash. It’s also highly recommended to install a framework with zsh as it makes dealing with configuration, plugins and themes a lot nicer.

Installing Zsh

Install zsh using Homebrew:

brew install zsh

Now you should install a framework, we recommend to use OhMyZsh.

OhMyZsh

OhMyZsh is an open source, community-driven framework for managing your zsh configuration. It comes with a bunch of features out of the box and improves your terminal experience.

Installing OhMyZsh

Enter the following command into your terminal to install OhMyZsh:

sh -c "$(curl -fsSL https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"

The installation script should set zsh to your default shell, but if it doesn’t you can do it manually:

chsh -s $(which zsh)

Plugins

There are countless plugins available, but these two are recommend most.

zsh-autosuggestions

Autosuggestions for zsh, It suggests commands as you type based on history and completions.

1. Clone this repository into $ZSH_CUSTOM/plugins (by default ~/.oh-my-zsh/custom/plugins)

   git clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions

2. Add the plugin to the list of plugins for Oh My Zsh to load (inside ~/.zshrc):

   plugins=(git zsh-autosuggestions)

3. Start a new terminal session.

zsh-syntax-highlighting

This package provides syntax highlighting for the shell zsh. It enables the highlighting of commands whilst they are typed at a zsh prompt into an interactive terminal. This helps in reviewing commands before running them, particularly in catching syntax errors.

1. Clone this repository in oh-my-zsh’s plugins directory:

   git clone https://github.com/zsh-users/zsh-syntax-highlighting.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-syntax-highlighting

2. Activate the plugin in ~/.zshrc:

   plugins=(git zsh-autosuggestions zsh-syntax-highlighting)

3. Start a new terminal session.

   A huge list of plugins can be found at the awesome zsh plugins repo.

Git Config

Git should come pre-installed on mac, if not run:

brew install git

Name

To set up your Git config file, open a WSL command line and set your name with this command (replacing “Your Name” with your preferred username):

git config --global user.name "Your Name"

Email

Set your email with this command (replacing “[email protected]” with the email you prefer):

git config --global user.email "[email protected]"

Username

And finally, add your GitHub username to link it to git (case sensitive!):

git config --global user.username "GitHub username"

Make sure you are inputting user.username and not user.name otherwise, you will overwrite your name and you will not be correctly synced to your GitHub account.

You can double-check any of your settings by typing git config --global user.name and so on. To make any changes just type the necessary command again as in the examples above.

Node.js

Node.js is a JavaScript runtime environment that executes JavaScript code outside a web browser. It allows us to install packages, run local web servers, create APIs, and more.

NVM

You will likely need to switch between multiple versions of Node.js based on the needs of the different projects you’re working on. Node Version Manager allows you to quickly install and use different versions of Node via the command line.

Installing NVM

1. Open your terminal and install NVM with curl or wget:

   brew install nvm

   To verify installation, enter: command -v nvm. This should return ‘nvm’, if you receive ‘command not found’ or no response at all, close your current terminal, reopen it, and try again.

2. List which versions of Node are currently installed (should be none at this point):

   nvm ls

3. Install both the current and stable LTS versions of Node.js.

   Install the current stable LTS release of Node.js (recommended for production applications):

   nvm install --lts

   Install the current release of Node.js (for testing the latest Node.js features and improvements, but more likely to have issues):

   nvm install node

4. Verify that Node.js is installed and the current version:

   node --version

   Then verify that you have NPM installed as well:

   npm --version

Changing Node Versions

Use the following commands to change the version of Node you would like to use for any given project:

# switch to the current version
nvm use node

# switch to the LTS version:
nvm use --lts

# switch to the specific version:
nvm use v8.2.1

# to list all of the versions
nvm ls-remote.

Package Managers

JavaScript package managers play a pivotal role in web development. They are tools that automate installing, upgrading, configuring, and consistently removing computer programs. They are critical in managing the numerous packages developers use to build complex applications.

Three prominent package managers have gained popularity in the JavaScript community: NPM, Yarn, PNPM and Bun.

NPM

• As the name suggests, NPM (Node Package Manager) is a package manager for the JavaScript runtime environment Node.js.

• It comes bundled with Node.js, so when you install Node.js, you automatically get NPM installed on your computer.

YARN

• Yarn is a new package manager developed by Facebook in response to some of the problems they faced with NPM, particularly regarding speed, security, and reliability.

• Yarn introduced some new features unavailable in NPM, such as offline package installation and deterministic dependency resolution.

• Installation

  brew install yarn

PNPM

• PNPM, standing for Performant NPM, is a JavaScript package manager that aims to solve some of the issues associated with NPM and Yarn.

• It can be a drop-in replacement for these tools while providing better performance and disk space usage.

• PNPM uses a unique approach to manage node modules, which makes it highly disk efficient.

• Installation

  brew install pnpm

Bun

• Bun is an all-in-one JavaScript runtime & toolkit designed for speed, complete with a bundler, test runner, and Node.js-compatible package manager.

• It aims to provide a high-performance alternative to Node.js with better speed and resource efficiency.

• Bun’s package manager is significantly faster than npm, yarn, and pnpm while maintaining compatibility with the npm registry.

• Installation

  curl

  curl -fsSL https://bun.sh/install | bash

  homebrew

  brew install oven-sh/bun/bun

  npm

  npm install -g bun

Basic commands

1. Initialize a new project

   To create a new project, navigate to your project directory and run the following commands.

   bun

   bun init -y

   pnpm

   pnpm init -y

   npm

   npm init -y

   yarn

   yarn init -y

   This will create a package.json file with the default settings.

2. Install a package

   To install the required package, you can run the following commands.

   bun

   bun add <package-name>

   pnpm

   pnpm add <package-name>

   npm

   npm install <package-name>

   yarn

   yarn add <package-name>

   This will install and add the package to your package.json file under the dependencies section.

3. Install a development package

   To install a package for development purposes, run the following commands.

   bun

   bun add -D <package-name>

   pnpm

   pnpm add -D <package-name>

   npm

   npm install -D <package-name>

   yarn

   yarn add -D <package-name>

   This will install and add the package to your package.json file under the devDependencies section.

4. Run a script

   To run a script defined in your package.json file, run the following commands

   bun

   bun run <script-name>

   pnpm

   pnpm run <script-name>

   npm

   npm run <script-name>

   yarn

   yarn run <script-name>

   This will run the script defined in the scripts section of your package.json file.

Integrated Development Environment

• Essentially, there are two different philosophies that define your setup as a web developer.

• While there are developers who prefer to have all their tooling in one Integrated Development Environment (IDE), there are developers who prefer to use multiple lightweight tools (e.g. editor/IDE, standalone terminal) and combine them for their purposes.

• For beginners to web development, we recommend using one tool. The IDE (e.g. VS Code) combines everything that is needed for coding (editor) and executing the code (integrated terminal).

Installing VS Code

To install the latest version, use Homebrew:

brew install --cask visual-studio-code

MacOs integration

Launch VS Code from the command line.

After that, you can launch VS Code from your terminal:

• code . will open VS Code in the current directory
• code myfile.txt will open myfile.txt in VS Code

Useful Extensions

The number of extensions available for VS Code can be overwhelming, here are some of the ones I use the most.

• Live Server - Launch a local development server with a live reload feature for static & dynamic pages.

• Prettier - Prettier is an opinionated code formatter.

• ESLint - Find and fix problems in your code

• HTML CSS Support - CSS Intellisense for HTML

• Auto Rename Tag - Auto rename paired HTML/XML tag

• CSS Pick - Allow peeking to css ID and class strings as definitions from html files to respective CSS.

• Babel JavaScript - VSCode syntax highlighting for today’s JavaScript

• JavaScript (ES6) code snippets - Code snippets for JavaScript in ES6 syntax.

• ES7+ React/Redux/React-Native snippets - Extensions for React, React-Native and Redux in JS/TS with ES7+ syntax.

• Tailwind CSS IntelliSense - Intelligent Tailwind CSS tooling for VS Code

• Error Lens - Improve highlighting of errors, warnings and other language diagnostics.

• indent-rainbow - Makes indentation easier to read.

• MDX - Language support for MDX

• Prisma - Adds syntax highlighting, formatting, auto-completion, jump-to-definition and linting for .prisma files.

• vscode-icons - Icons for Visual Studio Code

• Fluent Icons - Fluent product icons for Visual Studio Code

• Material Theme Icons - Material Theme Icons, the most epic icons theme for Visual Studio Code and Material Theme.

Chrome Extensions

These are all available as Firefox extensions as well.

• React Dev tools - Adds React debugging tools to the Chrome Developer Tools.

• ColorZilla - Advanced Eyedropper, Color Picker, Gradient Generator, and other colorful goodies

• Axe Accessibility - Accessibility Checker for Developers, Testers, and Designers in Chrome.

• Nimbus Capture - Screen Capture full Web page or any part.

• WhatFont - With this extension, you could inspect web fonts by just hovering on them.

• JSON Formatter - Makes JSON easy to read.

References

Git a Grip Series' Articles dev.to

View Git a Grip Series' Articles on DEV Community

Introduction · macOS Setup Guide sourabhbajaj.com

GitHub - git-ecosystem/git-credential-manager: Secure, cross-platform Git credential storage with authentication to GitHub, Azure Repos, and other popular Git hosting services. github.com

Secure, cross-platform Git credential storage with authentication to GitHub, Azure Repos, and other popular Git hosting services. - git-ecosystem/git-credential-manager

How to Set up an Apple Mac for Software Development stuartellis.name

Setting up an Apple Mac for development and systems administration

Start your journey with ChaiCode

All of our courses are available on chaicode.com. Feel free to check them out.