Logo

dev-resources.site

for different kinds of informations.

Node Express

Published at
12/1/2024
Categories
node
express
modules
Author
bkhebert
Categories
3 categories in total
node
open
express
open
modules
open
Author
8 person written this
bkhebert
open
Node Express

      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

Image description

Let's Get Started With Node Express!

Type this into your terminal to install express:

npm i express
Enter fullscreen mode Exit fullscreen mode

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

      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' }) 

Enter fullscreen mode Exit fullscreen mode

Image description

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}`));

Enter fullscreen mode Exit fullscreen mode

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

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

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

7 directories, 9 files

Image description

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.

Image description

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

      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 )


Enter fullscreen mode Exit fullscreen mode

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.

Image description

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

modules Article's
30 articles in total
Favicon
Python Day-9 Predefined modules,While loop,Task
Favicon
Understanding JavaScript Modules: Exporting and Importing Code Made Easy
Favicon
Python Day - 8 Modules-Meaning and Types,Tasks
Favicon
Day 8 - Modules
Favicon
Node Express
Favicon
Terraform Modules Best Practices for Better Cloud Management
Favicon
Exploring Medusa 2.0 Commerce Modules
Favicon
Advanced Terraform Module Usage: Versioning, Nesting, and Reuse Across Environments
Favicon
Modules 1/2
Favicon
Collaborate and Stay Ahead with NEW Forge Updates
Favicon
Mind the Terraform Modules
Favicon
The Ongoing War Between CJS & ESM: A Tale of Two Module Systems
Favicon
Top 10 AI Edge Engineer Modules by Microsoft
Favicon
Meet the new Puppet Forge
Favicon
How to reduce the cost of LED display modules
Favicon
Terraform - Modules & Demos
Favicon
Types of Node Modules
Favicon
Unraveling the Monolith: Terraform Configuration Refactoring in Depth
Favicon
📌 How can you use Terraform modules?
Favicon
EcmaScript Modules na prática
Favicon
The Go Playground: Using Modules
Favicon
What is the general resolution of LED display modules?
Favicon
What are the main components of an LED display?
Favicon
Python: Imports and modules
Favicon
Golang Environment: GOPATH vs go.mod
Favicon
Javascript Modules
Favicon
Install my development environment In Prestashop
Favicon
Reversing a Linked List: A Hallway Analogy
Favicon
Everything You Need To Know About Node.js Modules
Favicon
Content & Tooling Team Status Update

Featured ones: