Forem: Vinícius Albuquerque

How to use Docker Toolbox via WSL1 (Debian)

Vinícius Albuquerque — Sun, 05 Jul 2020 00:33:00 +0000

Prerequisites

I assume you have already installed Docker Toolbox in your machine. If you have not, please refer to Docker's documentation.

Steps

1. Check your system's architecture and the version of your distro

It needs to be x86_64, amd64, armhf or arm64. It also needs to be one of those two versions of Debian:

Debian Buster 10 (stable)
Debian Stretch 9 / Raspbian Stretch

Of course you have to check it out if you're using another distro.

Run this on your WSL terminal to find out your system's architecture:

uname -m

And run this to find out the version of your distro:

cat /etc/os-release

It will return all the info you need to see if you can get everything working.

2. Install Docker client in your Debian distribution, via WSL

To do that, just run these two commands:

sudo apt-get update
sudo apt-get install docker-ce docker-ce-cli containerd.io

If you find something wrong along the line, maybe you are missing some features needed for the complete installation. Since the documentation includes steps you probably don't need if you have gone through some dev setup before, I cut it outhere. If you need, all those steps are also in Docker's documentation.

3. Setup WSL start settings:

Open /etc/wsl.conf and paste this in it:

[automount]
root = /
options = "metadata"

root = / defines the drivers root at "/c" or "/d" instead of "/mnt/c". This is done to avoid conflicts, since MINGW64, which is used by Docker Toolbox's quickstart terminal, uses that path structure.

options= "metadata" adds the metadata of the files, meaning you enable WSL to know permissions for the file both on Linux and on Windows. This just gives you an extra security so that the permissions of the file on Linux can be respected.

4. Setup terminal settings

Now, you must tell docker every time you run a command, where the host machine is. The host machine is the VM set up by Docker Toolbox's installer.

To avoid that, and use the commands as you would do anywhere else, you're going to change the configuration file for your terminal. Since I'm using Oh My Zsh!, my .zshrc file would do the trick.

Run this to edit the file on VS Code:

code ~/.zshrc

If you are using just bash, you should use ~/.bashrc. You can also use nano or vim to edit it directly in the terminal.

Then paste this at the end of your file:

export DOCKER_HOST="tcp://192.168.99.100:2376"
export DOCKER_TLS_VERIFY=1
export DOCKER_CERT_PATH="/c/Users/<your-user-name>/.docker/machine/certs"

OBS: Please change <your-user-name> to your Windows user name.

This will set up environment variables that will tell Docker's client the settings it should use when running its commands.

DOCKER_HOST should have the IP and port used to access the VM. It is common that Docker Toolbox use that IP, but you should change if it is different from the one you see after opening Docker Quickstart Terminal.

DOCKER_TLS_VERIFY is saying it must be verified if all connections are using TLS protocol. It uses symmetric cryptography to ensure data security. So, 1 is "ensure all connections are using TLS protocol" and 0 is "I don't care if it is insecure, bring it on".

DOCKER_CERT_PATH tells where Docker can find the certificates used on the TLS connection. Those certificates contain the decryption keys necessary to understand the data that comes and goes through the connection.

5. Log out of your Windows user account and log in again

This is needed so that the settings made to wsl.conf are loaded.

6. Test if it worked

From Start menu, open Docker Quickstart Terminal;
Wait until everything is fully loaded and you see the whale;
Open Debian;
Run docker run hello-world.

Conclusion

If you've followed the tutorial and need help at some point of it, please leave a comment. If you have found an answer to some problem you've had, please share with us.

How to Install Oh My Zsh! on Windows 10 Home Edition

Vinícius Albuquerque — Sat, 20 Jun 2020 19:31:16 +0000

As a developer, some tools may be a game changer for your productivity, but sometimes we just need to work in an environment that makes things easier for us.

If you're constantly making typos on commands, or everything being on the same color makes it difficult to see mistakes, it will not be a big deal when you analyze those mistakes alone. But in reality, those things pile up until you find it weird that you are so tired at the end of the day. And this happens because you are using a lot of your focus just to make sure everything is alright while you're working.

I this tutorial, I'll show you how to set up a terminal that makes things easier while working, so that you can focus on what is really important and stop wasting your energy on small things.

This is the result you should have at the end:

Warning: This tutorial is for people who are using Windows 10 Home Edition. It doesn't have Hyper-V, so the only way of having bash is via WSL1. If you have Hyper-V on your version, try installing WSL2. The rest of steps of the tutorial may be the same, though.

At the end, you will have:

An Oh My Zsh! terminal instance, with all the benefits it brings out of the box.
Spaceship Prompt theme applied, so that you have cool highlighting and signs that show the current state of the git repository you're in (if there are things changed that were not staged, staged but not committed, etc.).
Hyper as an alternative to open Oh My Zsh! with font ligature's feature.
Visual Studio Code shell integration, so that you can use it inside the IDE.
NVM and Node working on your terminal.

