Skip to content

Latest commit

 

History

History
457 lines (307 loc) · 13.5 KB

windows-10-setup.md

File metadata and controls

457 lines (307 loc) · 13.5 KB
Raw

Windows 10 Computer Setup for EDA

Instructions to help you set up the Linux subsystem on Windows 10

Pro-tip: There's a copy button hidden in the top-right of each code block for easy copy/pasting.

Screen Shot of clicking on the copy button

We'll be doing all our work inside a Windows Subsystem for Linux (WSL) environment. This means you'll need to work through all the setup steps below, even if you've already been using node, VS Code, etc. in your Windows environment.

1. Installing WSL

Go to the start Menu and type Check for updates. Make sure that your Windows has the most recent updates (Optional as well as Recommended ones, but you don't need to upgrade to Windows 11 if you don't want to).

  • Press the Windows key and type winver and press Enter
  • Confirm that your Windows is version 2004 and higher (Build 19041 and higher) or any Windows 11 version
  • If your Windows version is less than Build 19041, let one of the facilitators know

Go to the Start Menu and open Windows Powershell as an Administrator

  • Put this command in Powershell wsl --install and hit enter
  • Restart your computer

Open Ubuntu from the Start Menu and let it finish installation:

  • When prompted, enter a username (e.g. your first name) and a password - this is the username that Linux will run as by default
  • IMPORTANT: When you type in your password, you will notice nothing happens, this is a feature in Linux for security purposes.
  • For Full Name, Room Number, etc. you can hit Enter to leave them blank
  • If it says installing for more than 5 minutes, close the Ubuntu window and re-open it

2. Configure your Windows Terminal

Open your Windows Terminal application (find this by typing Windows Terminal in the Start menu, it is NOT the same as Powershell) and select the dropdown next to the new tab button then select Settings, then "Open JSON file"

Scroll down until you find this section:

{
    "guid": "{07b52e3e-de2c-5db4-bd2d-ba144ed6c273}",
    "hidden": false,
    "name": "Ubuntu-20.04",
    "source": "Windows.Terminal.Wsl"
},

Copy the value of the "guid" field, then paste it in to the defaultProfile property near the top of the file.

"defaultProfile": "{07b52e3e-de2c-5db4-bd2d-ba144ed6c273}",

Next, add these properties to the Ubuntu section (the same section you got the "guid" from in the previous step)

"colorScheme": "One Half Dark",
"startingDirectory": "\\\\wsl$\\Ubuntu20.04LTS\\home\\[your_Linux_username]"

Once you have pasted it in, your Linux section should look like this (but instead of maia, it would say YOUR username):

{
    "guid": "{07b52e3e-de2c-5db4-bd2d-ba144ed6c273}",
    "hidden": false,
    "name": "Ubuntu20.04LTS",
    "source": "Windows.Terminal.Wsl",
    "colorScheme": "One Half Dark",
    "startingDirectory": "\\\\wsl$\\Ubuntu20.04LTS\\home\\maia"
},

Note that the "source": "Windows.Terminal.Wsl", line needs a comma at the end of it.

If you see a 'network name cannot be found' error when you load windows terminal double check that the "name" part of the json (ie "Ubuntu20.04LTS" in the above example) exatly matches the bit between wsl$\\[exact-name-match-here]\\home in the "startingDirectory" part.

3. Setup Visual Studio Code

Install Visual Studio Code if it isn't already installed

https://code.visualstudio.com/download

In your terminal, open VS Code with:

code .

