An open API service indexing awesome lists of open source software.

https://github.com/tobua/instl

Guide to Set Up a Fresh macOS for Web Development
https://github.com/tobua/instl

applications guide macos setup

Last synced: 3 months ago
JSON representation

Guide to Set Up a Fresh macOS for Web Development

Awesome Lists containing this project

README

        


Screenshot after installation

# instl

Guide to reinstall the latest macOS optimized for Web Development.

## Reinstalling macOS

- Backup your data in the Cloud or on a physical drive.
- Startup your mac in Internet Recovery by pressing and holding **โŒ˜โŒฅR**.
- Go to `Disk Utility` and select `View โ†’ Show All Devices` then select the main Apple SSD and click `Erase` with format APFS and GUID scheme.
- Exit `Disk Utility` and format the drive by clicking `Reinstall macOS` in the main menu.
- This will take some time and then follow the instructions making sure to enable encryption when prompted.

## ๐Ÿค– Automatic Configuration Script

The following tasks marked with ๐Ÿค– can be automated by running the `run.sh` found in this repository.

```sh
curl https://raw.githubusercontent.com/tobua/instl/main/run.sh -o run.sh
sh run.sh
# Follow instructions in script and then restart to run again with sudo.
sudo sh run.sh
```

## Configuring the System

- Open `โš™๏ธ System Preferences` and sign in to your Apple ID.
- ๐Ÿค– Increase mouse tracking speed in `โš™๏ธ Mouse` and enable secondary click if you're using Magic Mouse.
- Remove unused apps from dock and ๐Ÿค– disable `Show recent applications` in dock preferences.
- ๐Ÿค– In `โš™๏ธ Mission Control โ†’ Hot Corners...` add Mission Control to Bottom Right and Desktop to Bottom Left.
- ๐Ÿค– `โš™๏ธ Battery` increase time until display turns off when on `Power Adapter`.
- ๐Ÿค– Install Updates and enable `Automatically keep my Mac up to date` in `โš™๏ธ Software Update` settings.
- Edit the Desktop Background in `โš™๏ธ Desktop & Screen Saver`.
- Make sure Guest Account is disabled in `โš™๏ธ Users & Groups`.
- In `โš™๏ธ Security & Privacy` enable unlocking with Apple Watch.

### Optional: Input Language with Special Characters

Recommended if you frequently switch to a local language requiring special characters. If you only need a few characters every once in a while try pressing and holding the related character `a โ†’ 4 โ†’ รค` and a menu to select the desired special character will show up. If this isn't enough go to `โš™๏ธ Keyboard โ†’ Input Sources` and press `+` to add another input language. To easily switch the input language layout go to `โš™๏ธ Keyboard โ†’ Shortcuts` and under `Input Sources` set **โŒฅSpace** as the shortcut for next language.

## Applications

