Skip to content

Instantly share code, notes, and snippets.

@seachai

seachai/setup.md

Created March 9, 2022 17:51
Show Gist options
  • Save seachai/da61d086a41338916336e5cdc59a2500 to your computer and use it in GitHub Desktop.
Save seachai/da61d086a41338916336e5cdc59a2500 to your computer and use it in GitHub Desktop.
Download ZIP
Macbook Setup Frontend
Raw
setup.md

Macbook Pro Setup for Front-End

Install Chrome

Goto: https://www.google.com/chrome/

Install X-code tools

xcode-select --install

Install homebrew

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> /Users/martin/.zprofile
eval "$(/opt/homebrew/bin/brew shellenv)"
brew update

Install NVM

To install nvm, you should run the install script. To do that, you may either download and run the script manually, or use the following cURL or Wget command:

curl -o- [https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh](https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh) | bash
wget -qO- [https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh](https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh) | bash

Running either of the above commands downloads a script and runs it. The script clones the nvm repository to ~/.nvm, and attempts to add the source lines from the snippet below to the correct profile file (~/.bash_profile, ~/.zshrc, ~/.profile, or ~/.bashrc).

export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm

Additional Notes

  • If the environment variable $XDG_CONFIG_HOME is present, it will place the nvm files there.
  • You can add --no-use to the end of the above script (...nvm.sh --no-use) to postpone using nvm until you manually use it.
  • You can customize the install source, directory, profile, and version using the NVM_SOURCE, NVM_DIR, PROFILE, and NODE_VERSION variables. Eg: curl ... | NVM_DIR="path/to/nvm". Ensure that the NVM_DIR does not contain a trailing slash.
  • The installer can use git, curl, or wget to download nvm, whichever is available.

Troubleshooting on macOS

Since OS X 10.9, /usr/bin/git has been preset by Xcode command line tools, which means we can't properly detect if Git is installed or not. You need to manually install the Xcode command line tools before running the install script, otherwise, it'll fail. (see here)

If you get nvm: command not found after running the install script, one of the following might be the reason:

  • Since macOS 10.15, the default shell is zsh and nvm will look for .zshrc to update, none is installed by default. Create one with touch ~/.zshrc and run the install script again.
  • If you use bash, the previous default shell, your system may not have a .bash_profile file where the command is set up. Create one with touch ~/.bash_profile and run the install script again. Then, run source ~/.bash_profile to pick up the nvm command.
  • You have previously used bash, but you have zsh installed. You need to manually add these lines to ~/.zshrc and run . ~/.zshrc .
  • You might need to restart your terminal instance or run . ~/.nvm/nvm.sh. Restarting your terminal/opening a new tab/window, or running the source command will load the command and the new configuration.
  • If the above didn't help, you might need to restart your terminal instance. Try opening a new tab/window in your terminal and retry.

If the above doesn't fix the problem, you may try the following:

  • If you use bash, it may be that your .bash_profile (or ~/.profile) does not source your ~/.bashrc properly. You could fix this by adding source ~/<your_profile_file> to it or follow the next step below.
  • Try adding the snippet from the install section, that finds the correct nvm directory and loads nvm, to your usual profile (~/.bash_profile, ~/.zshrc, ~/.profile, or ~/.bashrc).
  • For more information about this issue and possible workarounds, please refer here

Note: For Macs with the M1 chip, node started providing arm64 arch darwin packages since v16.0.0. For earlier versions, there were only darwin_x64 packages available but no darwin_arm64. If you are facing issues installing node using nvm, you may want to update to v16 or later.

Verify Installation To verify that nvm has been installed, do:

command -v nvm

which should output nvm if the installation was successful. Please note that which nvm will not work, since nvm is a sourced shell function, not an executable binary.

Note: On OS X, if you have/had a "system" node installed and want to install modules globally, keep in mind that:

  • When using nvm you do not need sudo to globally install a module with npm -g, so instead of doing sudo npm install -g grunt, do instead npm install -g grunt If you have an ~/.npmrc file, make sure it does not contain any prefix settings (which is not compatible with nvm)
  • You can (but should not?) keep your previous "system" node install, but nvm will only be available to your user account (the one used to install nvm). This might cause version mismatches, as other users will be using /usr/local/lib/node_modules/* VS your user account using ~/.nvm/versions/node/vX.X.X/lib/node_modules/*

Homebrew installation is not supported. If you have issues with homebrew-installed nvm, please brew uninstall it, and install it using the instructions above.

Note: If you're using zsh you can easily install nvm as a zsh plugin. Install zsh-nvm and run nvm upgrade to upgrade.

Install NodeJS

Goto: https://nodejs.org/en/ or

brew install node

or via nvm

Node Version Manager is a bash script used to manage multiple released Node.js versions. It allows you to perform operations like install, uninstall, switch version, etc.

On Unix / OS X systems Node.js built from source can be installed using nvm by installing into the location that nvm expects:

env VERSION=python tools/getnodeversion.py make install DESTDIR=nvm_version_path v$VERSION PREFIX=""

After this you can use nvm to switch between released versions and versions built from source.

For example, if the version of Node.js is v8.0.0-pre:

nvm use 8

Once the official release is out you will want to uninstall the version built from source:

nvm uninstall 8

Install iterm2

brew install --cask iterm2

Install zsh

Note: Mac OSX should already come with zsh installed Try the following:

echo $0

It should return zsh else do the following:

brew install zsh
zsh --version

Install oh-my-zsh

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

Install powerlevel10k theme

brew install romkatv/powerlevel10k/powerlevel10k
echo "source $(brew --prefix)/opt/powerlevel10k/powerlevel10k.zsh-theme" >>~/.zshrc
  • Close terminal window and open a new one.
  • p10k config should run automatically.

Install autosuggestions

git clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions

Add the plugin to the list of plugins for Oh My Zsh to load (inside ~/.zshrc):

plugins=(zsh-autosuggestions)

if you have existing plugins:

plugins=(git zsh-autosuggestions)

Restart a new terminal session. Now when you type commands as follows you can see the auto-completion of the commands you type, if you have used them previously. (Press the right arrow key to accept the suggested command.)

Install Syntax Highlighting

This package provides syntax highlighting for the shell zsh. It enables the highlighting of commands whilst they are typed at a zsh prompt into an interactive terminal. Simply clone this repository and source the script:

git clone https://github.com/zsh-users/zsh-syntax-highlighting.git
echo "source ${(q-)PWD}/zsh-syntax-highlighting/zsh-syntax-highlighting.zsh" >> ${ZDOTDIR:-$HOME}/.zshrc

Then, enable syntax highlighting in the current interactive shell:

source ./zsh-syntax-highlighting/zsh-syntax-highlighting.zsh

Now you are ready to use the syntax highlighting features. If all worked well, as you type keywords you will see the syntax is highlighted with different colors

Generate SSH Keys

ssh -v git@github.com

Install yarn package manager

brew install yarn

Install VS Code

Goto: https://code.visualstudio.com/ or

brew install --cask visual-studio-code

Update VS Code settings

  • Run VS Code from the command line
    • CMD-SHIFT-P and search for “Shell Command: Install ‘code’ command in PATH”

Install VS Code extensions

Configure OSX Finder

  • Show status bar
    • finder > view > show status bar (CMD-/)
  • Show path bar
    • finder > view show path bar (OPTION-CMD-P)

Miscellaneous Git configurations

Run

git config --global user.email "[you@example.com](mailto:you@example.com)"
git config --global [user.name](http://user.name/) "Your Name"

to set your account's default identity. Note: omit --global to set the identity only in current repository.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment