Hello, Express!

#express #javascript #beginners #node

"I have recently started learning Express, and who am I to start my Express journey without saying 'Hello, Express!'?"

Express is a web application framework for Node.js, which is a runtime environment that helps us write the server-side code using JavaScript.

First steps
Run yarn add express nodemon from your terminal, to add express and nodemon into your project.

Note: nodemon is just a tool that restarts the server whenever you make changes to your app. Without nodemon, you will have to manually restart the server every time you want to see the changes you make to your app.

// import express module 
const express = require("express");

// create an express app
let app = express();

/* TODO */

// run the app server on port 3000
app.listen(3000, ()=>{
    console.log("your server is running on port 3000")
});

Those few lines of code do nothing but create an express app that listens to port 3000.

The first line uses the builtin Node function require() to import the express module so that we can use it to create our app.

A module is just a JavaScript file that exports functions that we can import into other code using require().

Say we have a module rectangle that exports both area() and perimeter() functions like this:

// rectangle.js
module.exports = {
  area :     (length, width) =>     length * width,
  perimeter: (length, width) => 2 * length + 2 * width
}

We can import and use the rectangle module into other code like this:

// Note that we have to specify the path to rectangle.js
const rect = require("./rectangle");

// Now we can easily use area() and perimeter() from rectangle.js 
console.log(rect.area(3, 5))  // 15
console.log(rect.perimeter(3, 5)) // 16

And since express is a module we can import it into our code.

// import express module 
const express = require("express");

// create an express app
let app = express();

Now, if you try to run the server by using nodemon app.js from the terminal, you will see on http://localhost:3000/ (the port that the app is listening to) an error Cannot GET /.

That makes sense since we have not yet told app what to do when it receives a get request to / –-the root path. We haven't told app to do anything so far, actually, except to listen to port 3000'. Let's fix this now.

Routing

When app receives an HTTP verb (GET, POST, PUT, DELETE, etc), it has to know where to go next, or it'll get lost.

Adding routes to app is like giving it a map. Whenever it receives a request, it looks on that map to decide which route to take. And sending a request that has no route on the map forces app to respond with Cannot GET "[route]".

Let's see how that looks in code.

// router.js
const express = require("express")
// import Router from express
let routes = express.Router();

// a route to the root path
routes.get("/", (req, res)=>{
   res.send("Hello, Express!")
})
// a route to home
routes.get("/home", (req, res)=>{
    res.send("Home sweet home")
})
module.exports = routes

Now we have a map with two routes on it:

1- A route to /: It sends "Hello, Express!" response.
2- A route to /home: It sends "Home sweet home".

Let's give that map to app.

// import express module 
const express = require("express");
// import routes module
const routes  = require("./routes");

// create an express app
let app = express();

// let app use routes
app.use(routes)

// run the app server on port 3000
app.listen(3000, ()=>{
    console.log("your server is running on port 3000")
});

Now we have a tiny, little app with only two:
http://localhost:3000/: It displays "Hello, Express!"
http://localhost:3000/home/: It displays "Home sweet home"

That's it.
Thank you for reading.