Web Development setup on mac

This is my setup when i need to setup a new mac for webdev. It includes the basics to get php running with Valet, Node with NVM, OH MY ZSH on the terminal and the apps i use

Update Mac OS

Just do it. Sit back and relax, it might take a while.

Trackpad

System Preferences > Trackpad > Point & Click > Tap to Click [on]
System Preferences > Trackpad > Scroll & Zoom > Scroll Direction: Natural [off]
System Preferences > Acessibility > Pointer Control > Trackpad options > Enable Dragging [on] (without drag lock)

Keyboad shortcuts

System Preferences > Keyboard > Shortcuts > Mission Control > Move to left space = cmd⌘ + ←
System Preferences > Keyboard > Shortcuts > Mission Control > Move to right space = cmd⌘ + →

Mission Control

System Preferences > Mission control > Automatically rearrange spaces based on most recent use [off]

Install the Apps

1password, Sketch, VS Code, Chrome, Firefox, iTerm2, Clipy, The Unarchiver, Slack, Whatsapp, Spotify, Insomnia

Optional for UI/UX:

Discord, Skype, MongoDB Compass, Sketch, Affinity Designer, Photo and Publisher

Dock spacing

Add an empty separator to the dock. Enter the code below in the terminal. One for each separator.

defaults write com.apple.dock persistent-apps -array-add '{"tile-type"="spacer-tile";}'

Reset the dock

killall Dock

Xcode setup

Install Xcode via Apple's App Store

Command line tools

After Xcode is installed run this on your terminal

xcode-select --install

Installing Oh-my-zsh

http://ohmyz.sh/

Open terminal

sh -c "$(curl -fsSL https://raw.github.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"

Optional: Install Honukai Theme

VS Code

To allow commands like code file.ext in the terminal.

Open VSCode then open the Command Palette (⇧⌘P) and type shell command to find the Shell Command: Install 'code' command in PATH command.

Install these extensions

Eslint, Path Intellisense, Prettier, Debugger for Chrome, JavaScript Debugger (Nightly)

Optional extensions

Live Share, Color Highlight, Live Server, EditorConfig for VS Code, DotENV, Material Icon Theme, GitLens, graphql

Settings

{
    "terminal.integrated.fontSize": 12,
    "workbench.startupEditor": "newUntitledFile",
    "files.trimTrailingWhitespace": true,
    "files.insertFinalNewline": true,

    "editor.tabSize": 2,
    "editor.fontSize": 13,
    "editor.lineHeight": 19,
    "editor.fontLigatures": false,

    "explorer.compactFolders": false,
    "editor.renderLineHighlight":"gutter",
    "workbench.editor.labelFormat": "short",
    "extensions.ignoreRecommendations": true,

    "javascript.updateImportsOnFileMove.enabled": "always",
    "typescript.updateImportsOnFileMove.enabled": "never",

    "breadcrumbs.enabled": true,
    "editor.parameterHints.enabled": false,
    "explorer.confirmDragAndDrop": false,
    "explorer.confirmDelete": false,

    "editor.rulers": [80, 120],

    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },

    "files.associations": {
        ".sequelizerc": "javascript",
        ".stylelintrc": "json",
        ".prettierrc": "json"
    },

    "css.validate": false,

    "emmet.triggerExpansionOnTab": true,
    "emmet.showSuggestionsAsSnippets": true,

    "emmet.syntaxProfiles": {
        "javascript": "jsx",

    },

    "emmet.includeLanguages": {
        "html.erb": "html",
        "erb": "html",
        "vue": "html",
    },
    

    "tailwindCSS.includeLanguages": {
        "html.erb": "html",
        "erb": "html",
        "vue": "html",
    },
      

    "gitlens.codeLens.recentChange.enabled": false,
    "gitlens.codeLens.authors.enabled": false,
    "gitlens.codeLens.enabled": false,

    "git.enableSmartCommit": true,

    "typescript.tsserver.log": "verbose",
    "javascript.suggest.autoImports": true,
    "typescript.suggest.autoImports": true,
    "liveServer.settings.donotShowInfoMsg": true,
    "material-icon-theme.activeIconPack": "nest",

    "material-icon-theme.folders.associations": {
        "infra": "app",
        "entities": "class",
        "schemas": "class",
        "typeorm": "database",
        "repositories": "mappings",
        "http": "container",
        "migrations": "tools",
        "modules": "components",
        "implementations": "core",
        "dtos": "typescript",
        "fakes": "mock",
        "websockets": "pipe",
        "protos": "pipe",
        "grpc": "pipe"
    },

    "material-icon-theme.files.associations": {
        "ormconfig.json": "database",
        "tsconfig.json": "tune",
        "*.proto": "3d"
    },
    "editor.tabCompletion": "on",
    "editor.snippetSuggestions": "top",
    "editor.accessibilitySupport": "off",
    "diffEditor.ignoreTrimWhitespace": false,
    "editor.minimap.enabled": false
}

