Skip to content

Latest commit

 

History

History
1041 lines (766 loc) · 38.6 KB

dev-environment.md

File metadata and controls

1041 lines (766 loc) · 38.6 KB
Raw

Windows Subsystem Linux Setup for Development

WSL Development Environment Setup

WSL with Python

WSL with PHP

WSL 2

WSL Git

WSL with GUI

Customize Shell | Terminals

Shell Configuration: Hack Your ZSH

  1. Z Shell Stack
    • Configuration Structure
      • Zshrc configuration
      • ZPlug configuration
  2. Brew, zplugs and gems: tap the best soft
    • Brew
    • ZPlugins
      • Vimode for zsh
      • Zsh magic
      • Better system navigation
      • Parsing outputs
      • Gopass
    • Gems
  3. Git: may the –force be with you
    • Few tricks from the config
    • Aliases
    • Git integrate
  4. How to exit Vim and come back
    • Vim experience
    • Vim configuration
  5. Your editor – keep it remote
  6. Graceful shell usage
    • Terminal multiplexing
    • Shell tricks
      • Managing directories
      • Extracting archives and files
      • Caching shell sessions
      • Repeating commands and standard variables

Managing Dotfiles

Install WSL

  • type Windows features in windows

  • ‘Turn Windows features on or off’

  • put a check next to ‘Windows Subsystem for Linux

  • then restart

  • Windows store, search for ‘Linux’, and go ahead and install Ubuntu.

  • Install Linux

  • How do I use Bash on Ubuntu on Windows (WSL) for my VS Code terminal?

  • in bash curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash

  • (instructions I'm getting from here) https://github.com/creationix/nvm/blob/master/README.md#installation

  • After that, close, then reopen your terminal, and run command -v nvm

  • nvm install 10.1

  • nvm use 10.1

  • nvm alias default 10.1

  • npm install -g npm@latest

  • mkdir projectName

  • to check where you are echo ~

  • mkdir -p ~/proj/folderName && cd ~/project/projectName

  • git init

  • npm init -y

  • Open the terminal in VSC Ctrl + `

  • Go into package.json

  • Under name add "private": true,

  • Give it a name, description if you want, then git commit and we'll get a basic web page going before we add tooling

  • to display ls /mnt/c/users/<name>/projectName?

  • moving files mv ~/projectName /mnt/c-or-d/projectName

  • install and configure eslint and .editorConfig will help with the formatting and style of your code.

  • create a file .editorConfig

editorConfig

root = true
[*]
charset = utf-8
end_of_line = lf
trim_trailing_whitespace = true
insert_final_newline = true
indent_style = space
indent_size = 2
[*.md]
indent_size = 4

npm install --save-dev eslint-config-airbnb-base`

That's for when you're doing React

(
  export PKG=eslint-config-airbnb-base;
  npm info "$PKG@latest" peerDependencies --json | command sed 's/[\{\},]//g ; s/: /@/g' | xargs npm install --save-dev "$PKG@latest"
)
'use strict';

module.exports = {
  root: true,
  extends: 'airbnb',
  parser: 'babel-eslint',
  parserOptions: {
    sourceType: 'script',
  },
  env: {
    es6: true,
  },
  rules: {
    'no-console': ['warn', {
      allow: ['error', 'warn'],
    }],
    'prefer-destructuring': 0,
  },
  overrides: [
    {
      files: [
        'src/**/*.js',
      ],
      parserOptions: {
        sourceType: 'module',
      },
      env: {
        browser: true,
      },
    },
  ],
};
  • git add -A .
  • git commit -m "initial commit"
  • create a file .gitignore
###################
*.com
*.class
*.dll
*.exe
*.o
*.so
# Packages #
############
*.7z
*.dmg
*.gz
*.iso
*.jar
*.rar
*.tar
*.zip
# Logs and databases #
######################
*.log
*.sql
*.sqlite
# OS generated files #
######################
.DS_Store
.DS_Store?
._*
.Spotlight-V100
.Trashes
Icon?
ehthumbs.db
Thumbs.db
# Node specific #
#################
lib-cov
*.seed
*.log
*.dat
*.out
*.pid
*.gz
pids
logs
#results
npm-debug.log
node_modules/
.nyc_output
# Project specific #
####################
/dist/
/lib/
  • create a file .nvmrc
9.11.1

  • ls -A

  • Don't use beatify anymore. eslint and .editorConfig are MUCH better for that

  • One thing is node_modules was accidently added to git, .gitnore fixes that though git rm -rf node_modules && npm install

  • npm i -D http-server We're intalling an npm package called "http-server" https://www.npmjs.com/package/http-server

  • Just above "test" "start": "http-server docroot", in package.json file Then try running npm start

  • Ok soo make a new git commit git add -A . git commit -m "set up basic dev environment"

  • Make a folder docroot

  • And in there index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Test</title>
  </head>
  <body>
    
  </body>
</html>

  • npm i -D webpack webpack-cli webpack-dev-server

  • Make src/index.js console.log('ey');

  • Replace "start": "webpack-dev-server",

  • npm rm -D http-server

  • npm i -D babel-eslint

  • add a script "build": "webpack", in package.json

  • then run npm run build, it will add a dist folder with main.js

  • configure webpack

VSCode Plugins/Extensions

npm global package:

npm i -g nodemon
npm i -g @angular/cli

git bash for VSCode terminal

"terminal.integrated.shell.windows": "C:\\Users\\Algorithm\\AppData\\Local\\Programs\\Git\\bin\\bash.exe",
    "terminal.external.windowsExec": "C:\\ProgramData\\Microsoft\\Windows\\Start Menu\\Programs\\Node.js",

then you dont need to switch from one to another during your dev. process

Install MongoDB in WSL

Install MongoDB Community Edition

You can follow the installation documentation from the mongodb official website and select the distro of your choice.

  1. Copy and paste this into your terminal wget -qO - https://www.mongodb.org/static/pgp/server-4.2.asc | sudo apt-key add - and operation should respond with an OK. This will import the public key used by the package management system
  2. Next, copy and paste this echo "deb [ arch=amd64,arm64 ] https://repo.mongodb.org/apt/ubuntu bionic/mongodb-org/4.2 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-4.2.list to create a list file for MongoDB.
  3. Reload local package database by typing sudo apt-get update.
  4. Finally, type sudo apt-get install -y mongodb-org to install the latest stable version of the MongoDB packages.

Add the data directory to store databases

  1. Make sure you are on the root of the WSL, type pwd it should output /home/<user>/. If not, type cd ~.
  2. Create a data, by typing mkdir data.
  3. Type echo "mongod --dbpath=data --nojournal" > mongod to store the command to mongod.
  4. Lastly, type chmod a+x mongod to change the permission

Run mongod server and mongo shell

  1. Type ./mongod to start mongod server.
  2. You can now open a new terminal and type mongo to launch mongo shell.
  3. Go the Getting Stated Manual of MongoDB to try various examples for querying in the MongoDB shell.
  4. To exit the shell, press ctrl + c. You should get a neat message, then you'll be returned to your command line!
sudo apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv 9DA31620334BD75D9DCB49F368818C72E52529D4

# Getting these errors
Executing: /tmp/apt-key-gpghome.FMOcC95S7T/gpg.1.sh --keyserver hkp://keyserver.ubuntu.com:80 --recv 9DA31620334BD75D9DCB49F368818C72E52529D4
gpg: connecting dirmngr at '/tmp/apt-key-gpghome.FMOcC95S7T/S.dirmngr' failed: IPC connect call failed
gpg: keyserver receive failed: No dirmngr

# converted to:
curl -sL "http://keyserver.ubuntu.com/pks/lookup?op=get&search=0x9DA31620334BD75D9DCB49F368818C72E52529D4" | sudo apt-key add

Resources:

How to Install Python 3.6.1 in Ubuntu 16.04 LTS

This quick tutorial is going to show you how to install the latest Python 3.6.1 in Ubuntu 16.04 LTS via PPA.

Ubuntu 16.04 comes with both Python 2.7 and Python 3.5 by default. You can install Python 3.6 along with them via a third-party PPA by doing following steps:

  1. Open terminal via Ctrl+Alt+T or searching for "Terminal" from app launcher. When it opens, run command to add the PPA:
sudo add-apt-repository ppa:jonathonf/python-3.6

Type in your password (no visual feedback due to security reason) when it asks and hit Enter.

  1. Then check updates and install Python 3.6 via commands:
sudo apt-get update

sudo apt-get install python3.6

Now you have three Python versions, use python command for version 2.7, python3 for version 3.5, and/or python3.6 for version 3.6.1.

  1. To make python3 use the new installed python 3.6 instead of the default 3.5 release, run following 2 commands:
sudo update-alternatives --install /usr/bin/python3 python3 /usr/bin/python3.5 1

sudo update-alternatives --install /usr/bin/python3 python3 /usr/bin/python3.6 2

Finally switch between the two python versions for python3 via command:

sudo update-alternatives --config python3

After selecting version 3.6:

python3 -V // or python3 --version

UPDATE: due to this bug, gnome-terminal won’t launch after step 3, a workaround is running following commands to recreate the symlink:

sudo rm /usr/bin/python3

sudo ln -s python3.5 /usr/bin/python3

Automatically open the terminal in Bash

  • Open up Hyper and type Ctrl + ,
  • Scroll down to shell and change it to shell: 'C:\\Windows\\System32\\bash.exe' then shellArgs: ['--login']orshell: 'wsl.exe'thenshellArgs: []`

Install Zsh

  • Run sudo apt-get install zsh
  • Open bash profile nano ~/.bashrc
  • Set ZSH as default:
# Launch zsh
if [ -t 1 ]; then
exec zsh
fi

or bash -c zsh

Install a framework for ZSH

  • Install Oh My Zsh with sh -c "$(curl -fsSL https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"
    • Read docs here on how to add more plugins and change themes (I went with their out of the box 'robbyrussell').

Add plugins in zsh

  • open .zshrc file nano ~/.zshrc
  • It will look like this plugins=(git colored-man-pages zsh-syntax-highlighting zsh-autosuggestions)

Fix the ls and cd colours

Out of the box when you ls or cd + Tab you get a ugly background colours on the directories. To fix this, open ~/.zshrc file and add this to the end:

#Change ls colours
LS_COLORS="ow=01;36;40" && export LS_COLORS

#make cd use the ls colours
zstyle ':completion:*' list-colors "${(@s.:.)LS_COLORS}"
autoload -Uz compinit
compinit

Install Git

  • Run this sudo apt update
  • Then run sudo apt install git

Setup a SSH key and link to your Github

  • Follow the Linux steps here to create a key and add it to your SSH agent
  • Then type cat ~/.ssh/id_rsa.pub
  • Copy your key from the terminal and paste it into your Github keys

Install Node Version Manager

It is a little slow but is a known issue. To make the startup time a little faster:

# Defer initialization of nvm until nvm, node or a node-dependent command is
# run. Ensure this block is only run once if .bashrc gets sourced multiple times
# by checking whether __init_nvm is a function.
if [ -s "$HOME/.nvm/nvm.sh" ] && [ ! "$(whence -w __init_nvm)" = function ]; then
  export NVM_DIR="$HOME/.nvm"
  [ -s "$NVM_DIR/bash_completion" ] && . "$NVM_DIR/bash_completion"
  declare -a __node_commands=('nvm' 'node' 'npm' 'yarn' 'gulp' 'grunt' 'webpack')
  function __init_nvm() {
    for i in "${__node_commands[@]}"; do unalias $i; done
    . "$NVM_DIR"/nvm.sh
    unset __node_commands
    unset -f __init_nvm
  }
  for i in "${__node_commands[@]}"; do alias $i='__init_nvm && '$i; done
fi

Install Ruby on Rails with rbenv

Step 1: Install rbenv and Dependencies

$ sudo apt update

# install the dependencies required for ruby
$ sudo apt install autoconf bison build-essential libssl-dev libyaml-dev libreadline6-dev zlib1g-dev libncurses5-dev libffi-dev libgdbm5 libgdbm-dev

# Clone the rbenv repo into the directory ~/.rbenv
$ git clone https://github.com/rbenv/rbenv.git ~/.rbenv

# Add ~/.rbenv/bin to $PATH to use the rbenv command line utility
$ echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.bashrc # or ~/.zshrc

# Add this script so that rbenv loads automatically
$ echo 'eval "$(rbenv init -)"' >> ~/.bashrc # or ~/.zshrc

# Next, apply the changes you made by:
$ source ~/.bashrc # or ~/.zshrc

# Verify if set up is succesful by using type command an rbenv:
$ type rbenv

# Install ruby-build plugin to simplify the installation process for new versions of ruby

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

Step 2: Installing Ruby with ruby-build

# List all the available versions of Ruby:
$ rbenv install -l

# Install Ruby 2.5.1 (specific version):
$ rbenv install 2.5.1

Set it as default version of Ruby
$ rbenv global 2.5.1

# Verify that Ruby was properly installed
$ ruby -v

Step 3: Working with Gems

Gems are the way Ruby libraries are distributed. You use the gem command to manage these gems. We’ll use this command to install Rails.

When you install a gem, the installation process generates local documentation. This can add a significant amount of time to each gem’s installation process, so turn off local documentation generation by creating a file called ~/.gemrc which contains a configuration setting to turn off this feature:

$ echo "gem: --no-document" > ~/.gemrc

# Install bundler to manage gem dependencies for projects
$ gem install bundler

You can use the gem env command (the subcommand env is short for environment) to learn more about the environment and configuration of gems. You can see where gems are being installed by using the home argument, like this:

$ gem env home

# Output:
/home/sammy/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0

Step 4: Installing Rails

To install Rails, use the gem install command along with the -v flag to specify the version. For this tutorial, we will use version 5.2.0:

$ gem install rails -v 5.2.0

The gem command installs the gem you specify, as well as every dependency. Rails is a complex web development framework and has many dependencies, so the process will take some time to complete. Eventually you’ll see a message stating that Rails is installed, along with its dependencies:

Output
...
Successfully installed rails-5.2.0
38 gems installed

Note:

If you would like to install a different version of Rails, you can list the valid versions of Rails by doing a search, which will output a long list of possible versions. We can then install a specific version, such as 4.2.7:

$ gem search '^rails$' --all
$ gem install rails -v 4.2.7

If you would like to install the latest version of Rails, run the command without a version specified:

$ gem install rails

rbenv works by creating a directory of shims, which point to the files used by the Ruby version that’s currently enabled. Through the rehash sub-command, rbenv maintains shims in that directory to match every Ruby command across every installed version of Ruby on your server. Whenever you install a new version of Ruby or a gem that provides commands, like Rails does, you should run:

$ rbenv rehash

Verify that Rails has been installed properly by printing its version, with this command:

$ rails -v

If it installed properly, you will see the version of Rails that was installed:

Output
Rails 5.2.0

At this point, you can begin testing your Ruby on Rails installation and start to develop web applications. Let’s look at keeping rbenv up to date.

Step 5: Updating rbenv

Since you installed rbenv manually using Git, you can upgrade your installation to the most recent version at any time by using the git pull command in the ~/.rbenv directory:

$ cd ~/.rbenv
$ git pull

Step 6: Uninstalling Ruby versions

As you download additional versions of Ruby, you may accumulate more versions than you would like in your ~/.rbenv/versions directory. Use the ruby-build plugin's uninstall subcommand to remove these previous versions.

rbenv uninstall 2.1.3

Step 7: Uninstalling rbenv

Open your ~/.bashrc or ~/.zshrc file in your editor, then find and remove the following two lines from the file:

...
export PATH="$HOME/.rbenv/bin:$PATH"
eval "$(rbenv init -)"

# Save the file and exit the editor
# Remove rbenv and all installed Ruby versions
rm -rf `rbenv root`

# Log out and back in to apply the changes to your shell

Resources:

Install PostgreSQL

$ sudo apt-get update

# Install PostgreSQL and its development libraries
$ sudo apt-get install postgresql postgresql-contrib libpq-dev

# Check version
psql --version

Create Database User

Create a PostgreSQL superuser user, change the pguser

$ sudo -u postgres createuser -s pguser

If you want to set a password for the database user, enter the PostgreSQL console with this command:

$ sudo -u postgres psql

The PostgreSQL console is indicated by the postgres=# prompt. At the PostgreSQL prompt, enter this command to set the password for the database user that you created:

postgres=# \password pguser

Enter your desired password at the prompt, and confirm it.

Now you may exit the PostgreSQL console by entering this command:

postgres=# \q

Resources:

Install MySQL

$ sudo apt-get update

# Install MySQL and its development libraries
$ sudo apt-get install mysql-server mysql-client libmysqlclient-dev

When the installation is complete, we need to run some additional commands to get our MySQL environment set up securely. First, we need to tell MySQL to create its database directory structure where it will store its information. You can do this by typing:

$ sudo mysql_install_db

# Run a security script to remove some dangerous defaults and lock down access to our database system
$ sudo mysql_secure_installation

You will be asked to enter the password you set for the MySQL root account. Next, it will ask you if you want to change that password. If you are happy with your current password, type n at the prompt.

For the rest of the questions, you should simply hit the "ENTER" key through each prompt to accept the default values. This will remove some sample users and databases, disable remote root logins, and load these new rules so that MySQL immediately respects the changes we have made.

MySQL is now installed, but we still need to install the MySQL gem.

Install MySQL Gem

mysql2 gem provides provides a functionality to connect your Rails application to a MySQL server.

$ gem install mysql2

Resources:

How to Uninstall (or Reinstall) Windows 10’s Ubuntu Bash Shell

How to Uninstall the Ubuntu Environment and Keep Your Home Folder

To remove the downloaded Bash environment, open a Command Prompt window and run the following command. This will uninstall and delete the Ubuntu user environment from your system, including any Linux applications you downloaded and installed with apt-get or by compiling them from source.

lxrun /uninstall

uninstall

This command won’t delete your home folder and the files in it. If you’d like to completely wipe the Linux system, see the next section.

How to Uninstall the Ubuntu Environment and Delete Your Home Folder

The above command won’t delete your Ubuntu user account’s home folder. The home folder contains user preferences and files. If you install a new Ubuntu user space image, the files in your home folder will be preserved and carried over.

If you want to prevent this from happening, you’ll need to remove the downloaded Bash environment and completely wipe your home folder. To do so, run the following command:

lxrun /uninstall /full

You’ll be asked to confirm your choice. To automatically accept the confirmation, run the lxrun /uninstall /y /full command instead.

uninstall full

How to Reinstall the Ubuntu Environment

To reinstall the Bash environment, you can just run the bash command again, as you did when installing Bash the first time. If a Ubuntu user space image isn’t installed, it will automatically download and install it.

You can also run the following command yourself. This is the same command that bash.exe automatically runs if you launch it without a Ubuntu user space image installed.

lxrun /install

Whether you run bash or lxrun /install, the command will ask you to confirm your choice and enter a username and password for the user account in the Bash environment.

To skip this process, you can run the following command instead. This command will automatically agree to the prompts, setting the "root" account as the default user account without a password. This is helpful if you want to automate the process of installing Bash in a script.

lxrun /install /y

install

How to Remove Windows 10’s Bash Tools Completely

If you’d like to remove the bash.exe tool and the Windows Subsystem for Linux from your computer completely, you’ll need to revisit the "Turn Windows Features On or Off" dialog in the Control Panel.

To find it, open the Control Panel and head to Programs > Turn Windows Features On or Off.

Uncheck the "Windows Subsystem for Linux" option here and click OK. Windows will uninstall the Windows Subsystem for Linux, bash.exe, and lxrun.exe commands. You can always revisit the Windows Features dialog to reinstall them in the future.

remove completely

Yarn Installation

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 update && sudo apt install yarn
# If using nvm you can avoid the node installation by doing:
sudo apt update && sudo apt install --no-install-recommends yarn

To see fonts glyphs and Unicodes https://bluejamesbond.github.io/CharacterMap/

Prettier — Code formatter Ruby DotENV Jest Auto Close Tag Import Cost ESLint. (Optional: run npm install -g eslint )

Rails Setup:

#### If you want to use SQLite (not recommended)
rails new myapp

#### If you want to use MySQL
rails new myapp -d mysql

#### If you want to use Postgres
# Note that this will expect a postgres user with the same username
# as your app, you may need to edit config/database.yml to match the
# user you created earlier
rails new myapp -d postgresql

# Move into the application directory
cd myapp

# If you setup MySQL or Postgres with a username/password, modify the
# config/database.yml file to contain the username/password that you specified



# Create the database
rake db:create

rails server

Troubleshooting:

# You need to run the following
$ source ~/.rvm/scripts/rvm

# then run this
$ type rvm | head -n 1

# and if you get

rvm is a function

# to see dependency requirements for your operating system
$ user$ rvm requirements

# put this code into you ~/.bashrc or ~/.zshrc file and you will not need to write this code again.

To permanently resolve this:

[[ -s "$HOME/.rvm/scripts/rvm" ]] && source "$HOME/.rvm/scripts/rvm"

# From: ~/.bash_profile file
# To: ~/.bashrc file

# Reason this works is that .bashrc is executed each time you enter terminal, and .bash_profile each time you login. That is why solution /bin/bash --login works, but you have to do that each time you enter terminal. This way you are set until your next format, and you will forget all this by then :)

Node.js Docker workflow

WSL with GUI

sudo apt-get purge xrdp
sudo apt install -y xrdp
sudo apt install -y xfce4
sudo apt install -y xfce4-goodies

sudo cp /etc/xrdp/xrdp.ini /etc/xrdp/xrdp.ini.bak
sudo sed -i 's/3389/3390/g' /etc/xrdp/xrdp.ini
sudo sed -i 's/max_bpp=32/#max_bpp=32\nmax_bpp=128/g' /etc/xrdp/xrdp.ini
sudo sed -i 's/xserverbpp=24/#xserverbpp=24\nxserverbpp=128/g' /etc/xrdp/xrdp.ini
echo xfce4-session > ~/.xsession

sudo nano /etc/xrdp/startwm.sh

# !comment these lines to:
#test -x /etc/X11/Xsession && exec /etc/X11/Xsession
#exec /bin/sh /etc/X11/Xsession


# !add these lines:
# xfce
startxfce4

sudo /etc/init.d/xrdp start

!Now in Windows, use Remote Desktop Connection localhost:3390

!Then login using your Ubuntu username and password

Wordpress & Docker

Add the code below to a file called "docker-compose.yml" and run docker-compose up -d, then to tear it down, run: docker-compose down --volumes

version: '3'

services:
  # Database
  db:
    image: mysql:5.7
    volumes:
      - db_data:/var/lib/mysql
    restart: always
    environment:
      MYSQL_ROOT_PASSWORD: password
      MYSQL_DATABASE: wordpress
      MYSQL_USER: wordpress
      MYSQL_PASSWORD: wordpress
    networks:
      - wpsite
  # phpmyadmin
  phpmyadmin:
    depends_on:
      - db
    image: phpmyadmin/phpmyadmin
    restart: always
    ports:
      - '8080:80'
    environment:
      PMA_HOST: db
      MYSQL_ROOT_PASSWORD: password 
    networks:
      - wpsite
  # Wordpress
  wordpress:
    depends_on:
      - db
    image: wordpress:latest
    ports:
      - '8000:80'
    restart: always
    volumes: ['./:/var/www/html']
    environment:
      WORDPRESS_DB_HOST: db:3306
      WORDPRESS_DB_USER: wordpress
      WORDPRESS_DB_PASSWORD: wordpress
    networks:
      - wpsite
networks:
  wpsite:
volumes:
  db_data:

Resources