Before starting the setup, check that your hardware and operating system is compatible:

Minimum RAM: 8GB

Make sure that your machine has at least 8GB RAM

Minimum OS Version: 2nd-newest macOS version

Make sure that you're running the 2nd-newest macOS version or the newest version - earlier versions are not supported

Click on the magnifying glass at the very top right of your screen to open the Spotlight search, enter "terminal.app" and hit return:

This will launch the macOS terminal.
Copy the following text, paste it in the terminal and hit return.
```
xcode-select --install
```
It will pop up a prompt similar to the screenshot below. Click "Install":

This will install the Xcode Command Line Tools, tools that enable installation of other software.
Copy the following text, paste it in the terminal and hit return.
```
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
```
This will install Homebrew, a package manager which will allow us to install and uninstall programs from the terminal.
When the installer asks for it, enter your password you use to log in to your Mac

‼️ Note: while typing your password, you will not see the letters being entered. This is normal:

Also press return when asked to:
The installer will take a bit of time and then show a message that "Installation successful!", signaling that it is done:

Read the messages underneath the "Installation successful!" message and look for a heading that says "Next steps". If there is a bullet point with the text "Add Homebrew to your PATH...", then there are be some additional commands that you need to copy and run (copy each line, paste it in the terminal and hit return):
Copy each line in the following text, paste it in the terminal and hit return.
```
brew install flyctl git less node@20 python
brew link --overwrite node@20
```
This uses Homebrew to install flyctl, Git, Less, Node.js and Python.

Copy each line in the following text, paste it in the terminal and hit return.

corepack enable
corepack prepare pnpm@latest --activate
pnpm setup
source ~/`[[ $SHELL == *"zsh" ]] && echo '.zshrc' || echo '.bash_profile'`

This uses Corepack to install pnpm, and configures pnpm's global bin directory.

Install @upleveled/preflight, a program we will use in the course, to verify that the previous commands were successful: copy the following text, paste it in the terminal and hit return.

pnpm add --global @upleveled/preflight

Verify that your output looks similar to the "Successful" output below. You can ignore any differences in version numbers and package names - the important part is "Done in ..." on the last line.

If your output looks very different (either like the "Failing" output below or like some other different output), repeat the pnpm installation commands at the start of this step.

Successful

Failing (ERR_PNPM_NO_GLOBAL_BIN_DIR)

 WARN  6 deprecated subdependencies found:
@oclif/screen@3.0.8, glob@6.0.4, glob@7.1.6,
osenv@0.1.5, rimraf@2.4.5, rimraf@3.0.2
Packages: +21 -32
+++++++++++++++++--------------------------
Progress: resolved 773, reused 772,
downloaded 1, added 21, done

/Users/k/Library/pnpm/global/5:
+ @upleveled/preflight 7.0.8

Done in 3.3s

ERR_PNPM_NO_GLOBAL_BIN_DIR  Unable to find the
global bin directory

Run "pnpm setup" to create it automatically,
or set the global-bin-dir setting, or the
PNPM_HOME env variable. The global bin
directory should be in the PATH.

Copy each line in the following text, paste it in the terminal and hit return.
```
brew install --cask visual-studio-code httpie git-credential-manager
```
This uses Homebrew Cask to install Visual Studio Code, HTTPie and Git Credential Manager.

If you don't have Zoom installed yet, run this to install it:
```
brew install --cask zoom
```
If you don't have Slack installed yet, run this to install it:
```
brew install --cask slack
```

Copy each line in the following text, paste it in the terminal and hit return.

code --install-extension bradlc.vscode-tailwindcss
code --install-extension Cardinal90.multi-cursor-case-preserve
code --install-extension dbaeumer.vscode-eslint
code --install-extension dozerg.tsimportsorter
code --install-extension esbenp.prettier-vscode
code --install-extension frigus02.vscode-sql-tagged-template-literals-syntax-only
code --install-extension kumar-harsh.graphql-for-vscode
code --install-extension mattpocock.ts-error-translator
code --install-extension meganrogge.template-string-converter
code --install-extension styled-components.vscode-styled-components
code --install-extension stylelint.vscode-stylelint
code --install-extension sysoev.vscode-open-in-github
code --install-extension unional.vscode-sort-package-json
code --install-extension viijay-kr.react-ts-css
code --install-extension vitaliymaz.vscode-svg-previewer
code --install-extension vunguyentuan.vscode-css-variables
code --install-extension wix.glean

