DEV Community: Somsubhra Das

DigitalOcean Kubernetes Challenge - MongoDB On Kubernetes

Somsubhra Das — Sun, 28 Nov 2021 14:53:13 +0000

Kubernetes is an open-source container-orchestration system for automating computer application deployment, scaling, and management. It was originally designed by Google and is now maintained by the Cloud Native Computing Foundation.

What is DigitalOcean Kubernetes (DOKS)?

DigitalOcean Kubernetes (DOKS) is a managed Kubernetes service that helps us to deploy Kubernetes clusters hassle free without needing to handle the control panel and containerised infrastructure. Clusters are compatible with standard Kubernetes toolchains and integrate natively with DigitalOcean Load Balancers and block storage volumes.

Why should you use Kubernetes?

Here are some of the benefits of using Kubernetes:

Auto Scaling
Self Healing
Load Balancing
Auto Rollbacks

Getting Started

To get started with DOKS first, there are a few prerequisites.

DigitalOcean Account: K8s
doctl CLI: This helps to quickly spin up a K8s cluster on DigitalOcean and adds all config files to our system automatically
kubectl CLI: Helps to interact with our K8s cluster by running commands against it.

How to create a K8s cluster?

On DigitalOcean, K8s cluster can be created in many ways, though DO dashboard, doctl CLI etc. Here we are going to use DigitalOcean dashboard to create the Cluster.

Go to the Kubernetes Create Cluster Dashboard.

Select the K8s version.
Choose your nearest datacenter location
Choose cluster capacity, number of nodes, machine type.
Then click Create Cluster

The cluster will be created within a few minutes.

Connecting to K8s Cluster

After the successful creation of the cluster, you will be greeted with a panel like this:

Scroll down to the bottom section, you will find a doctl command to run which automatically saves your K8s configuration on your local machine.

doctl kubernetes cluster kubeconfig save use_your_cluster_name

Now you have successfully saved your Auth config to your K8s cluster to your local machine. Now let's get started with the MongoDB Deployment.

How to deploy MongoDB on DOKS?

Now we are ready to use kubectl CLI and run commands against our K8s cluster to deploy a MongoDB instance.

TL;DR

Clone the following GitHub Repository

git clone https://github.com/Somsubhra1/Digitalocean-Kubernetes-Challenge.git
cd Digitalocean-Kubernetes-Challenge

Run the following command to setup everything in one go:

kubectl apply -f .

Skip to the connection part by clicking here.

Creating MongoDB Secrets

Secrets in Kubernetes are the objects used for supplying sensitive information to containers.

To secure our MongoDB instance, we should always restrict access to the database with a password. Here we will use secrets to invoke our desired passwords to the containers.

Create the following file and name it mongodb-secrets.yaml.

apiVersion: v1
data:
  password: ZG9rOHNtb25nbwo= # dok8smongo
  username: YWRtaW4K # admin
kind: Secret
metadata:
  creationTimestamp: null
  name: mongo-creds

P.S: The above username and password are encoded in base64 format.

Now run the following command to apply the changes to our K8s cluster.

kubectl apply -f mongodb-secrets.yaml

Creating MongoDB Persistent Volume

We require volumes in K8s to store the data so that data is not lost when our cluster goes down.

In K8s, there are two objects which are required for creating volumes.

Persistent Volume Claims (PVC): Kubernetes looks for a Persistent Volume from which space can be claimed and assigned for a PVC. PVC works only if the cluster has dynamic volume provisioning enabled.
Persistent Volume (PV): A storage space which is provisioned by an administrator.

Create the following file and name it mongodb-pvc.yaml.

apiVersion: v1
kind: PersistentVolumeClaim
metadata:
  name: mongo-data
spec:
  accessModes:
    - ReadWriteOnce 
  resources:
    requests:
      storage: 1Gi

Run the following command to create the PV.

kubectl create -f mongodb-pvc.yaml

P.S: If your cluster doesn't support PVC then follow the following steps.

Create mongodb-pv.yaml file and insert the following into it.

apiVersion: v1
kind: PersistentVolume
metadata:
  name: mongo-data-pv
spec:
  accessModes:
    - ReadWriteOnce
  capacity:
    storage: 1Gi
  hostPath:
    path: /data/mongo

Then run the following command against your K8s.

kubectl create -f mongodb-pv.yaml

Deploying MongoDB image

We are going to use the official Mongo image from Docker hub.

Insert the following into a file and name it mongodb-deployment.yaml.

apiVersion: apps/v1
kind: Deployment
metadata:
  labels:
    app: mongo
  name: mongo
