Express.js Project Setup and Basic Server Creation

What are Node.js and Express?

Before we start coding, let's clarify what these two technologies are.

• Node.js: This is a runtime environment that allows you to execute JavaScript code outside of a web browser. Before Node.js, JavaScript was primarily a language for client-side scripting. Node.js unlocked the ability to use JavaScript for server-side development, which is a massive advantage because you can use the same language for both your frontend and backend.
• Express.js: This is a web application framework that runs on top of Node.js. While you could build a web server using only Node.js, it would be quite complex. Express provides a minimal, flexible set of tools that dramatically simplifies building web servers and APIs. Think of Node.js as the engine and Express as the car's frame and steering wheel—it provides the structure you need to build something useful quickly.

The following video gives a great overview of what Express is and uses a helpful restaurant analogy to explain how clients (like your React app) and servers (our new Express app) communicate.

Setting Up Your First Express Project

Now let's get our hands dirty and build our first server. The process involves initializing a Node.js project, installing the necessary packages, and writing the server code.

For a comprehensive guide on setting up a Node.js development environment, the MDN Web Docs are an excellent resource. You can refer to it if you encounter any issues or want to understand the tooling in more depth.

We will now follow a guided video tutorial to perform these steps. The video uses modern JavaScript (ES Modules), which aligns with the ES6+ syntax you're already familiar with from working with React.

After following the video, your package.json file should look something like this:

{
  "name": "expressjs-tutorial",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "type": "module",
  "scripts": {
    "start:dev": "nodemon src/index.mjs",
    "start": "node src/index.mjs"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.18.2" 
  },
  "devDependencies": {
    "nodemon": "^3.0.1"
  }
}

Note: Your package versions might be slightly different.

Writing the "Hello World" Server Code

With the project structure in place, it's time to write the JavaScript code that will actually create and start our web server.

1. Create a src folder in your project directory.
2. Inside src, create a new file named index.mjs. (The .mjs extension signifies it's an ES Module, as we specified in package.json).

Now, let's add the code to start the server. The next segment of the video will guide you through this.

Your src/index.mjs file should now contain this code:

import express from 'express';

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

app.listen(PORT, () => {
    console.log(`Running on Port ${PORT}`);
});

Running the Server and Handling Requests

Let's run the server! Open your terminal in the project directory and execute the development script we created:

npm run start:dev

You should see the message "Running on Port 3000" in your console. This confirms the server is active!

Now, open your web browser and navigate to http://localhost:3000.

You'll see a message that says Cannot GET /. This is not an error! It's actually a good sign. It means our server is running and received your browser's request, but it doesn't know how to respond yet because we haven't defined any "routes."

A route is a rule that tells the server what to do when it receives a request for a specific URL path (like /, /about, or /api/users).

Let's add a simple route to handle requests to the root path (/) and send back a "Hello World!" message. The following video explains this step very clearly.

Add the following code to your src/index.mjs file, right before the app.listen() call:

// Add this route handler
app.get('/', (req, res) => {
    res.send('Hello World!');
});

Your complete src/index.mjs file should now look like this:

import express from 'express';

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

// A route that handles GET requests to the root URL ('/')
app.get('/', (req, res) => {
    res.send('Hello World!');
});

app.listen(PORT, () => {
    console.log(`Running on Port ${PORT}`);
});

Because nodemon is running, your server automatically restarted when you saved the file. Now, refresh http://localhost:3000 in your browser. Success!

app.get('/about', (req, res) => {
    res.send('This is the about page.');
});

Conclusion

Congratulations! You've successfully built and run your first web server with Node.js and Express. This is a fundamental skill for any full-stack or backend developer.

Key Takeaways:

• Node.js is a JavaScript runtime for the server-side.
• Express.js is a minimal framework that makes building web applications with Node.js much easier.
• A project is initialized with npm init, and dependencies like express are installed via npm install.
• nodemon is an essential development tool that automatically restarts your server on file changes.
• The core of an Express app involves creating an app instance, defining a PORT, and starting the server with app.listen().
• Routes, defined with methods like app.get(), tell the server how to respond to incoming requests for specific URLs.

Preview of the Next Lesson:
In this lesson, we created a single GET route. In the real world, APIs need to handle various types of requests to perform different actions (like creating, reading, updating, and deleting data). In our next lesson, we will dive deeper into this by learning how to implement API endpoints for different HTTP methods (GET, POST, PUT, DELETE). This will allow us to build much more powerful and interactive backend services.