2 posts tagged with "prisma"

Throughout this series, we will construct a comprehensive backend utilizing contemporary tools and cutting-edge concepts. My earnest desire is for you to accompany this journey from its inception, following the episodes in the order of their publication. This sequential approach is designed to facilitate a thorough understanding of the foundational concepts, making it particularly beneficial for beginners. However, if you happen to be an expert in the field, feel free to leverage your skills and customize the process to align with your specific objectives. Whether you're just starting out or a seasoned professional, there's something valuable for everyone in this series as we delve into the intricacies of backend development.

Project Setup​

Let's initiate the project setup and push it to GitHub. In this endeavor, we will be employing various frameworks, libraries, and programming languages. The selection of tools is independent of the project structure. Below is a list of tools we will be utilizing:

• Node.js - version 16 or above
• PNPM - Package Manager (PNPM will also be employed for managing a monorepo)
• GraphQL - we will use tools like Hasura , Apollo Server 4 and GraphQL Tools
• Express - Server
• Prisma - ORM

As the project progresses, additional tools may be incorporated into this list.

Create a Monorepo​

Assuming PNPM is installed (for installation instructions, refer to pnpm), let's create a monorepo:

mkdir api-monorepo
cd api-monorepo
# Create an API folder
mkdir api
# Initialize PNPM project
pnpm init
# Initialize PNPM monorepo configuration
touch pnpm-workspace.yaml
# Add the following in the workspace file
    packages:
        - "api"
        - "frontend" # This is optional for now
# setup api project
cd api
# initialize  project
pnpm init
# install initial dependencies
pnpm add -D typescript @types/node
# initialize typescript
npx tsc --init 
# modify tsconfig.json to suit your development requirements. you might want to enable more features in that file.

With these steps completed, we are prepared to weave together the components of our project. This marks the beginning of our successful project journey.

Quick Overview

in this part we are going to implement the following:

• Install additional dependencies
• Additional project configurations
• Setup minimal server using express
• Test the server

Initial Server configuration

# create a src folder inside api folder
mkdir -p api/src
#create main typescript file
touch api/src/main.ts
# lets change directory to api
cd api
# install additional api dependencies 
pnpm add cors express dotenv
# this will install three dependencies in devdependencies
pnpm add -D @types/{node,cors,express} nodemon

{
  "scripts" {
      "api":"pnpm --filter api"
  }
  // ... rest of the configuration
}

{
  "scripts" {
      "build":"tsc ",
      "watch":"tsc -w",
      "dev":"nodemon dist/main.js"
  }
  // ... rest of the configuration
}

{
  "compilerOptions": {
    "incremental": true,  
    "composite": true, 
    "target": "ES2022", 
    "module": "NodeNext", 
    "moduleResolution": "NodeNext",
    "rootDirs": ["src"], 
    "outDir": "./dist",   
    "strict": true, 
    "noImplicitAny": true, 
    "alwaysStrict": true,   
    "noUnusedLocals": true,  
    "noUnusedParameters": true,  
    "skipLibCheck": true ,
    "esModuleInterop":true
  }
}

# we need first to install ts-node
pnpm api add -D ts-node

{
    "watch": ["src","graphql","hasura","prisma,tsconfig.json,package.json,.env"],
    "ext": "ts,graphql,json,prisma,js,env",
    "ignore": ["**/*.spec.ts","**/*.spec.graphql","**/*.spec.json","**/*.spec.js"],
    "execMap": {
      "ts": "ts-node ./src/main.ts"
    },

    "exec": "ts-node ./src/main.ts"
  }
  

// # updated scripts section
{
  "scripts" {
      "build":"tsc ",
      "watch":"tsc -w",
      "dev":"nodemon"
  }
  // ... rest of the configuration
}

Now that we have prepared the environment for our server to run smoothly, it's time to set up the server and test it. we need to create two files, the main entery file for our api api/src/main.ts and environmental variables file api/.env

import express, { json } from "express";
import cors from "cors";
import dotenv from "dotenv";
dotenv.config();
const env = process.env;
const app = express();
// Initialse base router
const router = express.Router();
// Set initial route
router.get("/", (_req, res) => {
    res.send({ message: "Monorepo API Configured!", success: true});
});
// Set v1/api endpoint
app.use("/v1/api", router);
// configure cors. the delimeter here can be anything that you have used in your .env file. for my example here am using comma to separate the urls.
app.use(cors({ origin: env.ALLOWED_ORIGINS?.split(",") }));
// enable json serialization
app.use(json());
// start server
app.listen(env.PORT ? +env.PORT : 9000, () => {
    console.log(`Server started on  http://localhost:${env.PORT}/v1/api`);
})

PORT=9100
# allowed frontend applications based on the referer/origin.
ALLOWED_ORRIGINS=http://localhost:3000,http://localhost:7010

Lets run the server now.

pnpm api dev
# our server shpuld be up and running on http://localhost:9100 or http://localhost:9000 depending on the PORT set in .env file

Am glad you have made it this far. we have more to cover in this series. proceed to Part 3 to get started.