spec:
  replicas: 1
  selector:
    matchLabels:
      app: mongo
  strategy: {}
  template:
    metadata:
      labels:
        app: mongo
    spec:
      containers:
      - image: mongo
        name: mongo
        args: ["--dbpath","/data/db"]
        livenessProbe:
          exec:
            command:
              - mongo
              - --disableImplicitSessions
              - --eval
              - "db.adminCommand('ping')"
          initialDelaySeconds: 30
          periodSeconds: 10
          timeoutSeconds: 5
          successThreshold: 1
          failureThreshold: 6
        readinessProbe:
          exec:
            command:
              - mongo
              - --disableImplicitSessions
              - --eval
              - "db.adminCommand('ping')"
          initialDelaySeconds: 30
          periodSeconds: 10
          timeoutSeconds: 5
          successThreshold: 1
          failureThreshold: 6
        env:
        - name: MONGO_INITDB_ROOT_USERNAME
          valueFrom:
            secretKeyRef:
              name: mongo-creds
              key: username
        - name: MONGO_INITDB_ROOT_PASSWORD
          valueFrom:
            secretKeyRef:
              name: mongo-creds
              key: password
        volumeMounts:
        - name: "mongo-data-dir"
          mountPath: "/data/db"
      volumes:
      - name: "mongo-data-dir"
        persistentVolumeClaim:
          claimName: "mongo-data"

Then run the following command against your K8s.

kubectl create -f mongodb-deployment.yaml

Running MongoDB from Shell

Now that we have successfully deployed the MongoDB instance on our cluster let's access the database through shell and run commands against it.

Save the file below as mongodb-client.yaml

apiVersion: apps/v1
kind: Deployment
metadata:
  labels:
    app: mongo-client
  name: mongo-client
spec:
  replicas: 1
  selector:
    matchLabels:
      app: mongo-client
  template:
    metadata:
      labels:
        app: mongo-client
    spec:
      containers:
      - image: mongo
        name: mongo-client
        env:
        - name: mongo-client_INITDB_ROOT_USERNAME
          value: 'dummy'
        - name: mongo-client_INITDB_ROOT_PASSWORD
          value: 'dummy'

Now run the following command to deploy the client.

kubectl create -f mongodb-client.yaml

Now let's ssh into the client.

kubectl exec deployment.apps/mongo-client -it -- /bin/bash

Now inside the ssh, let's enter the MongoDB instance using the username and password created above.

mongo --host mongo-nodeport-svc --port 27017 -u admin -p dok8smongo

And finally execute the command in the database to verify that MongoDB has been successfully deployed.

show dbs

If it returns a successful response, then we can be sure that the deployed instance is running successfully.

Connecting to MongoDB from external Apps

Now that our database instance is running and we can even run commands inside our database, let's move forward and see how we can connect our Backend App created using NodeJS, Python etc and utilise our Database.

First we need to create svc for our K8s cluster. Save the following into a file and name it mongodb-nodeport-svc.yaml.

apiVersion: v1
kind: Service
metadata:
  labels:
    app: mongo
  name: mongo-nodeport-svc
spec:
  ports:
  - port: 27017
    protocol: TCP
    targetPort: 27017
    nodePort: 32000
  selector:
    app: mongo
  type: NodePort

Now create the svc using the command:

kubectl create -f mongodb-nodeport-svc.yaml

We have successfully created the service which is exposed to the globally on port 32000. Now we have the username, password, port of our Database. But hold on we still need the IP/host of our hosted K8s cluster node so that we can connect to it.

So to find out the IP of our node run the following command.

doctl compute droplet get <cluster-node-id>

You should be getting a Public IP displayed after running the command. Use that IP to connect to your MongoDB on K8s Cluster from external apps.

To connect your external app your DB URI should be like:

mongodb://<username>:<password>@<Public_IP>:<port>/?authSource=admin&readPreference=primary&appname=MongoDB%20Compass&directConnection=true&ssl=false

Congratulations you have successfully setup MongoDB on K8s Cluster using DOKS.

Credits: How To Deploy MongoDB on Kubernetes – Beginners Guide

Prisma Data Platform - Prisma ORM on Cloud

Somsubhra Das — Thu, 02 Sep 2021 04:50:19 +0000

Prisma Data Platform is a cloud based service which allows developers to try the Prisma ORM, run queries on cloud environment without the need to install Prisma Client locally on the developers' computer.

Features of Prisma Data Platform

