ubuntu.md

Setup instructions

You will find below the instructions to set up you computer for Le Wagon Web Development course.

Please read them carefully and execute all commands in the following order.

If you get stuck, don't hesitate to ask a teacher for help 🙋

You can also have a look at our cheatsheets for common issue fixes and tips ✔️

Let's start 🚀

Zoom

To be able to interact when we are not in the same physical room, we will be using Zoom, a video conferencing tool.

⚠️ If you already have Zoom installed, please make sure that the version is at least 5.6.

Go to zoom.us/download.

Under Zoom Client click the Download button.

Open the file you have just downloaded to install the app.

Open the Zoom app.

If you already have a Zoom account, sign in using your credentials.

If not, click on the Sign Up Free link:

You will be redirected to Zoom's website to complete a form.

When it's done, go back to the Zoom app and sign in using your credentials.

You should then see a screen like this:

You can now close the Zoom app.

GitHub account

Have you signed up to GitHub? If not, do it right away.

👉 Upload a picture and put your name correctly on your GitHub account. This is important as we'll use an internal dashboard with your avatar. Please do this now, before you continue with this guide.

Visual Studio Code

Installation

Let's install Visual Studio Code text editor.

Copy (Ctrl + C) the commands below then paste them in your terminal (Ctrl + Shift + v):

wget -qO- https://packages.microsoft.com/keys/microsoft.asc | gpg --dearmor > packages.microsoft.gpg
sudo install -o root -g root -m 644 packages.microsoft.gpg /etc/apt/trusted.gpg.d/
sudo sh -c 'echo "deb [arch=amd64,arm64,armhf signed-by=/etc/apt/trusted.gpg.d/packages.microsoft.gpg] https://packages.microsoft.com/repos/code stable main" > /etc/apt/sources.list.d/vscode.list'
rm -f packages.microsoft.gpg
sudo apt update
sudo apt install -y code

These commands will ask for your password: type it in.

⚠️ When you type your password, nothing will show up on the screen, that's normal. This is a security feature to mask not only your password as a whole but also its length. Just type in your password and when you're done, press Enter.

Launching from the terminal

Now let's launch VS Code from the terminal:

code

✔️ If a VS Code window has just opened, you're good to go 👍

❌ Otherwise, please contact a teacher

VS Code Extensions

Installation

Let's install some useful extensions to VS Code.

Copy-paste the following commands in your terminal:

code --install-extension ms-vscode.sublime-keybindings
code --install-extension emmanuelbeziat.vscode-great-icons
code --install-extension github.github-vscode-theme
code --install-extension MS-vsliveshare.vsliveshare
code --install-extension rebornix.ruby
code --install-extension dbaeumer.vscode-eslint
code --install-extension Rubymaniac.vscode-paste-and-indent
code --install-extension alexcvzz.vscode-sqlite

Here is a list of the extensions you are installing:

• Sublime Text Keymap and Settings Importer
• VSCode Great Icons
• Live Share
• Ruby
• ESLint
• Paste and Indent
• SQLite

Live Share configuration

Visual Studio Live Share is a VS Code extension which allows you to share the code in your text editor for debugging and pair-programming: let's set it up!

Launch VS Code from your terminal by typing code and pressing Enter.

Click on the little arrow at the bottom of the left bar 👇

• Click on the "Share" button, then on "GitHub (Sign in using GitHub account)".
• A popup appears asking you to sign in with GitHub: click on "Allow".
• You are redirected to a GitHub page in you browser asking you to authorize Visual Studio Code: click on "Continue" then "Authorize github".
• VS Code may display additional pop-ups: close them by clicking "OK".

That's it, you're good to go!

Command line tools

Zsh & Git

Instead of using the default bash shell, we will use zsh.

We will also use git, a command line software used for version control.

Let's install them, along with other useful tools:

• Open an Ubuntu terminal
• Copy and paste the following commands:

sudo apt update
sudo apt install -y curl git imagemagick jq unzip vim zsh

These commands will ask for your password: type it in.