Install HomeBrew http://brew.sh/

Homebrew provides a system for managing graphical and command line software for macOS, enabling you to quickly install and update the tools and libraries that you need.

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

If you have M1 Chip Mac run the below command, close terminal and open the terminal again

echo "export PATH=/opt/homebrew/bin:$PATH" >> ~/.zshrc

To check if it worked

brew --version
brew doctor

Install Git

brew install git

After installing git, set your git details:

If you have only one git user:

git config --global user.name "Your Name"
git config --global user.email "you@your-domain.com"

For multiple git users

Create a git config at ~/.gitconfig

[user]
    name = John Doe
    email = john@doe.tld

[includeIf "gitdir:~/work/"]
    path = ~/work/.gitconfig

Create a work specific config ~/work/.gitconfig (anything inside this subfolder will use this config)

[user]
    email = john.doe@company.tld

Generate SSH key

run on terminal:

ssh-keygen

Follow the prompting, and enter your passphrase. Then run the following command (copies your ssh key to the clipboard):

cat ~/.ssh/id_rsa.pub | pbcopy

You can now go to GitHub, click on your profile pic, and go to settings/SSH and GPG Keys. click ‘New SSH Key’. Give it a catchy title (or not), and add your key below. Click ‘Add SSH Key’ and you are all set!

NVM and Yarn for NODE

To install NVM, visit https://github.com/nvm-sh/nvm#install--update-script to follow the steps. But at the time of writting this is the command:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash

The command above will append nvm's PATH to ~/.zshrc so make sure it exists, or any other shell rc file.

Then just install the need node version

nvm install stable

Update NPM

npm install npm@latest -g

Now you can install Yarn

npm install -g yarn

Composer and Valet for PHP

Follow valet's installation guide to get PHP with valet working. It's quite easy.

Worth mentioning that during install composer you can install it globally by:

php PATH/TO/COMPOSER/composer-setup.php --install-dir=/usr/local/bin --filename=composer

and rembember to change PATH/TO/COMPOSER to its correct path.

After Valet is installed

cd ~/Dev/sites

Create the folders if nedeed, then run:

valet tld local

It will prompt for password, and then reconfigure Dnsmasq and restart php and nginx

valet park

Now every project (i.e. folder) inside ~/Dev/sites will be served by Valet at Http://[project-name].local.

If you need a secure connection (TLS using HTTP/2) you can run:

valet secure [project-name]

Now to allow sharing sites on your Local Network (via HTTP)

code /usr/local/etc/nginx/valet/valet.conf

Change line

listen 127.0.0.1:80 :default_server;

to:

listen 80 :default_server;

Now to solve a problem, at the time of writting of this guide, we need to modify valet's server.php

 code ~/.composer/vendor/laravel/valet/server.php

And add

/**
 * If the HTTP_HOST is an IP address, check the start of the REQUEST_URI for a
 * valid hostname, extract and use it as the effective HTTP_HOST in place
 * of the IP. It enables the use of Valet in a local network.
 */
if (preg_match('/^([0-9]+\.){3}[0-9]+$/', $_SERVER['HTTP_HOST'])) {
    $uri = ltrim($_SERVER['REQUEST_URI'], '/');

    if (preg_match('/^[-.0-9a-zA-Z]+\.'. $valetConfig['tld'] .'/', $uri, $matches)) {
        $host = $matches[0];
        $_SERVER['HTTP_HOST'] = $host;
        $_SERVER['REQUEST_URI'] = str_replace($host, '', $uri);
    }
}

After this piece of code:

$valetConfig = json_decode(
    file_get_contents(VALET_HOME_PATH.'/config.json'), true
);

Save and then restart valet

valet restart

Now you can access the app using your mac's local ip (in this example 192.168.0.5)

192.168.0.5/[app-name].local/

For other settings like changing php version, sharing sites via Ngrok, visit valet's installation guide

Shopify cli

Shopify development worflow, using Themekit.

brew tap shopify/shopify
brew install themekit

Mongodb

brew tap mongodb/brew
brew install mongodb-community@4.2

Logitech options

Download logitech options for keyboard.

That's it. Done.

👊