Stacky REST API #1 - Introduction
Odunayo Ogungbure
Posted on November 25, 2020
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
- Node
- Postgresql
- Yarn (optional)
- Postman
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
This creates a package.json file that holds information about our application.
Next is to add express as a dependency.
$ yarn add express
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
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}`));
To run this file, open up the terminal and run the command below. This spins up a server on port 3000.
$ node src/app
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": {
}
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"
}
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"
}
Go back to the terminal and type in the command below and notice our application still works.
$ yarn start
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 💪🏾!'));
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
Once installed, change your start script to;
"scripts": {
"start": "nodemon src/app"
},
Start the server and visit the browser, you should see the text on the screen;
$ yarn start
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}`));
Go back to your browser, refresh and it's changed 🍻
Next on building stacky API, we'll be adding babel to our project.
Posted on November 25, 2020
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.