⚠️ When you type your password, nothing will show up on the screen, that's normal. This is a security feature to mask not only your password as a whole but also its length. Just type in your password and when you're done, press Enter.

GitHub CLI installation

Let's now install GitHub official CLI (Command Line Interface). It's a software used to interact with your GitHub account via the command line.

In your terminal, copy-paste the following commands and type in your password if asked:

curl -fsSL https://cli.github.com/packages/githubcli-archive-keyring.gpg | sudo dd of=/usr/share/keyrings/githubcli-archive-keyring.gpg
echo "deb [arch=$(dpkg --print-architecture) signed-by=/usr/share/keyrings/githubcli-archive-keyring.gpg] https://cli.github.com/packages stable main" | sudo tee /etc/apt/sources.list.d/github-cli.list > /dev/null
sudo apt update
sudo apt install -y gh

To check that gh has been successfully installed on your machine, you can run:

gh --version

✔️ If you see gh version X.Y.Z (YYYY-MM-DD), you're good to go 👍

❌ Otherwise, please contact a teacher

Oh-my-zsh

Let's install the zsh plugin Oh My Zsh.

In a terminal execute the following command:

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

If asked "Do you want to change your default shell to zsh?", press Y

At the end your terminal should look like this:

✔️ If it does, you can continue 👍

❌ Otherwise, please ask for a teacher

GitHub CLI

CLI is the acronym of Command-line Interface.

In this section, we will use GitHub CLI to interact with GitHub directly from the terminal.

It should already be installed on your computer from the previous commands.

First in order to login, copy-paste the following command in your terminal:

⚠️ DO NOT edit the email

gh auth login -s 'user:email' -w

gh will ask you few questions:

What is your preferred protocol for Git operations? With the arrows, choose SSH and press Enter. SSH is a protocol to log in using SSH keys instead of the well known username/password pair.

Generate a new SSH key to add to your GitHub account? Press Enter to ask gh to generate the SSH keys for you.

If you already have SSH keys, you will see instead Upload your SSH public key to your GitHub account? With the arrows, select your public key file path and press Enter.

Enter a passphrase for your new SSH key (Optional). Type something you want and that you'll remember. It's a password to protect your private key stored on your hard drive. Then press Enter.

⚠️ When you type your passphrase, nothing will show up on the screen, that's normal. This is a security feature to mask not only your passphrase as a whole but also its length. Just type your passphrase and when you're done, press Enter.

You will then get the following output:

! First copy your one-time code: 0EF9-D015
- Press Enter to open github.com in your browser...

Select and copy the code (0EF9-D015 in the example), then press Enter.

Your browser will open and ask you to authorize GitHub CLI to use your GitHub account. Accept and wait a bit.

Come back to the terminal, press Enter again, and that's it.

To check that you are properly connected, type:

gh auth status

✔️ If you get Logged in to github.com as <YOUR USERNAME> , then all good 👍

❌ If not, contact a teacher.

Dotfiles (Standard configuration)

Hackers love to refine and polish their shell and tools.

We'll start with a great default configuration provided by Le Wagon: lewagon/dotfiles.

As your configuration is personal, you need your own repository storing it. So you will fork Le Wagon repository.

Forking means that you will create a new repo in your own GitHub account $GITHUB_USERNAME/dotfiles, identical to the original Le Wagon one that you will be able to modify at will.

Open your terminal and run the following commands:

export GITHUB_USERNAME=`gh api user | jq -r '.login'`
echo $GITHUB_USERNAME

✔️ You should see your GitHub username printed.

❌ If not, stop here and ask for help. There may be a problem with the previous step (gh auth).

Time to fork the repo and clone it on your computer:

mkdir -p ~/code/$GITHUB_USERNAME && cd $_
gh repo fork lewagon/dotfiles --clone

Dotfiles installer

Run the dotfiles installer:

cd ~/code/$GITHUB_USERNAME/dotfiles
zsh install.sh

Check the emails registered with your GitHub Account. You'll need to pick one at the next step:

gh api user/emails | jq -r '.[].email'

✔️ If you see the list of your registered emails, you can proceed 👍