This installs some VS Code extensions we will need.

We recommend installing and using Chrome so that you have the same DevTools as others.

If you don't have Chrome installed yet, you can install it with Homebrew. To do this, copy the following text, paste it in the terminal and hit return.
```
brew install --cask google-chrome
```
This uses Homebrew to install Chrome.
Install the following Chrome Extensions:
- React Developer tools Chrome Extension
- Refined GitHub Chrome Extension
- Socket Security Chrome Extension
- Web Vitals Chrome Extension)

Next we will configure VS Code.

Open VS Code and then press the keys cmd-shift-P. Type in "Settings" and select the item that says Preferences: Open User Settings (JSON):

Once the settings file is open, we will want to add the settings below.

First of all, identify whether your settings file is empty or not. This is what an empty file looks like:

If your file is not empty (if there is more text within the curly brackets), then we will need to do something extra - add a comma on the second to last line:

Now in both cases you will want to paste the following settings before the closing curly bracket (before the }):

"editor.wordWrap": "on",
"editor.minimap.enabled": false,
"editor.linkedEditing": true,
"editor.tabSize": 2,
"workbench.editor.tabSizing": "shrink",
"workbench.editor.closeEmptyGroups": false,
"workbench.tree.enableStickyScroll": true,
"terminal.integrated.stickyScroll.enabled": true,
"files.insertFinalNewline": true,
"files.trimFinalNewlines": true,
"files.trimTrailingWhitespace": true,
"[markdown]": {
  "files.trimTrailingWhitespace": false
},
"files.autoSave": "onFocusChange",
"editor.formatOnSave": true,
"editor.codeActionsOnSave": [
  // Sort package.json keys with https://marketplace.visualstudio.com/items?itemName=unional.vscode-sort-package-json
  "source.sortPackageJson"
],
"tsImportSorter.configuration.groupRules": ["^node:", {}, "^[.]"],
"tsImportSorter.configuration.keepUnused": [".*"],
"tsImportSorter.configuration.emptyLinesBetweenGroups": 0,
"tsImportSorter.configuration.wrappingStyle": "prettier",
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[html]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascriptreact]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescriptreact]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[jsonc]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"prettier.singleQuote": true,
"prettier.trailingComma": "all",
"prettier.documentSelectors": [
  // Enable prettier-vscode to format *.sql files (eg. with prettier-plugin.sql)
  // https://github.com/prettier/prettier-vscode/issues/3248#issuecomment-1956209714
  "**/*.sql"
],
"eslint.runtime": "node",
"totalTypeScript.hideAllTips": true,

After you have pasted the settings, save the file with File -> Save in the top menu.

If you had any previous settings beforehand, you may notice that some text above will be underlined by a squiggly yellow line. This is a warning because we pasted some duplicate properties from the code above.

If you have any of these warnings, we should fix them. For each one of these lines with the warnings on them, delete the full line, including the comma at the end. We usually like to select from the start of the first " to just before the next " on the next line:

If you made any further changes to the file, save the file again with File -> Save in the top menu.

We will now install PostgreSQL. Copy each line in the following text, paste it in the terminal and hit return.
```
brew install postgresql@16
brew link postgresql@16
```
This uses Homebrew to install PostgreSQL and create just a single user with your username and all role permissions. There will be no postgres user set up.

Now let's set an environment variable to tell PostgreSQL where to put the data:
```
[[ -d /opt/homebrew/var/postgresql@16 ]] && PGDATA_TMP=/opt/homebrew/var/postgresql@16 || PGDATA_TMP=/usr/local/var/postgresql@16
echo -e "\nexport PGDATA=$PGDATA_TMP" >> ~/`[[ $SHELL == *"zsh" ]] && echo '.zshrc' || echo '.bash_profile'`
echo "export PSQL_PAGER=\"less --chop-long-lines --header 1\"" >> ~/`[[ $SHELL == *"zsh" ]] && echo '.zshrc' || echo '.bash_profile'`
echo "export LANG=en_US.UTF-8" >> ~/`[[ $SHELL == *"zsh" ]] && echo '.zshrc' || echo '.bash_profile'`
source ~/`[[ $SHELL == *"zsh" ]] && echo '.zshrc' || echo '.bash_profile'`
perl -i -pe "s/^[#\s]*(timezone|log_timezone)\s*=.+$/\1 = 'UTC'/" "$PGDATA/postgresql.conf"
```
We can now test whether PostgreSQL has been correctly installed by starting the database. To do this, we can run the following command:
```
postgres
```
If it worked, it should print out some messages and end with the rectangular cursor on the left side of the screen:

You will need to run this every time you want to use your database.

When you want to stop PostgreSQL again, just stop it like any other command line program using the shortcut control-C.

Now we will connect to PostgreSQL using a tool called psql and add a new table, to make sure everything is working with the connection.

Open a new tab in the terminal using command-T and run the following command:
```
psql postgres
```
It should look like this:

If your screen looks like the above screenshot, type in or copy and paste the following query (this is a language called SQL):
```
CREATE TABLE users(
  id serial PRIMARY KEY,
  first_name VARCHAR (100) NOT NULL,
  last_name VARCHAR (100) NOT NULL
);
```
It should print CREATE TABLE on the line after running the query. Your screen should look like this:

Now let's check that the table has been created. Run this query:
```
\dt
```
This will show the tables that you have, including the newly-created users table. Your screen should look like this:

Finally, let's delete the table again to clean up. Run this query:
```
DROP TABLE users;
```
It should print DROP TABLE on the line after running the query. Your screen should look like this:

Great, PostgreSQL is set up! 🚀 Now you can exit from psql again by writing exit and hitting return:
```
exit
```
It should exit and send you back to the command line. Your screen should look similar to this (the last line will not be exactly the same):

Now close the new terminal tab with command-W, and stop PostgreSQL again using control-C. PostgreSQL should shut down - your screen should look similar to this (the last line will not be exactly the same):
We will now install Docker. Copy the following text, paste it in the terminal and hit return.
```
brew install --cask docker
open /Applications/Docker.app
```
This uses Homebrew Cask to install Docker for Mac and starts it for the first time to set it up. Wait for a message at the top of the window to indicate that everything is finished being set up:
Test if Docker is installed by running the following command on the command line:
```
docker run hello-world
```
It should print out a welcome message like this:
We will now install EAS CLI for React Native.

Copy the following text, paste it in the terminal and hit return.
```
pnpm add --global eas-cli
```
You can ignore the lines marked WARN - these do not indicate problems:

Lastly, we'll install Expo on your phone, so that you can also test on a real device.

On your phone, go to the app store and install Expo on your phone (Android, iOS). Create an account and log in.
Next we will set up some dependencies for Expo and React Native.

Copy each line in the following text, paste it in the terminal and hit return.
```
brew install --cask android-studio
[ -d "$HOME/Library/Android/sdk" ] && ANDROID_SDK=$HOME/Library/Android/sdk || ANDROID_SDK=$HOME/Android/Sdk
echo "export ANDROID_SDK=$ANDROID_SDK" >> ~/`[[ $SHELL == *"zsh" ]] && echo '.zshenv' || echo '.bash_profile'`
echo "export PATH=$HOME/Library/Android/sdk/platform-tools:\$PATH" >> ~/`[[ $SHELL == *"zsh" ]] && echo '.zshenv' || echo '.bash_profile'`
source ~/`[[ $SHELL == *"zsh" ]] && echo '.zshenv' || echo '.bash_profile'`
```
This will install Android Studio, for creating and running Android virtual devices in an emulator.

Open Android Studio using the Spotlight or locating it in Applications.

If it asks to import Android Studio Settings, choose Do not import settings.

When prompted, choose a Custom install:

Leave the default JDK installation location as-is and click Next:

Uncheck the box next to Android Virtual Device (we will install our own manually):

For each of the licenses with red stars next to them, click on the license name and then accept the agreement, finally clicking on Finish when you have accepted all agreements:

This will download components, which may take a few minutes:

Next will be getting a virtual device installed. Click on More Actions and select Virtual Device Manager:

Click on the Create device button on the top left of the window:

Select the Pixel 3a as the hardware device.

Under the Recommended tab (the default tab), locate the system image named S (API level 31) and click on the downward arrow icon (download button) next to it. In the window that pops up, accept the license agreement and click Next:

Once the download completes, select the image you just downloaded and click on Next through the rest of the steps until the virtual device has been created:

The device will now show up in the Device Manager. Click on the triangular play button to launch the virtual device in the emulator. An emulator window will appear showing the screen of the virtual device:

If a message pops up in the virtual device that the "System UI isn't responding" at any point during these steps, you can click on "Wait".

