Monolith

This is a mono repo template for building full-stack applications with Turborepo. It includes a frontend and backend application, shared libraries, and utilities. This template is a great starting point for building full-stack applications with TypeScript. It consists of a Next.js frontend, NestJs backend, shared libraries, and utilities.

Table of Contents

• Monolith
  • Table of Contents
  • Using this repo
  • Setup
    • Ports Exposed
    • Development
    • Build
  • What's inside?
    • Apps and Packages
    • Utilities
  • Running NestCLI commands
  • Pirsma Operations
    • Creating a migration
    • Running a migration
    • Generating Prisma Client
    • Running Seeds
  • Bruno Setup
  • CI/CD
    • Frontend
    • Database Setup
      • Firewall Rules
  • Creating a new release
  • Useful Links

Using this repo

Create a repository and follow the steps below to use this template project locally.

1. Add template on your existing repo using git remote add template https://github.com/CodingWithDibesh/monolith.git command.
2. Fetch the template repo using git fetch template command.
3. Merge the template branch to your desired branch using git merge template/[branch-name]

For more information follow the Stack Overflow conversation for more details.

Setup

Copy the .env.example file to .env and fill in the necessary environment variables.

cp .env.example .env

To get started, install the dependencies and run following commands:

yarn 

Ports Exposed

• Postgres: http://localhost:7001
• Backend: http://localhost:7002
• PGAdmin: http://localhost:7003
• Storybook: http://localhost:7004
• Frontend: http://localhost:7005

Development

Run the following command:

yarn dev

This will start the frontend, Storybook.

yarn dev:be

This command will initialize the docker container and backend server. Docker container includes Postgres database, PGAdmin and Backend server.

yarn dev:fe

This command will start the frontend server.

yarn dev:ui

This command will start the Storybook server.

Build

To build all apps and packages, run the following command:

yarn build

This command will build all the packages and apps.

yarn build:be

This command will build the backend application.

yarn build:fe

This command will build the frontend application.

What's inside?

Monolith includes the following packages/apps:

Apps and Packages

• frontend: a Next.js app
• backend: a NestJs app
• @repo/ui: a stub React component library for frontend @repo/shared: a stub utils library shared by both frontend and backend applications
• @repo/schemas: a stub library for shared schemas
• @repo/tailwindcss-config: a stub Tailwind CSS configuration
• @repo/eslint-config: eslint configurations (includes eslint-config-next and eslint-config-prettier)
• @repo/typescript-config: tsconfig.jsons used throughout the monorepo

Each package/app is 100% TypeScript.

Utilities

Monolith has some additional tools already set for you:

• TypeScript for static type checking
• ESLint for code linting
• Prettier for code formatting

Running NestCLI commands

To run NestCLI commands, you can use the following command:

yarn workspace backend nest [nest command]

Pirsma Operations

Here are some useful Prisma operations you can run in the monorepo.

• Creating a migration
• Running a migration
• Generating Prisma Client
• Running Seeds

Creating a migration

Make sure you have the necessary environment variables set in the .env file, and the database is running. To create a migration, run the following command:

yarn workspace backend prisma migrate dev --name [migration name]

Running a migration

To run a migration, run the following command:

yarn workspace backend prisma migrate deploy

Generating Prisma Client

To generate the Prisma Client, run the following command:

yarn workspace backend prisma generate

Running Seeds

To seed the database, run the following command:

yarn workspace backend prisma db seed

Bruno Setup

To setup Bruno click open collections and browse the bruno_docs folder and click open. You should see a monolith collection with all the requests.

CI/CD

The CI/CD pipeline is set up using Github Actions. The pipeline includes the following steps:

Frontend

1. Create an Azure Storage Account

• Go to the Azure Portal.
• Search for Storage Accounts in the search bar and click Create.
• Select your resource group or create a new one.
• Choose a Storage Account Name (this will be used as the subdomain for your static website).
• Choose the Region closest to your users for better performance.
• Under Performance, select Standard.
• Choose StorageV2 (general-purpose v2) for the account kind.
• Under Replication, choose Locally-redundant storage (LRS) for cost-efficiency.
• Click Review + Create and then Create.

2. Enable Static Website Hosting

• Once the storage account is created, go to the Storage Account.
• On the left panel, under Data Management, find Static Website.
• Click Enable to turn on static website hosting.
• Set the Index document name (e.g., index.html), and if necessary, the Error document path (e.g., 404.html).
• Click Save.

3. Getting Required keys

Install the Azure CLI and login to your Azure account using the following command:

az login

4. Creating and assigning Role

Create a new role assignment for the storage account using the following command:

az role assignment create --role "Storage Blob Data Contributor" --assignee <your-email> --scope /subscriptions/<subscription-id>/resourceGroups/<resource-group-name>/providers/Microsoft.Storage/storageAccounts/<storage-account-name>

5. Get the Storage Account Key

Run the following command to get the storage account key:

az storage account keys list --account-name <storage-account-name> --resource-group <resource-group-name>

6. Add the Storage Account Key to Github Secrets

Copy the key1/key2 value and add it into github secrets under Secrets and Variables -> Actions -> Repository secrets.

Create AZURE_STORAGE_KEY and paste the key value.

Similarly, create AZURE_STORAGE_ACCOUNT and paste the storage account name.

Database Setup

1. Create a new Azure Database for PostgreSQL server.
2. Create a new github secret with the name DATABASE_URL and paste the connection string. The connection string should look like this:

postgresql://<username>:<password>@<host>:<port>/<database>?sslmode=require

Firewall Rules

To ensure your backend service can connect to the PostgreSQL server, you must adjust the network firewall settings.

Backend Hosted on Azure (e.g., Azure App Service, Virtual Machines, Kubernetes):

• Enable Azure Services Access:
• Go to your PostgreSQL Flexible Server in the Azure Portal.
• Navigate to Networking.
• Enable the option Allow Azure services and resources to access this server. This creates a firewall rule that allows all trusted Azure services (like Azure App Service or Azure Kubernetes Service) to access your database without needing to manage IP addresses manually.

Backend Hosted on Non-Azure Platforms (e.g., AWS, GCP, or any other hosting provider): If your backend is hosted on a non-Azure platform (e.g., AWS, DigitalOcean, or any cloud provider):

Identify the Public IP Address of your backend instance. Your hosting provider’s dashboard should display this.

In the Azure Portal:

• Go to PostgreSQL Flexible Server -> Networking.
• Add the public IP address (or a range of IPs) to the allowed list of IP addresses in the firewall settings.

Example:

54.23.43.89 (Your backend's public IP address)

Remove IPs when no longer needed: If your backend service IP changes or rotates, you’ll need to update this manually.

Tip: If your backend service uses dynamic IP addresses or is in a different network configuration, using a VPN or a Bastion Host can help maintain a static IP for secure connections.

Creating a new release

To create a new release, follow the steps below:

1. Merge all the changes to the main branch.
2. Create a new release by going to the releases page.
3. Click on the Draft a new release button.
4. Add the tag version and title.
5. Add the release notes.
6. Click on the Publish release button.
7. The release will trigger the CI/CD pipeline and deploy.

Useful Links

Learn more about the power of Turborepo:

• Tasks
• Caching
• Remote Caching
• Filtering
• Configuration Options
• CLI Usage