Setting up Express Generator and creating a basic GET request using a JSON file

Why use Express generator?

As a soon to be (hopefully) junior developer, having been introduced to Express Generator was one of the highlights in my coding journey so far. Why? You will hear this over and over again, but us developers are lazy.

We like little hacks and frameworks that make our life easier and quicker :).

This article will give a short overview on what Express Generator is, and how to create a very basic GET request by reading data from our local .json file.

We’re going to do this in a few simple steps.

1. Setting up ExpressGenerator
2. Setting up a new folder which holds our JSON file
3. Reading and displaying data from the JSON file on our localhost using FS

Let’s start!

1. Setting up Express Generator

What actually is Express Generator ? At its core, Express is a handy framework for creating APIs in Node.js. In plain English — it makes writing your own APIs much easier, with much less code (ie — developers are lazy). Now, Express Generator helps us even further , by making this even easier.

How is this you ask?Well, when we install Express Generator on our computer this provides us with a pre-built skeleton application. Sweet, right?

For our example, we will have the two main folders where will work in:

• App.js
• Routes

1. Open up a new folder in your code editor (I use VS Code)

2. Go to the terminal. In there type in the below command:

• Note* — this command will install express-generator globally. That means you don’t need to install it over and over again. If you already have express installed, you can skip this step.

3. Once that is done, boom! Express Generator is in the house! The next thing we want is to get our skeleton express app, which I previously mentioned, so we can start working.

The command for that is:

Let’s break this down a bit:

• view=pug creates your views folder, which is pre-populated with some info. You can use this folder to render anything you’d like to be displayed on a page. There are different types of views, pug is one of them (it actually looks like a little pug) but we also have hbs which are handlebars (little moustaches). Most of the time I end up deleting these, but that’s a whole different story. For now, let’s just leave them there. Think of them them as little helpers when displaying your data :)
• myapp — is the actual name of your app (our main folder). It can be anything you like! “myproject, supersecret” etc — you get it.

4. Don’t forget to start your server! Type in “npm start” in the terminal, which will point to localhost:3000. (*NOTE* if that doesn’t work, do an “npm install”)

5. For this particular project, I want to only read the data from our .json file and just display it in that format, so we won’t need the views folder at all. As I already have Express installed I just typed the command below. This allowed me to create a new folder “myapp” with no views.

Cool, now you should see the whole express application in your code editor, as below.

Express generator folder structure

That was it for step 1! We’re on our way ….

2. Creating our data folder with the JSON file

1. Go to my app and create a new folder called “data”. Inside that folder create a new file with the .json extension.

I have absolutely 0 inspiration so have named mine “gymnasts.json”. You can name it anything you want as long as it as a .json at the end. For example “kittens.json” (because everyone loves kittens). This will allow us to use FS and read from the file. In my case, the file contains a few gymnasts in an array of objects.

View of my gymnasts.json file

Now we have the .json file and our data in, the hard work begins.

2. Let’s go in the routes folder and create a new route. Click on the “routes” and create a new .js file. In my case, I will try and display all the gymnasts from my .json folder so I will just call it: gymnasts.js.

3. Let’s go back to our app.js folder. In there we need to:

• Create a new route (first photo)
• Create a new router which will direct to our new route (which we created above). (second photo)

Structure of app.js file

That was it!

Now, final step:

3. Reading and displaying data from the JSON file on our localhost using FS.

Simply copy the layout from the other routes (index.js / users.js) (this is what I mean when I say developers are lazy…again).

In addition to that we will need to require “fs “(which is File System — this is what helps us read our file, you can find out more here ) and “path” which will help us get the absolute path to our .json folder.

Top of the file for our new route

Let’s start writing our GET request! :)

The main thing to remember with all API requests is that they will always follow the same format (more or less) and will be look pretty similar! Cool, right? This means that once we find out how to write one GET request, we can do DELETE, CREATE, UPDATE and so on much easier.

Our GET request

So…what is going on there?

Let’s break it down line by line:

1. The router.get is a function, which takes in a callback normally with 2 or 3 parameters, request, response and next. The “/” is basically the route where our users will go to. Since we are getting all our data (gymnasts in our case) why are we not pointing towards “/gymnasts” I hear you ask? Well, this took me a long time to get my head around it, but basically we are already pointing towards the “gymnasts” route in app.js. If we included “gymnasts” after the “/” in order to get all the gymnasts, our users will have to go to “/gymnasts/gymnasts”. Try it out in your code and you’ll see the difference!
2. fs.readFile(path.join(__dirname, “../data/gymnasts.json”) this is where fs starts doing its magic! fs.readFile is a function which takes in 2 parameters (the first paramater is the path, and the second our callback function). First, we are telling it to go to the main path and join it with our .json file (in my case, gymnasts). One thing to note, is that you will need to point to your exact file location.
3. The next bit is actually how we will display the data. The callback function takes in 2 arguments: (err, data) where data is the actual contents of the file.

• In my case, I renamed this to “gymnastsData” just so I know what I will be displaying. You can name this anything!
• Over the next line, I’m just doing a bit of error handling, which can be improved upon…(The School of Code boss will probably shake his head at this point).
• The last line is where we “send” the response (aka what our user will see). This is what res.send does. We are simply telling our GET request to parse the .json data and display the data in the .json file (which I called “gymnastsData”) above.

That’s it! :) you can see the results below on Postman, or using your local host.

Some extra points…

• Don’t forget to start/restart your sever! Type in the terminal “npm start”
• You can find the code for all of the above on the official fs documentantion here.
• Useful info on Stack Overflow.

That’s it! :)

The next step in this series will be on how to create a local MongoDB and read data from that, using Mongoose.