Getting started with Express: Building your first app
Learn how to build your first app with Express - a beginner-friendly guide
In this article, we are going to create our first express app, to get started with this article make sure the following tools are installed in your system.
NodeJs -
- To verify whether nodejs is installed or not, open your terminal and run the command
node -v
andnpm -v
this should give any version number.
- To verify whether nodejs is installed or not, open your terminal and run the command
Vscode
postman
Step 1: Basic Setup
First, we will create a project folder, we can do that using the GUI, but let's try to create that by using the terminal.
mkdir helloExpress
-mkdir
command is used to create a new directory. so this command will create a new directoryhelloExpress
cd helloExpress/
-cd
is used to change the directory. So this command will change the current directory to thehelloExpress
directory.code .
this command will open vscode in the current directory.
Now the next step is to create our package.json
file. package.json
file is a simple JSON file located in the project root directory. This file contains important information about the project like name, version, dependencies, and other configuration options. Every nodejs project contains a package.json
file.
To create the package.json
file open the in-built terminal of vs code, you can use ctrl + `
. Now we are going to write the command npm init
. This will initialize a new node js project and ask you to fill in a bunch of information about the project. You can give that information or keep pressing enter to either keep them empty or default, and if you don't want to keep pressing enter then you can use npm init -y
this will skip all the question prompts and set them to default.
This is how our package.json
file looks currently.
{
"name": "helloexpress",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
Now the next step is to create an entry point for our application, we will create a new index.js
file in the project root directory.
// index.js file
console.log("Hello Express");
Currently, We only have a simple console message in our index.js
file.
Now we will add script
in our package.json
file.
{
"name": "helloexpress",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "node index.js"
},
"author": "",
"license": "ISC"
}
Now when we run the command npm start
then it should display Hello Express
message in the console.
Step 2: Express and nodemon Installation.
In this section of the article, we are going to install Express and nodemon and do a basic setup of express and nodemon.
installing Express
Express is a popular and widely-used web application framework for Node.js. It provides a set of features and tools for building web applications and APIs.
To install Express run command npm install express
in the vscode in-built terminal.
Installing nodemon
Nodemon is a command-line tool that monitosr for any changes in your source and automatically restart your server.
To install nodemon run the command npm i nodemon -D
. nodemon is used for development and testing purposes, that's why we install it as devDependencies
for installing any package as devDependencies
we use -D
flag.
Now nodemon
is installed, let's modify the script in package.json
file.
{
"name": "helloexpress",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "nodemon index.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"express": "^4.18.2"
},
"devDependencies": {
"nodemon": "^2.0.22"
}
}
Now try doing any changes in index.js
file and save it, and your server will start automatically.
Step 3: Express Setup
Let's move to index.js
file and start setting up our app. Let's add the following code to your index.js
file and then I will try to explain you each and every line.
const express = require("express");
const app = express();
const port = 3000;
app.get("/", (req, res) => {
res.send("Hello Express");
});
app.listen(port, () => {
console.log(`listening on port ${port}`);
});
const express = require("express");
This line imports the Express module and assigns it to express
variable. This allows us to use the functionality provided by the Express framework.
const app = express();
This creates an instance of the Express application and assigns it to app
variable. This is the main object that we will use to configure and interact with our application.
const port = 3000;
This line sets our port to 3000, our server will listen for any incoming request on this port only.
app.get("/", (req, res) => {
res.send("Hello Express");
});
The above line sets up a GET route on the root URL ("/") of our server. It accepts two arguments PATH
and a Handler function
. When a user makes a request to the root URL, the function passed as the second argument will be executed. In this case, the function sends the string "Hello World!" as the response.
app.listen(port, () => {
console.log(`listening on port ${port}`);
});
This line starts the server and listens for incoming requests on the specified port. When the server starts listening for any incoming request, the function passed as the second argument will be executed, which logs a message to the console indicating that the server is listening on the specified port.
Now if you open localhost:3000
in your browser, it will show you Hello Express
message.
While working with Express we usually don't send this type of one-line message usually we send JSON data which might be coming from the database, but currently, we don't have that type of knowledge so let's create some static JSON data and try to send that as a response. This is the data we are going to send as response.
const data = [
{
id: 1,
first_name: "Leonid",
last_name: "Bardsley",
email: "lbardsley0@yahoo.co.jp",
gender: "Male",
},
{
id: 2,
first_name: "Tybalt",
last_name: "Antushev",
email: "tantushev1@storify.com",
gender: "Male",
},
{
id: 3,
first_name: "Bethena",
last_name: "Worgen",
email: "bworgen2@virginia.edu",
gender: "Female",
},
{
id: 4,
first_name: "Bartram",
last_name: "Matts",
email: "bmatts3@myspace.com",
gender: "Non-binary",
},
{
id: 5,
first_name: "Marice",
last_name: "Pavlenkov",
email: "mpavlenkov4@tmall.com",
gender: "Bigender",
},
];
Next, we need to add a new GET Route and add the following line.
app.get("/users", (req, res) => {
res.status(200).json(data);
});
The above line sets up a new GET route on the root URL ("/users") of our server. It accepts two arguments PATH
and a Handler function
. When a user makes a request to the URL, the function passed as the second argument will be executed. In this case, the function sends a JSON string as the response. The status()
method sets the HTTP status code to 200, indicating that the request was successful, and the json()
method converts the data
variable into a JSON string and sends it as the response body.
Now if you go to `localhost:3000/users` in your browser or postman you can see the data as result and in postman, you can also see the status code.
That's it you have successfully created your first express app.