The Benefits

Automatic cd: Just type the name of the directory
Recursive path expansion: For example “/u/lo/b” expands to “/usr/local/bin”
Spelling correction and approximate completion: If you make a minor mistake typing a directory name, ZSH will fix it for you
Plugin and theme support: ZSH includes many different plugin frameworks

1. Activate "Windows for Linux Subsystem" Feature

Run this script on PowerShell:



dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart

Restart your machine.

2. Install a Linux Distribution

You shouldn't have problems in this step. Just open Microsoft Store App and search for a distro. In my case, I installed Debian.

3. Install Zsh

Open Debian from Start Menu. It will open a command prompt with the same features as Debian's terminal.

If you try to run sudo apt-get install zsh first, you may receive an error (Unable to locate package zsh). So, first you should run these two commands:



$ sudo apt-get update
$ sudo apt-get upgrade

Now you will be able to install Zsh properly, running:



$ sudo apt-get install zsh

When the installation is done, run this:



$ zsh

This will walk you through some basic configuration for zsh.

4. Install Oh My Zsh!

Install curl:



$ sudo apt-get install curl

Install Oh My Zsh!:



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

While installing, it will ask if you want to set zsh as standard. Answer the prompt as you wish.

5. Set the theme Spaceship Prompt as default for Oh My Zsh!

Install Git:



sudo apt-get install git

Clone the theme's repository:



git clone https://github.com/denysdovhan/spaceship-prompt.git "$ZSH_CUSTOM/themes/spaceship-prompt"

Symlink spaceship.zsh-theme to your oh-my-zsh custom themes directory:



ln -s "$ZSH_CUSTOM/themes/spaceship-prompt/spaceship.zsh-theme" "$ZSH_CUSTOM/themes/spaceship.zsh-theme"

Now you must edit Zsh configuration file so that Oh My Zsh! uses this theme. If you already have Visual Studio Code installed, you can open the file using the code bellow:



code ~/.zshrc

Add this line at the end of your .zshrc file:



Set ZSH_THEME="spaceship"

SPACESHIP_PROMPT_ORDER=(
  user          # Username section
  dir           # Current directory section
  host          # Hostname section
  git           # Git section (git_branch + git_status)
  hg            # Mercurial section (hg_branch  + hg_status)
  exec_time     # Execution time
  line_sep      # Line break
  vi_mode       # Vi-mode indicator
  jobs          # Background jobs indicator
  exit_code     # Exit code section
  char          # Prompt character
)
SPACESHIP_USER_SHOW=always
SPACESHIP_PROMPT_ADD_NEWLINE=false
SPACESHIP_CHAR_SYMBOL="❯"
SPACESHIP_CHAR_SUFFIX=" "

Before going ahead, you need to install Fira Code font. Follow the instructions here.

6. Install Hyper Terminal

You must have noticed the terminal is kinda buggy right now. It seems the fonts do not load properly. So, we will install Hyper to solve that problem. It will give you a pleasant experience, supporting all Spaceship Theme's features.

Just go to https://hyper.is and click the big download button, at the right on your screen. Then open it and follow the instructions.

After that, open Hyper and its "Preferences" file (Ctrl + ,).



{
  ...
  // add Fira Code as first font in font family with optional fallbacks
  fontFamily: '"Fira Code", Menlo, "DejaVu Sans Mono", "Lucida Console", monospace',
  ...
  shell: 'C:\\Users\\<your-user-name>\\AppData\\Local\\Microsoft\\WindowsApps\\debian.exe',
  shellArgs: [],
  ...
}

Important: Change <your-user-name> to your username on Windows. If you have installed other Linux distribution, change shell path accordingly. I believe all distributions installed via Microsoft Store will be at the same place, but I don't know for sure.

Another important thing: Your shellArgs attribute must be an empty array, otherwise it will not work.

I like the theme Dracula for Hyper. If you wish that too, add this on the config file too:



plugins: [
  'hyper-dracula'
]

7. Add plugins to your terminal

Now we're going to add some cool features:

fast-syntax-highlighting: It adds syntax highlighting to your terminal, showing what typos you made;
zsh-autosuggestions: It suggests commands as you type based on history (commands you've used before) and completions;
zsh-completions: It adds thousands of completions for usual tools like Yarn, NVM, Node, etc, so that you need only to press TAB to complete the command.

Fetch and run zinit script:



sh -c "$(curl -fsSL https://raw.githubusercontent.com/zdharma/zinit/master/doc/install.sh)"

Open zsh configuration file again:



code ~/.zshrc

Add this line at the end of your .zshrc file:



zinit light zdharma/fast-syntax-highlighting
zinit light zsh-users/zsh-autosuggestions
zinit light zsh-users/zsh-completions

8. Set up Visual Studio Code shell integration

Open Visual Studio Code
Ctrl + Shift + p
Open settings JSON
Add this line (or change it, if it already exists):



"terminal.integrated.shell.windows": "C:\\Users\\<your-user-name>\\AppData\\Local\\Microsoft\\WindowsApps\\debian.exe",

Important: Remember to change <your-user-name> to your actual Windows user name.

9. Don't Forget to set up Node

Some things you have installed on Windows will work already, but you'll have to install node specifically on your distro. We will use NVM (Node Version Manager) to have more freedom, if sometime we need to downgrade the version used keeping the other ones.

First, we need to install the basic build tools for node-gyp.

To do that, run this on your terminal:



$ sudo apt-get install build-essential

Then you'll have to download and run the script for installing NVM:

Important: Before running this, check if it has the last version on the website (0.35.3).



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

After that, close the terminal and open it again.

Now, you'll add again some more settings to .zshrc file.



code ~/.zshrc

Paste this code at the end of the file:



export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"

To load the changes you've just made, run



source ~/.zshrc

Now, finally, we're ready to install node's lastest LTS version:



$ nvm install --lts

Set this version as the version nvm should use as standard:



nvm use --lts

Conclusion

Phew!!! If you endured until the end, congratulations. It was surely a long ride for me.

I just want to highlight something before ending this article: The path structure for navigating folders is a little different.

If you want to go to C:\Users\MyUserName\Documents\awesome-repo, for example, you will use cd /mnt/c/Users/MyUserName/Documents/awesome-repo.

This means your drives are at /mnt/. From there, the path structure is pretty much the same.

I hope this was helpful to someone.

If something didn't work for you, or even if you have found a workaround for some specific problem, please leave a comment and I'll update this article as soon as possible. I'm sure it will help someone who passes by in the future.

Setting up a Full-Stack TypeScript Web App Monorepo with Live Reload

Vinícius Albuquerque — Tue, 02 Jun 2020 00:04:53 +0000

This is a how-to article (and a very straight-to-the-point one). It is so straight forward that it is almost only a checklist. But if you do the spells correctly, some magic will happen.

If you want to see the pros and cons for setting up a monorepo architecture, using TypeScript or even how live reload makes you more productive as a developer, you're not going to get it here. I plan writing about that (and other explanations about things I did here) later, so...

Follow me and you'll get a notification when I post it 😅!

In this post I show how to set up:

A monorepo project using Yarn Workspaces;
An Node.js server using Express and Typescript with live reload;
A React app with Typescript;
A sexy package.json to start everything using a single command in the root folder.

Ready? Let's go!

Prerequisites

You must have Node.js installed in your machine. You can do that via package manager or just download the best installer for your SO.
You must have Yarn installed. Install here.

Monorepo

Create a folder for your project, with the name you want for the repository.
Open the terminal on that folder and run yarn init -y.
Open the recently created package.json file and add "private": true, and "workspaces": { "packages": ["packages/*"]} to it. It will be somewhat like this:

{
  "name": "MySexyProject",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "private": true,
  "workspaces": {
    "packages": [
      "packages/*"
    ]
  }
}

Create a folder packages. You will put all projects of this repository inside that folder.

Server

Create a folder called server inside of the folder packages. Your folder structure will be something like this:

📂- root
 └📂- packages
 | └📂- server (👋🏻 I'm here!)
 └📝- package.json
 └📝- yarn.lock

Open the terminal in server folder and run:
- yarn init -y
- yarn add typescript -D
- yarn tsc --init
- yarn add express
- yarn add @types/express -D
- yarn add ts-node -D
- yarn add ts-node-dev -D
Create the folder and the TypeScript file which will be the starting point of your server application. In this example, it will be packages/server/src/server.ts.

import express from "express";

const app = express();

app.get('/',(req, res)=>{
  res.json({"message":"Hello World!"});
});

app.listen(3333);

On packages/server/package.json, add this script:

  "scripts": {
    "dev": "ts-node-dev src/server.ts"
  },

Now, open a terminal on this folder and run yarn dev.
🎉 🎉 🎉 🎉 🎉

Web

Go to the root of your monorepo and open the terminal there.
Run yarn create react-app packages\web --template=typescript and wait this never-ending script to finish.
Done.

🧙🏻‍♂️Running everything with one command

Open the terminal at monorepo's root folder.
Run yarn add npm-run-all -D -W.
Open monorepo's package.json and add the scripts bellow:

  "scripts": {
    "server-dev": "yarn workspace server dev",
    "web-dev": "yarn workspace web start",
    "start": "run-p server-dev web-dev"
  }

Now run yarn start and see the magic happening ✨ ✨ ✨

P.S.: If you don't want to add that dependency and you are using Windows' CMD or PowerShell, you can achieve a similar result using start yarn workspace server dev && start yarn workspace web start, but it will open two terminal windows and each of them will run one of the scripts.