Setting up a React App on Mac

Part 1 of A simple guide to hosting a free website using React and Firebase

So you’ve got a new Mac or revived a dying Mac with the ancient spell of FactoriumResetra. Either way, you’ve forgotten how to get setup for React Magic.

There have been issues with using Homebrew on M1 so the following is using NPM and manual installs to avoid issues.

Step 1: Install IDE

Your Code editor or Integrated development environment (IDE) is where you’ll be doing the majority of coding so it’s important to choose a good one. This used to be a hotly contested field but it’s slowly moving to a clear winner. Visual Studio Code (VSC), download here.

To open VSC from the terminal you’ll need to do the following.

In VSC, Open the Command Palette via (⇧⌘P) and type shell command to find the Shell Command:

Step 2: Install Node

The recommended way of installing node is using Node Version Manager (NVM.) This allows you to run different versions of Node, quite useful when Firebase functions is 3 versions behind.

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh | bash

Check the docs for the latest version of the above script. Once downloaded run

nvm install node

Make sure you follow any additional instructions in the brew install of NVM.

Step 3: Install GitHub CLI

Technically this isn’t needed if you aren’t cloning an existing app but you’ll need it pretty soon. Download and authorize your user

gh auth login

Step 4a: Create React App

If you are creating a new app use NPX to create. NPX allows the usage of Packages without installing them.

npx create-react-app awesomeProject
cd awesomeProject

Obviously change the name here, unless you think awesomeProject is a great name.

Step 4b: Clone existing App

If you already have an app on Github

gh repo clone RepoName
cd RepoName

If it is your Repo then you can just use the Repo name. If it is someone else’s Repo then you will need the directory as well, this can be found on github as shown for holderrr the open source project for creating placeholder pages.

gh repo clone domocrosby/holderrr

To install dependencies use

npm install

Step 5: Open and Run

Now that you are in the directory and have the VSC code shortcut setup

code .

VSC will open up with the Repo code. You can close your stand alone terminal now and open up the VSC terminal by dragging the bottom bar up.

Once this has been done start your application with

npm start

A browser should pop up with your app running.

This is part (1 of 3) of the Series “A simple guide to hosting a free website using React and Firebase” next up is Part 2: Hosting a React App on Firebase