Before running the first Expo app, test that the Android Studio adb (Android Debug Bridge) program has been set up properly, by running the following in a new Terminal (open a new tab):
```
adb
```
It should print the version and help information:
To verify that Expo is working with the Android Studio virtual device copy and run each of these lines separately in the terminal:
```
cd ~
mkdir -p projects
cd projects
pnpm create expo-app@latest --template blank-typescript expo-test
cd expo-test
pnpm start --android
```
This will create a new Expo demo app and start it.

If this step doesn't work, it's possible that you may not have the emulator running - check the last part of the previous step to see how to launch the emulator.

The first thing that you will see is the installation of Expo Go on the virtual device:

Next, the Metro bundler will bundle the JavaScript for the device, which may take some time. You will see a loading bar in the command line and a loading screen on the virtual device:

After the bundling has completed, the simple app should show up in the virtual device, with the words "Open up App.js to start working on your app!":

Click on the small x at the top right of the virtual device frame to stop the virtual device - this will save a snapshot to make starting the virtual device faster in the future.
If you don't have one yet, create a Google account here. Make a note of the email address associated with this account for usage in later steps.
If you don't have one yet, create a GitHub account here. Make sure to set a name.

If you already have a GitHub account and you haven't set a name on GitHub yet, go to the GitHub Profile Settings and add a name:

We will use this name in the next step.
For this step, we'll need to edit some of the information in the commands by adding our own information.

First of all, we will set our name, which will be the same name as on our GitHub profile:

Copy your name from your profile, add it in quotes in the command (replace Mona Lisa Octocat) and run the command:
```
git config --global user.name "Mona Lisa Octocat"
```
You can test whether the name was set correctly with the next command (if it worked, it will print the name on the next line):
```
git config --global user.name
```
For running the next command, add your email in quotes:
```
git config --global user.email "monalisaoctocat@example.com"
```
You can test whether the email was set correctly with with the next command (if it worked, it will print the email on the next line):
```
git config --global user.email
```
This prepares git so that your work is attributed correctly to you.

Copy the following text, paste it in the terminal and hit return.
```
git config --global init.defaultBranch main
```
This step will change the default Git branch from master to main (see https://github.com/github/renaming).
Go back to GitHub, and go to your profile page by clicking on your avatar at the top right and selecting Your profile

Copy the github.com/... URL in the address bar of your browser, for use in the next step.
Click on Applications in the dock and start Slack. Log in to the UpLeveled Slack. Send your GitHub profile URL to Lukas. Also send your Google Account email address to Lukas (if you haven't already).
Click on the apple icon in the menu bar at the top left of your screen and select "About This Mac". Select "System Report...". Copy the "Hardware Overview" information in the right panel and send to Lukas. Select "Software" in the left panel, copy the "System Software Overview" information and send to Lukas.
On your phone, go to the app store and install Slack on your phone. Log in to the UpLeveled Slack.

Optional Software

If you would like to check the spelling of all code you write in VS Code, try out Code Spell Checker. You can install on the command line with this command:
```
code --install-extension streetsidesoftware.code-spell-checker
```
If you want to easily capture screenshots and draw and write on them, try Flameshot:
```
brew install --cask flameshot
```
If you need to record mp4 videos of your screen with sound, try out Loom:
```
brew install --cask loom
```
An alternative without the limitations of Loom is Kap:
```
brew install --cask kap
```
If you would like to keep a history of what you have copied to your clipboard, you can try out Yippy:
```
brew install --cask yippy
```
To simultaneously test your web design in multiple mobile viewports, try Responsively App:
```
brew install --cask responsively
```
To remove secrets, large files or other undesirable files from your Git repository, try BFG Repo-Cleaner:
```
brew install bfg
```
If you're running out of space on your computer, you can use Disk Inventory X to analyze your hard drive and show a chart of which items are taking up how much space:
```
brew install --cask disk-inventory-x
```
To do natural language calculations and conversions, try Numi:
```
brew install --cask numi
```

Software Upgrades

Most software upgrades can be performed with brew upgrade <package name>, but some software upgrades require additional steps:

Node.js with pnpm

brew upgrade node@20
brew link --overwrite node@20
corepack disable
corepack enable
corepack prepare pnpm@latest --activate

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

macos.md

macos.md

Minimum RAM: 8GB

Minimum OS Version: 2nd-newest macOS version

Optional Software

Software Upgrades

Files

macos.md

Latest commit

History

macos.md

File metadata and controls

Minimum RAM: 8GB

Minimum OS Version: 2nd-newest macOS version

Optional Software

Software Upgrades