Setting up Ubuntu WSL for 54chi for Node, Python, Salesforce, Blog on Surface Pro X

The Surface Pro X is the new kid in town from Microsoft. Most people will tell you that it's not a proper dev machine, but that depends on who are these people. In other words, the SPX is certainly not a dev machine for everyone, but for the right business case, it's very capable, and superefficient.

These are the essentials I need for a comfortable experience with Ubuntu WSL with Salesforce B2B Commerce:

1. Bash: Ubuntu WSL (I'm using Ubuntu 18.04.2 LTS)
2. VERSION CONTROL: Git. But use gitlab if you want private repos that can be accessed outside the VPN!
3. CLI: SFDX, so Visual Studio won’t help too much with Salesforce
4. IDE: Visual Studio w/Forcecode and SF Extensions
5. BROWSER: Firefox
6. SUPPORTING LANGUAGES: Node (with NVM), Python3 (with Jupyter notebook), vue (js framework) and vuepress (for documentation)

Unlike the older post, in this one we'll only install VS Code and Firefox on the host machine, and everything else in the WSL to reduce any compatibilities issues due to the ARM processor.

The main key is the wsl interface. You are basically installing the full ubuntu, which don't have as many issues with Intel vs ARM64 as Windows.

Ubuntu WSL

1. Set your Windows 10 to the "fast ring" to receive the latest updates. More info here.
2. Install WSL1 and set it to Ubuntu. Here is how.

WSL 2 vs WSL 1

As of 11/19/2019, I can't recommend WSL2. Synching with the remote in VSCode is very slow and disconnects constantly, and it seems to have issues connecting to the outside world as well (e.g. apt-gets).

The good news is that switching between WSL1 and 2 is very simple (E.g. wsl --set-version [Distro] 2).

Git

1. Open a Bash terminal (Ubuntu WSL)
2. Install regular git:

   $ sudo apt install git
   

Python

Python 3 should be included in the WSL Ubuntu distro, but if it isn't, follow these steps:

1. Open a Bash terminal (Ubuntu WSL)
2. Install python3:

   $ sudo apt-get update
   $ sudo apt-get install python3.6
   

3. Install pip3:

   $ sudo apt-get install python3-pip
   

Java

1. Open a Bash terminal (Ubuntu WSL)
2. Install Java 8

   sudo apt install openjdk-8-jre-headless
   

Node and SFDX cli

1. Open a Bash terminal (Ubuntu WSL)
2. Install NPM

   $ sudo apt-get install npm
   

3. Since sfdx-cli doesn’t seem to work with node v8, let’s also install curl and NVM while at it (https://gist.github.com/d2s/372b5943bce17b964a79):

   $ sudo apt-get install curl
   $ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash
   $ source ~/.bashrc
   $ nvm install v10
   

4. Then install sfdx-cli

   $ npm install --global sfdx-cli
   

5. We will also install yarn, as it is becoming the next npm:

   $ curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
   $ echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
   $ sudo apt-get update && sudo apt-get install --no-install-recommends yarn
   

Firefox

1. Firefox for ARM is still in beta, but can be downloaded here.
2. Open Firefox, install NoScript and uBlock Origin extensions to keep it lean and fast
   1. NoScript is the best way to prevent your page loading extra javascript stuff you don’t want to.
   2. uBlock will block popups without selling your soul

VS Code Part 1: Host Machine (Windows)

1. In Windows, download and Install VS Code 32 bit. I'm using the insiders edition from here. Note that there is an ARM64 version compiled in github, but is not official and won't let you run extensions.
2. Open VS Code and install Remote - WSL extension. This is what will glue the windows host machine with the ubunty wsl terminal
3. Disable the telemetry stuff unless you are ok of getting spied.

   File > Preferences > Settings
   Type "telemetry"
   Disable both the Crash Reporter and Telemetry options
   

4. Close VS Code

VS Code Part 2: Remote Machine (WSL)

1. Open a Bash terminal (Ubuntu WSL)
2. Navigate to any folder in your bash and open vs code (since I'm using the insiders edition, we'll use code-insiders to open it).

   $ code-insiders .
   

3. VS Code should open in the host machine, but showing the files in your WSL environment
4. Install the Salesforce Extension Pack by Salesforce (this will take a while). Use the Install on WSL:Ubuntu option as we only need this in the remote. This will install:
   1. Salesforce Extension Pack, which installs
      1. Apex,
      2. Apex Interactive Debugger,
      3. Apex Replay Debugger,
      4. Salesforce CLI Integration,
      5. Aura Components,
      6. Visualforce,
      7. Lightning Web Components
5. Other extensions I like to install in the remote are GitLens for better control on Git projects, EditorConfig for VS Code for code styling, and Rainbow Brackets to help editing the code, and Rainbow CSV as I will be working with a ton of CSV for a while.
6. Restart VS Code

Jupyter

1. Open a Bash terminal (Ubuntu WSL)
2. Install Jupyter notebook

   $ sudo -H pip3 install --upgrade pip
   $ sudo -H pip3 install virtualenv
   

3. References: https://www.digitalocean.com/community/tutorials/how-to-set-up-jupyter-notebook-with-python-3-on-ubuntu-18-04

Docker

AMD64 vs ARM64 architecture

The main difference here should be that we'll be using the arm64 repo instead of the traditional amd64 used on regular intel chips.

These steps are not covering the docker server installation.

1. Open a Bash terminal (Ubuntu WSL)
2. Install docker

   $ sudo apt-get update
   $ sudo apt-get install \
       apt-transport-https \
       ca-certificates \
       curl \
       gnupg-agent \
       software-properties-common
   $ curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -
   $ sudo add-apt-repository \
      "deb [arch=arm64] https://download.docker.com/linux/ubuntu \
      $(lsb_release -cs) \
      stable"
   $ sudo apt update
   $ sudo apt-get install docker-ce docker-ce-cli containerd.io
   

3. References:
   1. https://docs.docker.com/install/linux/docker-ce/ubuntu/
   2. https://www.digitalocean.com/community/tutorials/how-to-install-and-use-docker-on-ubuntu-18-04
   3. https://medium.com/faun/docker-running-seamlessly-in-windows-subsystem-linux-6ef8412377aa

Vue cli

1. Open a Bash terminal (Ubuntu WSL)
2. Install vue clie

   $ yarn global add @vue/cli
   

Vuepress

1. In WSL, open your project
2. Install Vuepress

   $ yarn add -D vuepress@next
   

---

Shortcuts and tips

WSL:

• sudo service --status-all: view all the services running (marked with a "+" sign)
• $ lsb_release -a to check the version of Ubuntu installed
• $ uname -m to display the system architecture (aarch64 in the Surface Pro)
• $ code-insiders . open VS Code insiders for the current folder in bash
• wslu is a collection of utilities that makes your life of talking between host (Windows 10) and remote (Ubuntu bash) easier. For example, you can use wslview to open any program in the host from wsl. E.g.

  $ wslview calc # opens the calculater in the host
  $ wslview https://54chi.com # opens 54chi.com page in the default browser in the host 
  

• $ which xyz: tells you where a program lives
• If program xyz is not found in your PATH, follow these steps to add it and allow it to be run from anywhere. Note: your profile may be in your .profile, .bash_profile, .bashrc, .zshrc, etc.
  • Add this to your profile: export PATH="$PATH:/path/xyz-[version]/bin" (the path may vary of course)
  • If in the terminal, log in and log out for the changes to take effect
• To reset wsl without restarting the PC, you can enter wsl --shutdown from a command prompt/powershell

VSCode/ForceCode:

• CTRL+B: Toggle the file explorer
• CTRL+`: Terminal window (bash or wsl)
• Create vs snippets to make your life easier. Mine are here: https://github.com/54chi/ckz54_VSCodeSnippets

If you want to make VS a little lighter upon load, you can then disable some plugins, asssuming you don't use them often. P.S. Don't delete them...you may need them sometimes!:

• Apex Interactive Debugger
• Apex Replay Debugger: super cool to debug and see the values at any give time!
• Aura Components
• Lightning Web Components: the future is lightning, but we are not living in the future!

Jupyter:

https://www.dataquest.io/blog/jupyter-notebook-tutorial/

Vuepress:

1. Create a sample doc

   # create a docs directory
   mkdir docs
   # create a markdown file
   echo '# Hello VuePress' > docs/README.md
   

2. Then add to package.json

   {
       "scripts": {
           "docs:dev": "vuepress dev docs",
           "docs:build": "vuepress build docs"
       }
   }
   

3. To create docs in real time (by default, you will see the results in http://localhost:8080/):

   $ yarn docs:dev # OR npm run docs:dev
   

4. To generate docs (by default they will be created in docs/.vuepress/dist):

   $ yarn docs:build # Or npm run docs:build