This guide is to help you setup the following required software during the Black Codher bootcamp for Mac OS. Read the instructions for each application in full before proceeding to commence installation.
Many of the steps will require you to use a command-line interface (also referred to as a CLI, terminal or shell), which you may not be familiar with. Please note the following:
- You can't use a mouse or trackpad inside a terminal, except to scroll and execute clipboard operations like selecting, copying and pasting text. The text cursor can only be controlled using the arrow keys on your keyboard.
- Where passwords must be entered, you won't see the text you're typing displayed onscreen, but your keystrokes will be input as nornal. This is expected behaviour, so be careful when entering secure text and if you think you've made a mistake, hit the backspace key until an audible alert lets you know that you've cleared all the input.
- Where a command is provided, you will run it by typing or pasting it in and then hitting Return/Enter on your keyboard.
- When a given command contains text in angle brackets, e.g.
echo "alias home='cd <mount directory path>'" >> ~/.bash_aliases, this represents a placeholder that you must replace with the correct value for your environment. Instructions will be provided to tell you what the placeholder should be replaced with.
If you haven't already created a GitHub account, now is the time to do it.
IMPORTANT
When downloading and installing applications from the internet, macOS may block their execution with a message like this:
To get around this, right-click the file you're trying to run and select "Open". When a second dialog is displayed asking if you're sure you want to open the file, click "Open". After this, double-clicking the file should open it as usual. See the macOS support article for more details.
Git is a version control system and will let you:
- Manage your code changes
- Revert to older copies
Follow these installation instructions.
-
Open Terminal
-
Run the following code, substituting in your GitHub email address in the last placeholder:
ssh-keygen -t ed25519 -C "[email protected]" -
When you're prompted to "Enter a file in which to save the key," press Enter to save the file in the default location. Note the default location as shown in the image below:
-
When prompted, type a secure passphrase. Note down the passphrase for use later.
-
Add your key to the
ssh-agentby following Steps 1-3
Follow these installation instructions or the following steps:
-
Run
pbcopy < <defaultLocation>.pub, which will copy the public key to your clipboard. Ifpbcopydoesn't work, executecat <defaultLocation>.puband copy the output manually, ensuring you don't capture any extra whitespace or linebreaks at the end of the text. Whichever command you use, replace<defaultLocation>with the default location shown earlier in step 3. -
Navigate to your GitHub profile and go to settings. Click on the Tab named "SSH and GPG keys"> Click 'New SSH Key'
-
In the box labelled Key, paste the output you copied from step 6 and then input a title. This could be just the device you are working on .e.g 'My Silver Mac'.
-
Finally, click 'Add SSH Key'
- Verify your version of Git by running
git --versionIf your version number is below 2.28, then proceed with the steps below. Otherwise, skip to the steps under Version 2.28.
- Navigate to the Git installer downloads page and download the latest version (first item in the list)
- Open the downloaded archive
- Double-click the package icon to run the installer
- Click "Continue", then "Install". Once installation is completed, click "OK".
- You may confirm the updated version is installed by running
git --version, then continue with the instructions below.
- Run
git config --global init.defaultBranch main - Close the Terminal.
You will need to install Node not only for the NodeJS unit, but also for React. By installing Node you can use its a package manager (Node Package Manager or npm) to install other software that you will use in your projects later in the course.
Click on this link, choose the mac installer and follow the instructions the it gives.
Visual Studio Code (VS code) is a source code editor made by Microsoft. It will enable you to write code and can identify errors in the code, and make suggestions.
You will use it to write all your code.
Click on this link, choose the mac installer and follow the instructions the it gives.
There are many extensions in VS Code to can improve your productivity, add some fun into your workspace, and generally aid how you work. Below are some of the key extensions that will help during the course and beyond. If you find other useful extensions don't forget to share with everyone.
You can install all extensions directly from inside VS Code.
Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary. In plain English it formats your code to make it consistent, easy to read and well...pretty.
Once prettier has been installed there is some extra configuration to do. This video will guide you on how to make prettier format your code eveytime you save a file.
Launches a development local Server with live reload feature for static & dynamic pages. This will be useful during the JavaScript unit.
Visual Studio Live Share enables you to collaboratively edit and debug with others in real time.
This extension allows matching brackets to be identified with colours.
Automatically renames paired HTML tags.
Discord is a chat and collaboration tool. You will use it to:
- Keep in touch with each other
- Ask questions
- Contact mentors, instructors and teaching assistants
- Build a community
The developer tools available in Google Chrome helps with all different scenarios that you will get into during the bootcamp. This is our browser of choice for the bootcamp.
Click on this link, choose the mac installer and follow the instructions the it gives.
Below we have listed some Chrome extensions that will enhance make your development experience. If you find other useful extensions don't forget to share with everyone.
Adds React debugging tools to the Chrome Developer Tools.
Adds an outline to all elements on the page to show the culprit element which is changing desired layout.