Free database provisioning
Pre defined model schema templates
Run and test Prisma Queries on the data
Collaboration between team members
Data browsing capabilities

Getting Started

To get started, visit Prisma Data Platform, sign in with your GitHub Account and click on New Project. From here, we may choose to go in two different ways:

Create new project from scratch
Import existing project from GitHub

Creating Project

Creating a project is simple on Prisma Data Platform. Once you create the project on Prisma Data Platform it will simultaneously create a GitHub Project for it.

Creating Database

Prisma Data Platform can automatically spin an app instance on heroku and create a PostgreSQL database instance as well. You may connect to an existing database as well.

Creating Schema

One of the great features of Prisma Data Platform is that it provides pre written schemas for our database. We can even customise the schema if we want. Also it loads sample data to our database so that we can try out our queries on those data.

For this blog, I would be using the URL Shortener template.

Once the schema has been created, it pushes the schema.prisma file to the GitHub Repository and also adds a Readme.md file to the repo which contains all the instructions for setting up and running the project locally and also the Database ER diagram for ready reference like the one shown below:

This ER Diagram is generated using:

Prisma on Cloud Functionalities

The Prisma on cloud contains several functionalities such as

Guide to Local Setup
Data browser (Prisma Studio)
Query Console

Local Setup

Prisma on Cloud gives a robust documentation to setup the same project on your local development environment with the option to setup local database or connect to a remote database.

Data Browser

Prisma on Cloud provides Prisma Studio out of the box for data browsing on cloud. It helps developers edit data in database tables without a local database client.

Query Console

The query console is the heart of Prisma Data Platform. It allows us to write and try out complex queries on the sample dataset. It can even serve as a scratch pad for your queries during the development phase of your application. It helps to instantly get output of a query without having to write APIs and console logs for the same.

The Query console supports code highlighting, auto complete, auto saves queries and also code linting features.

Collaborate with users

Prisma on cloud also allows developers to collaborate with fellow developers, just by inviting a GitHub user to the Prisma Project. It also gives various types of permissions for collaborators such as Admin, Developer, Viewer etc which grants restricted access to the Prisma project.

Admins can even modify access of collaborators and can remove them from project if at some point they think it's necessary to do so.

What's next for Prisma Data Platform?

Support for other database dialects
Multiple environments support to facilitate and organise projects and initiate workflows between them
Insights such as query times, generated SQL Script about the Query ran in the Query console
Telemetry events integration from Prisma queries to 3rd party external services supporting Open Telemetry Framework
Insights about list of queries in the application

[Please note: All the above mentioned points are subject to change and are not guaranteed]

Contribute to Prisma

Prisma ORM is Open Source and available publicly on GitHub. If you want to contribute to the Prisma check out their GitHub Repository by clicking here.

Supabase - An OpenSource Firebase Alternative

Somsubhra Das — Fri, 06 Aug 2021 05:26:28 +0000

Supabase is an OpenSource Firebase Alternative providing Backend as a Service to various applications. It is super easy to setup and runs quickly with multiple frameworks.

Features

Supabase has the following highlighting features:

PostgreSQL with RealTime Capabilities with PostgREST API
Security and Access control managed by Postgres RLS(Row Level Security)
Authentication with multiple services with support of Magic Link authentication
File Storage
Supabase Client Libraries (Javascript, Python, Dart)
Serverless Functions (Coming Soon)

How it works?

At its core, Supabase is a suite of open source tools, stitched together to build a seamless developer experience:

Source: Supabase

Project

A project in Supabase is a wrapper around all your databases, authentication users, policies, tables, file storage. There are multiple regions from which you can choose where to host your project and Supabase officials are continuously adding more locations to reduce latency.

A project creation takes around 2 minutes to complete so get a coffee, sit back and relax.

Project Dashboard

Once your project is created, you will be greeted with a similar dashboard shown below.

This dashboard contains all details about your project including your database connections, authentication requests, storage space, implementation using client libraries, and much more.

Table Creator/Editor

Supabase uses Relational PostgreSQL as database with RealTime Capabilities and Policy access control by Postgres RLS(Row Level Security).

Supabase allows developers to create a Table and add columns and attributes directly from dashboard.

Supabase allows developers to edit data directly from the dashboard.

Authentication

Supabase has a wide range of Authentication Providers such as Google, GitHub, Facebook, Twitter, GitLab etc. These can be enabled through Authentication Panel. It also supports Phone OTP Authentication and also Magic Link Authentication.

Once a user authenticates through Supabase, it shows the users' email, last login time on the Auth Dashboard.

The magic link works seamlessly which allows users to login/register in your app without a password.

What I like most about the Supabase authentication service is the RLS Policies Feature. We can create policies to restrict access to users from making changes or viewing data from our tables in database.

Supabase provides some pre written templates for our policies as well. We may choose from them or write our own custom policies through the SQL editor as shown below.

create policy "Users can only update their own items."
  on items for update using (
    auth.email() = email
  );

The above query sets the policy in such a way that only the user who's the owner of the item can update that specific item.

Storage

Supabase provides file storage feature with the option to add access control policies to the files as well.

It provides a publicly accessible file link so that it can be shared or embedded in Frontend Apps.

SQL Editor

Supabases gives an online SQL Query CLI right out of the box so that we need not use the CLI to connect to the DBAAS to run our queries. It even saves your queries so that we can go back and check our previous run queries.

Database

From the database tab you may edit your database schemas, add columns to your database, create new tables, delete tables, update database roles etc.

You can even modify the connection pooling of your database.

Alpha Features

A few of the Database features are still in Alpha version.

Database Triggers - trigger is a function invoked automatically whenever an event associated with a table occurs.
Functions - set of SQL and procedural commands such as declarations, assignments, loops, flow-of-control etc.
Function Hooks

Reports

Supabase also has the ability to generate custom reports for your projects. They give a high level overview of your network traffic, user actions, and infrastructure health.

API

Supabase has a wide range of APIs for user Authentication, databases, user management, storage management etc. These APIs are secured by an anonymous API Key.

Check out more on the API reference here.

Client Libraries

Supabase currently supports 3 Client side languages:

Javascript
Python
Dart

The client side sdk has all the functions required for supabase operations to build a Full Stack Application.

Self Hosting

Using Supabase you can even self host the BAAS on your own server. The self-hosted version of Supabase does not include a UI yet. It can be self hosted easily using the Supabase CLI. To get started install the CLI using:

npm install -g supabase

Read more about self-hosting Supabase here.

Is Supabase going to replace Firebase?

So the question you have been looking forward to is this and to this I would straightaway answer "NO!". Supabase is not a 1-to-1 mapping of Firebase. While they are building many of the features that Firebase offers, they are not going about it the same way.

The technological choices are quite different to Firebase. Everything Supabase uses is open source.

Most notably, Supabase uses Postgres rather than a NoSQL store. Currently no other database on the market offers the scalability and functionality required to legitimately compete with Firebase. This is a boon to all those developers who wanted a Backend-As-A-Service(BAAS) with a relational database like PostgreSQL.

But those who still prefer NoSQL structure can go for Firebase as it offers the flexibility of NoSQL store.

Be a part of Supabase

The most beautiful thing about Supabase is it's OpenSource and the code is available publicly on GitHub, so you can easily contribute to it and be a part of Supabase Community.

GitHub
Discord

Journey from Mongoose to Prisma ORM for MongoDB!

Somsubhra Das — Thu, 29 Jul 2021 16:51:25 +0000

Prisma is a next Generation ORM for NodeJS & TypeScript Environments. It has multiple databases support such as MySQL, SQLite, PostgreSQL, MSSQL and also MongoDB.

Source: Prisma

So in this post let's talk about the all new Prisma MongoDB Connector, it's operations and what made me switch from Mongoose to Prisma for MongoDB.

Connection

Let's start by establishing the connection to our MongoDB Server. In your Prisma schema file we need to change the provider.

datasource db {
  provider = "mongodb"
  url      = env("DATABASE_URL")
}

The prisma.schema file allows us to specify how we want Prisma to connect to our database. We need to tell it what kind of provider we would like to use - in this case mongodb - and a url to connect to - this is pointing to an environment variable as we want to keep it secret. We will use a MongoDB connection string as the DATABASE_URL which can be found in the /prisma/.env file.

Next we need to setup the generator block like below.

generator client {
  provider        = "prisma-client-js"
  previewFeatures = ["mongoDb"]
}

Since Prisma MongoDB Connector is still in preview we need to explicitly specify the previewFeatures key.

Defining Models

So now that connection has been successfully established to MongoDB Server, let's now create models for our database collection.

A typical MongoDB document looks like this:

{
  "_id": { "$oid": "60d599cb001ef98000f2cad2" },
  "email": "somsubhra@email.com",
  "name": "Somsubhra",
}

So now how to define a model like this in Prisma? Inside Prisma schema file, we can define our models.

model User {
    id    String  @id @default(dbgenerated()) @map("_id") @db.ObjectId
    email String  @unique
    name  String?
    posts Post[]
}

