Express.js Crash Course
Tutorial
Hey there, fellow developers! Are you looking to build a web application using Node.js and Express? Look no further! In this tutorial, we’ll walk through how to create a simple Express app from scratch.
In this tutorial, we’ll start by setting up our Express app, including installing the necessary dependencies like Express, body-parser, cors, and nodemon. We’ll then create a basic Express app with just a few lines of code, including setting up a server to listen for incoming requests on a specific port.
We’ll also explore how to handle incoming requests with Express middleware, such as bodyParser for parsing JSON data and cors for handling cross-origin resource sharing. We’ll see how these middleware functions help us streamline the development process and handle common tasks in an Express app.
By the end of this tutorial, you’ll have a solid understanding of how to create a simple Express app and handle common tasks like parsing request data and handling cross-origin requests. So, let’s jump in and get started with building our very own Express app!
Step 1: Npm Init and Installing necessary dependencies
First off assuming you already have Node.js downloaded (Node.js download), you can open your terminal and type npm init to initialize your package.json.
Nodemon
Now I’ll introduce Nodemon as the first dependency. Nodemon is a handy tool that automatically restarts your Node.js application whenever you make changes to your code, saving you time and effort during development. It’s like having a personal assistant that keeps an eye on your code and takes care of server restarts for you, allowing you to focus on writing code without interruptions. Nodemon is absolutely essential and also a favorite among Node.js developers for its simplicity and productivity benefits, making it an essential tool in any Node.js development workflow.
Another thing to note is you want to create this line here under “scripts”. This will run Nodemon every single time you start the server.
Express
Think of Express as the foundation or the framework that simplifies the process of building web applications in Node.js, allowing developers to focus on writing business logic and creating user experiences, rather than getting bogged down with low-level server details.
Body-Parser
Body-Parser is a middleware for handling HTTP request bodies in Node.js apps. It simplifies parsing and extracting data from request bodies, like JSON or form data, making it easier for developers to access and work with that data within their Express applications. Think of it as a tool that helps developers handle incoming data in a user-friendly way, making it easier to build web apps that accept and process data from clients.
Cors
Cors is a package that enables Cross-Origin Resource Sharing (CORS) in Express apps. It allows a server to control which domains are allowed to access its resources, helping prevent unauthorized access and ensure secure communication between different domains. It's like a virtual bouncer that keeps unwanted requests from entering the party, ensuring only trusted guests can access the server's resources.
Step 2: index.js and importing dependencies
So if you haven’t already go ahead and make a new file and call it index.js
Before starting make sure you have this line in your package.json.
In a package.json file, "type": "module" is used to indicate that the JavaScript files in the project are written in ECMAScript modules (ES modules) format. ES modules are a way of organizing and structuring JavaScript code into separate modules that can be imported and exported, allowing for better code organization and reusability.
This will allow you to use modern JavaScript syntax like import and export in your code. This is in contrast to the CommonJS format, which uses require() nd module.exports for module loading and exporting.
Imports
The import statements are used to import three external dependencies into the current module. These dependencies are commonly used in building web applications and APIs with Node.js and Express. The import statement allows the code in the current module to use the functionalities provided by these dependencies.
Step 3: Creating app variable
Now that we have the express library installed and imported we can store it all into a variable like so.
This line creates an instance of the express module and assigns it to a variable called app. This variable app represents the Express application that will handle incoming HTTP requests and define routes and middleware for processing those requests. It's like creating a blueprint for handling web requests using the express module.
Step 4: app.use
The app.use() function in Express is used to register middleware functions that are executed for each incoming HTTP request. Middleware functions can perform various tasks such as parsing request bodies, handling authentication, setting headers, and more. They are executed in the order they are registered and can modify the request or response objects, or pass control to the next middleware function in the chain using next(). It's like adding plugins or extensions to the Express application to handle specific tasks during the processing of incoming requests.
It’s good practice to always get in the habit of setting up these lines in the beginning stages of setting up your application because even though you won’t be using them today, you will definitely use them in the future.
Step 5: Starting the server
The code block above defines a variable PORT with the value 3000, which specifies the port number on which the Express server will listen for incoming requests. The app.listen() function starts the Express server and binds it to the specified port. When the server starts running, it prints a message to the console indicating that the server is listening on the specified port.
Conclusion
No go ahead and run the server using the command below.
In conclusion, we’ve covered the basics of creating a simple Express app in this tutorial. We started by setting up our project with Express, body-parser, and cors as dependencies, and explained what each of them does in simple terms. We then created an Express app, configured it to use body-parser for handling request bodies and cors for handling cross-origin requests, and set it up to listen on a specific port. We also learned about nodemon, a handy development tool for automatically restarting the server when changes are made to the code. With these concepts in hand, you’re well on your way to building your own Express apps and APIs. Happy coding!