- ๐Ÿค– [Chrome](https://www.google.com/chrome/) Browser
- ๐Ÿค– [Bun](https://bun.sh) / [node](https://nodejs.org) JavaScript Runtime
- ๐Ÿค– [VS Code](https://code.visualstudio.com/) Code Editor or [Cursor](https://cursor.com)
- ๐Ÿค– [Sourcetree](https://www.sourcetreeapp.com/) Git

## Application Specific Setup

### ๐Ÿค– Terminal

Run the following in the Terminal to avoid showing the computer name for every prompt. The command will create a `.zshrc` file in the user root folder. In between the single quotation marks you can add whatever you prefer. Restart the Terminal for the changes to take effect.

```
echo "export PS1='โ†’ '" >> ~/.zshrc
```

### ๐Ÿค– npm

- `[sudo] npm i -g epic-cli` [epic-cli](http://github.com/tobua/epic-cli) provides useful everyday commands.

### VS Code

- ๐Ÿค– Extensions **โŒ˜โ‡งX**: Install the following
- Prettier
- ESLint
- ๐Ÿค– Theme **โŒ˜KT**: and select `Light+`.
- ๐Ÿค– Layout: Disable `View โ†’ Show Minimap`, `View โ†’ Show Breadcrumbs`, `View โ†’ Appearance โ†’ Show Activity Bar` and `View โ†’ Appearance โ†’ Show Status Bar` (If any of the extensions don't work check the status bar).
- ๐Ÿค– Settings **โŒ˜[Comma]**:
- Check `Text Editor โ†’ Formatting โ†’ Format On Save` to format the code with the Prettier extension.
- Enable `Text Editor โ†’ Bracket Pair Colorization` to better recognize matching nested brackets.
- ๐Ÿฅท Mode: Turn `Text Editor โ†’ Line Numbers` off, uncheck `Text Editor โ†’ Folding` and uncheck `Text Editor โ†’ Glyph Margin`. Click the dots next to explorer on the top-left and uncheck all.
- Usage
- Toggle the Terminal with **โŒ˜J**.
- Select multiple cursors with **โŒฅ[Click]**.
- **โŒ˜D** will add another cursor to the next found current selection below.
- Search with **โŒ˜โ‡งF** and switch back to the file tree view with **โŒ˜โ‡งE**.

### Sourcetree

Ignore connecting during startup and then go to the `Remote` tab and click connect. Add your GitHub account, which will automatically connect when you're already logged in in the browser. Logging into GitHub in Chrome make sure to remove existing SSH keys from old installations. Back in Sourcetree generate a new SSH key and `Save`. Checking out won't work until the authenticity of github.com has been confirmed. This can be done in the Terminal and by cloning any repository (install developer tools when prompted)

```
git clone [email protected]:[username]/[repository].git [destination-folder]
```

enter `yes` to add GitHub to known hosts. The following command will ensure the key is available when committing.

```
ssh-add --apple-use-keychain ~/.ssh/[GitHub-Username]-GitHub
```

The SSH key generated by Sourcetree will only be valid for the current session. To push or checkout with Sourcetree run the above again in Terminal after every restart or logout. To avoid running it after every restart it's also possible to add it to `.zshrc` after which the key will be available once the Terminal has opened. Use `sudo vim ~/.zshrc` to edit this file, which has already been created and appended by the `run.sh` script.

```sh
# Load SSH key.
ssh-add -q --apple-use-keychain ~/.ssh/[GitHub-Username]-GitHub
```

## Usage

- Press **โŒ˜โ‡ง.** to show hidden files temporarly in Finder.

## React Native

- Download and open XCode from App Store. If downloading the 7GB for the Simulator fails, it can be downloaded manually from the CLI in a more robust way with `xcodebuild -downloadPlatform iOS`.
- The default Ruby version on macOS is quite outdated. Install [homebrew](https://brew.sh/) (make sure to add it to the PATH as described in the script output). Run `brew install rbenv ruby-build` to install the Ruby environment manager. Run `rbenv install -l` to list the newest stable release and install it with `rbenv install X.Y.Z` and apply it with `rbenv global X.Y.Z`.
- Add the following lines with `sudo vim ~/.zshrc` to the file and restart the Terminal and then check if the switch was successful with `ruby --version`.

```sh
# Add rbenv Ruby to path.
export PATH="$HOME/.rbenv/bin:$PATH"
eval "$(rbenv init -)"
# Add gems to path.
export GEM_HOME="$(ruby -e 'puts Gem.user_dir')"
export PATH="$PATH:$GEM_HOME/bin"
```

- Update all gems with `gem update` and run `gem update --system` to update gem itself. Then, install Cocoapods gem with `gem install cocoapods --user-install`.
- Download and install [AndroidStudio](https://developer.android.com/studio) Android IDE.
- Use Android Studio to open the `/android` project folder from a React Native installation.
- Update dependencies in the `SDK Manager` (icon in top-right). When using [numic](https://github.com/tobua/numic) make sure to [install the CLI tools](https://github.com/tobua/android-sdk-numic-plugin#prerequisites).
- Add a new Virtual Device in the `Device Manager`.
- Add below binaries (includes adb) to path with `sudo vim ~/.zshrc`.

```sh
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
# Use Java bundled with Android Studio.
export JAVA_HOME=/Applications/Android\ Studio.app/Contents/jbr/Contents/Home
# Required by flipper debugger.
export ANDROID_SDK_ROOT=$HOME/Library/Android/sdk
```