Stacky REST API #1 - Introduction

mr_steelze

Odunayo Ogungbure

Posted on November 25, 2020

Stacky REST API #1 - Introduction

In this tutorial series, we’ll be learning how to build a REST API with Node.js by building a simple Q&A platform, Stacky. We'll be covering authentication, authorization, mails, testing, documentation, deployment and more.

This tutorial requires an intermediate knowledge of JavaScript along with basic knowledge of Node.js and PostgreSQL.

Requirements

Application Overview

  • User can signup and sign in.
  • Users can verify their email address.
  • Authenticated users can post a question.
  • Authenticated users can answer a question.
  • Question owner can mark an answer as accepted.
  • Question owner can delete his question.
  • Answer owner can delete his answer
  • Question owner can mark an answer as accepted and much more.

Getting started

To get started let's create our project folder and name it stacky. Open up the terminal and run the command to initialize the app;

$ yarn init -y
Enter fullscreen mode Exit fullscreen mode

This creates a package.json file that holds information about our application.

Next is to add express as a dependency.

$ yarn add express
Enter fullscreen mode Exit fullscreen mode

Create a folder src in the project folder. Within this src folder we'll also create a new app.js file which will serve as our application entry point. Our folder structure should be something like this;

stacky
|-- node_modules
|-- src
|   |--- app.js
|-- package.json
|-- yarn.lock
Enter fullscreen mode Exit fullscreen mode

Let's add a basic hello world example. Copy the snippet below into the app.js file.

const express = require('express');
const app = express();
const port = 3000;

app.get('/', (req, res) => res.send('Hello World 😎!'));

app.listen(port, () => console.log(`Example app listening at http://localhost:${port}`));
Enter fullscreen mode Exit fullscreen mode

To run this file, open up the terminal and run the command below. This spins up a server on port 3000.

$ node src/app 
Enter fullscreen mode Exit fullscreen mode

Navigate to localhost:3000 on your browser and you should see "Hello World" printed on your screen.

NPM Scripts

The node src/app command seems not to be friendly to always type. What if we could automate this?

NPM scripts are scripts used to automate repetitive tasks.

Open up the package.json file and add a scripts object if absent. Within this object, the key is the name of the script and the value contains the script you want to execute.

"scripts": {

}
Enter fullscreen mode Exit fullscreen mode

Let's use one of the special NPM scripts, the start script. You’ve probably seen this or will probably see this a lot;

"scripts": {
    "start": "node src/app"
}
Enter fullscreen mode Exit fullscreen mode

Your package.json file should be looking like this;

"name": "stacky",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
    "start": "node src/app"
},
"dependencies": {
  "express": "^4.17.1"
}
Enter fullscreen mode Exit fullscreen mode

Go back to the terminal and type in the command below and notice our application still works.

$ yarn start
Enter fullscreen mode Exit fullscreen mode

To learn more about NPM scripts - Introduction to NPM Scripts

Let's make a change to the app.js file;

// Change the response text
app.get('/', (req, res) => res.send('We are one 💪🏾!'));
Enter fullscreen mode Exit fullscreen mode

Refresh the page on the browser and you will notice there's no change. No matter how many times you refresh, you still see the previous text.

To solve this, you need to go to the terminal, stop the server and start again with the yarn start command.

This is a big problem! Imagine having to always restart the server anytime you make a change to your codebase, that's way too stressful. What if we have a tool that automatically re-starts the server anytime we make a change?

Nodemon

Nodemon is a utility that will monitor for any changes in your source code and automatically restart your server.

Open up the terminal and install nodemon as a dev-dependency as it's only needed for development purpose.

$ yarn add nodemon -D
Enter fullscreen mode Exit fullscreen mode

Once installed, change your start script to;

"scripts": {
    "start": "nodemon src/app"
},
Enter fullscreen mode Exit fullscreen mode

Start the server and visit the browser, you should see the text on the screen;

$ yarn start
Enter fullscreen mode Exit fullscreen mode

To test if nodemon works, change the text in the app.js file and save.

const express = require('express');
const app = express();
const port = 3000;

app.get('/', (req, res) => res.send('One of a kind 🤩'));

app.listen(port, () => console.log(`Example app listening at http://localhost:${port}`));
Enter fullscreen mode Exit fullscreen mode

Go back to your browser, refresh and it's changed 🍻

Next on building stacky API, we'll be adding babel to our project.

💖 💪 🙅 🚩
mr_steelze
Odunayo Ogungbure

Posted on November 25, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related