Macbook Pro Web Developer Setup

While you can build basic websites with nothing more than a text editor and browser, you may want to up your game by adding a JavaScript framework like React or Vue and useful tools like Git to your workflow.

• Macbook Pro Web Developer Setup Software
• Set Up New Macbook Pro
• Macbook Pro Web Developer Setup Windows 10
• Macbook Pro Initial Setup

Once you're past the initial setup, click on the Apple menu in the upper left of your Mac's screen and then click on App Store. The Mac App Store will launch, and you'll want to click on the. The new tab model lets you open a new tab with a double-click, or track the selected file as you click around the navigator. You can re-arrange the document tabs to create a working set of files for your current task, and configure how content is shown within each tab.

1. What do you use your Apple gear for? I'm a software engineer so I use my MacBook Pro for web, game, and mobile development. I love the way Macs empower developers to build software that makes people lives easier and more enjoyable. What hardware does your current Mac / Apple setup consist of? 13″ Retina MacBook Pro (Late 2013 model).
2. This version of the tutorial works with macOS Catalina (10.15), and versions going back to Mavericks (10.9) and uses Homebrew as a package manager. I streamlined this tutorial in August 2014 to make it even easier to set up your development environment. I've archived the original version.
3. I am always curious to see how other software developers are setting up their development machines so I figured it would be a good opportunity to share mine. I am a Software Developer so most of my configuration will be around programming. My current MacBook configuration is as follows: MacBook Pro (13-inch, 2017, Two Thunderbolt 3 ports).

But wait! Your Mac isn't ready. Before diving in, you'll need to install a few items to that will save you from confusing errors later. 😩

This article will guide you through the minimum setup you'll need to get up and running with JavaScript-based web development on your Mac.

Let's go!

Update Your Mac

Before installing any new software, follow these instructions from Apple to upgrade macOS and your current software to the latest version.

Choose a Terminal App

Since you'll be interacting with your Mac using the command line in this article, you'll need a terminal app.

Any of the following are good options:

• Visual Studio Code's integrated terminal
• Terminal (the default app that comes with your Mac)

If you aren't sure which one to pick, choose Hyper.

Command Line Developer Tools

The first thing you'll need to install from the command line are your Mac's command line developer tools. Installing these now will prevent weird errors later.

To check if the tools are already installed, type the following command in your terminal app and hit return:

If the result is not a version number, install the tools with this command:

A dialog will appear asking if you'd like to install the tools. Click Install and the package will download and install itself.

When the installation finishes, confirm the tools are now installed by rerunning the first command:

The result should now be a version number.

Homebrew

Instead of installing the next few tools by going to each tool's website, finding the download page, clicking the download link, unzipping the files, and manually running the installer, we're going to use Homebrew.

Homebrew is a tool that lets you install, update and uninstall software on your Mac from the command line. This is faster and safer than the manual approach and generally makes your development life easier.

First, check if Homebrew is already installed:

If you don't see a version number, install Homebrew with this command:

I promise that's the weirdest command you'll see in this article! 😅 Thanks to Homebrew, the rest are simple.

Before moving on, confirm Homebrew is now installed:

Node and npm

Node.js is a tool that allows your Mac to run JavaScript code outside of a web browser. If you want to run a JavaScript framework like React or Vue on your Mac, you'll need to have Node installed.

Node also includes npm (the Node Package Manager), which gives you access to a giant library of free code you can download and use in your projects.

First, check if Node is already installed:

If not, install it with Homebrew:

Finally, confirm Node and npm are now installed:

Git

Git is a tool that helps you track changes to your code and work with other developers on shared projects.

Using Git on all every project is a great habit to develop and will prepare you for future projects where Git may be required. Open soft software. Some tools (like GatsbyJS) also depend on Git being installed on your Mac, so you'll need it even if you don't plan to add it to your workflow.

Once again, start by checking if Git is already installed:

If not, install it:

And confirm the installation worked:

Update Everything

Once in a while, run the following command and everything you've installed with Homebrew will update automatically:

That one command is all you need to keep your system up to date. 🙌 I usually run it when I start a new project, but feel free to do so whenever you like.

(When you run this command, if Homebrew suggests additional commands for you to run, go ahead and run them. If a command begins with sudo and you are prompted for a password, use your Mac's admin password.)

That's it for the command line!

Code Editor

While you can write code in any text editor, using one that highlights and validates your code will make your life much easier.

Any of the following are good options:

If you're just getting started, choose Visual Studio Code.

Browser

As you code, it helps to view the app or website you're building in a browser to confirm it works. While you can use any browser for this, some include extra developer tools that show you details about your code and how to improve it.

Either of the following are good options:

If you're just getting started, choose Chrome.

Finder

A quick tip here: you'll want to show the files your Mac hides by default. (For example, git files are automatically hidden, but sometimes you'll want to edit them.)

