Skip to content

Instantly share code, notes, and snippets.

@mpaiva-cc

mpaiva-cc/fed-onboarding.md

Last active December 19, 2024 16:42
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save mpaiva-cc/81f5683c3ebda8025a3ad69d234c7e8f to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save mpaiva-cc/81f5683c3ebda8025a3ad69d234c7e8f to your computer and use it in GitHub Desktop.
Download ZIP
Onboarding Frontend Develoeprs
Raw
fed-onboarding.md

Onboarding Checklist for Frontend Developers: Setting Up a Development Environment on a New Mac

Setting up a development environment on a new Mac is a crucial first step for frontend developers to ensure productivity and consistency in their workflows. This guide provides a comprehensive checklist for configuring your system with the essential tools and frameworks needed for modern web development.

From installing foundational software like Git and Node.js to setting up advanced tools like Docker and code editors, this step-by-step onboarding process is designed to get you up and running quickly.

Whether you’re a seasoned developer or just starting, following this guide will streamline your setup and help you focus on what matters most—writing great code!

1. Update and Prepare macOS

  • Update macOS to the latest version from System Preferences > Software Update.
  • Install Xcode Command Line Tools: 
    xcode-select --install
  • Install Homebrew for package management: 
    /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
  • Verify Homebrew installation: 
    brew --version

2. Install Essential Development Tools

Install Essential Packages

Use Homebrew to install the following tools:

  1. Git:

    • Why: Git is a distributed version control system that allows you to track changes in your code, collaborate with others, and manage branches.
    • Command: 
      brew install git

  2. Node.js:

    • Why: Node.js is a JavaScript runtime used to run JavaScript outside the browser. It’s essential for running tools like package managers and build systems in frontend development.
    • Command: 
      brew install node

  3. Yarn:

    • Why: Yarn is an alternative package manager to npm. It is faster and provides more reliable dependency management.
    • Command: 
      brew install yarn

  4. NVM (Node Version Manager):

    • Why: NVM allows you to manage multiple versions of Node.js on your system, ensuring compatibility across projects.
    • Command: 
      brew install nvm

  5. Zsh:

    • Why: Zsh is a powerful and customizable shell that enhances your terminal experience with features like autocompletion, command history, and plugins.
    • Command: 
      brew install zsh

  6. Watchman:

    • Why: Watchman monitors file changes and is used by many JavaScript tools to speed up development by triggering rebuilds or reloading processes automatically.
    • Command: 
      brew install watchman

  7. Docker:

    • Why: Docker is used to create and manage lightweight, portable containers. Containers allow you to run services like databases or APIs in isolated environments, making development consistent across systems.
    • Command: 
      brew install --cask docker

3. Configure Git

Setting Up Git with Your User Details

Configuring Git is an important step to ensure that your commits are properly attributed and that you have a personalized development environment. Below are explanations for each command used in the setup process:

  1. Set Your Name:

    • Command: 
      git config --global user.name "Your Name"
    • What it does: Sets your name as the author for all commits made on your system. This name will appear in commit history.

  2. Set Your Email Address:

    • Command: 
      git config --global user.email "your.email@example.com"
    • What it does: Sets your email address as the author for all commits made on your system. This email is often tied to your Git hosting service account (e.g., GitHub, GitLab).

  3. Set Your Default Editor:

    • Command: 
      git config --global core.editor "code --wait"
    • What it does: Specifies Visual Studio Code (code) as the default editor for Git. The --wait flag ensures that Git waits for you to close the editor before continuing operations like commit message writing.

  4. Enable Colored Output:

    • Command: 
      git config --global color.ui auto
    • What it does: Enables colored output in the terminal to improve readability of Git commands like git status and git diff.

  5. Verify Your Configuration:

    • After running these commands, you can verify your Git settings with:
    git config --list
    • This will display a list of all configured settings, ensuring that your user details, editor, and color preferences are correctly applied.

Generate an SSH Key for Authentication

