One of Node.js's most popular and well-known frameworks is Node Express. Node Express, is used primarily for building server-side web applications and APIs and is the most popular framework for Node. With Node Express, we can simplify the process of handling HTTP requests and response.
Unlike it's 'opinionated' counterparts; which tend to have a plethora of rules and conventions that need to be followed, express.js is considered 'unopinionated', meaning the workflow and layout of your code is open to more flexibility. If you never heard of Express then you have come to the right place! I have traversed the myriad of Node's profound glossary of documentation to figure out just enough to get you started with Node Express. So without further ado, let's get you started by covering core concepts that come with express.js
Let's Get Started With Node Express!
Type this into your terminal to install express:
npm i express
Once the installation is complete you can begin using the library which comes with express; note that you will need to have Node.js installed and a package.json created prior to this. Now that we are armed to the teeth with Express ready to fire; lets build a basic basic Hello World program to begin familiarizing ourselves with express.
const express = require('express')
const app = express()
const port = 3000
app.get('/', (req, res) => {
res.send('Hello World!')
})
app.all('*', (req, res) => {
res.status(404).send('404! Page not found');
})
app.listen(port, () => {
console.log(`Example app listening on port ${port}`)
})
Ah, so up on line 1 we import our node express using require, then initialize app to that value; from there, we have a single get request which handles all requests to '/' by responding with "hello world". In the next few lines we are using app.all(), which takes in an asterisk as it's first parameter. The asterisk denotes that the path can be used on any endpoint of incoming requests. app.all() will do as it's name suggests and handle all requests. The last few lines are whe we set the server up to listen for connections on a given port. With res.send(), I am using the send method on my response object, if I wanted to; I could also put html tag or even an object directly into it's parameters and it would still work; like so:
//with html tag
res.send( `<h1> HELLO WORLD <h1>` )
//JSON
res.send({ message: 'Hello World' })
The Old Way
const express = require('express');
const path = require('path');
const app = express();
let PORT - '8080';
app.get('/', (req, res) => {
res.sendFile(path.join(__dirname, 'public', 'index.html'));
});
app.get('/aboutMe', (req, res) => {
res.sendFile(path.join(__dirname, 'public', 'aboutMe.html'));
});
app.listen(8080, () => console.log(`Server is running on port ${PORT}`));
So this is the old way of doing things; with Node, bringing in the path module; then pointing to the directory that has your file using __dirname. All dirname will do is ensure you get the directory up to the point of the current point, it's a way of passing in an absolute directory instead of the shortened version. Feel free to simmer on the syntax:
path.join(__dirname, *A Folder Name*, *Another Folder Name*, *The File to load*). With express API, you can simply pass in the location of the file using express.static(/folder/).
express.static(root, [options])
The root argument is the directory, for example, if you wanted to load all the files in the public directory, you could just use this:
app.use(express.static('public'))
By using this line, all files in the public directory will be served. We will discuss more on how app.use() works later in this blog when we discuss middleware, but for now I wanted to point out that the primary benefit of express is it's ease of use when it comes to navigating directories and organization of your code with a less convoluted syntax.
So before we go about creating multiple folders by hand; we can simply type npx express-generator into our terminal and it will automatically set up our project directory for us. The layout will be like so:
.
├── app.js
├── bin
│ └── www
├── package.json
├── public
│ ├── images
│ ├── javascripts
│ └── stylesheets
│ └── style.css
├── routes
│ ├── index.js
│ └── users.js
└── views
├── error.pug
├── index.pug
└── layout.pug
7 directories, 9 files
Express.js And Request Handlers
app.METHOD(PATH, HANDLER)
The syntax for basic HTTP request handlers is intuitive if you have a familiarity of them. You attach the name of the request method as a method onto express, and pass in the path and callback function as parameters, where the callback function automatically receives a request and response object. Earlier you saw how 'all' can be sent as a method that will respond to all HTTP methods, you soon see that we can also use app.use() as a way to redirect to something called middleware. But first we need to ensure we have a basic understanding of what middleware is.
A BRIEF Touch on MiddleWares
Along your journey into Node Express, you will hear the word 'middleware' thrown around like candy; don't be frightened. It is essentially a fancy way of describing all the code that runs during the time your routers are running... Meaning it is the code that happens during the time a request is being handled from a client. It is the time in the middle; before the site responds; while the page loads; the twilight zone of coding. Let's say there is a function that provides updates in the log as to which programs are running or which callbacks are being successful; whilst checking for errors. These functions are called 'loggers' and are a type of middleware you will soon experience along your journey of understanding how express.js works.
app.use(PATH, MIDDLEWARE)
With app.use(), we are able to specify which functions we want to designate as middleware. Be it a 'logger', or a list of http requests. Inside of these callback functions, we call next(), this will ensure that once the function is complete, it will move on to the next middleware function. I like to imagine it works similarly to using .then() in relation to promises or await in asynchronous functions; meaning that we are somewhat deciding what the function must complete prior to moving on to the next expression that is written sequentially in the code. Please don't let my logic confuse you however, because the syntax is nowhere near the same.
There are multiple shortcuts afforded to us with node express, and as I said earlier, it is unopinionated. Another way of shortening the code is by creating another folder and placing all of our routers in there; request handler style!
Say you have a folder that contains a javascript file that looks something like this:
let r1 = express.Router()
r1.get('/', function (req, res, next) {
next()
})
let r2 = express.Router()
r2.get('/', function (req, res, next) {
next()
})
app.use([r1, r2])
In the above code, we create 2 routers, and their functions are executed, then next() is called at the end. Whatever function we passed in as our next parameter will be the next function that will run, if the next parameter is empty, it will automatically be populated when we use app.use in the manner we see above. In this way, we are logically listing the functions we want to use in our router as an array. Also note that next() is not a part of Node.js or Express API, it is the third argument passed to the middleware function,
We can also utilize app.use() to designate we want to use certain files for items in our other folder. The syntax looks like this: app.use('directory to a file as a string<optional>', variableToBeUsed), In this case, our first parameter dictates an endpoint we want to use, and the variabletoBeUsed will be available inside your main server file after importing it; doing this removes the need to pass in the entire folder directory on your get request; and thus shortens the length of your get requests in your routers to this: router.get('/', callback)). Notice we are using express.Router()? Which means all our requests syntax will change from app.get() to router.get(*folder directory*, *callback*). They will still have the same functionality; you can go back to your main server file; and just put in
//all your requirements aka imports here//
const posts = require('/folderPath/posts');
const app = express();
app.use('/api/posts', posts);
app.listen( etc )
This sets it us so that all routers in the posts folder will use '/api/posts' as prefixes to all of their paths. Take note that what is passed into app.use can be the assignment of a path to a folder, as well as a list of middleware functions or requests. The important distinction to make would be that app.use() is going to run regardless of other conditions.
Conclusion
With that being said; I hope you all are enjoying Node Express as much as I am; at first it may seem to be a huge jump from NodeJS, but it is more of a different way of doing things. Hopefully I spared you from the vast caverns of the Node documentation libraries, and have allowed you time to reconcile on the beauties of Node Express. -Cheers
Top comments (4)
Why is this written as if the audience was 6 years old?
Why is it using constructs from 2015? Dear Reader, please refer to the official Express docs, which are far more accurate and up to date.
Was about to say the same. If you are new to express.js (node express…?) please read their docs and not these crayon scratchings
Hey so I tried to update my blog cause of feedback like this and although it is slightly better, I feel like the audience I intended to show will now be lost. In all honesty, no one can truly compete with the documentation. The purpose of blogs and youtube videos is to attempt to provide a more digestible format for complete beginners or people inexperienced with the code. Documentation is always the top priority and I am not trying to compete with providing a better explanation than those who created the program, I am just trying to provide a way to begin to understand the most basic of concepts first.