model Post {
    id        String  @id @default(dbgenerated()) @map("_id")
    published Boolean @default(false)
    title     String
    user      User?   @relation(fields: [userId], references: [id])
    userId    String?
}

Comparing it with mongoose models, in Mongoose ODM we would have written something like:

const mongoose = require("mongoose");

const Schema = mongoose.Schema;

const UserSchema = new Schema({
  name: String,
  email: {
    type: String,
    unique: true,
  },
});

module.exports = User = mongoose.model("user", UserSchema);

const mongoose = require("mongoose");

const Schema = mongoose.Schema;

const PostSchema = new Schema({
  title: String,
  user: {
    type: mongoose.Types.ObjectId,
    ref: "user",
  },
  published: {
    type: Boolean
    default: false,
  },
});

module.exports = Post = mongoose.model("post", PostSchema);

In Prisma we may also generate ObjectIds manually by using the bson package.

import { ObjectId } from "bson";

const id = new ObjectId();

Queries & Database Operations

Now let's understand how to write queries and operations to MongoDB using Prisma in comparison to Mongoose.

Fetching Single record

Fetching a single record in prisma is done using the where property but in mongoose it has findById method.

Prisma

const user = await prisma.user.findUnique({
  where: {
    id: ObjectId('5eb9354624286a04e42401d8'),
  },
})

Mongoose

const result = await User.findById('5eb9354624286a04e42401d8')

Fetching selected values for single record

Fetching selected values for single record is easier than ever in Prisma ORM by using just a single query function to do the select operation whereas in Mongoose after finding the record we need to chain the output with select(). This increases the time complexity and also slows down the process.

Prisma

const user = await prisma.user.findUnique({
  where: {
    id: ObjectId('5eb9354624286a04e42401d8'),
  },
  select: {
    name: true,
  },
})

Mongoose

const user = await User.findById('5eb9354624286a04e42401d8').select(['name', 'email'])

Fetching relations

In Prisma, we use the include property but in Mongoose we would have to use the populate() method.

Prisma

const posts = await prisma.user.findUnique({
  where: {
    id: ObjectId('5eb9354624286a04e42401d8'),
  },
  include: {
    post: true,
  },
})

Mongoose

const userWithPosts = await User.findById(id).populate('posts')

Filtering with values

In Prisma we filter records using the where property whereas in Mongoose we use the find().

Prisma

const posts = await prisma.post.findMany({
  where: {
    title: {
      contains: 'Hello World',
    },
  },
})

Mongoose

const post = await Post.find({
  title: 'Hello World',
})

Relation Filtering

Prisma

Prisma can filter a list based on a criteria that applies not only to the models of the list being retrieved, but to a relation of that model.

const posts = await prisma.user.findMany({
  where: {
    posts: {
      some: {
        title: {
          contains: 'Hello',
        },
      },
    },
  },
})

Mongoose

Mongoose doesn't offer this feature for relation filters. We may achieve similar functionality by adding an additional step to filter the results returned by the query but that would result in increased query times and load for large databases.

Pagination

Prisma

Cursor-style pagination:

const page = prisma.post.findMany({
  before: {
    id: ObjectId('6eb93546f4w5486a04e42401d8'),
  },
  last: 20,
})

Offset pagination:

const cc = prisma.post.findMany({
  skip: 200,
  first: 20,
})

Mongoose

Mongoose also has similar implementation for pagination.

const posts = await Post.find({
  skip: 5,
  limit: 10,
})

Creating Records

Prisma

const user = await prisma.user.create({
  data: {
    email: 'user@email.com',
  },
})

Mongoose

const user = await User.create({
  name: 'John',
  email: 'user@email.com',
})

Updating Records

Prisma updates the record directly with the values passed in data property in comparison with mongoose where we need to use $set operator.

Prisma

const user = await prisma.user.update({
  data: {
    name: 'John',
  },
  where: {
    id: ObjectId('5eb9354624286a04e42401d8'),
  },
})

Mongoose

const updatedUser = await User.findOneAndUpdate(
  { _id: id },
  {
    $set: {
      name: 'John',
    },
  }
)

Deleting Single Record

Prisma

const user = await prisma.user.delete({
  where: {
    id: ObjectId('5eb9354624286a04e42401d8'),
  },
})

Mongoose

await User.findByIdAndDelete(id)

Deleting Multiple Records

Prisma

const users = await prisma.user.deleteMany({
  where: {
    id: {
      in: [1, 2, 6, 34],
    },
  },
})

