/config

Personal checklist for setting up a new Ubuntu's dev environment on Windows.

Primary LanguageShellMIT LicenseMIT

wslfetch annotation 2020-07-05 102241

Config

Ubuntu on WSL
Windows Subsystem for Linux (WSL)


Config is a basic checklist I follow to set up a new Ubuntu's development environment. It gets me up to speed with Git, Ruby, GitHub, Jekyll, and more so I can more quickly get back to coding.

Dotfiles

File Description
.bashrc Customizes the Terminal prompt and echoes the currently checked out Git branch.
.gitconfig Global Git configuration to specify my name and email, shortcuts, colors, and more.
.gitignore The Git ignore file that I use everywhere.
.gitattributes The Git attributes file that I use everywhere.

Shell script (WIP)

This repository includes a shell script for executing the bulk of the configuration process. First, install and agree to terms for WSL, then download and run Windows Terminal. Then, enter the following in Terminal:

cd $Home && mkdir -p Downloads && curl https://raw.githubusercontent.com/MilanAryal/config/master/config.sh > ~/Downloads/config.sh && bash ~/Downloads/config.sh

Table of contents


Checklist

1. Install required apps for our projects

Install plugins for our IDE

VS Code plugins:

Atom plugins:

  • Before installing Ubuntu distro enable WSL feature with the Powershell
Enable-WindowsOptionalFeature -Online -FeatureName Microsoft-Windows-Subsystem-Linux

3. Prepare OS

  • Update OS packages
sudo apt update -y && sudo apt upgrade -y

4. Setup Ruby and gems

  • Install zlib for Nokogiri (鋸) Ruby gem
sudo apt install zlib1g zlib1g-dev
sudo apt update

sudo apt install ruby-full build-essential zlib1g-dev

ruby --version

And, avoid installing Ruby Gems as the root user

echo '# Install Ruby Gems to ~/gems' >> ~/.bashrc
echo 'export GEM_HOME="$HOME/gems"' >> ~/.bashrc
echo 'export PATH="$HOME/gems/bin:$PATH"' >> ~/.bashrc
source ~/.bashrc

Install essential gems for our project

gem install bundler
  • Place the Gemfile in the project folder and install gem:
bundle install
  • Install nodejs with OS native apt
sudo apt update

sudo apt install -y nodejs npm build-essential

nodejs --version
npm --version

Setup package.json file

npm install
  • Or, Install them directly via CLI

Eg. Install Webpack command line tools globally:

npm install -g webpack-cli

Eg. Install Webpack on a project folder (which install on node_modules folder)

npm install webpack webpack-cli --save-dev

To run package on project installed folder npx webpack

↥ To the top



Annotation 2020-06-13 145332


Annotation 2020-06-14 145755


↥ To the top


Debain/ Ubuntu commands

Custom bash prompt

# ----------------------------------------------------------------------
# | Add the following line at the bottom of ~/.bashrc file             |
# | this will override the default configuration                       |
# ----------------------------------------------------------------------

# Add Git branch if its present to PS1
parse_git_branch() {
 git branch 2> /dev/null | sed -e '/^[^*]/d' -e 's/* \(.*\)/ (\1)/'
}

# $ _ Custom bash prompt
#
# Includes custom character for the prompt, path, and Git branch name.
export PS1='\[\e]0;${PWD##*/} — bash — ${COLUMNS}x${LINES}\a\]\[\033[00;35m\]→ \[\033[01;36m\]\w\[\033[01;33m\]$(parse_git_branch) \[\033[31m\]\$\[\033[0m\] '

...

# Print Linux distro without version, just only dist:
linux_distro() {
  cat /etc/issue | head -n +1 | awk '{print $1}'
}

# Add Git branch if its present to PS1
parse_git_branch() {
 git branch 2> /dev/null | sed -e '/^[^*]/d' -e 's/* \(.*\)/ (\1)/'
}

...

# $ _ Custom bash prompt
#
# Includes custom character for the prompt, path, and Git branch name.
export PS1='\[\e]0;${PWD##*/} — $(linux_distro) — ${COLUMNS}x${LINES}\a\]\[\033[00;35m\]→ \[\033[01;36m\]\w\[\033[01;33m\]$(parse_git_branch) \[\033[31m\]\$\[\033[0m\] '

# $ _ Custom bash prompt
#
# Includes custom character for the prompt, path, and Git branch name.
export PS1='\[\e]0;${PWD##*/} — $(linux_distro) — WSL\a\]\[\033[00;35m\]→ \[\033[01;36m\]\w\[\033[01;33m\]$(parse_git_branch) \[\033[31m\]\$\[\033[0m\] '

# $ _ Custom bash prompt
#
# Includes custom character for the prompt, path, and Git branch name.
export PS1='\[\e]0;${PWD##*/} [WSL: $(linux_distro)]\a\]\[\033[00;35m\]→ \[\033[01;36m\]\w\[\033[01;33m\]$(parse_git_branch) \[\033[31m\]\$\[\033[0m\] '

or, a community bash framework:

or, create a custom PS1 variable for your bash:

How to execute atom from bash?

Here's a guide:

  1. Open ~/.bashrc in a text editor

  2. At the bottom, add a new function:

# Atom alias (https://github.com/atom/atom/issues/18126#issuecomment-463226481)
atom() {
  target_path=$(wslpath -a -w $(readlink -f $1)) # resolve the path
  (/mnt/c/Windows/System32/cmd.exe /C "atom.cmd $target_path" &> /dev/null) # open the path
}
  1. Save the file and exit the text editor

  2. Run . ~/.bashrc