The easiest way to show your Mac's hidden files is with the keyboard shortcut ⌘⇧. (command + shift + period). This will alternate between showing and hiding these files so you can access them when you need them.

Conclusion

You're all set! 🎉

That's all you need to get up and running with JavaScript-based front-end development on your Mac.

To prevent confusion, I left out any items that aren't strictly required. If you'd like to dive deeper into optional ways you can further customize your Mac for web development, check out the links below.

Further Reading

• Setting up a Brand New Mac for Development by Tania Rascia
• Setting up a MacBook for Front-End Development by Ben Honeywill
• Leaving Homestead: Finding the Best All-Around Local Development Environment by WebDevStudios (in case you need a PHP setup as well)

I have to set up a MacBook Pro fairly often - when starting a new job and when buying a new personal computer. I created this article back in 2015 when I got my first Mac and have been updating it ever since with whatever I need as my job evolves. I'm primarily a full-stack web developer, so most of my needs will revolve around JavaScript/Node.js.

Getting Started

The setup assistant will launch once you turn the computer on. Enter your language, time zone, Apple ID, and so on. The first thing you should do is update macOS to get the latest security updates and patches.

Homebrew

Install the Homebrew package manager. This will allow you to install almost any app from the command line.

Make sure everything is up to date.

Install Apps

Here are some the programs I always install.

Don't install Node.js through Homebrew. Use nvm (below).

Shell

Macbook Pro Web Developer Setup Software

Catalina comes with zsh as the default shell. Install Oh My Zsh for sensible defaults.

Node.js

Use Node Version Manager (nvm) to install Node.js. This allows you to easily switch between Node versions, which is essential.

Install

Install the latest version.

Restart terminal and run the final command.

Confirm that you are using the latest version of Node and npm.

Update

For later, here's how to update nvm.

Change version

Apple lion 10 7 download. Here's how to switch to another version and use it.

And to set the default:

Git

The first thing you should do with Git is set your global configuration.

Input your config and create some aliases.

With the above aliases, I can run git s instead of git status, for example. The less I have to type, the happier I am.

SSH

Simplify the process of SSHing into other boxes. Create an SSH config file.

Add the following contents, changing the variables for any hosts that you connect to. Using the below will be the same as running ssh -i ~/.ssh/key.pem user@example.com.

Now just run the alias to connect.

Generate SSH key

You can generate an SSH key to distribute.

Add key.

Settings

I don't like a lot of the Apple defaults so here are the things I always change.

To get the Home folder in the finder, press CMD + SHIFT + H and drag the home folder to the sidebar.

General

• Set Dark mode
• Make Google Chrome default browser

Set Up New Macbook Pro

Dock

• Automatically hide and show Dock
• Show indicators for open applications

Keyboard

• Key Repeat -> Fast
• Delay Until Repeat -> Short
• Disable 'Correct spelling automatically'
• Disable 'Capitalize words automatically'
• Disable 'Add period with double-space'
• Disable 'Use smart quotes and dashes'

Security and Privacy

• Allow apps downloaded from App Store and identified developers
• Turn FileVault On (makes sure SSD is securely encrypted)
• Turn Firewall On (extra security measure)

Sharing

• Change computer name
• Make sure all file sharing is disabled

Users & Groups

• Add 'Rectangle' to Login items

Macbook Pro Web Developer Setup Windows 10

Defaults

A few more commands to change some defaults.

Application Settings

Chrome

• Turn off 'Warn before quitting'
• Install uBlock Origin
• Install React DevTools
• Install Redux DevTools
• Install JSONView
• Install DevTools Theme - New Moon

• Settings

  • Set theme to 'Dark'
  • Go to chrome://flags and set Developer Tools Experiments to 'Enabled'
  • Go to Experiments and select 'Allow custom UI themes'

Macbook Pro Initial Setup

Visual Studio Code

• Press CMD + SHIFT + P and click 'Install code command in PATH'.
• Install Prettier
• Install New Moon Theme
• Install GitLens
• Install Highlight Matching Tag

• Does the apple magic keyboard work with windows. Keyboard Shortcuts

  • Copy Line Down - CMD + SHIFT + E
  • Delete Line - CMD + SHIFT + D
  • Reload Window - Remove Development Mode from When
  • Format Document - CMD + SHIFT + L

Rectangle

• Full Screen: CMD + SHIFT + ' (prevents messing with other commands)
• Left Half: CMD + OPTION + LEFT
• Right Half: CMD + OPTION + RIGHT

iTerm2

• Set tab to open in same location

Conclusion

That sums it up for my current preferences on setting up a MacBook Pro. I hope it helped speed up your process or gave you ideas for the next time you're setting one up.