(don't open VS Code from the Start Menu, desktop link or any other way)

If this is the first time you have installed VS Code you may need to close your terminal and open it again (Start menu : Windows Terminal) to reload the VS Code settings.

3.1 Installing extensions

Install the following VS Code extensions

  • ESLint
  • Prettier
  • Remote - WSL
  • Live Share
  • vscode-icons (optional, but pretty 😉)
  • GitLens (optional)

In your Ubuntu terminal, run:

code --list-extensions

You should see the IDs of each of these extensions logged like this:

dbaeumer.vscode-eslint
esbenp.prettier-vscode
ms-vsliveshare.vsliveshare
vscode-icons-team.vscode-icons
eamodio.gitlens

If you have installed these previously in Windows, you may have to reinstall them for WSL.

3.2 Visual Studio Code settings

In VS Code:

  1. click the Settings cog button in the bottom left and open the Command Palette.
  2. Type settings.json into the little search box that appears at the top of your scree
  3. click on the Preferences: Open Settings (JSON) option to open your settings.json config file.

Paste these contents inside the curly brackets:

 "editor.detectIndentation": false,
 "editor.insertSpaces": true,
 "editor.tabSize": 2,
 "editor.codeActionsOnSave": { "source.fixAll.eslint": true },
 "editor.bracketPairColorization.enabled": true,
 "editor.guides.bracketPairs":"active",
 "[javascript]": {
   "editor.formatOnSave": true,
   "editor.defaultFormatter": "esbenp.prettier-vscode"
 },
  "[javascriptreact]": {
   "editor.formatOnSave": true,
   "editor.defaultFormatter": "esbenp.prettier-vscode"
 },
 "prettier.semi": false,
 "prettier.singleQuote": true

Note that each entry in your settings.json should end in a comma except for the last one, so if there are some existing entries you'll need to add a comma before pasting the above lines

4. Installing linux software

To install most of the linux software you need, we'll run three commands.

This one updates your package sources:

sudo apt-get update

This will install all the packages we need (it might take a while):

sudo apt-get install build-essential python-is-python3 zsh

finally, this will set zsh as your default shell:

chsh -s $(which zsh)

If those all succeeded, you can restart your Ubuntu terminal, and you should be in zsh

If you get a page full of info about "This is the Z Shell configuration for new users...", press q (Quit and do nothing)

Run this command to confirm python installed correctly

which python

Anything except "python not found" is okay here.

4.1 Installing oh-my-zsh

We're going to install oh-my-zsh to make your terminal/shell experience a bit more pleasant.

Oh My Zsh is a delightful, open source, community-driven framework for managing your Zsh configuration. It comes bundled with thousands of helpful functions, helpers, plugins, themes, and a few things that make you shout...

Enter this command into your Ubuntu terminal (note that it's one long line, even if it displays as two lines on the page where you're reading this):

sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

4.2 Configuring ZSH

Zsh installs a command omz to configure itself. To set your theme to "bira" run:

omz theme set bira

For the remainder of these setup instructions, and at the start of Bootcamp, when we say "terminal" we mean this Ubuntu terminal, i.e. an Ubuntu tab within the Windows Terminal application -- you'll know it's right if you can see the penguin!

At the bottom of this file we'll tell you how to run a terminal within VS Code but please use the Ubuntu terminal for these setup instructions and for any npm install actions throughout Bootcamp, and please don't use Git Bash for any Bootcamp work

If the prompt in your terminal is now a little arrow and a tilde (~), instead of "yourname@...", that's OK (you'll change it again in a later step)

4.3 Starting in the right directory

Restart your terminal.

If your terminal is opening at a / (or [user]@machineId /) prompt instead of a ~ (or [user]@machineId ~) prompt, this means the terminal is opening at root.

To make it open at home (~) instead. We're going to run this snippet to add a couple more lines to the bottom of your ~/.zshrc file.

cat << 'EOF' >> ~/.zshrc
if [[ $(pwd) == / ]]; then
    cd ~
fi
EOF

Restart your terminal.

You should now be at the home directory ~.

4.4 Install NVM

NVM is a tool to install and manage NodeJS versions.

First, check if you have node installed

which node

If that logs a path in "Program Files", you've installed NodeJS at some point with the official installer. Open Add/Remove Programs from the Start Menu and uninstall NodeJS.

If it logs "node not found", that's perfect. We want NVM to manage node and npm on our dev machine.

Enter this command into your terminal to download and install nvm:

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

This command will initialise NVM when you open a terminal

cat << 'EOF' >> ~/.zshrc
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion
EOF

Now run this command to reload your ~/.zshrc

omz reload

4.5 Installing Node and NPM with NVM

Install the latest "Long Term Support" (i.e. very stable) version of node

Run this command in your terminal:

nvm install --lts

Then, also in your terminal, run:

nvm alias default node