❌ If not, please reauthenticate to GitHub before running this command ☝️ again.

git installer

Run the git installer:

cd ~/code/$GITHUB_USERNAME/dotfiles && zsh git_setup.sh

☝️ This will prompt you for your name (FirstName LastName) and your email.

⚠️ You need to put one of the email listed above thanks to the previous gh api ... command. If you don't do that, Kitt won't be able to track your progress.

Please now reset your terminal by running:

exec zsh

Disable SSH passphrase prompt

You don't want to be asked for your passphrase every time you communicate with a distant repository. So, you need to add the plugin ssh-agent to oh my zsh:

First, open the .zshrc file:

code ~/.zshrc

Then:

• Spot the line starting with plugins=
• Add ssh-agent at the end of the plugins list

The list should look like:

plugins=(gitfast last-working-dir common-aliases zsh-syntax-highlighting history-substring-search pyenv ssh-agent)

✔️ Save the .zshrc file with Ctrl + S and close your text editor.

rbenv

Let's install rbenv, a software to install and manage ruby environments.

First, we need to clean up any previous Ruby installation you might have:

rvm implode && sudo rm -rf ~/.rvm
# If you got "zsh: command not found: rvm", carry on.
# It means `rvm` is not on your computer, that's what we want!
rm -rf ~/.rbenv

Then in the terminal, run:

sudo apt install -y build-essential tklib zlib1g-dev libssl-dev libffi-dev libxml2 libxml2-dev libxslt1-dev libreadline-dev

git clone https://github.com/rbenv/rbenv.git ~/.rbenv

git clone https://github.com/rbenv/ruby-build.git ~/.rbenv/plugins/ruby-build
exec zsh

Ruby

Installation

Now, you are ready to install the latest ruby version and set it as the default version.

Run this command, it will take a while (5-10 minutes)

rbenv install 3.1.2

Once the ruby installation is done, run this command to tell the system to use the 3.1.2 version by default.

rbenv global 3.1.2

Reset your terminal and check your Ruby version:

exec zsh

Then run:

ruby -v

✔️ If you see something starting with ruby 3.1.2p then you can proceed +1:

❌ If not, ask a teacher

Installing some gems

If you are in China 🇨🇳 click here

⚠️ If you are in China, you should update the way we'll install gem with the following commands.

# China only!
gem sources --remove https://rubygems.org/
gem sources -a https://gems.ruby-china.com/
gem sources -l
# *** CURRENT SOURCES ***
# https://gems.ruby-china.com/
# Ruby-china.com must be in the list now

Everyone, in China or not, continue here to install gems.

In the ruby world, we call external libraries gems: they are pieces of ruby code that you can download and execute on your computer. Let's install some!

In your terminal, copy-paste the following command:

gem install colored faker http pry-byebug rake rails rest-client rspec rubocop-performance sqlite3

✔️ If you get xx gems installed, then all good 👍

❌ If you encounter the following error:

