francescoesposito.dev

 How to setup your Mac for frontend development with dotfiles

A detailed guide to my frontend development environment setup with custom dotfiles for improved productivity and efficiency.

March 20, 2025
#shell #macos #productivity #git #zsh #vscode

If you’ve been a developer for any length of time, you know that your environment setup can make or break your productivity. Over the years, I’ve refined my development environment to a point where I can get a new machine up and running with all my preferred configurations in minutes instead of days.

In this article, I’ll walk you through my dotfiles repository, explaining the key components and how they can supercharge your development workflow.

What Are Dotfiles? 📁

Dotfiles are configuration files for various tools and applications in Unix-like systems (including macOS). They’re called “dotfiles” because they typically begin with a dot (.), which makes them hidden in the file system by default.

These files control everything from your shell behavior to application-specific settings. By versioning and sharing them, you can:

  1. 🚀 Quickly set up a new development environment
  2. 🔄 Ensure consistency across different machines
  3. 👥 Share your configurations with others
  4. 📝 Document your preferences and tools

Repository Structure 🏗️

My dotfiles repository is organized into a logical structure that makes it easy to find and modify specific configurations:

dotfiles/
├── git/                    # Git configuration
├── osx/                    # macOS-specific configurations
├── utils/                  # Utility scripts
├── .editorconfig           # Editor configuration
├── .zshrc                  # Zsh configuration (replaces oh-my-zsh/ folder)
├── Brewfile                # Homebrew package definitions
├── install.sh              # Main installation script
└── README.md               # Documentation

This modular approach makes it easy to find and modify specific parts of your configuration without having to navigate through monolithic files.

Key Components of My Dotfiles ✨

Powerful Aliases 💪

My .zshrc file includes several useful aliases to speed up common tasks. Some examples:

# Replacements for common commands with modern alternatives
alias ls='eza --icons'
alias ll='eza -l --icons'
alias la='eza -la --icons'
alias cat='bat'

# Navigation & Finder
alias w="cd ~/workspace"
alias finder="open ."

# JS Development
alias nfresh="rm -rf node_modules/ package-lock.json && npm install"
alias dev="npm run dev"

# System Utilities
alias ip="ifconfig -a | grep -o 'inet6\\? \\(addr:\\)\\?\\s\\?\\(\\(\\(\[0-9\]\\+\\.\\)\\{3\\}\[0-9\]\\+\\)\\|\[a-fA-F0-9:\]\\+\\)' | awk '{ sub(/inet6? (addr:)? ?/, \"\"); print }'"
alias clean="find . -name '*.DS_Store' -type f -ls -delete"
alias zip="zip -r -X -9"

# Update All
alias update='brew update; brew upgrade; brew cleanup; npm update npm -g; npm update -g;'

Additional aliases, particularly for Git, are provided by the enabled Oh My Zsh plugins (like git, node, docker, etc.).

Homebrew Package Management: The Brewfile 🍺

The Brewfile is one of the most powerful components of my dotfiles. It leverages Homebrew’s bundle functionality to declaratively specify all the packages and applications needed for development.

Here’s a snippet from my actual Brewfile:

# Core Utilities
brew "bash"
brew "bash-completion@2"
brew "coreutils"
brew "git"
brew "gh"
brew "curl"

# Development Utilities
brew "fzf"
brew "ripgrep"
brew "bat"
brew "eza"

# Frontend Development
brew "fnm"
brew "pnpm"

# --- Casks ---

# Fonts
cask "font-hack-nerd-font"

# Terminals
cask "hyper"

# Editors / IDEs
cask "visual-studio-code"
cask "cursor"

# Browsers
cask "brave-browser"

# Productivity & Utilities
cask "raycast"
cask "docker"

# Communication
cask "slack"

