DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 966,155 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Hello, Express!
Hajar | Ω‡Ψ§Ψ¬Ψ±
Hajar | Ω‡Ψ§Ψ¬Ψ±

Posted on

Hello, Express!

"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")
});
Enter fullscreen mode Exit fullscreen mode

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
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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();
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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")
});
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (1)

Collapse
 
andrewbaisden profile image
Andrew Baisden

Good starter guide Express is so easy to learn once you know javascript.

πŸ‘€ Just want to lurk?

That's fine, you can still create an account and turn on features like 🌚 dark mode.