Before starting the setup, check that your hardware and operating system is compatible:
Make sure that your machine has at least 8GB RAM
Make sure that you're running the 2nd-newest OS version or the newest version - earlier versions are not supported
-
Click on the Ubuntu icon in the top left to open the Dash, type in "Terminal" and click on the matching application.
-
Copy each line in the following text, paste it in the terminal and hit return.
curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash - sudo apt-get update sudo apt-get install -y build-essential git nodejs python3
This uses apt to install the
build-essential
build tools, Git, 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
This uses Corepack to install
pnpm
. -
Copy each line in the following text, paste it in the terminal and hit return.
curl -L https://aka.ms/gcm/linux-install-source.sh | sh git-credential-manager-core configure
This installs Git Credential Manager Core.
-
Copy the following text, paste it in the terminal and hit return.
curl -L https://fly.io/install.sh | sh
This installs
flyctl
. -
Copy the following text, paste it in the terminal and hit return.
sudo snap install code --classic
This uses Snap to install VS Code.
-
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 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 mattpocock.ts-error-translator code --install-extension unional.vscode-sort-package-json code --install-extension viijay-kr.react-ts-css code --install-extension vunguyentuan.vscode-css-variables code --install-extension wix.glean
This installs some VS Code extensions we will need.
-
If you don't have Zoom yet, install it: with each line below, copy the text, paste it in the terminal and hit return.
cd /tmp wget https://zoom.us/client/latest/zoom_amd64.deb sudo dpkg --install zoom_amd64.deb cd -
This installs Zoom.
-
If you don't have Slack yet, install it: copy the following text, paste it in the terminal and hit return.
sudo snap install slack --classic
This uses Snap to install Slack.
-
Copy the following text, paste it in the terminal and hit return.
sudo snap install httpie
This uses Snap to install HTTPie.
-
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 by copying each line below, pasting it in the terminal and hitting return.cd /tmp wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb sudo dpkg --install google-chrome-stable_current_amd64.deb cd -
This installs Chrome.
-
Install the following Chrome Extensions:
-
Copy the following text, paste it in the terminal and hit return.
pnpm create @upleveled/react-app --help
This will prepare a program that we will use in the course. This will take a while and then respond with a message with some usage instructions, similar to this:
-
Copy the following text, paste it in the terminal and hit return.
sudo pnpm add --global @upleveled/preflight
This will prepare a program that we will use in the course.
-
Next we will configure VS Code.
Open VS Code and then press the keys Ctrl-Shift-P. Type in "Settings" and select the item that saysPreferences: 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", "eslint.runtime": "node", "eslint.experimental.useFlatConfig": 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 withFile
->Save
in the top menu. -
We will now install PostgreSQL. Copy and run each of these lines separately in the terminal:
sudo sh -c 'echo "deb http://apt.postgresql.org/pub/repos/apt $(lsb_release -cs)-pgdg main" > /etc/apt/sources.list.d/pgdg.list' wget --quiet -O - https://www.postgresql.org/media/keys/ACCC4CF8.asc | sudo apt-key add - sudo apt update sudo apt install postgresql-16 echo "export PSQL_PAGER=\"less --chop-long-lines --header 1\"" >> ~/`[[ $SHELL == *"zsh" ]] && echo '.zshenv' || echo '.bash_profile'` source ~/`[[ $SHELL == *"zsh" ]] && echo '.zshenv' || echo '.bash_profile'`
This will install PostgreSQL and create a default user of
postgres
with no password (only authorized users can use this user).Your database will be started automatically - no need to start it manually.
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.Run the following command:
sudo -u postgres psql
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 writingexit
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):
-
Copy the following text, paste it in the terminal and hit return.
sudo snap install docker
This uses Snap to install Docker.
-
Test if Docker is installed by running the following command on the command line:
docker run hello-world
-
We will now install Expo CLI for React Native.
Copy the following text, paste it in the terminal and hit return.
sudo npm install -g expo-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.
sudo snap install android-studio --classic [ -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'` 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 Dash.
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 R (API level 30) and click on the Download link 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@latest expo-test --template blank cd expo-test echo 'node-linker=hoisted' > ./.npmrc pnpm install --force 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 (replaceMona 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 "[email protected]"
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 credential.credentialStore cache
This step will save your GitHub password for 15 minutes so that you don't need to enter it every time.
-
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
tomain
(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 thegithub.com/...
URL in the address bar of your browser, for use in the next step. -
Open Dash and start Slack. Log in to the UpLeveled Slack. Send your GitHub profile URL to Kimberley. Also send your Google Account email address to Kimberley (if you haven't already).
-
Copy the following text, paste it in the terminal and hit return.
lshw -short
This will show you a summary of your computer specifications. Copy the text on the lines after the command and send it to Kimberley in Slack.
Copy the following text, paste it in the terminal and hit return.cat /etc/os-release
This will show you details about your operating system. Copy the text on the lines after the command and send it to Kimberley in Slack.
Copy the following text, paste it in the terminal and hit return.cat /proc/version
This will show you details about your Linux distribution. Copy the text on the lines after the command and send it to Kimberley in Slack.
-
On your phone, go to the app store and install Slack on your phone. Log in to the UpLeveled Slack.
-
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 need to record video of your screen with sound (with export to mp4 and gif), try out Kooha:
flatpak install flathub io.github.seadve.Kooha