This Brewfile automatically installs:

  • 🔧 Core Utilities: bash, coreutils, git, gh, curl, etc.
  • 💻 Development Utilities: fzf (fuzzy finder), ripgrep (search), bat (cat clone), eza (ls replacement), etc.
  • 🌐 Frontend: fnm (Node version manager), pnpm.
  • ✍️ Fonts: font-hack-nerd-font (for terminal glyphs).
  • ⌨️ Apps: hyper (Terminal), VS Code, Cursor, Brave, Raycast, Docker, Slack, etc.
  • ✨ QuickLook Plugins: Various plugins for previewing code, markdown, json, etc. (Check Brewfile for full list).

When you run the installation script, Homebrew reads this file and installs everything in one go. If a package is already installed, it simply skips it.

Oh-My-Zsh Configuration 💻

My setup uses Oh-My-Zsh as the shell framework, with a customized Solarized Dark theme. The main configuration now resides in the .zshrc file in the repository root, which sources Oh My Zsh and applies customizations. This provides:

  • 📜 Better command history management
  • ⌨️ Improved tab completion
  • 🧩 Helpful plugins for common tools
  • 🎨 A visually appealing, informative prompt

Here’s what my terminal looks like with this configuration:

username@machine ~/project (main) $

The prompt shows your current directory and git branch at a glance, making it easier to keep track of where you are and what you’re working on.

macOS System Preferences 🖥️

The repository also includes scripts in the osx directory, primarily index.sh, that configure various macOS system preferences for a developer-friendly experience. You can review osx/index.sh to see the specific settings applied.

These settings aim to create a more efficient development environment right from the start, with:

  • 🚀 Performance optimizations
  • 🖥️ Dock settings for optimal screen real estate
  • 🔍 Finder configurations for productivity
  • 🔕 System settings that reduce distractions

Why This Matters for Frontend Developers 🎯

As a frontend developer, this dotfiles configuration is specifically tailored for web development workflows:

  1. 📂 Quick access to projects: Aliases make it easy to navigate to frequently-used directories
  2. 🔄 Streamlined Git workflow: Aliased commands handle common patterns with fewer keystrokes
  3. 🧹 Consistency in code style: The .editorconfig ensures uniform formatting
  4. ⏱️ Reduced setup time: New machines are ready for productive work in minutes

Customizing for Your Needs 🛠️

While my dotfiles are ready to use out of the box, I encourage you to fork the repository and adapt it to your preferences. The modular structure makes it easy to:

  • ➕ Add or remove specific tools in the Brewfile
  • 🔄 Modify aliases to match your workflow
  • ⚙️ Adjust configuration parameters
  • 🔌 Add support for additional applications

Maintaining Your Dotfiles 🔄

Once you’ve set up your dotfiles, it’s important to keep them updated as your preferences evolve:

  1. 🧪 Make changes locally first to test them
  2. 💾 Commit working changes to your repository
  3. 🔄 Pull updates to other machines when needed
  4. 🧹 Periodically review and remove unused configurations

Installation 📥

Getting started is simple:

  1. Clone the repository:

    git clone https://github.com/phoinixi/dotfiles.git ~/.dotfiles

    (Using ~/.dotfiles is a common convention, but you can choose another location)

  2. Run the installation script:

    cd ~/.dotfiles
./install.sh

The script will handle installing Homebrew, packages, Oh My Zsh, setting up symlinks, and applying macOS settings.

  1. Restart your terminal: Open a new terminal window/tab or run source ~/.zshrc.

  2. (Manual Step) Configure Git User:

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

Conclusion 🏁

A well-crafted set of dotfiles is an investment that pays dividends throughout your development career. My collection has evolved over years of professional work, and I continue to refine it as I discover new tools and techniques.

Whether you use my dotfiles as a starting point or simply as inspiration for your own, I hope this article has shown the value of maintaining a versioned, portable configuration for your development environment.

Check out the full repository on GitHub and feel free to raise issues or submit pull requests if you have suggestions for improvements!

What’s your favorite dotfiles trick? Let me know in the comments below!