Building a web app (Whinst) Part 9: Learning Express and PostgreSQL

The next step in the Whinst development plan after building the frontend is learning the required backend technologies before starting to build the backend. The technologies I’ll be using for the backend are Express for the server and API and PostgreSQL for the database. In this article, I’ll summarise what I’ve learned about these technologies so far. Let’s dive in🏄🏾

Learning Express🧑🏾‍💻

Express is a Node.js framework. Before you can start learning Express you’ll need to have some familiarity with Node.js which luckily for me I already had😏. An Express server is created by first initializing the node package manager in the project folder and then installing express and other required necessary packages like CORS. The commands below show how this is done.

$ npm init
$ npm i express pg cors

To build the express server an index.js file has to be created, this acts as a sort of control center for the app. In this index.js file the Express and CORS libraries have to be first recorded, then a defined variable usually given the name app takes the Express library and runs it to create the server. Middleware like the CORS library also is defined. When the server runs it listens to a set port number (the port number set in the example below is 3000). To allow the frontend to get data from an API, an endpoint has to be defined. The code below shows how all these steps are implemented.

//Recording libraries
const express = require("express");
const app = express();
const cors = require("cors");
const dbInfo = require("./db");

//Defining middleware
app.use(cors());
app.use(express.json());

//Setting up GET API endpoint
app.get("/", async (req, res) => {
  try {
    const items = await dbInfo.query("SELECT * FROM info");
    res.json(items.rows);
  } catch (err) {
    console.error(err.message);
  }
});

//Setting the server to listen to port 3000
app.listen(3000, () => {
  console.log("server is running");
});

Learning PostgreSQL🧑🏾‍💻

After installing PostgreSQL in the database and logging into the PostgreSQL server, a database and tables can be created using the example commands below.

CREATE DATABASE information;

CREATE TABLE info(
  id SERIAL PRIMARY KEY,
  description VARCHAR(255)
);

The first command creates a new database called information and the second command created a table in the database called info. An id primary key field is created within the info table and set to a varchar type with a 255-character limit.

To connect the database to the server a file within our server-side folder will have to be created to let the server know where the database is and how it can access it. The code below shows how this is implemented.

const dbInfo = require("pg").dbInfo;

const dbInfo = new dbInfo({
  user: "postgres",
  password: "password",
  host: "localhost",
  port: 5432,
  database: "information"
});

module.exports = dbInfo;

This information is then exported from here and imported into the index.js file. Information such as user, password and port has to be put for the server to find and access the database.

The above steps are a summary of what I learned about Express and PostgreSQL. These steps create a simple API endpoint on a simple express server that is linked to a simple PostgreSQL database😅. Now that I’ve learned enough to get started I can now move on to building the backend which is something you’ll not want to miss so stay tuned to the blog. Thanks for reading and see you in the next one🙏.