Setting Up a Modern Development Environment on macOS

If you're developing web applications on macOS, you'll need a solid set of tools to manage packages, runtime environments, and frameworks efficiently. In this guide, we'll cover how to install:

Homebrew (macOS package manager)
NVM (Node Version Manager)
NPM (Node Package Manager)
Next.js (React-based web framework)

Step 1: Installing Homebrew

What is Homebrew?

Homebrew is a package manager for macOS that makes it easy to install and manage software packages. It simplifies the process of installing development tools and ensures your environment stays up to date.

How to Install Homebrew

Open Terminal (Cmd + Space, type Terminal, and press Enter).

Run the following command to install Homebrew:

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

Once installed, verify the installation by running:
```
brew --version
```
This should display the installed version of Homebrew.

Step 2: Installing NVM (Node Version Manager)

What is NVM?

NVM (Node Version Manager) is a tool that allows you to manage multiple versions of Node.js on your machine. This is especially useful when working on different projects that require different Node.js versions.

How to Install NVM

Install NVM using Homebrew:
```
brew install nvm
```
Create a directory for NVM:
```
mkdir ~/.nvm
```

Add NVM to your shell configuration. If you're using zsh (default shell on macOS Catalina and later), run:

echo 'export NVM_DIR="$HOME/.nvm"' >> ~/.zshrc
echo '[ -s "/opt/homebrew/opt/nvm/nvm.sh" ] && \. "/opt/homebrew/opt/nvm/nvm.sh"' >> ~/.zshrc
echo '[ -s "/opt/homebrew/opt/nvm/etc/bash_completion" ] && \. "/opt/homebrew/opt/nvm/etc/bash_completion"' >> ~/.zshrc
source ~/.zshrc

If you're using bash, replace ~/.zshrc with ~/.bashrc.

Verify the installation by running:
```
nvm --version
```

Step 3: Installing Node.js and NPM

What is NPM?

NPM (Node Package Manager) is a package manager for JavaScript that allows developers to install libraries, tools, and frameworks needed for their projects.

Installing Node.js (which includes NPM)

Install the latest stable version of Node.js using NVM:
```
nvm install --lts
```
Set it as the default version:
```
nvm use --lts
```

Verify the installation:

node -v  # Displays Node.js version
npm -v   # Displays NPM version

Step 4: Installing Next.js

What is Next.js?

Next.js is a powerful React-based framework for building modern web applications. It enables server-side rendering, static site generation, and API routes, making it an ideal choice for performance-oriented web development.

What is React?

React is a JavaScript library for building user interfaces. It enables developers to create reusable UI components and efficiently update the DOM.

Installing Next.js

Create a new Next.js project by running:
```
npx create-next-app@latest my-next-app
```
Navigate into your project folder:
```
cd my-next-app
```
Start the development server:
```
npm run dev
```
Open http://localhost:3000 in your browser to see your Next.js app running.

Conclusion

By following these steps, you’ve set up a robust web development environment on macOS. You can now build modern web applications using Next.js and React with an easily manageable Node.js environment.

For further learning:

May 20, 2023

Solving Module Duplication Issues in Next.js with a React Submodule

Aug 14, 2021

Custom Maintenance Page with Gatsby

Article Comments

Let’s Chat.

Are you ready to start your project? Maybe you have some questions? We’re here, let’s chat.

(509) 818-3311

hello@jlte.ch

JLTech, LLC. is a marketing agency based in Post Falls, ID, providing marketing, media, IT and aerial services. It's our goal to help businesses grow through intelligent marketing and quality content.