loading...

Express Basics for Beginners

ceceliacreates profile image Cecelia Martinez Updated on ・4 min read

When you’re in a 12-week full-stack boot camp, you have to learn fast. Because I already had familiarity with HTML, CSS, and Javascript, I was generally able to keep these topics separate in my mind as we whizzed through them. Once we transitioned to back end, however, it was like the wild west in my brain.

Node, Express, Sequelize, which did what on the back end? Is "fs" a native or installed package? What do I need to require? I spent a lot of time just copy and pasting from in-class activities and previous homework assignments instead of fully understanding the concepts of what I was coding. I got things to work, but didn’t really understand why it worked.

So I decided to go back, really study my code, and delineate what each line was doing, and whether it was working with Node, Express, or my database (either using Sequelize or MongoJS). It was illuminating and revelatory, and finally everything began to click into place.

If you are in a similar situation, I cannot recommend enough going back and really diving into your code and parsing out what each line is accomplishing. No more REST vs. CRUD confusion! And debugging! It was no longer a game of "find the difference" between working code and non-working code. I was able to actually read the error and understand what might be wrong.

As part of this exercise, I created a list of the basic, essential functions for Express. Express is a package that allows you to establish a connection to your server and write paths to handle incoming requests. Below are the six things you should know how to do in Express, and in most cases, should be included in every application running Express. All of these functions can be written in a single server.js file, or the routes can be modularized into separate js files and then required in server.js.

  1. Install and require Express. Express is not a native package to Node, so it must be installed. Because you want to ensure it’s included in your node modules, make sure to install it locally and then require it in your server.
    • Run "npm install express" in Node while in your project folder
    • Insert "const express = require("express");" in your server.js file
    • Ex. code screenshot
  2. Assign express to an app variable
    • Insert "const app = express();" in your server.js file. You can now use "app" to reference your instance of express (aka the server you’re working with)
    • Ex. code screenshot
  3. Set app to listen on a specified port
    • Insert "app.listen(PORT, function () { console.log("App running on port" + PORT)})
    • PORT can either be specified directly or assigned as a variable, ex. "const PORT = process.env.PORT || 3000;"
    • Ex. code screenshot
  4. Set app to handle data parsing for JSON and URLencoded requests
    • app.use(express.urlencoded({extended:true}));
    • app.use(express.json());
    • Ex. code screenshot
  5. Set up app to automatically return static files without having to write a specific route for each file (ex. a "public" folder that has your HTML, CSS, and client-side JS files)
    • app.use(express.static("public"));
    • Ex. code screenshot
  6. Write routes to handle REST requests to paths (GET, POST, PUT, DELETE). Each route requires a callback function that states what to do with the request and, if applicable, the response. I have written out example callback functions for GET and POST, as these are the most common.
    • app.get("path", function (req, res) { res.send("Hello World!") || res.sendFile("../public/index.html")) })
    • Ex. code screenshot
    • app.post("path", function (req, res) { const request = req.body; SEND REQUEST TO DATABASE AND GET RESPONSE HERE}).then(function (response) { res.json(response)})
    • Ex. code screenshot
    • app.put("path", function (req, res) {handle request})
    • Ex. code screenshot
    • app.delete("path", function (req, res) {handle request})
    • Ex. code screenshot

That’s it! As long as you understand how these functions work you have a basic understanding of Express and can set up a server for full stack applications. Please let me know if you have any questions or suggestions!

Posted on by:

ceceliacreates profile

Cecelia Martinez

@ceceliacreates

Success Engineer @ Cypress.io. Full-stack web developer. MBA. I mostly blog about React, Node, and testing. Passionate about diversity in tech and cute dog pictures.

Discussion

pic
Editor guide
 

Great article to introduce Express to beginners!

 

Thank you! I'm glad you found it helpful! Please let me know if you have any questions!

 

Your articles are fantastic. I’ve been reading some of them and they’ve helped me a lot.

Thank you!

 

Thank you so much! I hope to add more articles soon!