Mongoose

await User.deleteMany({ _id: { $in: [1, 2, 6, 34] } })

Advantages of Prisma over Mongoose

So now that we know the differences in operations between Prisma & Mongoose, let's now focus on the advantages Prisma provides over Mongoose.

Prisma allows TypeSafe Database access.
Prisma has an auto generated query builder
Support for multiple databases. This is a huge advantage to developers when moving between SQL and NoSQL Databases, since only the Schema file needs to be changed. All other operations/queries remain same.
Supports multiple RDBMS
Prisma lets you filter a list based on a criteria that applies not only to the models of the list being retrieved, but to a relation of that model. Mongoose doesn't offer a dedicated API for relation filters. You can get similar functionality by adding an additional step to filter the results returned by the query.
Prisma Studio tool that helps to manage data easily.

Disadvantages of Prisma

On the other side, Prisma has a few disadvantages over Mongoose as well.

Support for multiple model files not available. All models need to be written in schema.prisma file which makes the file cluttered and hard to debug and read.
Prisma MongoDB support is currently in preview
Currently no embedded collection support.
Error handling is incomplete.
The Migrate and Introspection workflows are currently not supported.
@@id and auto-increment are not currently supported.

Should you be using Prisma over Mongoose?

Prisma is a modern ORM which has its own tradeoffs. If you are building a server side application with REST APIs and GraphQL, Prisma would be a great choice. It also makes lives of developers easier. Prisma gives a significant productivity boost for the most common database workflows.

If these factors don't matter much to you and you want to have more control over database operations then my suggestion will be to go with Mongoose "for the time being".

Contribute to Prisma

Prisma MongoDB Connector is still in preview and development. If you want to contribute to the Prisma check out their GitHub Repository by clicking here.

DigitalOcean MongoDB Hackathon - Memories Sharing App

Somsubhra Das — Wed, 30 Jun 2021 08:30:33 +0000

Hello everyone,
In this post we are going to learn how to create a memories sharing app on MERN stack. If you don't know what MERN stack is, it's a full stack technology which utilises the following:

MongoDB - A NoSQL Database which is Document based
ExpressJS - A microservice web framework.
ReactJS - A frontend Library
NodeJS - A runtime environment for JavaScript used on server side.

So let's get started and build our app.

We would be requiring:

NodeJS
Visual Studio Code or any other IDE of your choice.

First we need to create a project directory and initialize our project using the command:

npm init

Server:

This will create a package.json file. Now we need to add a few external dependencies to our app. So to do that run the following command:

npm i body-parser cors express mongoose

After installing these, its's time to create a Database instance on DigitalOcean Managed MongoDB platform.

Copy the connection string and add it to .env file with MongoURI as variable name.

Once we have created the .env to add a few scripts to our package.json file:

"scripts": {
    "start": "node server.js",
    "server": "nodemon server.js",
    "client": "npm start --prefix client",
    "client-install": "cd client && npm install",
    "dev": "concurrently -n server,client -c red,blue \"npm run server\" \"npm run client\"",
    "heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client",
    "build": "npm run heroku-postbuild"
  },

After doing so the package.json file should look like this:

{
  "name": "memories-app",
  "version": "1.0.0",
  "description": "A memories app made on MERN stack",
  "main": "server.js",
  "type": "module",
  "scripts": {
    "start": "node server.js",
    "server": "nodemon server.js",
    "client": "npm start --prefix client",
    "client-install": "cd client && npm install",
    "dev": "concurrently -n server,client -c red,blue \"npm run server\" \"npm run client\"",
    "heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client",
    "build": "npm run heroku-postbuild"
  },
  "keywords": [],
  "author": "Somsubhra Das",
  "license": "ISC",
  "dependencies": {
    "body-parser": "^1.19.0",
    "cors": "^2.8.5",
    "dotenv": "^8.2.0",
    "express": "^4.17.1",
    "mongoose": "^5.10.13"
  }
}

Now Copy the following code to a new file server.js:

import express from "express";
import bodyParser from "body-parser";
import mongoose from "mongoose";
import cors from "cors";
import { config } from "dotenv";

import postRoutes from "./routes/post.js";

config();

const app = express();

app.use(bodyParser.json({ limit: "30mb", extended: true }));
app.use(bodyParser.urlencoded({ limit: "30mb", extended: true }));

app.use(cors());

const CONNECTION_URL = process.env.MongoURI;