SSH keys are a secure way to authenticate with Git hosting platforms like GitHub, GitLab, or Bitbucket without requiring a username and password each time you interact with your repositories. Below are the steps and explanations for generating and using an SSH key.

  1. Generate a New SSH Key:

    • Command: 
      ssh-keygen -t ed25519 -C "your.email@example.com"
    • What it does:
      • ssh-keygen: A command-line tool to create a new SSH key pair.
      • -t ed25519: Specifies the type of key to generate (Ed25519 is a modern, secure algorithm).
      • -C "your.email@example.com": Adds your email as a label to identify the key.

  2. Add the Key to the SSH Agent:

    • Commands: 
      eval "$(ssh-agent -s)"
ssh-add ~/.ssh/id_ed25519
    • What it does:
      • eval "$(ssh-agent -s)": Starts the SSH agent, a background process that manages your keys.
      • ssh-add ~/.ssh/id_ed25519: Adds the newly created key to the agent for secure management.

  3. Copy the SSH Key to Your Clipboard:

    • Command: 
      pbcopy < ~/.ssh/id_ed25519.pub
    • What it does:
      • Reads the public key file (~/.ssh/id_ed25519.pub) and copies its content to your clipboard. This key will be added to your Git hosting platform.

  4. Add the Key to Your Git Hosting Platform:

  5. Test the SSH Connection:

    • Command: 
      ssh -T git@github.com
    • What it does:
      • Tests the SSH connection to GitHub (replace github.com with gitlab.com or another platform if applicable).
      • If the setup is successful, you will see a message confirming your authentication.

4. Set Up Node.js

  1. Configure Node Version Manager (nvm): 
    mkdir ~/.nvm
echo 'export NVM_DIR="$HOME/.nvm"' >> ~/.zshrc
echo '[ -s "/usr/local/opt/nvm/nvm.sh" ] && \. "/usr/local/opt/nvm/nvm.sh"' >> ~/.zshrc
source ~/.zshrc
  2. Install the latest LTS version of Node.js: 
    nvm install --lts
nvm use --lts

5. Install React Development Tools

  1. Install globally required tools: 
    npm install -g create-react-app eslint prettier
  2. Install React Developer Tools for debugging:
    • Browser Extension: Install React Developer Tools for Chrome or Firefox.
    • CLI Tools: No additional setup required beyond create-react-app.

6. Set Up VS Code

  1. Download and install Visual Studio Code.
  2. Install essential extensions:
    • ESLint
    • Prettier
    • Live Server
    • GitLens
    • Tailwind CSS IntelliSense (if applicable)

7. Configure Docker

  1. Launch Docker Desktop and ensure it's running.
  2. Verify Docker installation: 
    docker --version
  3. Test Docker with a sample container: 
    docker run hello-world
  4. Adjust resources if necessary (Settings > Resources).

8. Clone Your Project

  1. Clone the repository: 
    git clone git@github.com:your-org/your-repo.git
  2. Navigate to the project directory and install dependencies: 
    cd your-project
npm install
  3. Set up environment variables: 
    cp .env.example .env

9. Run the Development Server

  1. Start the React development server: 
    npm start
  2. Verify the application runs correctly in your local environment.

10. Install Optional Tools for Productivity

  1. Slack for team communication: 
    brew install --cask slack
  2. Postman for API testing: 
    brew install --cask postman
  3. oh-my-zsh for a better terminal experience: 
    sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"
    • Add a theme like powerlevel10k: 
      git clone --depth=1 https://github.com/romkatv/powerlevel10k.git ~/.oh-my-zsh/custom/themes/powerlevel10k
      Update .zshrc: 
      ZSH_THEME="powerlevel10k/powerlevel10k"

11. Verify Everything

  1. Confirm Git is configured: 
    git config --list
  2. Check Docker is operational: 
    docker ps
  3. Test running a small React project to ensure the environment is ready.

You're ready to start coding! 🚀

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