14 |
15 | This will launch the macOS terminal.
16 | 2. Copy the following text, paste it in the terminal and hit return.
17 | ```bash 18 | xcode-select --install 19 | ``` 20 | It will pop up a prompt similar to the screenshot below. Click "Install":
21 |
22 | This will install the Xcode Command Line Tools, tools that enable installation of other software.
23 | 3. Copy the following text, paste it in the terminal and hit return.
24 | ```bash 25 | /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" 26 | ``` 27 | This will install Homebrew, a package manager which will allow us to install and uninstall programs from the terminal.
28 | 4. When the installer asks for it, enter your password you use to log in to your Mac
29 | ‼️ Note: while typing your password, you will not see the letters being entered. This is normal:
30 |
31 | Also press return when asked to:
32 |
33 | 5. The installer will take a bit of time and then show a message that "Installation successful!", signaling that it is done:
34 |
35 | Read the messages underneath the "Installation successful!" message and look for a heading that says "Next steps". If there is a bullet point with the text "Add Homebrew to your PATH...", then there are be some additional commands that you need to copy and run (copy each line, paste it in the terminal and hit return):
36 |
37 | 6. Copy each line in the following text, paste it in the terminal and hit return.
38 | ```bash 39 | brew install flyctl git less node@22 python 40 | brew link --overwrite node@22 41 | ``` 42 | This uses Homebrew to install `flyctl`, Git, Less, Node.js and Python.
43 | 7. Copy each line in the following text, paste it in the terminal and hit return.
44 | 45 | ```bash 46 | corepack enable 47 | corepack prepare pnpm@latest --activate 48 | pnpm setup 49 | source ~/`[[ $SHELL == *"zsh" ]] && echo '.zshrc' || echo '.bash_profile'` 50 | ``` 51 | 52 | This uses Corepack to install `pnpm`, and configures `pnpm`'s global bin directory.
53 | Install `@upleveled/preflight`, a program we will use in the course, to verify that the previous commands were successful: copy the following text, paste it in the terminal and hit return.
54 | 55 | ```bash 56 | pnpm add --global @upleveled/preflight 57 | ``` 58 | 59 | Verify that your output looks similar to the "Successful" output below. You can ignore any differences in version numbers and package names - the important part is "Done in ..." on the last line. 60 | 61 | If your output looks very different (either like the "Failing" output below or like some other different output), repeat the pnpm installation commands at the start of this step. 62 | 63 |
| Successful | 66 |Failing (ERR_PNPM_NO_GLOBAL_BIN_DIR) | 67 |
|---|---|
| 70 | 71 | ```bash 72 | WARN 6 deprecated subdependencies found: 73 | @oclif/screen@3.0.8, glob@6.0.4, glob@7.1.6, 74 | osenv@0.1.5, rimraf@2.4.5, rimraf@3.0.2 75 | Packages: +21 -32 76 | +++++++++++++++++-------------------------- 77 | Progress: resolved 773, reused 772, 78 | downloaded 1, added 21, done 79 | 80 | /Users/k/Library/pnpm/global/5: 81 | + @upleveled/preflight 7.0.8 82 | 83 | Done in 3.3s 84 | ``` 85 | 86 | | 87 |88 | 89 | ```bash 90 | ERR_PNPM_NO_GLOBAL_BIN_DIR Unable to find the 91 | global bin directory 92 | 93 | Run "pnpm setup" to create it automatically, 94 | or set the global-bin-dir setting, or the 95 | PNPM_HOME env variable. The global bin 96 | directory should be in the PATH. 97 | ``` 98 | 99 | |
102 | ```bash 103 | brew install --cask visual-studio-code httpie git-credential-manager 104 | ``` 105 | This uses Homebrew Cask to install Visual Studio Code, HTTPie and Git Credential Manager.
106 | If you don't have Zoom installed yet, run this to install it:
107 | ```bash 108 | brew install --cask zoom 109 | ``` 110 | If you don't have Slack installed yet, run this to install it:
111 | ```bash 112 | brew install --cask slack 113 | ``` 114 | 9. Copy each line in the following text, paste it in the terminal and hit return.
115 | 116 | ```bash 117 | code --install-extension bradlc.vscode-tailwindcss 118 | code --install-extension Cardinal90.multi-cursor-case-preserve 119 | code --install-extension dbaeumer.vscode-eslint 120 | code --install-extension dozerg.tsimportsorter 121 | code --install-extension esbenp.prettier-vscode 122 | code --install-extension frigus02.vscode-sql-tagged-template-literals-syntax-only 123 | code --install-extension kumar-harsh.graphql-for-vscode 124 | code --install-extension mattpocock.ts-error-translator 125 | code --install-extension meganrogge.template-string-converter 126 | code --install-extension styled-components.vscode-styled-components 127 | code --install-extension stylelint.vscode-stylelint 128 | code --install-extension sysoev.vscode-open-in-github 129 | code --install-extension tamasfe.even-better-toml 130 | code --install-extension unional.vscode-sort-package-json 131 | code --install-extension viijay-kr.react-ts-css 132 | code --install-extension vitaliymaz.vscode-svg-previewer 133 | code --install-extension vunguyentuan.vscode-css-variables 134 | code --install-extension wix.glean 135 | ``` 136 | 137 | This installs some VS Code extensions we will need.
138 | 139 | 10. We recommend installing and using Chrome so that you have the same DevTools as others.
140 | If you don't have Chrome installed yet, you can install it with Homebrew. To do this, copy the following text, paste it in the terminal and hit return.
141 | ```bash 142 | brew install --cask google-chrome 143 | ``` 144 | This uses Homebrew to install Chrome.
145 | 11. Install the following Chrome Extensions: 146 | - [React Developer tools Chrome Extension](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) 147 | - [Refined GitHub Chrome Extension](https://chrome.google.com/webstore/detail/refined-github/hlepfoohegkhhmjieoechaddaejaokhf?hl=en) 148 | - [Socket Security Chrome Extension](https://chrome.google.com/webstore/detail/socket-security/jbcobpbfgkhmjfpjjepkcocalmpkiaop?hl=en) 149 | - [Web Vitals Chrome Extension](https://chrome.google.com/webstore/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma?hl=en)) 150 | 12. Next we will configure VS Code.
151 | Open VS Code and then press the keys cmd-shift-P. Type in "Settings" and select the item that says `Preferences: Open User Settings (JSON)`:
152 |
153 | Once the settings file is open, we will want to add the settings below.
154 | First of all, identify whether your settings file is empty or not. This is what an empty file looks like:
155 |
156 | 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:
157 |
158 | Now in both cases you will want to paste the following settings **before the closing curly bracket (before the `}`)**:
159 | ```json5 160 | "editor.wordWrap": "on", 161 | "editor.minimap.enabled": false, 162 | "editor.linkedEditing": true, 163 | "editor.tabSize": 2, 164 | "workbench.editor.tabSizing": "shrink", 165 | "workbench.editor.closeEmptyGroups": false, 166 | "workbench.tree.enableStickyScroll": true, 167 | "terminal.integrated.stickyScroll.enabled": true, 168 | "files.insertFinalNewline": true, 169 | "files.trimFinalNewlines": true, 170 | "files.trimTrailingWhitespace": true, 171 | "[markdown]": { 172 | "files.trimTrailingWhitespace": false 173 | }, 174 | "files.autoSave": "onFocusChange", 175 | "editor.formatOnSave": true, 176 | "editor.codeActionsOnSave": [ 177 | // Sort package.json keys with https://marketplace.visualstudio.com/items?itemName=unional.vscode-sort-package-json 178 | "source.sortPackageJson" 179 | ], 180 | "tsImportSorter.configuration.groupRules": ["^node:", {}, "^[.]"], 181 | "tsImportSorter.configuration.keepUnused": [".*"], 182 | "tsImportSorter.configuration.emptyLinesBetweenGroups": 0, 183 | "tsImportSorter.configuration.wrappingStyle": "prettier", 184 | "editor.defaultFormatter": "esbenp.prettier-vscode", 185 | "[html]": { 186 | "editor.defaultFormatter": "esbenp.prettier-vscode" 187 | }, 188 | "[javascript]": { 189 | "editor.defaultFormatter": "esbenp.prettier-vscode" 190 | }, 191 | "[javascriptreact]": { 192 | "editor.defaultFormatter": "esbenp.prettier-vscode" 193 | }, 194 | "[typescript]": { 195 | "editor.defaultFormatter": "esbenp.prettier-vscode" 196 | }, 197 | "[typescriptreact]": { 198 | "editor.defaultFormatter": "esbenp.prettier-vscode" 199 | }, 200 | "[json]": { 201 | "editor.defaultFormatter": "esbenp.prettier-vscode" 202 | }, 203 | "[jsonc]": { 204 | "editor.defaultFormatter": "esbenp.prettier-vscode" 205 | }, 206 | "prettier.singleQuote": true, 207 | "prettier.trailingComma": "all", 208 | "prettier.documentSelectors": [ 209 | // Enable prettier-vscode to format *.sql files (eg. with prettier-plugin.sql) 210 | // https://github.com/prettier/prettier-vscode/issues/3248#issuecomment-1956209714 211 | "**/*.sql" 212 | ], 213 | "eslint.runtime": "node", 214 | "totalTypeScript.hideAllTips": true, 215 | ``` 216 | After you have pasted the settings, save the file with `File` -> `Save` in the top menu.
217 | 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.
218 | 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:
219 |
220 | If you made any further changes to the file, save the file again with `File` -> `Save` in the top menu.
221 | 13. We will now install PostgreSQL. Copy each line in the following text, paste it in the terminal and hit return. 222 | 223 | ```bash 224 | brew install postgresql@17 225 | brew link postgresql@17 226 | ``` 227 | 228 | This uses Homebrew to install PostgreSQL and create just a single user with your username and all role permissions. There will be no `postgres` user set up.
229 | Now let's set an environment variable to tell PostgreSQL where to put the data: 230 | 231 | ```bash 232 | [[ -d /opt/homebrew/var/postgresql@17 ]] && PGDATA_TMP=/opt/homebrew/var/postgresql@17 || PGDATA_TMP=/usr/local/var/postgresql@17 233 | echo -e "\nexport PGDATA=$PGDATA_TMP" >> ~/`[[ $SHELL == *"zsh" ]] && echo '.zshrc' || echo '.bash_profile'` 234 | echo "export PSQL_PAGER=\"less --chop-long-lines --header 1\"" >> ~/`[[ $SHELL == *"zsh" ]] && echo '.zshrc' || echo '.bash_profile'` 235 | echo "export LANG=en_US.UTF-8" >> ~/`[[ $SHELL == *"zsh" ]] && echo '.zshrc' || echo '.bash_profile'` 236 | source ~/`[[ $SHELL == *"zsh" ]] && echo '.zshrc' || echo '.bash_profile'` 237 | perl -i -pe "s/^[#\s]*(timezone|log_timezone)\s*=.+$/\1 = 'UTC'/" "$PGDATA/postgresql.conf" 238 | ``` 239 | 240 | We can now test whether PostgreSQL has been correctly installed by starting the database. To do this, we can run the following command: 241 | 242 | ```bash 243 | postgres 244 | ``` 245 | 246 | If it worked, it should print out some messages and end with the rectangular cursor on the left side of the screen: 247 | 248 |
249 | 250 | You will need to run this every time you want to use your database.
251 | When you want to stop PostgreSQL again, just stop it like any other command line program using the shortcut control-C. 252 | 253 | 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. 254 | 255 | Open a new tab in the terminal using command-T and run the following command: 256 | 257 | ```bash 258 | psql postgres 259 | ``` 260 | 261 | It should look like this:
262 | 263 |
264 | 265 | If your screen looks like the above screenshot, type in or copy and paste the following query (this is a language called SQL): 266 | 267 | ```sql 268 | CREATE TABLE users( 269 | id serial PRIMARY KEY, 270 | first_name VARCHAR (100) NOT NULL, 271 | last_name VARCHAR (100) NOT NULL 272 | ); 273 | ``` 274 | 275 | It should print `CREATE TABLE` on the line after running the query. Your screen should look like this:
276 | 277 |
278 | 279 | Now let's check that the table has been created. Run this query: 280 | 281 | ``` 282 | \dt 283 | ``` 284 | 285 | This will show the tables that you have, including the newly-created `users` table. Your screen should look like this:
286 | 287 |
288 | 289 | Finally, let's delete the table again to clean up. Run this query: 290 | 291 | ```sql 292 | DROP TABLE users; 293 | ``` 294 | 295 | It should print `DROP TABLE` on the line after running the query. Your screen should look like this:
296 | 297 |
298 | 299 | Great, PostgreSQL is set up! 🚀 Now you can exit from `psql` again by writing `exit` and hitting return: 300 | 301 | ``` 302 | exit 303 | ``` 304 | 305 | 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):
306 | 307 |
308 | 309 | Now close the new terminal tab with command-W, and stop PostgreSQL again using control-C. PostgreSQL should shut down - your screen should look similar to this (the last line will not be exactly the same):
310 | 311 |
312 | 313 | 14. We will now install Docker. Copy the following text, paste it in the terminal and hit return. 314 | 315 | ```bash 316 | brew install --cask docker 317 | open /Applications/Docker.app 318 | ``` 319 | 320 | This uses Homebrew Cask to install Docker for Mac and starts it for the first time to set it up. Wait for a message at the top of the window to indicate that everything is finished being set up:
321 |
322 | 323 | 15. Test if Docker is installed by running the following command on the command line: 324 | 325 | ```bash 326 | docker run hello-world 327 | ``` 328 | 329 | It should print out a welcome message like this:
330 |
331 | 332 | 16. We will now install EAS CLI for React Native. 333 | 334 | Copy the following text, paste it in the terminal and hit return. 335 | 336 | ```bash 337 | pnpm add --global eas-cli 338 | ``` 339 | 340 | You can ignore the lines marked `WARN` - these do not indicate problems:
341 | 342 |
343 | 344 | Lastly, we'll install Expo on your phone, so that you can also test on a real device. 345 | 346 | On your phone, go to the app store and install Expo on your phone ([Android](https://play.google.com/store/apps/details?id=host.exp.exponent&hl=en&gl=US), [iOS](https://apps.apple.com/us/app/expo-go/id982107779)). Create an account and log in. 347 | 348 | 17. Next we will set up some dependencies for Expo and React Native. 349 | 350 | Copy each line in the following text, paste it in the terminal and hit return. 351 | 352 | ```bash 353 | brew install --cask android-studio 354 | [ -d "$HOME/Library/Android/sdk" ] && ANDROID_SDK=$HOME/Library/Android/sdk || ANDROID_SDK=$HOME/Android/Sdk 355 | echo "export ANDROID_SDK=$ANDROID_SDK" >> ~/`[[ $SHELL == *"zsh" ]] && echo '.zshenv' || echo '.bash_profile'` 356 | echo "export PATH=$HOME/Library/Android/sdk/platform-tools:\$PATH" >> ~/`[[ $SHELL == *"zsh" ]] && echo '.zshenv' || echo '.bash_profile'` 357 | source ~/`[[ $SHELL == *"zsh" ]] && echo '.zshenv' || echo '.bash_profile'` 358 | ``` 359 | 360 | This will install Android Studio, for creating and running Android virtual devices in an emulator. 361 | 362 | Open Android Studio using the Spotlight or locating it in Applications. 363 | 364 | If it asks to import Android Studio Settings, choose **Do not import settings**. 365 | 366 | When prompted, choose a **Custom** install:
367 | 368 |
369 | 370 | Leave the default JDK installation location as-is and click **Next**:
371 | 372 |
373 | 374 | Uncheck the box next to **Android Virtual Device** (we will install our own manually):
375 | 376 |
377 | 378 | 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:
379 | 380 |
381 | 382 | This will download components, which may take a few minutes:
383 | 384 |
385 | 386 | Next will be getting a virtual device installed. Click on **More Actions** and select **Virtual Device Manager**:
387 | 388 |
389 | 390 | Click on the **Create device** button on the top left of the window:
391 | 392 |
393 | 394 | Select the Pixel 3a as the hardware device. 395 | 396 | Under the **Recommended** tab (the default tab), locate the system image named **S** (API level 31) and click on the downward arrow icon (download button) next to it. In the window that pops up, accept the license agreement and click **Next**:
397 | 398 |
399 | 400 | 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:
401 | 402 |
403 | 404 | 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:
405 | 406 |
407 | 408 | 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". 409 | 410 | 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): 411 | 412 | ```bash 413 | adb 414 | ``` 415 | 416 | It should print the version and help information:
417 | 418 |
419 | 420 | 18. To verify that Expo is working with the Android Studio virtual device copy and run each of these lines separately in the terminal: 421 | 422 | 423 | 424 | ```bash 425 | cd ~ 426 | mkdir -p projects 427 | cd projects 428 | pnpm create expo-app@latest --template blank-typescript expo-test 429 | cd expo-test 430 | pnpm start --android 431 | ``` 432 | 433 | This will create a new Expo demo app and start it. 434 | 435 | 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. 436 | 437 | The first thing that you will see is the installation of Expo Go on the virtual device:
438 | 439 |
440 | 441 | 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:
442 | 443 |
444 | 445 |
446 | 447 | 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!":
448 | 449 |
450 | 451 | 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. 452 | 453 | 19. If you don't have one yet, create a Google account [here](https://accounts.google.com/signup?hl=en). Make a note of the email address associated with this account for usage in later steps. 454 | 20. If you don't have one yet, create a GitHub account [here](https://github.com/join). Make sure to set a name. 455 | 456 | If you already have a GitHub account and you haven't set a name on GitHub yet, go to the [GitHub Profile Settings](https://github.com/settings/profile) and add a name:
457 |
458 | We will use this name in the next step.
459 | 460 | 21. For this step, we'll need to **edit some of the information in the commands** by adding our own information.
461 | First of all, we will set our name, which will be the same name as on our GitHub profile:
462 |
463 | Copy your name from your profile, **add it in quotes** in the command (replace `Mona Lisa Octocat`) and run the command:
464 | ```bash 465 | git config --global user.name "Mona Lisa Octocat" 466 | ``` 467 | 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):
468 | ```bash 469 | git config --global user.name 470 | ``` 471 |
For running the next command, **add your email in quotes**:
472 | ```bash 473 | git config --global user.email "monalisaoctocat@example.com" 474 | ``` 475 | 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):
476 | ```bash 477 | git config --global user.email 478 | ``` 479 | This prepares `git` so that your work is attributed correctly to you.
480 | 481 | 486 | 487 | 22. Copy the following text, paste it in the terminal and hit return.
488 | ```bash 489 | git config --global init.defaultBranch main 490 | ``` 491 | This step will change the default Git branch from `master` to `main` (see https://github.com/github/renaming).
492 | 23. Go back to GitHub, and go to your profile page by clicking on your avatar at the top right and selecting **Your profile**
493 |
494 | Copy the `github.com/...` URL in the address bar of your browser, for use in the next step. 495 | 24. Click on Applications in the dock and start Slack. Log in to the UpLeveled Slack. Send your GitHub profile URL to [Karl](slack://user?team=TFFSPKL92&id=UFG252SH0). Also send your Google Account email address to Karl (if you haven't already). 496 | 25. Click on the apple icon in the menu bar at the top left of your screen and select "About This Mac". Select "System Report...". Copy the "Hardware Overview" information in the right panel and send to Karl. Select "Software" in the left panel, copy the "System Software Overview" information and send to Karl. 497 | 26. On your phone, go to the app store and install Slack on your phone. Log in to the UpLeveled Slack. 498 | 499 | ## Optional Software 500 | 501 | 1. If you would like to check the spelling of all code you write in VS Code, try out [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker). You can install on the command line with this command: 502 | 503 | ```bash 504 | code --install-extension streetsidesoftware.code-spell-checker 505 | ``` 506 | 507 | 2. If you want to easily capture screenshots and draw and write on them, try Flameshot: 508 | 509 | ```bash 510 | brew install --cask flameshot 511 | ``` 512 | 513 | 3. If you need to record mp4 videos of your screen with sound, try out [Loom](https://www.loom.com/): 514 | 515 | ```bash 516 | brew install --cask loom 517 | ``` 518 | 519 | An alternative without the limitations of Loom is Kap: 520 | 521 | ```bash 522 | brew install --cask kap 523 | ``` 524 | 525 | 4. If you would like to keep a history of what you have copied to your clipboard, you can try out Yippy: 526 | 527 | ```bash 528 | brew install --cask yippy 529 | ``` 530 | 531 | 5. To simultaneously test your web design in multiple mobile viewports, try Responsively App: 532 | 533 | ```bash 534 | brew install --cask responsively 535 | ``` 536 | 537 | 6. To remove secrets, large files or other undesirable files from your Git repository, try BFG Repo-Cleaner: 538 | 539 | ```bash 540 | brew install bfg 541 | ``` 542 | 543 | 7. If you're running out of space on your computer, you can use Disk Inventory X to analyze your hard drive and show a chart of which items are taking up how much space: 544 | 545 | ```bash 546 | brew install --cask disk-inventory-x 547 | ``` 548 | 549 | 8. To do natural language calculations and conversions, try [Numi](https://numi.app/): 550 | 551 | ```bash 552 | brew install --cask numi 553 | ``` 554 | 555 | ## Software Upgrades 556 | 557 | Most software upgrades can be performed with `brew upgrade
29 |
30 |
31 | This will run Powershell as an administrator user
32 | 3. Copy the following text (be sure you select all of it, it's very long) and right-click in the blue middle part of the PowerShell window to paste the text. Hit enter.
33 | ```bash 34 | Set-ExecutionPolicy AllSigned -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1')) 35 | ``` 36 | This will install Chocolatey, a package manager which will allow us to install and uninstall programs from the command line. 37 |
38 | 4. The installer will take a bit of time and then show a message that "Chocolatey is ready", signaling that it is done:
39 |
40 | 5. Close PowerShell and open it again as administrator (like in step 2)
41 | 6. Copy the following text and right-click in the blue middle part of the PowerShell window to paste the text. Hit enter.
42 | ```bash 43 | choco install git nodejs-lts vscode hyper httpie flyctl --yes 44 | ``` 45 | This uses Chocolatey to install Git, Node.js, Visual Studio Code, Hyper, HTTPie and `flyctl`.
46 | 49 | If you don't have Zoom installed yet, run this to install it:
50 | ```bash 51 | choco install zoom --yes 52 | ``` 53 | If you don't have Slack installed yet, run this to install it:
54 | ```bash 55 | choco install slack --yes 56 | ``` 57 | 7. Close PowerShell and open it again as administrator (like in step 2). Copy the following text and right-click in the blue middle part of the PowerShell window to paste the text. Hit enter.
58 | 59 | ```bash 60 | corepack enable 61 | corepack prepare pnpm@latest --activate 62 | Set-ExecutionPolicy -Scope Process -ExecutionPolicy Bypass -Force 63 | pnpm setup 64 | ``` 65 | 66 | Close PowerShell and open it again as administrator (like in step 2). This uses Corepack to install `pnpm`, and configures `pnpm`'s global bin directory.
67 | Install `@upleveled/preflight`, a program we will use in the course, to verify that the previous commands were successful: copy the following text, paste it in the terminal and hit return.
68 | 69 | ```bash 70 | pnpm add --global @upleveled/preflight 71 | ``` 72 | 73 | Verify that your output looks similar to the "Successful" output below. You can ignore any differences in version numbers and package names - the important part is "Done in ..." on the last line. 74 | 75 | If your output looks very different (either like the "Failing" output below or like some other different output), repeat the pnpm installation commands at the start of this step. 76 | 77 |
| Successful | 80 |Failing (ERR_PNPM_NO_GLOBAL_BIN_DIR) | 81 |
|---|---|
| 84 | 85 | ```bash 86 | WARN 6 deprecated subdependencies found: 87 | @oclif/screen@3.0.8, glob@6.0.4, glob@7.1.6, 88 | osenv@0.1.5, rimraf@2.4.5, rimraf@3.0.2 89 | Packages: +21 -32 90 | +++++++++++++++++-------------------------- 91 | Progress: resolved 773, reused 772, 92 | downloaded 1, added 21, done 93 | 94 | /Users/k/Library/pnpm/global/5: 95 | + @upleveled/preflight 7.0.8 96 | 97 | Done in 3.3s 98 | ``` 99 | 100 | | 101 |102 | 103 | ```bash 104 | ERR_PNPM_NO_GLOBAL_BIN_DIR Unable to find the 105 | global bin directory 106 | 107 | Run "pnpm setup" to create it automatically, 108 | or set the global-bin-dir setting, or the 109 | PNPM_HOME env variable. The global bin 110 | directory should be in the PATH. 111 | ``` 112 | 113 | |
124 | 125 | ```bash 126 | code --install-extension bradlc.vscode-tailwindcss 127 | code --install-extension Cardinal90.multi-cursor-case-preserve 128 | code --install-extension dbaeumer.vscode-eslint 129 | code --install-extension dozerg.tsimportsorter 130 | code --install-extension esbenp.prettier-vscode 131 | code --install-extension frigus02.vscode-sql-tagged-template-literals-syntax-only 132 | code --install-extension kumar-harsh.graphql-for-vscode 133 | code --install-extension mattpocock.ts-error-translator 134 | code --install-extension meganrogge.template-string-converter 135 | code --install-extension styled-components.vscode-styled-components 136 | code --install-extension stylelint.vscode-stylelint 137 | code --install-extension sysoev.vscode-open-in-github 138 | code --install-extension tamasfe.even-better-toml 139 | code --install-extension unional.vscode-sort-package-json 140 | code --install-extension viijay-kr.react-ts-css 141 | code --install-extension vitaliymaz.vscode-svg-previewer 142 | code --install-extension vunguyentuan.vscode-css-variables 143 | code --install-extension wix.glean 144 | ``` 145 | 146 | This installs some VS Code extensions we will need.
147 | 148 | 10. We recommend installing and using Chrome so that you have the same DevTools as others.
149 | If you don't have Chrome installed yet, you can install it with Chocolatey. To do this, copy the following text and right-click in the blue middle part of the PowerShell window to paste the text. Hit enter.
150 | ```bash 151 | choco install googlechrome --yes 152 | ``` 153 | This uses Chocolatey to install Chrome.
154 | 11. Install the following Chrome Extensions: 155 | - [React Developer tools Chrome Extension](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) 156 | - [Refined GitHub Chrome Extension](https://chrome.google.com/webstore/detail/refined-github/hlepfoohegkhhmjieoechaddaejaokhf?hl=en) 157 | - [Socket Security Chrome Extension](https://chrome.google.com/webstore/detail/socket-security/jbcobpbfgkhmjfpjjepkcocalmpkiaop?hl=en) 158 | - [Web Vitals Chrome Extension](https://chrome.google.com/webstore/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma?hl=en) 159 | 12. Next we will configure VS Code.
160 | Open VS Code and then press the keys Ctrl-Shift-P. Type in "Settings" and select the item that says `Preferences: Open User Settings (JSON)`:
161 |
162 | Once the settings file is open, we will want to add the settings below.
163 | First of all, identify whether your settings file is empty or not. This is what an empty file looks like:
164 |
165 | 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:
166 |
167 | Now in both cases you will want to paste the following settings **before the closing curly bracket (before the `}`)**:
168 | 169 | ```json5 170 | "editor.wordWrap": "on", 171 | "editor.minimap.enabled": false, 172 | "editor.linkedEditing": true, 173 | "editor.tabSize": 2, 174 | "workbench.editor.tabSizing": "shrink", 175 | "workbench.editor.closeEmptyGroups": false, 176 | "workbench.tree.enableStickyScroll": true, 177 | "terminal.integrated.stickyScroll.enabled": true, 178 | "terminal.integrated.defaultProfile.windows": "Git Bash", 179 | "files.insertFinalNewline": true, 180 | "files.trimFinalNewlines": true, 181 | "files.trimTrailingWhitespace": true, 182 | "[markdown]": { 183 | "files.trimTrailingWhitespace": false 184 | }, 185 | "files.autoSave": "onFocusChange", 186 | "editor.formatOnSave": true, 187 | "editor.codeActionsOnSave": [ 188 | // Sort package.json keys with https://marketplace.visualstudio.com/items?itemName=unional.vscode-sort-package-json 189 | "source.sortPackageJson" 190 | ], 191 | "tsImportSorter.configuration.groupRules": ["^node:", {}, "^[.]"], 192 | "tsImportSorter.configuration.keepUnused": [".*"], 193 | "tsImportSorter.configuration.emptyLinesBetweenGroups": 0, 194 | "tsImportSorter.configuration.wrappingStyle": "prettier", 195 | "editor.defaultFormatter": "esbenp.prettier-vscode", 196 | "[html]": { 197 | "editor.defaultFormatter": "esbenp.prettier-vscode" 198 | }, 199 | "[javascript]": { 200 | "editor.defaultFormatter": "esbenp.prettier-vscode" 201 | }, 202 | "[javascriptreact]": { 203 | "editor.defaultFormatter": "esbenp.prettier-vscode" 204 | }, 205 | "[typescript]": { 206 | "editor.defaultFormatter": "esbenp.prettier-vscode" 207 | }, 208 | "[typescriptreact]": { 209 | "editor.defaultFormatter": "esbenp.prettier-vscode" 210 | }, 211 | "[json]": { 212 | "editor.defaultFormatter": "esbenp.prettier-vscode" 213 | }, 214 | "[jsonc]": { 215 | "editor.defaultFormatter": "esbenp.prettier-vscode" 216 | }, 217 | "prettier.singleQuote": true, 218 | "prettier.trailingComma": "all", 219 | "prettier.documentSelectors": [ 220 | // Enable prettier-vscode to format *.sql files (eg. with prettier-plugin.sql) 221 | // https://github.com/prettier/prettier-vscode/issues/3248#issuecomment-1956209714 222 | "**/*.sql" 223 | ], 224 | "eslint.runtime": "node", 225 | "totalTypeScript.hideAllTips": true, 226 | ``` 227 | 228 | After you have pasted the settings, save the file with `File` -> `Save` in the top menu.
229 | 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.
230 | 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:
231 |
232 | If you made any further changes to the file, save the file again with `File` -> `Save` in the top menu.
233 | 234 | 13. To verify that the VS Code configuration was successful, select `Terminal` -> `New Terminal` in the top menu:
235 |
236 | 237 | Once the terminal appears, copy the following text, paste it into the terminal and hit return: 238 | 239 | ```bash 240 | echo -e "VS Code Config:\n Shell: $SHELL\n Terminal: $TERM" 241 | ``` 242 | 243 | This should display the following output on Windows: 244 | 245 | ```bash 246 | VS Code Config: 247 | Shell: /usr/bin/bash 248 | Terminal: xterm-256color 249 | ``` 250 | 251 | Check your output carefully - if line 2 (`Shell: ...`) and line 3 (`Terminal: ...`) on your screen aren't exactly the same as the output above, return to the previous step and check if everything was completed fully. 252 | 253 | 14. Now we will configure Hyper.
254 | Open Hyper and then select Edit -> Preferences, which will open a text file in an editor:
255 |
256 | In this file, we will do three things: 257 | 258 | 1. Find `shell: '',` and replace it with `shell: 'C:\\Program Files\\Git\\bin\\bash.exe',` 259 | 2. Find `env: {},` and replace it with `env: { TERM: 'cygwin' },` 260 | 261 | Then save the file and close and restart Hyper. 262 | 263 | 15. To verify that the Hyper configuration was successful, copy the following text, paste it into Hyper and hit return: 264 | 265 | ```bash 266 | echo -e "Hyper Config:\n Shell: $SHELL\n Terminal: $TERM" 267 | ``` 268 | 269 | This should display the following output: 270 | 271 | ```bash 272 | Hyper Config: 273 | Shell: /usr/bin/bash 274 | Terminal: cygwin 275 | ``` 276 | 277 | Check your output carefully - if line 2 (`Shell: ...`) and line 3 (`Terminal: ...`) on your screen aren't exactly the same as the output above, return to the previous step and check if everything was completed fully. 278 | 279 | 16. We will now install PostgreSQL. Search for Hyper in the start menu, then right click on it and choose "Run as Administrator". 280 | 281 | Copy the following text, paste it in Hyper and hit return. 282 | 283 | ```bash 284 | choco install postgresql17 --yes --params '/Password:postgres' 285 | ``` 286 | 287 | This will install PostgreSQL and create a default user of `postgres` and a password of `postgres`. Remember this password and use it any time it asks from now on. 288 | 289 | After the installation is complete, close Hyper and reopen it (just as a normal user - not as an administrator). 290 | 291 | Now let's set an environment variable to tell PostgreSQL where to find the programs and where to put the data. Copy and run each of these lines separately in Hyper: 292 | 293 | ```bash 294 | echo -e "\nexport PATH=\$PATH:\"/c/Program Files/PostgreSQL/17/bin\"" >> ~/.bash_profile 295 | echo "export PGDATA=\"/c/Program Files/PostgreSQL/17/data\"" >> ~/.bash_profile 296 | echo "export PSQL_PAGER=\"less --chop-long-lines --header 1\"" >> ~/.bash_profile 297 | echo "export LANG=en_US.UTF-8" >> ~/.bash_profile 298 | source ~/.bash_profile 299 | perl -i -pe "s/^[#\s]*(timezone|log_timezone)\s*=.+$/\1 = 'UTC'/" "$PGDATA/postgresql.conf" 300 | perl -i -pe "s/^logging_collector = on/logging_collector = off/" "$PGDATA/postgresql.conf" 301 | ``` 302 | 303 | 323 | 324 | We can now test whether PostgreSQL has been correctly installed by starting the database. To do this, we can run the following command: 325 | 326 | ```bash 327 | postgres 328 | ``` 329 | 330 | If it worked, it should print out some messages and end with the rectangular cursor on the left side of the screen: 331 | 332 |
333 | 334 | You will need to run this every time you want to use your database. 335 | 336 | When you want to stop PostgreSQL again, just stop it like any other command line program using the shortcut control-C. 337 | 338 | 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. 339 | 340 | Open a new tab in Hyper using control-shift-T and run the following command: 341 | 342 | ```bash 343 | psql -U postgres 344 | ``` 345 | 346 | It will ask you for a password - enter `postgres` (the password will not be visible). Now it should look like this:
347 | 348 |
349 | 350 | If your screen looks like the above screenshot, type in or copy and paste the following query (this is a language called SQL): 351 | 352 | ```sql 353 | CREATE TABLE users( 354 | id serial PRIMARY KEY, 355 | first_name VARCHAR (100) NOT NULL, 356 | last_name VARCHAR (100) NOT NULL 357 | ); 358 | ``` 359 | 360 | It should print `CREATE TABLE` on the line after running the query. Your screen should look like this:
361 | 362 |
363 | 364 | Now let's check that the table has been created. Run this query: 365 | 366 | ``` 367 | \dt 368 | ``` 369 | 370 | This will show the tables that you have, including the newly-created `users` table. Your screen should look like this (although the owner may be `postgres` on your screen):
371 | 372 |
373 | 374 | Finally, let's delete the table again to clean up. Exit the table view by typing q on your keyboard and then run this query: 375 | 376 | ```sql 377 | DROP TABLE users; 378 | ``` 379 | 380 | It should print `DROP TABLE` on the line after running the query. Your screen should look like this:
381 | 382 |
383 | 384 | Great, PostgreSQL is set up! 🚀 Now you can exit from `psql` again by writing `exit` and hitting return: 385 | 386 | ``` 387 | exit 388 | ``` 389 | 390 | 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):
391 | 392 |
393 | 394 | Now close the new tab in Hyper with control-W, and stop PostgreSQL again using control-C. PostgreSQL should shut down - your screen should look similar to this (the last line will not be exactly the same):
395 | 396 |
397 | 398 | 17. We will now install Docker. 399 | 400 | **Option A - Windows 10/11 Pro:** 401 | 402 | 1. Search for Hyper in the start menu, then right click on it and choose "Run as Administrator". 403 | 2. Copy the following text and paste it into Hyper. Hit enter. 404 | 405 | ```bash 406 | choco install wsl2 --yes 407 | choco install wsl-ubuntu-2004 --yes 408 | choco install docker-desktop --yes 409 | ``` 410 | 411 | 3. Open start menu and search for "Docker Desktop". Run it. This will set up and start Docker.
412 | You will need to run this every time you want to work with Docker after you restart. 413 | 414 | **Option B - Windows 10/11 Home:** 415 | 416 | 1. **Windows 10 only:** Click on the start menu, type in "winver" to the search and verify you have at least Windows 10 version 1903. If your number is lower than 1903, run Windows Update.
417 |
418 | 2. Search for Hyper in the start menu, then right click on it and choose "Run as Administrator". 419 | 3. Copy the following text and paste it into Hyper. Hit enter. 420 | 421 | ```bash 422 | choco install wsl2 --yes 423 | choco install wsl-ubuntu-2004 --yes 424 | choco install docker-desktop --yes 425 | ``` 426 | 427 | 4. Open the start menu and search for "Ubuntu". Start it - it should ask you to create a user with a password. This will be your user to log in to your Ubuntu Linux Subsystem - note down the username and password somewhere secure to make sure you do not forget it. 428 | 5. Open the start menu and search for "Docker Desktop". Start it and go to the Settings. Under the General tab, you will find an option called "Use WSL 2 based engine". Make sure this is checked. 429 | 430 | When opening Docker Desktop during Option A or Option B, an error message `Docker Desktop - Windows Hypervisor is not present` may appear:
431 | 432 |
433 | 434 | If this appears for you, follow the next steps to enable virtualization on your machine (if you don't receive the error, you can skip to the Docker testing step). 435 | 436 | 1. Close PowerShell and open it again as administrator (like in step 2). Copy the following text and right-click in the blue middle part of the PowerShell window to paste the text. Hit enter. 437 | 438 | ```bash 439 | Get-ComputerInfo -Property HyperVRequirementVMMonitorModeExtensions,HyperVRequirementVirtualizationFirmwareEnabled | Format-List 440 | ``` 441 | 442 | This should display the following output: 443 | 444 | ```bash 445 | HyperVRequirementVMMonitorModeExtensions: True 446 | HyperVRequirementVirtualizationFirmwareEnabled: False 447 | ``` 448 | 449 | The output indicates that your machine supports virtualization, but it is not enabled. Ensure that your output is the same before proceeding with the steps below to enable virtualization. 450 | 451 | 2. Restart your machine 452 | 3. As soon as the monitor turns black during restart, press the BIOS key or UEFI key for your machine repeatedly. If you're not sure what that key is, either try to read the key on the screen quickly as your machine restarts or refer to BIOS key documentation online eg. [the guide by the University of Wisconson-Madison](https://kb.wisc.edu/helpdesk/page.php?id=58779) (common keys are Delete, Esc, F1, F2, F9, F10 or F12) 453 | 4. On some machines, you will need to find and select the option to enter the BIOS / UEFI after hitting the hotkey 454 | 5. Find the virtualization option for your machine and enable it. If you're not sure what the option is called, refer to the [virtualization options here](https://support.microsoft.com/en-us/windows/enable-virtualization-on-windows-11-pcs-c5578302-6e43-4b4b-a449-8ced115f58e1) (often in `Advanced` settings, common names are `Virtualization`, `VMX`, `VT-x`, `VT-d`, `AMD-V`, or `SVM`) 455 | 6. Find and select the option to save changes and exit the BIOS / UEFI 456 | 7. Open Docker Desktop again (as instructed in Option A or Option B) to verify that the error has been resolved 457 | 458 | 18. Test if Docker is installed by running the following command on the command line: 459 | 460 | ```bash 461 | docker run hello-world 462 | ``` 463 | 464 | It should print out a welcome message like this:
465 |
466 | 467 | 19. We will now install EAS CLI for React Native. Search for Hyper in the start menu, then right click on it and choose "Run as Administrator". 468 | 469 | Copy the following text, paste it in Hyper and hit return. 470 | 471 | ```bash 472 | pnpm add --global eas-cli 473 | ``` 474 | 475 | You can ignore the lines marked `WARN` - these do not indicate problems:
476 | 477 |
478 | 479 | Lastly, we'll install Expo on your phone, so that you can also test on a real device. 480 | 481 | On your phone, go to the app store and install Expo on your phone ([Android](https://play.google.com/store/apps/details?id=host.exp.exponent&hl=en&gl=US), [iOS](https://apps.apple.com/us/app/expo-go/id982107779)). Create an account and log in. 482 | 483 | 20. Next we will set up some dependencies for Expo and React Native. 484 | 485 | Copy each line in the following text, paste it in Hyper and hit return. 486 | 487 | ```bash 488 | choco install androidstudio --yes 489 | echo "export PATH=$HOME/AppData/Local/Android/Sdk/platform-tools:\$PATH" >> ~/.bash_profile 490 | source ~/.bash_profile 491 | ``` 492 | 493 | This will install Android Studio, for creating and running Android virtual devices in an emulator. 494 | 495 | Open Android Studio by finding it using the Start menu. 496 | 497 | If it asks to import Android Studio Settings, choose **Do not import settings**. 498 | 499 | When prompted, choose a **Custom** install:
500 | 501 |
502 | 503 | Leave the default JDK installation location as-is and click **Next**:
504 | 505 |
506 | 507 | Uncheck the box next to **Android Virtual Device** (we will install our own manually):
508 | 509 |
510 | 511 | 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:
512 | 513 |
514 | 515 | This will download components, which may take a few minutes:
516 | 517 |
518 | 519 | Next will be getting a virtual device installed. Click on **More Actions** and select **Virtual Device Manager**:
520 | 521 |
522 | 523 | Click on the **Create device** button on the top left of the window:
524 | 525 |
526 | 527 | Select the Pixel 3a as the hardware device. 528 | 529 | Under the **Recommended** tab (the default tab), locate the system image named **S** (API level 31) and click on the downward arrow icon (download button) next to it. In the window that pops up, accept the license agreement and click **Next**:
530 | 531 |
532 | 533 | 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:
534 | 535 |
536 | 537 | 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:
538 | 539 |
540 | 541 | 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". 542 | 543 | 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 Hyper command line (open a new tab): 544 | 545 | ```bash 546 | adb 547 | ``` 548 | 549 | It should print the version and help information:
550 | 551 |
552 | 553 | 21. To verify that Expo is working with the Android Studio virtual device copy and run each of these lines separately in Hyper: 554 | 555 | 556 | 557 | ```bash 558 | cd ~ 559 | mkdir -p projects 560 | cd projects 561 | pnpm create expo-app@latest --template blank-typescript expo-test 562 | cd expo-test 563 | pnpm start --android 564 | ``` 565 | 566 | This will create a new Expo demo app and start it. 567 | 568 | 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. 569 | 570 | The first thing that you will see is the installation of Expo Go on the virtual device:
571 | 572 |
573 | 574 | 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:
575 | 576 |
577 | 578 |
579 | 580 | 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!" (if it instead says "Universal React with Expo", this is also ok):
581 | 582 |
583 | 584 | 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. 585 | 586 | 22. If you don't have one yet, create a Google account [here](https://accounts.google.com/signup?hl=en). Make a note of the email address associated with this account for usage in later steps. 587 | 23. If you don't have one yet, create a GitHub account [here](https://github.com/join). Make sure to set a name. 588 | 589 | If you already have a GitHub account and you haven't set a name on GitHub yet, go to the [GitHub Profile Settings](https://github.com/settings/profile) and add a name:
590 |
591 | We will use this name in the next step.
592 | 593 | 24. For this step, we'll need to **edit some of the information in the commands** by adding our own information.
594 | First of all, we will set our name, which will be the same name as on our GitHub profile:
595 |
596 | Copy your name from your profile, **add it in quotes** in the command (replace `Mona Lisa Octocat`) and run the command:
597 | ```bash 598 | git config --global user.name "Mona Lisa Octocat" 599 | ``` 600 | 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):
601 | ```bash 602 | git config --global user.name 603 | ``` 604 |
For running the next command, **add your email in quotes**:
605 | ```bash 606 | git config --global user.email "monalisaoctocat@example.com" 607 | ``` 608 | 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):
609 | ```bash 610 | git config --global user.email 611 | ``` 612 | This prepares `git` so that your work is attributed correctly to you.
613 | 614 | 619 | 620 | 25. Copy the following text, paste it in Hyper and hit return.
621 | ```bash 622 | git config --global init.defaultBranch main 623 | ``` 624 | This step will change the default Git branch from `master` to `main` (see https://github.com/github/renaming).
625 | 26. Copy and run each of these lines separately in Hyper.
626 | ```bash 627 | git config --global core.autocrlf false 628 | git config --global core.eol lf 629 | ``` 630 | This step will improve line breaks compatibility on Windows. 631 | 27. Go back to GitHub, and go to your profile page by clicking on your avatar at the top right and selecting **Your profile**
632 |
633 | Copy the `github.com/...` URL in the address bar of your browser, for use in the next step. 634 | 28. Open the Start menu and start Slack. Log in to the UpLeveled Slack. Send your GitHub profile URL to [Karl](slack://user?team=TFFSPKL92&id=UFG252SH0). Also send your Google Account email address to Karl (if you haven't already). 635 | 29. Open the start menu, type "Settings", open the app (or click on the cog on the left) and copy and send two sets of details: 636 | - Select "System" and "About". Under "Device specifications", click the Copy button and paste this to Karl 637 | - Under "Windows specifications", click the Copy button and paste this to Karl 638 | 30. On your phone, go to the app store and install Slack on your phone. Log in to the UpLeveled Slack. 639 | 640 | ## Optional Software 641 | 642 | 1. If you would like to check the spelling of all code you write in VS Code, try out [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker). You can install on the command line with this command: 643 | 644 | ```bash 645 | code --install-extension streetsidesoftware.code-spell-checker 646 | ``` 647 | 648 | 2. If you want to easily capture screenshots and draw and write on them, try Flameshot: 649 | 650 | ```bash 651 | choco install flameshot --yes 652 | ``` 653 | 654 | 3. If you need to record mp4 videos of your screen with sound, try out [Loom](https://www.loom.com/). 655 | 656 | An alternative without the limitations of Loom is Screen to Gif (however, it does not record audio): 657 | 658 | ```bash 659 | choco install screentogif --yes 660 | ``` 661 | 662 | 4. If you need a clipboard manager to keep a history of things that you have copied, this is an awesome option: 663 | 664 | ```bash 665 | choco install ditto --yes 666 | ``` 667 | 668 | 5. To simultaneously test your web design in multiple mobile viewports, try Responsively App: 669 | 670 | ```bash 671 | choco install responsively --yes 672 | ``` 673 | 674 | 6. To remove secrets, large files or other undesirable files from your Git repository, try BFG Repo-Cleaner: 675 | 676 | ```bash 677 | choco install bfg-repo-cleaner --yes 678 | ``` 679 | 680 | 7. If you're running out of space on your computer, you can use WinDirStat to analyze your hard drive and show a chart of which items are taking up how much space: 681 | 682 | ```bash 683 | choco install windirstat --yes 684 | ``` 685 | 686 | 8. To add [an assortment of new features](https://www.fourth-wall.co.uk/post/powertoys-11-awesome-features-microsoft-won-t-add-to-windows) to Windows such as "pinning" a window to stay on top of all others, quickly renaming or resizing multiple files, splitting your running apps into regions of the screen and more, try Microsoft PowerToys: 687 | 688 | ```bash 689 | choco install powertoys --yes 690 | ``` 691 | 692 | ## Software Upgrades 693 | 694 | Most software upgrades can be performed with `choco upgrade