DEV Community: gpynes

Configuring Your Shell Environment

gpynes — Tue, 18 Oct 2022 16:39:31 +0000

My Shell Config

For my shell config I use a combination of tools, namely:

zsh :(as my shell)
oh-my-zsh :(as my framework for configuring my shell)
starship :(as my theme for my shell)
iterm2 :(as my terminal for interacting with my shell)

(optional extras)

broot :(as a plugin for navigating my fs like finder within my shell)
fzf :(a fuzzy search tool, think grep but interactive)
cfg :(a special git setup for tracking changes to your config files)
quick-look-plugins :(these let you peek into files like .js or .json using mac's quicklook feature (spacebar))

And some zsh plugins I use: (the more * next to the name the higher I recommend it)

aws* :(sets up awscli auto complete + adds super handy profile commands)
alias-tips** :(let's you know when you type the long form of an alias you have)
autojump* :(use j to jump to directories containing terms. Directories must be visited first before they can be jumped to.)
autoupdate* :(automatically updates custom plugins)
common-aliases :(add tons of aliases like la, ll etc)
git-auto-fetch* :(automatically "fetches" for new changes of directory you're in)
git-extras :(adds a bunch of helpful git aliases and extra commands)
gitfast :(adds git tab completion)
git-flow :(adds completion for git flow commands)
node :(adds completion for node)
npm* :(adds completion for npm)
zsh-autosuggestions** :(adds suggestions as you type)
zsh-interactive-cd* :(cd + tab to fuzzy search navigate)
zsh_reload* :(adds src command for better full compile reload)

A full list of oh-my-zsh plugins can be found here
Another handy list of plugins can be found here

Installation

There are a few steps to install all this, but nothing too crazy it should be less than 5min if you're on a decent internet connection.
And once installed and setup, you'll be flying at the helm of your terminal provided with tools to help you get faster along the way (alla alias-tips and zsh-autosuggestions)

Install Oh My ZSH

For getting started, let's install oh-my-zsh

This script will install the oh-my-zsh framework if it's not already installed

# Install On-My-Zsh
if [ ! -d $HOME/.oh-my-zsh ]; then
    sh -c "$(curl https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh)" --unattended
else
    echo "Oh-My-Zsh already installed."
fi

If everytime when you start a shell and see a big annoying warning about insecure directories, simply run this to fix it:

compaudit | xargs sudo chmod g-w (may require sudo, see why here)

Install additional plugins

By default oh-my-zsh comes preloaded with a ton of built in plugins that you can load by adding them to your ~/.zshrc file. However some of my favorites aren't in that list.
This section describes how to install extra plugins, namely alias-tips autojump autoupdate autosuggestions

In order to install an additional plugin for zsh all you have to do is install the git repo of the plugin to your $ZSH_CUSTOM/plugins directory, then add the folder name to your plugins list in your ~/.zshrc file.

For convenience, I've created a script below that should install the ones I'm recommending.

# Set ZSH_CUSTOM if it's not already (used by our PLUGINS_PATH below)
if [ -z $ZSH_CUSTOM ]; then
    ZSH_CUSTOM="$HOME/.oh-my-zsh/custom"
fi

# Install additional plugins to this path
PLUGINS_PATH="${ZSH_CUSTOM}/plugins"

# Define function for installing plugins for use below
function install-plugin() {
    plugin_repo=$1
    plugin_name=$2

    echo "Downloading Plugin: $plugin_name"
    echo "Using: $plugin_repo"
    echo "To: $PLUGINS_PATH/$plugin_name"
    echo "git clone $plugin_repo $PLUGINS_PATH/$plugin_name"
    git clone $plugin_repo $PLUGINS_PATH/$plugin_name
    plugin_list="${plugin_list}$plugin_name "
}

echo "Installing Plugins..."
install-plugin https://github.com/djui/alias-tips alias-tips
install-plugin https://github.com/wting/autojump autojump
install-plugin https://github.com/TamCore/autoupdate-oh-my-zsh-plugins autoupdate
install-plugin https://github.com/zsh-users/zsh-autosuggestions autosuggestions

echo "Plugins Installed. Add them by copying th following into your ~/.zshrc
    plugins=( $plugin_list )
"

# For auto jump we must install it using it's own script
cd "$PLUGINS_PATH/autojump"
./install.py

Okay this may be a bit much at first, so let's break it down:

First we're setting up an env var called ZSH_CUSTOM if it's not already set. We use this to determine where the plugins should be installed to. If you have a special location you want, you can use that, otherwise we'll expect it to be in the .oh-my-zsh directory.
Then we set the PLUGINS_PATH directory, which again just tells us where to install the plugins.
Next we setup the install-plugin function that just takes a git repo (plugin_repo) and a name (plugin_name), then downloads the plugin repo to our PLUGINS_PATH location and names it plugin_name. It outputs the plugins as an array you can copy paste into your .zshrc later if needed (we don't).
Then we actually install the plugins alias-tips, autojump, autoupdate and autosuggestions. These are all plugins that aren't shipped with the oh-my-zsh framework but are freaking sweet!
For our final step we cd into the autojump repo and run it's special installer to finish off it's install. (I'm actually unsure if we need to be in it's directory when running, so let me know in the comments!)

And that's it! The plugins are installed.

Install the Starship theme

The starship theme is a super fast theme for zsh that gives you handy color-coded context in your prompt based on your current user/dir. It's written in rust, so it's secure and blazing fast for super quick start up times.

Just run this line to install it:
curl -fsSL https://starship.rs/install.sh | bash

I love this theme, because it's pre-configured out of the box with great defaults, but is also really easy to customize further.
It does wonderful things like tell you if you have git changes, what version node, docker and ruby packages are. And if you use aws, gcp or azure it nows the context of your profiles/config, super handy when switching around a bunch.

Install additional tools

These tools are super helpful and require brew to install (there are other ways, but brew is the easiest)

(note: you can combine the installs into one command for an all in one install)

# zsh-syntax-highlighting leaving for last in case brew isn't installed
brew install zsh-syntax-highlighting

# Super awesome dir navigation tool
brew install broot

# Super awesome fuzzy search tool/pipe
brew install fzf

# This font is needed by the starship theme to display ligatures/icons, but first we need to tell brew where to find it
brew tap homebrew/cask-fonts
brew cask install font-fira-code

# ql are quicklook plugins on mac that allow you to quickly view .json, markdown and other files without having to open them
brew cask install qlcolorcode qlstephen qlmarkdown quicklook-json qlimagesize quicklookase qlvideo

And if you want it all in one line:

brew install zsh-syntax-highlighting broot fzf && brew tap homebrew/cask-fonts && brew cask install font-fira-code qlcolorcode qlstephen qlmarkdown quicklook-json qlimagesize quicklookase qlvideo

NOTE: I actually don't use fzf or broot nearly as often as I used to. broot has primarily been replaced for me with autojump + zsh-interactive-cd and I only use fzf when I'm searching through logs.

Configue .zshrc

Now that everything is installed, the only thing left to do is configure your .zshrc file. Copy this and overwrite your ~/.zshrc file. (keep your aliases if you have any, I recommend create a .zshrc.backup file for your old .zshrc before copying, then bring over your aliases as needed.)

# If you come from bash you might have to change your $PATH.
# export PATH=$HOME/bin:/usr/local/bin:$PATH

# Path to your oh-my-zsh installation.
export ZSH="$HOME/.oh-my-zsh"
export ZSH_CUSTOM="$HOME/.oh-my-zsh/custom"

# Set name of the theme to load --- if set to "random", it will
# load a random theme each time oh-my-zsh is loaded, in which case,
# to know which specific one was loaded, run: echo $RANDOM_THEME
# See https://github.com/robbyrussell/oh-my-zsh/wiki/Themes
# ZSH_THEME="spaceship" # I'm using starhip (see below, where it's configured)

# Set list of themes to pick from when loading at random
# Setting this variable when ZSH_THEME=random will cause zsh to load
# a theme from this variable instead of looking in ~/.oh-my-zsh/themes/
# If set to an empty array, this variable will have no effect.
# ZSH_THEME_RANDOM_CANDIDATES=( "robbyrussell" "agnoster" )

# Uncomment the following line to use case-sensitive completion.
# CASE_SENSITIVE="true"

# Uncomment the following line to use hyphen-insensitive completion.
# Case-sensitive completion must be off. _ and - will be interchangeable.
HYPHEN_INSENSITIVE="true"

# Uncomment the following line to disable bi-weekly auto-update checks.
# DISABLE_AUTO_UPDATE="true"

# Uncomment the following line to automatically update without prompting.
# DISABLE_UPDATE_PROMPT="true"

# Uncomment the following line to change how often to auto-update (in days).
export UPDATE_ZSH_DAYS=8

# Uncomment the following line if pasting URLs and other text is messed up.
# DISABLE_MAGIC_FUNCTIONS=true

# Uncomment the following line to disable colors in ls.
# DISABLE_LS_COLORS="true"

# Uncomment the following line to disable auto-setting terminal title.
# DISABLE_AUTO_TITLE="true"

# Uncomment the following line to enable command auto-correction.
ENABLE_CORRECTION="true"

# Uncomment the following line to display red dots whilst waiting for completion.
COMPLETION_WAITING_DOTS="true"

# Uncomment the following line if you want to disable marking untracked files
# under VCS as dirty. This makes repository status check for large repositories
# much, much faster.
# DISABLE_UNTRACKED_FILES_DIRTY="true"

# Uncomment the following line if you want to change the command execution time
# stamp shown in the history command output.
# You can set one of the optional three formats:
# "mm/dd/yyyy"|"dd.mm.yyyy"|"yyyy-mm-dd"
# or set a custom format using the strftime function format specifications,
# see 'man strftime' for details.
HIST_STAMPS="mm/dd/yyyy"

# Would you like to use another custom folder than $ZSH/custom?
# ZSH_CUSTOM=/path/to/new-custom-folder

# Which plugins would you like to load?
# Standard plugins can be found in ~/.oh-my-zsh/plugins/*
# Custom plugins may be added to ~/.oh-my-zsh/custom/plugins/
# Example format: plugins=(rails git textmate ruby lighthouse)
# Add wisely, as too many plugins slow down shell startup.
plugins=(
    aws # sets up `awscli` tab completion + profile changing commands
    alias-tips # let's you know when you have an alias you can use
    autojump # use j to jump to directories containing terms. Directories must be visited first before they can be jumped to.
    autoupdate # automatically updates custom plugins
    common-aliases # add tons of aliases like la ll etc
    git-auto-fetch # automatically "fetches" for new changes of directory you're in
    git-extras # adds a bunch of helpful git aliases and extra commands
    gitfast # adds git tab completion
    git-flow # adds completion for git flow commands
    node # adds completion for node
    npm # adds completion/aliases for npm
    zsh-autosuggestions # adds suggestions as you type
    zsh-interactive-cd # cd + tab to fuzzy search navigate
    zsh_reload # adds `src` command for better full compile reload
)

# Load Oh My ZSH
source $ZSH/oh-my-zsh.sh

# autojump config
[[ -s $HOME/.autojump/etc/profile.d/autojump.sh ]] && source $HOME/.autojump/etc/profile.d/autojump.sh

autoload -U compinit && compinit -u

# FZF config
export FZF_BASE=~/.fzf
export PATH="/usr/local/sbin:$PATH"
[ -f ~/.fzf.zsh ] && source ~/.fzf.zsh

# zsh-syntax-highlighting
source /usr/local/share/zsh-syntax-highlighting/zsh-syntax-highlighting.zsh

# broot
source $HOME/.config/broot/launcher/bash/br


# User configuration

export MANPATH="/usr/local/man:$MANPATH"

# You may need to manually set your language environment
# export LANG=en_US.UTF-8

# Preferred editor for local and remote sessions
if [[ -n $SSH_CONNECTION ]]; then
  export EDITOR='code'
else
  export EDITOR='code'
fi

# Compilation flags
# export ARCHFLAGS="-arch x86_64"

# Set personal aliases, overriding those provided by oh-my-zsh libs,
# plugins, and themes. Aliases can be placed here, though oh-my-zsh
# users are encouraged to define aliases within the ZSH_CUSTOM folder.
# For a full list of active aliases, run `alias`.
#
# Example aliases
alias zshconfig="code ~/.zshrc"
alias ohmyzsh="code ~/.oh-my-zsh"
alias reload="source ~/.zshrc"

# My Custom Aliases change 
alias please="sudo !!"
alias tmp="cd ~/Development/tmp"
alias proj="cd ~/Projects"
alias work="cd ~/Work"
alias co.="code ."

### CFG  Setup
# Alias for the main cfg git
# alias cfg='/usr/bin/git --git-dir=$HOME/.cfg/ --work-tree=$HOME'
# export function cfg {
#    /usr/bin/git --git-dir=$HOME/.cfg/ --work-tree=$HOME $@
# }


# lastly init starship theme
eval "$(starship init zsh)"

(Optional) Setup iterm2

Install iterm2 using brew or the link I provided above.

Setup Font For Starship

Then go to Preferences > Profiles > Text > Non-ASCII Font and select Fira Code as your font, this will make iterm display special icons that are used by starship theme. Also be sure to select the use ligatures option for extra sweet ->.

Setup Natural Text Editing

Go to Preferences > Profiles > Keys The select the Presets... dropdown to bring up a list of presets. Select the Natural Text Editing preset to add it to your profile.
The Natural Text Editing preset gives you a more natural navigation and editing experience in the terminal. You can use things cmd+delete to delete a whole line, option+<- to move one word over at a time. This is more akin to other text editing environments on your computer.

See this SO for more info on it.

(Optional) Setup .cfg git directory

I use a special git directory I named .cfg to track and manage my config files. It's amazing for making changes/updates and being able to maintain those over time and across computers.

I won't go into all the details, but only list out the steps to get it configure. Follow this blog for the details.

Setup the repo in your root dir

git init --bare $HOME/.cfg
alias cfg='/usr/bin/git --git-dir=$HOME/.cfg/ --work-tree=$HOME'
cfg config --local status.showUntrackedFiles no
echo "alias cfg='/usr/bin/git --git-dir=$HOME/.cfg/ --work-tree=$HOME'" >> $HOME/.bashrc

(if you copied my .zshrc you don't need the last line, just uncomment the cfg aliases at the bottom, reload your zsh and you're good to go)

Test it out by adding a few files to track

cfg status
cfg add .zshrc
cfg commit -m "Add inital .zshrc config"
cfg add .bashrc
cfg commit -m "Add bashrc"
cfg remote add origin <insert repo url here>
cfg push origin master

The End!

And that's it! That's how to configure a super awesome, fast and powerful shell in less than 15min!

Get started by playing around with these commands:

$ br > opens broot so you can navigate directories and run commands in them quickly without all the cd + ls looping mess
$ fzf > will immediately start searching your filesystem, with an interactive search, so you can type characters and it will search for you. This even works with | so you can interactively search logs, history, files anything!
Try typing out some common git commands and get alias-tips to suggest faster alternatives.
You should also start seeing an auto suggest when you start typing familiar commands from your history

There's a lot more, but hopefully this gets you running in the right direction to explore and feel powerful. Enjoy!

Home Row Arrow Keys

gpynes — Fri, 25 Oct 2019 23:44:50 +0000

What are home row arrow keys?

Home row arrow keys are a way of remapping your keyboard to make navigating around your computer faster and more efficient. In this tutorial I will be remapping my ijkl keys to become my arrow keys (up, left, down, right) when I hold a specific modifier key. In this case caps_lock.

Why is this a good thing?

Have you ever noticed how you actually type and move your cursor around files currently? You probably even find yourself reaching for your mouse quite frequently. Look at it carefully, you'll see you do a lot of hand context switching, moving from typing to navigating around back and forth, back and forth. I'm not sure about you, but for me at least, this context switching would cause a lot of issues and misspellings if I misplaced my hand even slightly when switching between the two modes.

To be honest, I never really thought of this as a major issue as it was just one of those things you had to deal with to use a computer. That is until an old coworker turned me onto home row arrow keys. He was seriously a wizard! We would pair program and his speed and efficiency moving around files, slicing/pasting text and typing were blazing fast! It was incredible! Even outside of his ide he was a ninja. Opening other programs, navigating around them, especially web browsing. I was astonished.

He was using a nifty mechanical keyboard and I assumed it was that but when he explained to me how he remapped his ijkl keys and that was how he was able to perform such fast actions I knew I had to try this out. He told me how to do it in a few easy steps and I've since refined it a bit but it's basically the exact same setup. Huge shout out to this wiz for changing my life and reducing the translation time from thought to computer action. You've saved me countless hours over the years, my dude!

Getting Started

DISCLAIMER: this is only for mac at this time, if you know how to set it up for windows or linux let me know I'm very interested!

If you just want a copy of json config file click here

Download and Install Karabiner-Elements

Karabiner Elements is this amazing application that gives you a great and flexible way of remapping your keyboard layout. You can either build it from the source there or download the installer here.

Once downloaded, go ahead and install it. You may need to give it some extra privileges depending on your configuration.

Setup key remappings

We'll start by setting up a new profile. Open the app:
cmd+spacebar then type karabiner-elements and go to the app's preferences

From the menu screen select the profiles tab

Create a new profile and name it whatever you want.

Hit enter to save the name and then toggle to the new profile.

Open your ~/.config/karabiner directory and you should now see a karabiner.json file. We will need to open and edit this file. (If it's not there, you can simply create it and copy in my config above.)

Looking through the file you should see that it contains a profile section with all the profile names listed in the profiles tab.

Break down

Okay so this file may be a bit confusing at first but the key things here are the complex_modifications and simple_modifications.

You can think of simple_modifications as basic key remappings.
ie. change key a to act as key b etc.

The complex_modifications are macros. Combinations of keypresses that together, will perform certain actions.

Simple Modification

Let's start with the simple_modifications that we need to change since that's an easy way to get more comfortable.

As you can see the simple_modifications is an array so let's add a new item to it.

...
"simple_modifications": [
  {
    "from": {
      "key_code": "caps_lock"
    },
    "to": {
      "key_code": "left_control"
    }
  }
]
...

All we're saying here is that we want Karabiner to overwrite the caps_lock key ("from") on our keyboard with left_control ("to"). (As far as I know you have to specify the control orientation and can't just do control for any kind of ctrl key.)

Once the file is saved. Use the profile selector to swap between Default and our new profile to refresh the changes. You should now see your caps_lock key now acts as your ctrl key.

Pretty simple right?

Complex Modification

Alright with that out of the way let's get to the good stuff.

We're interested in the the rules section of the complex_modifications, we can ignore the parameters section for now. (But I do recommend looking that over at some point).

We are going to create a new rule, you can call it whatever you like but I named mine: Change left_ctrl+jikl to arrow keys

You can copy and paste this into the rules array:

{
  "description": "Change left_ctrl+jikl to arrow keys",
  "manipulators": [
    {
      "from": {
        "key_code": "j",
        "modifiers": {
          "mandatory": ["left_control"],
          "optional": ["any"]
        }
      },
      "to": [
        {
          "key_code": "left_arrow"
        }
      ],
      "type": "basic"
    },
    {
      "from": {
        "key_code": "k",
        "modifiers": {
          "mandatory": ["left_control"],
          "optional": ["any"]
        }
      },
      "to": [
        {
          "key_code": "down_arrow"
        }
      ],
      "type": "basic"
    },
    {
      "from": {
        "key_code": "i",
        "modifiers": {
          "mandatory": ["left_control"],
          "optional": ["any"]
        }
      },
      "to": [
        {
          "key_code": "up_arrow"
        }
      ],
      "type": "basic"
    },
    {
      "from": {
        "key_code": "l",
        "modifiers": {
          "mandatory": ["left_control"],
          "optional": ["any"]
        }
      },
      "to": [
        {
          "key_code": "right_arrow"
        }
      ],
      "type": "basic"
    }
  ]
}

For this rule all we're saying is that for each of the jikl keys if they're pressed while left_control is pressed, make that key act as the corresponding arrow key. The optional parameter is necessary as it will map any additional modifiers to be allowed to be passed along to our combination as well. So things like left_control + shift + j will now act like shift + left_arrow etc.

Refresh the profile again and since we just remapped our caps_lock to be left_control you should now be able to navigate around your computer using caps_lock + jikl!

If it's not working for you, you can copy and paste my settings into your karabiner.json file from this link and then refresh to see if it works.

The End!

That's it! I hope you enjoyed this and that it helps speed up your workflow as much as it has mine. If you have any questions or comments for me feel free to leave them below.

Happy coding!

Extra topics

Why `ctrl` and not `fn`

Okay you may be thinking, why set caps_lock as ctrl and not fn or something more complex so it doesn't interfere with other key combos you rely on? That is a fair point and you're more than welcome to modify the json config to your liking. The reason I stick with ctrl is because Unix based OS's come with some built in navigation shortcuts automatically that utilize the ctrl key.

Some that I use all the time are ctrl + a and ctrl + e for navigating to the beginning and ending of a line easily. By swapping to ctrl and not something else I keep cursor navigation consistent across my entire computer, regardless of the application I'm in. (Try going to your url bar in your browser and hitting ctrl + shift + e)

Sortcut reference - https://www.computerhope.com/ushort.htm

Downsides to the switch

There are some downsides to making this switch. I don't think they're big but they are worth noting:

Becoming reliant on setup

By making this swap and becoming reliant on this setup I now find it hard to use other computers. Not terribly difficult, but I definitely start YELLING pretty quickly when I first start typing on someone else's computer. I then remember to use the real arrow keys and then it just feels uncomfortable to navigate around like someone has put weights on my thoughts.

Reliant on third party app

When I first made the transition Karabiner-Elements wasn't around and it's predecessor Karabiner wasn't as easy to setup. It also didn't play as well with OSX and when I upgraded to Sierra it stopped working completely. This sucked and I got very scared I would have to go back to my old life of slow navigation. Thankfully elements was made with the intention of being long term, but it's still something to keep in mind that I am now dependent on this 3rd party application.

Ionic stupid simple.

gpynes — Tue, 18 Jun 2019 20:23:01 +0000

Before Getting Started

This is a quick and simple way I've found to get up and running with a hybrid application that you can build natively on your device. It's in no way the 'best' way, but damn is it simple and fast to get started. I think the future for application development is looking very exciting with all the tools that have come out recently. Also! If you've got any other really nice cross-platform setups you like that I should check out leave a comment below so I can check em out!

Prerequisites + Disclaimer

Disclaimer
I will be building this on a mac and for ios I am not familiar with windows and android so not sure how well this tutorial ports over to them. If differences occur when you're trying it out I'd love hear about it and learn more about systems I'm not as familiar with!

Things you need
This tutorial requires node and xcode installed locally on your machine.

Getting Started!!

Stackblitz

One of my favorite new tech tools right now is stackblitz it's a great tool for throwing together a quick poc or sharing bugs with others. It's highly configurable and comes with the most common development environments already setup. For this tutorial I searched on stackblitz for an already made ionic project that we can play with and use for this tutorial. Click this link to open the project.

It should look a bit like this:

Make some edits

There wasn't any actual functionality on this project, so I wanted to add come click listeners.

Open the src/app/home/home.page.html file and replace the <ion-content> tag to look like this:

<ion-content padding>
  <ion-button class="host-element" (click)="logClick('big span')">
    <span class="host-child-element">span</span>
  </ion-button>

  <button type="button" (click)="logClick('button')">BUTTON</button>
  <span (click)="logClick('litte span')">span</span>
</ion-content>

and then in the src/app/home/home.page.ts file add this log method inside the HomePage class:

  logClick = (msg) => console.log(msg, 'clicked!')

Stackblitz should hot reload for you so you can just go click the buttons and see the log messages like so:

Getting it on a device

Okay so we're able to edit some code in a browser and see live results in the same page, dev life is pretty sweet! But how about getting it from the browser onto an actual phone? Well that's actually fairly easy as well.

Download the code.

First things first download the code by clicking the download button in the top left of the stackblitz menu.

Once downloaded, navigate to newly downloaded project and run:

npm i to install all the dependencies
npm i -D cordova @ionic/ng-toolkit to install cordova and ionic's tools to the project for building.

Now just run:
npx ionic cordova build ios to build to project for ios.

If You get an error that looks like this:

chunk {cordova} cordova.js, cordova.js.map (cordova) 76.3 kB  [rendered]
chunk {main} main.js, main.js.map (main) 653 bytes [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 92.4 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.08 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 67.2 kB [initial] [rendered]

ERROR in node_modules/@ionic/core/dist/types/components.d.ts(5565,13): error TS2320: Interface 'HTMLIonInputElement' cannot simultaneously extend types 'IonInput' and 'HTMLStencilElement'.
  Named property 'focus' of types 'IonInput' and 'HTMLStencilElement' are not identical.
node_modules/@ionic/core/dist/types/components.d.ts(5811,13): error TS2320: Interface 'HTMLIonSearchbarElement' cannot simultaneously extend types 'IonSearchbar' and 'HTMLStencilElement'.
  Named property 'focus' of types 'IonSearchbar' and 'HTMLStencilElement' are not identical.
node_modules/@ionic/core/dist/types/components.d.ts(5907,13): error TS2320: Interface 'HTMLIonTextareaElement' cannot simultaneously extend types 'IonTextarea' and 'HTMLStencilElement'.
  Named property 'focus' of types 'IonTextarea' and 'HTMLStencilElement' are not identical.
node_modules/@ionic/core/dist/types/utils/overlays-interface.d.ts(37,52): error TS2344: Type 'HTMLIonModalElement' does not satisfy the constraint 'Required<ModalOptions<ComponentRef>>'.
  Types of property 'componentProps' are incompatible.
    Type 'unknown' is not assignable to type '{ [key: string]: any; }'.
node_modules/@ionic/core/dist/types/utils/overlays-interface.d.ts(37,248): error TS2344: Type 'HTMLIonPopoverElement' does not satisfy the constraint 'Required<PopoverOptions<ComponentRef>>'.
  Types of property 'componentProps' are incompatible.
    Type 'unknown' is not assignable to type '{ [key: string]: any; }'.

[ERROR] An error occurred while running subprocess ng.

        ng run app:ionic-cordova-build --platform=ios exited with exit code 1.

        Re-running this command with the --verbose flag may provide more information.
Computers-MacBook-Pro:ionic-4-shadow-dom-clarification (2) computer$

Continue directly below, other wise skip ahead to here.

Add // @ts-ignode above each of these lines:
node_modules/@ionic/core/dist/types/component.d.ts:5565

node_modules/@ionic/core/dist/types/component.d.ts:5811

node_modules/@ionic/core/dist/types/component.d.ts:5907

node_modules/@ionic/core/dist/types/utils/overlays-interface.d.ts:37

Note that when you add each // @ts-ignore it will add to the line count for each error below it

To look something like this:
component.d.ts

...
 // @ts-ignore
  interface HTMLIonInputElement extends Components.IonInput, HTMLStencilElement {}
...
  // @ts-ignore
  interface HTMLIonSearchbarElement extends Components.IonSearchbar, HTMLStencilElement {}
...
...
  // @ts-ignore
  interface HTMLIonTextareaElement extends Components.IonTextarea, HTMLStencilElement {}
...

overlays-interface.d.ts

...
// @ts-ignore
export declare type HTMLOverlaysElement = Conforms<HTMLIonModalElement, ModalOptions> | Conforms<HTMLIonToastElement, ToastOptions> | Conforms<HTMLIonActionSheetElement, ActionSheetOptions> | Conforms<HTMLIonAlertElement, AlertOptions> | Conforms<HTMLIonPopoverElement, PopoverOptions> | Conforms<HTMLIonPickerElement, PickerOptions> | Conforms<HTMLIonLoadingElement, LoadingOptions>;
...

With those type errors out of the way, run the build again:
npx ionic cordova build ios
And you should be good to go.

Running it!

Sweet! So the project has been installed and built now let's run it on the simulator. Open the project in xcode:

open platforms/ios/MyApp.xcodeproj/

Click the play button once the project is ready and you should see the app build and run on the ios simulator.

If you tap the buttons you should see the logs in the debug console inside xcode.

Done!!

Well sort of. That wasn't very difficult or requirement-heavy application, but the idea behind developing an app with hot-reloading online and then building it natively on a device so easily gets me hyped! The feedback-time during development feels so much faster to me. I hope you enjoyed and learned something from this and if you have any questions or better yet suggestions on things I could learn or improve on leave it in the comments below. Happy coding!

DEV Community: gpynes

Configuring Your Shell Environment

My Shell Config

Installation

Install Oh My ZSH

Install additional plugins

Install the Starship theme

Install additional tools

Configue .zshrc

(Optional) Setup iterm2

Setup Font For Starship

Setup Natural Text Editing

(Optional) Setup .cfg git directory

The End!

Home Row Arrow Keys

What are home row arrow keys?

Why is this a good thing?

Getting Started

Download and Install Karabiner-Elements

Setup key remappings

Break down

Simple Modification

Complex Modification

The End!

Extra topics

Why ctrl and not fn

Downsides to the switch

Becoming reliant on setup

Reliant on third party app

Ionic stupid simple.

Before Getting Started

Prerequisites + Disclaimer

Getting Started!!

Stackblitz

Make some edits

Getting it on a device

Download the code.

Running it!

Done!!

Why `ctrl` and not `fn`