Backend

API server for application

Create root folder

Create project root folder

mkdir [WHATEVER_NAME_YOU_WANT_FOR_YOUR_APPLICATION]

Downloading NPM packages

npm i express && npm i -D typescript ts-node @types/express nodemon

nodemon: Restarting node application whenever files change.
ts-node: Helps execute Typescript on Node.js without pre-compiling into Javascript.

Initialize server

Create init.ts file in the project root folder

import express, { Application } from "express";

const app: Application = express();

app.listen(4000, () =>
    console.log("Server is running on http://localhost:4000")
);

Import alias

Import alias allows us to import external files in neat way. For example,

import someFile from "../../../../middlewares/someDirectory/someFile"; // 👉 Not this
import someFile from "@/middlewares/someDirectory/someFile"; // ✅ But this!

Install packages

npm i -D tsconfig-paths

Modify `paths` in `tsconfig.json`

We can designate import aliases by setting paths.

tsconfig.json


{
    "compilerOptions": {
        "baseUrl": ".",
+
        "paths": [
+
            "@/*": ["./*"]
        ]
    }
}

Create `nodemon.json` configuration file

Create nodemon configuration file in the root folder.

nodemon.json

{
    "ignore": ["**/*.test.ts", "**/*.spec.ts", ".git", "node_modules"],
    "watch": ["src"],
    "exec": "node -r tsconfig-paths/register -r ts-node/register ./src/init.ts",
    "ext": "ts, js"
}

ignore: Literally ignore changes of files that are specified.
watch: Watch changes of files that are within the specified directories.
exec: Specifying extensions of files.

Modify `package.json`

Modify the dev command as follows.

package.json


{
    "scripts": {
-
        "dev": "node -r ts-node/reigster ./src/init.ts"
+
        "dev": "nodemon",
    },
}

Configuring with MongoDB

Install pacakges

npm i mongoose && npm i -D @types/mongoose dotenv

Mongoose provides a straight-forward, schema-based solution to model in our application data.
dotenv is a zero-dependency module that loads environemtn variables from a .env file into process.env.

Configure `dotenv` on our `init.ts` file

Come back to our server initialization file (init.ts) and load dotenv/config.

init.ts

+
import "dotenv/config";
import express, { Application } from "express";

// ...

Add MongoDB URI in `.env` file

Create .env file in project root folder and put MongoDB URI you created. Usually MongoDB URI will start with mongodb+srv://

.env

MONGODB_URI="mongodb+srv://your_db:your_db_password@your_cluster_name..."

Add `.env` in `.gitignore`

Add .env file in .gitignore file for preventing being leaked to the public.

.gitignore

.env

Connect MongoDB URI with our server

Create separate file called db.ts and put code as below.

utils/db.ts

import "dotenv/config";
import mongoose from "mongoose";

const DB_URI =
process.env.NODE_ENV === "development"
    ? (process.env.DB_URI_DEVELOPMENT as string)
    : (process.env.DB_URI_PRODUCTION as string);

const DB_NAME =
process.env.NODE_ENV === "development"
    ? (process.env.DB_NAME_DEVELOPMENT as string)
    : (process.env.DB_NAME_PRODUCTION as string);

mongoose
    .connect(DB_URI, { serverSelectionTimeoutMS: 10000, dbName: DB_NAME })
    .catch((error: unknown) => console.log("DB connection error 🚨: ", error));

mongoose.connection.on("error", (error: unknown) =>
    console.log("DB connection error 🚨: ", error)
);
mongoose.connection.once("open", () =>
    console.log("DB connected successfully ✅")
);

I created two different DBs: one for development, and the other one for production.
Mongoose.prototype.connect() allows us to connect our MongoDB URI to our server application.

Project Initialization