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

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

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

Create account Log in
jimenezfede
jimenezfede

Posted on • Updated on

EXPRESS JS

Express is a very popular application to create servers in node. And for good reason, it's really convenient to use. And when learning anything, gotta start with the basics.

To set up express, the express package needs to be downloaded npm install express. Then require it in the file with const express = require('express'). To create the express application, simply just call it and assign it to a variable like so const app = express(). Now that the application has been created, the β€˜listen’ method is used to make it run on a port, app.listen(3000). And with express, the order in which it is set up does matter. So the listen method will have to be at the bottom. Even below any other methods that will be set up.

In the internet world, the slashes in the url direct to specific routes. The code above creates a homepage on route localhost:3000. So any interaction with the server has to be done with the route. And here is where Express excels. Express has many methods to interact with routes.

Route Methods

Express route methods, like get, post, etc, come from HTTP request methods. The get method takes in at least 2 arguments. The first is the route. The route can be a string or a variable. The second argument is a function that acts like middleware by handling the request object sent to the route.

app.get('/', (req, res) => {
res.send('Homepage')
Enter fullscreen mode Exit fullscreen mode

For example, this get request has the route set to the homepage with just a forward slash β€˜/’. And the middleware is just a function that has request and response parameters. Then it just sends a response β€˜Homepage’ when a request is made to the homepage.

Multiple Middlewares

A route can have multiple middleware functions to handle the request object. When using multiple functions, then having a third parameter called β€˜next’ is needed. The purpose of this β€˜next’ function is to pass the request to the next middleware function in that route or to another different route.

app.get('/user/:id', (req, res, next) => {
if (req.params.id === 'Batman') next('/Batcave)
else next()
}, (req, res, next) => {
res.send('Go away Robin')
})
Enter fullscreen mode Exit fullscreen mode

Express also has a 'use' method that will pass the middleware for every method used below it. For example, passing json through will then automatically parse data when sending it.

app.use(express.json)
app.post('/batsignal', (req, res) => {
res.send('Nana Nana Nana' + req.body.batman)
})
Enter fullscreen mode Exit fullscreen mode

Chainable Route Handlers

A route can be chained with multiple handlers, like get, post, put, etc. Which helps not to have repeat code. This is done with the Router() method which makes a new router object.

const express = require('express')
const router = express.Router()
router.route('/:batsuit')
.get((req, res) β‡’ {
res.send(`Get batsuit ${req.params.batsuit}`)
})
.post((req, res) β‡’ {
res.send(`Add batsuit ${req.params.batsuit}`)
})
.put((req, res) β‡’ {
res.send(`Update batsuit ${req.params.batsuit}`)
})
Enter fullscreen mode Exit fullscreen mode

Express has so many more methods, these are just the ones I’ve been exposed to the most. Except for route chaining, I just learned about that one. I'm already daydreaming about how pretty my code will look when I use it. The express docs are pretty easy to navigate. After writing this, I am definitely a big fan of express.

Sources

Latest comments (2)

Collapse
 
andrewbaisden profile image
Andrew Baisden

Just a heads up that you can add highlighting to the code blocks if you'd like. Just change:

code block with no colors example

... to specify the language:

code block with colors example

More details in our editor guide!

Collapse
 
jimenezfede profile image
jimenezfede Author

awesome! appreciate that trick man.

Need a better mental model for async/await?

Check out this classic DEV post on the subject.

β­οΈπŸŽ€ JavaScript Visualized: Promises & Async/Await

async await