Skip to main content

Frontend Development Environment Setup

Introduction​

Development Environment Complexity

Setting up the frontend development environment requires several steps and careful configuration. This guide will walk you through each stage to ensure a smooth setup process.

IDE Selection​

We recommend two primary Integrated Development Environments (IDEs):

  1. WebStorm (Preferred)

    • Free for development
    • Excellent JavaScript and React support
    • Advanced code intelligence features

  2. Visual Studio Code

    • Already covered in the Middleman Setup Guide
    • Lightweight and extensible
    • Large community and plugin ecosystem
IDE Configuration Tip

Whichever IDE you choose, ensure you have JavaScript and React development extensions installed.

Node.js Installation​

Node.js is crucial for frontend development, providing the runtime environment for JavaScript.

Windows Installation​

  1. Visit Node.js Official Website

  2. Download version 22.11 or higher

  3. Run the installer

  4. Check installation via Command Prompt:


    node --version

    npm --version

macOS Installation​

Method 1: Direct Download​

  1. Visit Node.js Official Website

  2. Download version 22.11 or higher

  3. Open the .pkg file and follow the installation wizard


# Install Homebrew (if not already installed)

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

# Install Node.js version 22.11 or higher

brew install node@22

Linux (Ubuntu/Debian) Installation​


# Add NodeSource repository for Node.js 22.x

curl -fsSL https://deb.nodesource.com/setup_22.x | sudo -E bash -

# Install Node.js and npm

sudo apt-get install -y nodejs

# Verify installation

node --version

npm --version

Version Compatibility

  • Minimum Required Version: Node.js 22.11

  • Why version 22.11+?

    • Latest performance improvements

    • Enhanced security features

    • Better ECMAScript compatibility

    • Improved module and package management

Node Version Management​

Consider using nvm (Node Version Manager) for easier version switching:

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

# Install latest LTS Node.js version
nvm install --lts

NPX Installation​

NPX comes bundled with npm (Node Package Manager) version 5.2.0 and higher.

Verification​

# Check npx installation
npx --version
What is NPX?

NPX allows you to execute npm package binaries without globally installing them. It's particularly useful for running one-off commands or trying out packages.

Repository Cloning​

Frontend Repository Setup​

# Create frontend base path
mkdir -p $FRONTEND_BASE_PATH$

# Navigate to the directory
cd $FRONTEND_BASE_PATH$

# Clone the frontend repository
git clone https://github.com/TravellingLanguages/frontend.git

# Enter the project directory
cd frontend

Initial Project Setup​

# Install project dependencies
npm install --force

# Start development server
npm run start

Troubleshooting​

Common Installation Issues​

  • Permission Errors: Use sudo cautiously or configure npm to work without sudo
  • Version Conflicts: Use Node Version Manager (nvm) to manage multiple Node.js versions
  • Dependency Problems: Always run npm install in the project root
Security Note
  • Always download Node.js from the official website
  • Keep your Node.js and npm versions updated
  • Be cautious when installing global packages

Next Steps​

After completing these steps, you'll have a fully configured frontend development environment ready for coding!

  1. Familiarize yourself with the project structure
  2. Review the project's README
  3. Check out the contributing guidelines

Additional Resources​

Happy Coding! 🚀