Project Initialization
Frontend & Backend
Backend
API server for application
++
Downloading NPM packages
npm i express && npm i -D typescript ts-node @types/express nodemon
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 thisimport 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 intoprocess.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.