To confirm, run this command. We're expecting something in the v16.x range

nvm current

4.6 Building sqlite3

sqlite3 is a database package that we use a lot during bootcamp. At this point you should be set up with everything you need to build it.

Run this command to confirm:

npx --yes @donothing/can-u-build-sqlite3

If it succeeds it will log Everything looks good

5. Configure WSL

Limit your WSL virtual machine so that it can't consume too much RAM

  • In File Explorer (aka "Windows Explorer" or "This PC"), go to C:\Users\[your_Windows_username]
  • On the View tab, tick the checkboxes for File name extensions and Hidden items
  • Right-click in your C:\Users\[your_Windows_username] folder and choose New then Text Document; this will open up Notepad
  • Rename the new file as .wslconfig, making sure that it does NOT have an extra .txt extension
  • Paste this text into body of the .wslconfig file, and then save it:
[wsl2]
memory=2GB # Limits VM memory in WSL2 to 2 GB
processors=2 # Makes the WSL2 VM use two virtual processors

Restart your PC

6. Cloning your first repo

We're going to clone a repo into your ubuntu setup to make sure everything is working fine.

We'll start by creating a directory to keep all your repos in

mkdir ~/devacademy

and then change directory into it:

cd ~/devacademy

For these next two commands, replace the name and email with your own details

You'll need to configure git to know your name...

git config --global user.name "Firstname Lastname"

... and your email address. These will be recorded as the author in commits you make

git config --global user.email "[email protected]"

If you prefer git to save your credentials instead of entering them each time, you can configure git to store them

git config --global credential.helper store

Run this command to make visual studio code your default editor for git commit messages

git config --global core.editor "code --wait"

Now go to your github tokens page and create a new token

  • It can be called anything, but I use something like "home laptop"
  • It needs the "repo" permissions so make sure to check that checkbox
  • Set the expiration to 90 days, so that it lasts all bootcamp
  • make sure you copy the token before you close that tab

From your Ubuntu terminal, clone down javascript-carnival

git clone https://github.com/dev-academy-foundations/javascript-carnival

Because we are using https, github will ask for your username and password.

  • the username is your github username
  • the password is your github token, so paste it in with a right-click when prompted

This should be the last time

Now we're going change directory into the new directory:

cd javascript-carnival

and open Visual Studio Code

code .

Now you should be looking at the javascript-carnival exercise in your editor.

Running code . from the ubuntu terminal is the way we will open Visual Studio Code during bootcamp. This ensures it opens in the Ubuntu context

Run this command in your Ubuntu terminal:

Explorer.exe .

Windows explorer will open that directory.

This is a quick and easy way to access your Linux files from windows if you ever need to.

7. You're all set up

Run this checklist to double-check everything:

npx --yes @donothing/checklist

You should see something like this (all ticks, no crosses, 0/x failed)

Shell environment:

 [ ✓ ] darwin
 [ ✓ ] $SHELL = /bin/zsh
 [ ✓ ] ZSH version = zsh 5.8 (x86_64-apple-darwin21.0)

Node setup:

 [ ✓ ] /Users/gerard/.nvm exists
 [ ✓ ] NVM config found in ~/.zshrc
 [ ✓ ] Node version = v16.13.2
 [ ✓ ] NPM version = 8.5.0

Visual studio code:

 [ ✓ ] Visual Studio Code version = 1.65.2
 [ ✓ ] Git editor is code --wait
 [ ✓ ] VSCode extension 'dbaeumer.vscode-eslint' installed
 [ ✓ ] VSCode extension 'esbenp.prettier-vscode' installed
 [ ✓ ] VSCode extension 'ms-vsliveshare.vsliveshare' installed
 [ ✓ ] VSCode extension 'eamodio.gitlens' installed
 [ ✓ ] VSCode extension 'vscode-icons-team.vscode-icons' installed

Build requirements (for node-gyp):

 [ ✓ ] Git version = git version 2.32.0 (Apple Git-132)
 [ ✓ ] Found cc = /usr/bin/cc
 [ ✓ ] Found make = /usr/bin/make
 [ ✓ ] Found python version: Python 3.8.9 at /usr/bin/python3

RESULT: (0/21) checks failed