ExpressJS - Environment

Express.js - Modern Development Environment Setup

Express.js is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications. To begin building with Express, you need a modern Node.js development environment. This guide will walk you through setting it up.

Core Development Tools

Your essential toolkit will include:

• Node.js & npm: The JavaScript runtime and its default package manager.
• A Code Editor: A modern editor like Visual Studio Code (VS Code) is highly recommended for its built-in JavaScript/TypeScript support, integrated terminal, and vast extension ecosystem.
• Version Control: Git is the industry standard for tracking changes and collaborating on code.
• An API Client: Tools like Postman, Insomnia, or the VS Code Thunder Client extension are crucial for testing your API endpoints.

Step 1: Installing Node.js with a Version Manager

While you can install Node.js directly, using a version manager like nvm (Node Version Manager) is a best practice. It allows you to easily switch between different Node.js versions for different projects.

Installation on macOS / Linux (including WSL for Windows)

Open your terminal and run the official nvm installation script (always check the official nvm repository for the latest command):

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

After installation, close and reopen your terminal. Then, install the latest Long-Term Support (LTS) version of Node.js:

# Install the latest LTS version
nvm install --lts

# Set the newly installed version as the default
nvm use --lts
nvm alias default lts/gallium

Installation on Windows

For Windows, you can use nvm-windows, a separate but similar tool. Visit the nvm-windows releases page, download the nvm-setup.zip file, and run the installer. Alternatively, embrace the modern workflow by using the Windows Subsystem for Linux (WSL) and following the Linux instructions above.

Verify Your Installation

Check that Node.js and npm are installed correctly. You should see version numbers outputted for each.

# Check Node.js version
node -v
# Expected output: v20.11.0 (or your installed LTS version)

# Check npm version
npm -v
# Expected output: 10.2.4 (or a similar version)

Step 2: Creating Your First Express Project

Let’s initialize a new project.

1. Create a project directory:

mkdir my-express-app
cd my-express-app

2. Initialize a Node.js project: This creates a package.json file to manage your project’s metadata and dependencies.

npm init -y

3. Initialize a Git repository: It’s a best practice to start version control from the beginning.

git init
echo "node_modules/" > .gitignore

4. Install Express: Add Express as a project dependency.

npm install express

5. Install a development dependency: nodemon is a tool that automatically restarts your server when you make changes to your code, greatly speeding up development.

npm install --save-dev nodemon

Configure npm Scripts

Open your package.json file and add a "start" and "dev" script to the "scripts" section. This provides a standard way to run your application.

package.json

{
  // ... other properties
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node src/index.js",
    "dev": "nodemon src/index.js"
  },
  // ... other properties
}

Step 3: A Basic “Hello World” Server

Create a src directory and a file named index.js inside it.

# In your terminal
mkdir src
touch src/index.js

Add the following code to src/index.js. This code imports Express, creates an app, defines a single route, and starts a server.

src/index.js

import express from 'express';

const app = express();
const PORT = process.env.PORT || 3000;

app.get('/', (req, res) => {
  res.send('Hello, Modern World!');
});

app.listen(PORT, () => {
  console.log(`Server is running at http://localhost:${PORT}`);
});

Note: To use import/export syntax, add "type": "module" to your package.json file.

package.json

{
  "name": "my-express-app",
  "version": "1.0.0",
  "type": "module", // <-- Add this line
  // ... rest of the file
}

Running Your Server

Now, run your development server using the script you created:

npm run dev

You should see the message Server is running at http://localhost:3000. Open your web browser and navigate to that URL. You’ll see “Hello, Modern World!” displayed. Your environment is now set up and ready for development!