The command atom will now work properly!

Essential apt commands

List most used commands: apt

Update OS packages: sudo apt update -y && sudo apt upgrade -y

List all packages: apt list && apt list | more && apt list | grep foo

To install package: sudo apt install -y <package_name>

To search package: apt search <package_name>

To know the package version before install: apt policy <package_name>

To know the package details: apt show <package_name>

To delete package and its dependecies: apt --purge remove <package_name>

Add repo: sudo apt-add-repository <ppa: repo_name> && apt update

Remove repo: udo apt-add-repository -r <ppa: repo_name> && apt update

Locate the executable file associated with a given command: which -a [filename]

wslfetch - creates colorful wsl information
vmstat -s - virtual machine system usage stats

How to access your Linux (WSL) files in Windows 10?

There are two ways to access your Linux files. First, the easy one. From within the Windows Subsystem for Linux environment you want to browse, run the following command:

explorer.exe .

You can also access them directly at a \\wsl$ path. In File Explorer or any other Windows application that can browse files, navigate to the following path:

\\wsl$

Or, simply win key + r → type \\wsl$ → Press Enter

# open vs code in wsl
code .

# to open a wsl window directly from a Windows prompt
# use the `--remote` command line parameter:
code --remote wsl+<distro name> <path in WSL>

# for example:
code --remote wsl+Ubuntu /home/jim/projects/c

How to flush DNS in Ubuntu?

Install nscd using the following command if not yet

sudo apt install nscd

Flush DNS Cache in Ubuntu by restarting the nscd

sudo /etc/init.d/nscd restart

↥ To the top


Windows commands

Windows run command

%temp%
%appdata%
%userprofile%
%programfiles%
shell:RecycleBinFolder → start recycle bin folder
documents
downloads
favorites
pictures
recent
videos

controldevmgmt.msc
regedit
msconfig 

cmd                    → start command prompt app
wt                     → start windows terminal app
powershell
calc
mspaint
notepad
write                  → wordpad
winword
excel
powerpnt

PowerShell command options

$PSversionTable or $PSVersionTable.PSVersion    → Check your PowerShell Version
$host.version or get-host|Select-Object version → Alternative to check PowerShell Version
wsl                               → open default linux distro
wsl --list --verbose or wsl -l -v → list all distro and wsl version
wsl -d <distro_name>              → open required linux distro
wsl --set-version <distro_name> 2 → open linux distro in wsl2
wsl --set-version <distro_name> 1 → open linux distro in wsl1
wsl --set-default-version 2       → make wsl2 default
wsl --shutdown                    → terminate all WSL instances

In order to optimize for the fastest performance speed, be sure to store your project files in the Linux file system (not the Windows file system).

For example, when storing your WSL project files:

  • Use the Linux file system root directory: \\wsl$\Ubuntu\home\<user name>\Project
  • Not the Windows file system root directory: C:\Users\<user name>\Project

Project files that you are working with using a WSL distribution (like Ubuntu) must be in the Linux root file system to take advantage of faster file system access.

You can access your Linux root file system with Windows apps and tools like File Explorer. Try opening a Linux distribution (like Ubuntu), be sure that you are in the Linux home directory by entering this command: cd ~. Then open your Linux file system in File Explorer by entering (don't forget the period at the end): explorer.exe .

Windows Terminal – a profiles.json (settings) file

Location path:

%userprofile%\AppData\Local\Packages\Microsoft.WindowsTerminal_8wekyb3d8bbwe\LocalState

profiles.json

{
    // Startup as Ubuntu profile {guid}.
    "defaultProfile": "{2c4de342-38b7-51cf-b940-2309a097f518}",
    "profiles":
    {
        "defaults":
        {
            // Put settings here that you want to apply to all profiles.
            "colorScheme": "One Half Dark"
        },
        "list":
        [
            {
                // Make changes here to the Ubuntu WSL profile.
                "guid": "{2c4de342-38b7-51cf-b940-2309a097f518}",
                "hidden": false,
                "name": "Ubuntu",
                "source": "Windows.Terminal.Wsl",
                "colorScheme": "One Half Dark",
                "startingDirectory": "\\\\wsl$\\Ubuntu\\home\\milan"
            },
            {
                // Make changes here to the Debian WSL profile.
                "guid": "{58ad8b0c-3ef8-5f4d-bc6f-13e4c00f2530}",
                "hidden": false,
                "name": "Debian",
                "source": "Windows.Terminal.Wsl",
                "colorScheme": "Solarized Dark",
                "startingDirectory" : "\\\\wsl$\\Debian\\home\\milan"
            }
        ]
    }
}

Note: "startingDirectory": "\\\\wsl$\\[distro-name]\\home\\[linux-user]" or non-escaped also works "startingDirectory" : "//wsl$/<distro>/home/<user>"

Learn more about:

↥ To the top


Summary

- text editor
  + vs code
  + atom
  + editorconfig extension

- git
  + github desktop

- wsl
  + ubuntu

- ruby
  + ruby-full
  + build-essential
  + bundler

- node.js
  + npm

↥ To the top


Coding guide

camelCase for JavaScript/jQuery, underscores for PHP/Liguid tag, and hyphens for CSS. Boom!


↥ To the top


License