mongoose
  .connect(CONNECTION_URL, {
    useNewUrlParser: true,
    useUnifiedTopology: true,
    useFindAndModify: false,
  })
  .then(() => console.log("Successfully connected to MongoDB"))
  .catch((err) => console.log(`Error connecting to MongoDB ${err.message}`));

// app.get("/", (req, res) => res.send("Hello"));

app.use("/posts", postRoutes);

// Serve static assets if it's production environment
if (process.env.NODE_ENV === "production") {
  // Set static folder
  app.use(express.static("client/build"));
  app.get("*", (req, res) => {
    res.sendFile(path.resolve(__dirname, "client", "build", "index.html"));
  });
}

const PORT = process.env.PORT || 5000;

app.listen(PORT, () => console.log(`Server is running on port ${PORT}`));

The above code configures the database connections, routes, port.

After that create a models folder and inside it create postMessage.js file. Copy the following to the file:

import mongoose from "mongoose";

const postSchema = mongoose.Schema({
  title: String,
  message: String,
  creator: String,
  tags: [String],
  selectedFile: String,
  likeCount: {
    type: Number,
    default: 0,
  },
  createdAt: {
    type: Date,
    default: new Date(),
  },
});

const PostMessage = mongoose.model("PostMessage", postSchema);

export default PostMessage;

The above code creates a MongoDB Schema for our Database. It will be used for data fetching and data entry to database.

After that create a routes folder and inside it create a file named post.js and enter the following:

import express from "express";
import {
  getPosts,
  createPost,
  updatePost,
  deletePost,
  likePost,
} from "../controllers/posts.js";

const router = express.Router();

router.get("/", getPosts);
router.post("/", createPost);
router.patch("/:id", updatePost);
router.delete("/:id", deletePost);
router.patch("/:id/likePost", likePost);

export default router;

This setups the routes for our CRUD APIs. Having done so, it's time to create the controllers to handle our requests and responses. So create a folder named controllers and inside it create posts.js:

import PostMessage from "../models/postMessage.js";
import mongoose from "mongoose";

export const getPosts = async (req, res) => {
  try {
    const postMessages = await PostMessage.find();
    // console.log(postMessages);

    return res.json(postMessages);
  } catch (error) {
    res.status(404).json({ message: error.message });
  }
};

export const createPost = async (req, res) => {
  const post = req.body;
  // console.log(req.body);
  const newPost = new PostMessage(post);

  try {
    await newPost.save();

    res.status(201).json(newPost);
  } catch (error) {
    res.status(409).json({ message: error.message });
  }
};

export const updatePost = async (req, res) => {
  const { id: _id } = req.params;
  const post = req.body;

  if (!mongoose.Types.ObjectId.isValid(_id)) {
    return res.status(404).send("No post with that id");
  }

  const updatedPost = await PostMessage.findByIdAndUpdate(_id, post, {
    new: true,
  });

  return res.json(updatedPost);
};

export const deletePost = async (req, res) => {
  const { id: _id } = req.params;

  if (!mongoose.Types.ObjectId.isValid(_id)) {
    return res.status(404).send("No post with that id");
  }

  await PostMessage.findByIdAndRemove(_id);

  return res.json({ message: "Post deleted successfully" });
};

export const likePost = async (req, res) => {
  const { id } = req.params;

  if (!mongoose.Types.ObjectId.isValid(id)) {
    return res.status(404).send("No post with that id");
  }

  const updatedPost = await PostMessage.findByIdAndUpdate(
    id,
    {
      $inc: { likeCount: 1 },
    },
    { new: true }
  );
  return res.json(updatedPost);
};

This code handles the request and responses for the Posts CRUD API server.

Having done so, we have successfully setup our server side and the APIs.

Client:

Next we would be handling our client side setup. So run the following command:

npx create-react-app client

This will create a directory named client with all the frontend code. Change directory to client and run:

npm i @material-ui/core @material-ui/icons axios moment react-redux redux redux-thunk

Now we need to setup actions. Create actions folder and inside it posts.js and enter the following code:

import {
  CREATE,
  UPDATE,
  DELETE,
  LIKE,
  FETCH_ALL,
} from "../constants/actionTypes";
import * as api from "../api";

// Action Creators
export const getPosts = () => async (dispatch) => {
  try {
    const { data } = await api.fetchPosts();
    // const action = { type: "FETCH_ALL", payload: [] };
    dispatch({ type: FETCH_ALL, payload: data });
  } catch (error) {
    console.log(error.message);
  }
};

export const createPost = (post) => async (dispatch) => {
  try {
    const { data } = await api.createPost(post);

    dispatch({ type: CREATE, payload: data });
  } catch (error) {
    console.log(error);
  }
};

