Course Setup

Computer Setup

Setup your laptop or desktop!

An important part of the training is dedicated to building apps together and testing things in real time (bootcamp style). You can use Windows, Mac, or Linux as operating systems for the workshop.

Please ensure you have the below configured prior to the workshop:

• Permission to modify your laptop's wifi settings.
• Have local Admin rights on your laptop. (This is to install and update programming tools and configure the firewall for React Native).
• Have one or multiple browsers installed for testing (Chrome, Firefox, Safari, Edge, Opera, etc.)
• Have a code editor installed. The trainer will be using Visual Studio Code (which is free) but feel free to use any of the following if you're more comfortable in those:
  • Visual Studio Code
  • Atom
  • WebStorm
  • Sublime
  • PHPStorm
  • Brackets

Install Git

Git is a popular source code tool.

You will need to type the following commands from the system command line tool (bash, powershell, cmd, command prompt etc.)

• Have git version 2.39 or greater installed. Verify the version number with: > git --version
  • Install a recent version from the web site if needed. https://git-scm.com/downloads

Install nvm

To manage the installation of Node.js, we use a special installer called nvm (node version manager). This allows to load and switch the node version being used, without having to "uninstall" and "install" each time.

• Check if a recent version of nvm is installed

  • Use the command line > nvm -v
    • Should be v0.40.1 or greater on MacOS
    • Should be 1.1.12 or greater on Windows PCs

• If you need to update or install nvm on your machine

  • First, uninstall nvm and Node.js
    • On Windows PCs, go to Settings, Apps, Apps & features.
      • Uninstall both Node.js and NVM for Windows
    • On MacOS, type the following in Terminal:
      • rm -rf $NVM_DIR ~/.npm ~/.bower

• Install nvm on Windows PC

  • Goto https://github.com/coreybutler/nvm-windows/releases/latest
  • At the bottom of the page, download nvm-setup.exe
  • Install nvm by running the installer

• Install nvm on MacOS

  • Run the following on Terminal:
  • curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash

• Freshly installed nvm may not be immediately detected on the command line.

  • In that case, just close the console and restart a new command line.

Install Node.js

On Windows, run the following on a Command Prompt that runs as administrator:

nvm install lts
nvm use lts

On MacOS Terminal:

nvm install --lts
nvm use --lts

Create a React App

• On the Command Prompt, move to a folder that will store your web projects for the workshop (in the sample below we call the directory Projects, but you can name it as you wish)
• Navigate to the folder: > cd Projects
• Create a demo1 app: > npm create vite@latest demo1 -- --template react-swc
  • This creates a vite project named demo1, using the React template
  • Note there's an empty double dash (--) on the line
  • You will get a prompt Need to install the following packages. Ok to proceed? Press Y and enter to confirm.
• Move to the new folder: > cd demo1
• Install tooling and dependencies: > npm install
  • Tooling and dependencies are installed in a folder called node_modules
• Start the dev web service: > npm run dev
• Press letter o and enter.
  • This opens your browser and navigates to http://localhost:5173/.
  • Once you see the webpage, you've completed the setup!
• To stop the web server, type q and enter