ERROR: While executing gem ... (TypeError)
incompatible marshal file format (can't be read)
format version 4.8 required; 60.33 given

Run the following command:

rm -rf ~/.gemrc

Rerun the command to install the gems.

⚠️ NEVER install a gem with sudo gem install! Even if you stumble upon a Stackoverflow answer (or the terminal) telling you to do so.

Node.js

Node.js is a JavaScript runtime to execute JavaScript code in the terminal. Let's install it with nvm, a version manager for Node.js.

In a terminal, execute the following commands:

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

Then run the following command:

nvm -v

You should see a version. If not, ask a teacher.

Now let's install node:

nvm install 16.15.1

When the installation is finished, run:

node -v

If you see v16.15.1, the installation succeeded ✔️ You can then run:

nvm cache clear

❌ If not, contact a teacher

yarn

yarn is a package manager to install JavaScript libraries. Let's install it:

In a terminal, run the following commands:

npm install --global yarn
exec zsh

Then run the following command:

yarn -v

✔️ If you see a version, you're good 👍

❌ If not, ask for a teacher

SQLite

In a few weeks, we'll talk about databases and SQL. SQLite is a database engine used to execute SQL queries on single-file databases. Let's install it:

In a terminal, execute the following commands:

sudo apt-get install sqlite3 libsqlite3-dev

Then run the following command:

sqlite3 -version

✔️ If you see a version, you're good 👍

❌ If not, ask for a teacher

PostgreSQL

Sometimes, SQLite is not enough and we will need a more advanced tool called PostgreSQL, an open-source robust and production-ready database system.

Let's install it now.

Run the following commands:

sudo apt install -y postgresql postgresql-contrib libpq-dev build-essential

sudo -u postgres psql --command "CREATE ROLE \"`whoami`\" LOGIN createdb;"

Check-up

Let's check if you successfully installed everything.

In you terminal, run the following command:

exec zsh

Then run:

curl -Ls https://raw.githubusercontent.com/lewagon/setup/master/check.rb > _.rb && ruby _.rb && rm _.rb || rm _.rb

:check_mark: If you get a green Awesome! Your computer is now ready!, then you're good 👍

❌ If not, contact a teacher.

Kitt

⚠️ If you have received an email from Le Wagon inviting you to sign up on Kitt (our learning platform), you can safely skip this step. Instead, please follow the instructions in the email you received if you haven't done so already.

If you are unsure about what to do, you can follow this link. If you are already logged in, you can safely skip this section. If you are not logged in, click on Enter Kitt as a Student. If you manage to login, you can safely skip this step. Otherwise ask a teacher whether you should have received an email or follow the instructions below.

Register as a Wagon alumni by going to kitt.lewagon.com/onboarding. Select your batch, sign in with GitHub and enter all your information.

Your teacher will then validate that you are indeed part of the batch. You can ask him to do it as soon as you completed the registration form.

Once the teacher has approved your profile, go to your email inbox. You should have 2 emails:

• One from Slack, inviting you to the Le Wagon Alumni slack community (where you'll chat with your buddies and all the previous alumni). Click on Join and fill the information.
• One from GitHub, inviting you to lewagon team. Accept it otherwise you won't be able to access the lecture slides.

Slack

Slack is a communcation platform pretty popular in the tech industry.

Installation

Download the Slack app and install it.

⚠️ If you are already using Slack in your browser, please download and install the desktop app which is fully featured.

Settings

Launch the app and sign in to lewagon-alumni organization.

Make sure you upload a profile picture 👇

The idea is that you'll have Slack open all day, so that you can share useful links / ask for help / decide where to go to lunch / etc.

To ensure that everything is working fine for video calls, let's test your camera and microphone:

• Open the Slack app
• In any channel message bar type /call --test and press Enter
• Click on the "Start test" green button

✔️ When the test is finished, you should see green "Succeed" messages at least for your microphone and camera. 👍

❌ If not, contact a teacher.

You can also install Slack app on your phone and sign in lewagon-alumni!

Ubuntu settings

Install video codec H264

On our pedagogical platform (Kitt, you'll soon discover it!), we have some videos. By default Firefox on Linux cannot play them as they use an unsupported codec (H264). To get those videos working for you, you need to run this:

sudo apt install libavcodec-extra -y

Install useful terminal tools

tree is a nice tool to visualize a directory tree inside the terminal:

ncdu is a text-based interface disk utility.

htop is an interactive process viewer.

tig is a text-mode interface for git.

sudo apt install tree ncdu htop tig

Ubuntu inotify

Ubuntu is always tracking changes in your folders and to do this it uses inotify. By default the Ubuntu limit is set to 8192 files monitored.

As programming involves a lot of files, we need to raise this limit. In your terminal run:

echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

Pin apps to your dock

You are going to use most of the apps you've installed today really often. So let's pin them to your dock so that they are just one click away!

To pin an app to your dock, launch the app, right-click on the icon in the dock to bring up the context menu and choose "Add to Favorites".

You must pin:

• Your terminal
• Your file explorer
• VS Code
• Your Internet browser
• Slack
• Zoom

Setup completed!

Your computer is now all set for Le Wagon Web Development course 💪 👏

Enjoy the bootcamp, you will nail it 🚀