export const updatePost = (id, post) => async (dispatch) => {
  try {
    const { data } = await api.updatePost(id, post);
    dispatch({ type: UPDATE, payload: data });
  } catch (error) {
    console.log(error.message);
  }
};

export const deletePost = (id) => async (dispatch) => {
  try {
    await api.deletePost(id);
    dispatch({ type: DELETE, payload: id });
  } catch (error) {
    console.log(error);
  }
};

export const likePost = (id) => async (dispatch) => {
  try {
    const { data } = await api.likePost(id);
    dispatch({ type: LIKE, payload: data });
  } catch (error) {
    console.log(error.message);
  }
};

Now it's time to create the API calls. Create api folder and inside it index.js:

import axios from "axios";

const url = "/posts";

export const fetchPosts = () => axios.get(url);

export const createPost = (newPost) => axios.post(url, newPost);

export const updatePost = (id, updatedPost) =>
  axios.patch(`${url}/${id}`, updatedPost);

export const deletePost = (id) => axios.delete(`${url}/${id}`);

export const likePost = (id) => axios.patch(`${url}/${id}/likePost`);

Create reducers folder and inside it create index.js & posts.js:

index.js

import { combineReducers } from "redux";

import posts from "./posts";

export default combineReducers({ posts });

posts.js

import {
  CREATE,
  FETCH_ALL,
  DELETE,
  LIKE,
  UPDATE,
} from "../constants/actionTypes";

export default (posts = [], action) => {
  switch (action.type) {
    case FETCH_ALL:
      return action.payload;
    case CREATE:
      return [...posts, action.payload];

    case UPDATE:
    case LIKE:
      return posts.map((post) =>
        post._id === action.payload._id ? action.payload : post
      );

    case DELETE:
      return posts.filter((post) => post._id !== action.payload);

    default:
      return posts;
  }
};

Create constants folder and inside it actionTypes.js:

export const CREATE = "CREATE";
export const UPDATE = "UPDATE";
export const DELETE = "DELETE";
export const FETCH_ALL = "FETCH_ALL";
export const LIKE = "LIKE";

Now go to src/index.js and edit the contents to make the file resemble the following:

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { Provider } from "react-redux";
import { createStore, applyMiddleware, compose } from "redux";
import thunk from "redux-thunk";

import reducers from "./reducers";

import "./index.css";

const store = createStore(reducers, compose(applyMiddleware(thunk)));

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);

Now visit here and copy the components and images folders to your src folder of your project.

Also copy app.js, index.css, style.js to your project directory as well.

Finally run:

npm run dev

The App should look like this:

I hope you liked how this memories app was made. Please check out the following links:

DEV Community: Somsubhra Das

DigitalOcean Kubernetes Challenge - MongoDB On Kubernetes

What is DigitalOcean Kubernetes (DOKS)?

Why should you use Kubernetes?

Getting Started

How to create a K8s cluster?

Connecting to K8s Cluster

How to deploy MongoDB on DOKS?

TL;DR

Creating MongoDB Secrets

Creating MongoDB Persistent Volume

Deploying MongoDB image

Running MongoDB from Shell

Connecting to MongoDB from external Apps

Prisma Data Platform - Prisma ORM on Cloud

Features of Prisma Data Platform

Getting Started

Creating Project

Creating Database

Creating Schema

Prisma on Cloud Functionalities

Local Setup

Data Browser

Query Console

Collaborate with users

What's next for Prisma Data Platform?

Contribute to Prisma

Similar Articles:

Supabase - An OpenSource Firebase Alternative

Features

How it works?

Project

Project Dashboard

Table Creator/Editor

Authentication

Storage

SQL Editor

Database

Alpha Features

Reports

API

Client Libraries

Self Hosting

Is Supabase going to replace Firebase?

Be a part of Supabase

Journey from Mongoose to Prisma ORM for MongoDB!

Connection

Defining Models

Queries & Database Operations

Fetching Single record

Prisma

Mongoose

Fetching selected values for single record

Prisma

Mongoose

Fetching relations

Prisma

Mongoose

Filtering with values

Prisma

Mongoose

Relation Filtering

Prisma

Mongoose

Pagination

Prisma

Mongoose

Creating Records

Prisma

Mongoose

Updating Records

Prisma

Mongoose

Deleting Single Record

Prisma

Mongoose

Deleting Multiple Records

Prisma

Mongoose

Advantages of Prisma over Mongoose