Environment Setup

Before you can begin building web applications with Express.js, you need to set up your development environment. This guide walks you through installing the essential tools: Visual Studio Code, Node.js, npm, and a helpful VS Code extension. Most of you likely have some of these installed already, so verify your installations and install what is missing.

Visual Studio Code

Visual Studio Code (VS Code) is a free, powerful code editor that we will use throughout this course. It provides excellent support for JavaScript, HTML, CSS, and includes integrated terminal functionality.

Download and install VS Code from code.visualstudio.com. Follow the installation wizard for your operating system (Windows, macOS, or Linux).

After installation, launch VS Code to confirm it opens correctly. You can familiarize yourself with the interface, but we will cover the features you need as we progress through the course.

Node.js and npm

Node.js allows you to run JavaScript on your computer rather than just in a web browser. It is essential for building server-side applications with Express.js. npm (Node Package Manager) comes bundled with Node.js and allows you to install and manage JavaScript libraries and tools.

Download the LTS (Long Term Support) version of Node.js from nodejs.org. The LTS version is recommended for most users as it provides stable, well-tested features. Run the installer and follow the prompts. The installation will include both Node.js and npm.

Verifying Installation

After installation, verify that both Node.js and npm are installed correctly by opening your terminal (Command Prompt on Windows, Terminal on macOS/Linux) and running these commands:


        node --version
        npm --version

Each command should display a version number. If you see version numbers, the installation was successful. If you receive an error message, you may need to restart your terminal or computer for the changes to take effect.

If you run these commands and get an error, you may need to restart your terminal or computer for the changes to take effect.

CSS Peek Extension

The CSS Peek extension for VS Code allows you to quickly view and navigate to CSS definitions directly from your HTML files. This saves time and makes it easier to work with stylesheets.

To install the extension:

Open VS Code
Click the Extensions icon in the left sidebar (or press Ctrl+Shift+X on Windows/Linux or Cmd+Shift+X on macOS)
Search for "CSS Peek" in the search bar
Click the Install button next to the CSS Peek extension by Pranay Prakash

Once installed, you can hold Ctrl (or Cmd on macOS) and hover over a CSS class name in your HTML to see its definition.

Troubleshooting Common Issues

If you encounter problems during setup, here are some common solutions:

Command not found errors: Restart your terminal or computer after installing Node.js. The system needs to refresh its environment variables.
Permission errors on macOS/Linux: You may need to use sudo before npm commands, though this is generally not recommended. Consider setting up npm to install global packages without sudo by following the instructions in the npm documentation.
VS Code extensions not installing: Check your internet connection and ensure VS Code has permission to access the network. Try restarting VS Code.
Older Node.js version already installed: Download and install the latest LTS version, which will replace the older installation. Verify the version afterward to confirm the update.

If you continue to experience issues after trying these solutions, reach out to your instructor or classmates for assistance. Having a properly configured environment is essential for success in this course.

What's Next

With your development environment set up, you are ready to begin working on course assignments. Make sure everything is installed and working correctly before proceeding.