Skip to main content
Prototype Kit Training home

Terminal

What is Terminal?

Terminal is the application on your Mac that lets you use the command line: a text interface for your computer. You can use it to navigate through files and do things, but it is completely text based.

You need to use Terminal to install, start and stop the Prototype Kit - so knowing a few basics is helpful.

Warning The command line is a powerful tool, but can potentially harm your computer if used in the wrong way. For example, it can be used to change permissions on crucial files and folders, or delete lots of files. If you are unsure about something, please try and find a developer to help you out.

Opening Terminal

You don't need to install this application. You can open Terminal by going to Applications and then Utilities on your Mac. You can also open it by opening Spotlight Search (cmd + space bar) and typing 'terminal'.

In the command line, the term 'directory' just means 'folder' - they are one and the same. The first thing you want get used to is navigating around the directories on your computer using the comand line.

cd

The cd command stands for 'change directory'.

Navigate into a directory

When you open Terminal, it will automatically place you in your home directory. Type cd Documents and press 'enter'. Terminal will navigate you to your Documents directory. You can navigate into any directory this way.

cd Documents

Navigate up a directory

Typing .. will navigate you back up to the parent directory - in this case back to your home directory.

cd ..

Using tab to autopopulate

When navigating between directories, pressing your 'tab' key will make Terminal try to autopopulate a directory name. So if you're in your home directory, typing cd Doc and then 'tab' should autopopulate the directory name with 'Documents'.

Note that typing cd Do will return Documents/ Downloads/ as there is no unique directory for Terminal to autopopulate.

Home directory

The cd ~ command will navigate directly to your home directory. The symbol is called 'tilde'.

Navigate directly to a nested directory

You can navigate directly to a directory by typing cd followed by the full path, for example cd Documents/Projects/Some project. You can use tab to autopopulate after every /.

Tip: Drag a folder directly from Finder to Terminal to get it's full path.

Listing contents of a directory using Terminal

ls

The ls command stands for 'list' - typing ls and then pressing enter will list the contents of a directory.

List contents of a directory

Type cd ~ to navigate to your home directory. Then type ls and enter.

cd ~
ls

Running commands in Terminal

Once you've got used to navigating around directories and listing their contents, you can think about running commands. When using the Prototype Kit, you will be navigating to a prototype's directory and then running the following commands:

npm install

npm (originally short for Node Package Manager) is a package manager used by JavaScript applications - it is used to manage dependencies. npm install will automatically install all the files the Prototype Kit needs to run. It does this by looking at the contents of the package.json file, and will install the files in a directory called 'node_modules'.

npm start

This command starts the Prototype Kit application, and runs it on what is called your 'localhost' - a network that runs on your computer on which applications can be accessed.

control + c

To stop the Prototype Kit running, press the control and c keys together in the prototype's directory. This can be used to stop any active process running in Terminal.

You may also need to run Git commands in Terminal to version control any prototypes you work on - see our resources on Git for more information.

Common issues when running prototypes in Terminal
  • node-sass error on npm install - usually this requires you to upgrade the version of node-sass in the package.json. There is a list of compatibility on the node-sass site.
  • Unable to get local issuer certificate - you will need to do enter this command in Terminal: export NODE_EXTRA_CA_CERTS=/etc/ssl/certs/zscaler.pem

If you need further help, there are Slack channels available.

Tips

  • 'tab' key: autopopulates directory name when navigating between directories.
  • Drag a folder directly from Finder to Terminal to get it's full path.
  • Use the up and down keys to go through previously used commands.
  • control + c command stops a process running (including a prototype), or clears a partially typed command (if you've made a mistake for example). If you're stuck on a command, this will often get you unstuck!
  • cmd + k is a keyboard shortcut to clear the current Terminal window (but doesn't stop your prototype from running).
  • cd ~ command navigates directly to your home directory.
  • npm i command is short for npm install.
  • command + t is a keyboard shortcut to open a new tab in Terminal - so you can do different things at the same time.
  • pwd - stands for 'print working directory' and will print out the exact path of the folder you are currently in.
  • Some code editors have a built-in Terminal - this can be useful to install, start and stop a prototype in the same window as editing the prototype code. In Visual Studio Code, you can open a Terminal panel by going to Terminal > New Terminal, and you'll be directly in your prototype directory without having to cd into it.
  • If your prototype isn't working properly, look at the relevant Terminal window - it sometimes prints out error messages, which might help you troubleshoot.

More resources

You may be interested in finding out more about Terminal: you can create and delete files and folders, edit text or run powerful searches for example.