Summary

Node.js and Express Setup Guide

Overview

In this guide, we will set up a simple Node.js server using the Express framework. This will involve creating a project directory, initializing it with npm, and defining a basic server that responds with a JSON message.

Steps

Navigate to Project Directory
- Use cd to change to your project directory and ls to list the files.
```
cd your-project-directory
ls
```
- You should see files like index.html, script.js, styles.css.
Initialize npm Package
- Create a package.json file by running:
```
npm init
```
- Follow the prompts to set package details (you can leave most defaults).
- You will define server.js as the entry point.
Install Express Framework
- Install Express using npm:
```
npm install express
```
- This will add Express as a dependency in your package.json file.

Create server.js File

Create a new file called server.js.

In server.js, write the following code to set up a simple server:

const express = require("express");
const app = express();

app.get("/", (req, res) => {
  res.send({ message: "Everything is working fine." });
});

app.listen(3000, () => {
  console.log("Server is listening on port 3000");
});

Run the Server
- Execute the server with:
```
node server.js
```
- The server should now be listening on port 3000.
Test the Server
- Open a web browser and go to http://localhost:3000.
- You should see a JSON response:
```
{ "message": "Everything is working fine." }
```

Explanation of Code

Require Express: The require statement imports the Express library.
Creating an Express App: const app = express(); initializes a new Express application.
Defining a Route: The app.get method defines a route at the root (/) which sends back a JSON response.
Listening on a Port: app.listen(3000) makes the server listen for requests on port 3000.

Next Steps

In the following lessons, the goal is to fetch data from the server and populate the front end.
This will start with moving hard-coded data to the server side and later integrating with a database for persistent data.

Conclusion

You have successfully set up a simple Express server that responds with a JSON object. In future lessons, we will enhance this application by fetching dynamic data and integrating database functionalities.

Video Transcript

Welcome back after installing Node.js. Let's keep going. I'm going to cd to the directory that contains my project. I'm going to do ls here are my files right now index.html script.js styles.css. Now what we're going to do right now is create an npm package. So we're going to generate the file called package.json. I'm going to need that so we can install express which is the framework we're going to use to make the server. So first of all do npm space init to create a package.json file. It's going to ask you for some fields. I'm going to leave the package name as is. The version I'm going to leave at one can change it if you want to give a description. I'm not going to give it entry point. I'm going to say let's say server.js for now it could be anything. That's command no task command yet get pro start no keywords no I'm going to just press enter. After you can say your name or any of this there. License any license you want. I'm just going to leave as is. This okay yes. After that it should have now package.json file in your project directory. Let's check it out. Here's the file. With that we can start installing new packages from node npm. So let's do express. Before doing that I'm just going to show you that page for express. Back to the browser this is the page for out the framework express. Express.js.com. This is the framework we're going to use to build our server side API. Okay so let's go. Go back to the terminal. I'm going to say npm install space. Express. After that it should check your package.json under dependencies you should now see express with the corresponding version that was installed. Now let's create a file called server.js. Now we're going to build a very simple server that's not going to do anything yet. First thing we need to do is to require the express package. This is like an import statement. So I'm going to say const express require express. Let me use double quotes here instead because I see I was using double quotes in the client side code here in script.js so it should be consistent. I'm also going to use double quotes here but you can choose single quotes if you want. So we got express. Now what's doing here is requiring that package express so we can use it. I put it in a variable. I'm going to call an express.app and that's going to create an express app. Let's put that in a variable and call it app. Now I'm going to say app.get and the first argument from a slash and we got pass rec res arrow function there. I'm just going to say res.send message. Everything is working fine. Let's see. And then after that I'm going to do app listen. I'm going to give it a part to listen to. Let's do take 3000. And if you want to give a call back here saying that the server is listening you can see console log server is listening or for 3000. Save it. Let's test it out and then later we'll explain what's going on. Go back to the terminal. You're going to run node space server.js. And I committed some mistake here. Press.app is not a function. I think I know what it is. Let's see. There you go. I don't need to say dot app. Sorry. I just say express and call it like so. Okay. This detail. Anyway the server is now listening for 3000. Let's go to the browser open a new say local host 3000. And now you're going to get this text in JSON format saying message. Everything is working fine. Let's work out what happened here. So first I require express. Put that in a variable so I can reference that. When I call express is a function it gives me back an express application. I call it app. With that object I can call and define routes. So when you hit certain routes on the server it's going to do something. In this case the route is slash. This is the root route. This just means you go to the domain colon the port slash. The slash is optional there. You could have slash if you want. But it's going to redirect without slash. So when it hits this route route it's going to call this function. This is an anonymous function that I define two parameters. Rec request. Res for response. Now I can use the response object res to send back a response. So when the client requests a get to the slash route I reply with doing this and I say a response please send this message response. The response is a JavaScript object hence the JSON notation there with the property message having the value everything is working fine. When I do app.listen I tell the server to listen on port 3000. That means it's going to run the server and it's going to listen for requests at this port. Localhost is my localhost. Could be 127.00. So console log will show us the message in the terminal when I start the server. Okay. One detail I want to make sure here is go if you want to check we're going to be doing this a lot when working with the server side you want to check the network tab. Let's run this again and you can see the request is here in this list and let's click on that. This is the preview of the response. This is the response raw. Click on headers to see the request URL. You can see it's on the slash endpoint here in slash. The request method HTTP get status code that's 200 okay that we got. That's the typical code for successful response. Now for the response headers we got content type application JSON. That's fine. That's actually what we wanted. I just wanted to check that the content type header for the response is application slash JSON because our server is going to serve in the format called JSON JavaScript object notation very common format to serve data through a server side API. API means application programming interface. It's like the means we can use to get to the database. So it's an interface that we can ask it to do something for us to read or write data or update it if you want or delete it. Okay go back to text editor. So we just run the server nothing is really that's not too much right now. We can start by making a route. Let's go back to our app here in the front end. Let's do the following. This is going to be our next goal in the following lessons. Right now we have this data right here for each entry but that's a draft written purely in the HTML document index.html. What we want to do right now is let's fetch this data from the server side and populate our site with that data as we go into the site. Now this is not going to involve any database yet so we are actually moving that fake data to the server side in the Node.js file. We're just going to hard code an array of objects and each object will represent an entry and we're going to take that and send back to the client as the response. When we get that done the next step would be do the database part with the actual data being persistent there but let's do one step at a time. So see you in the next lesson.