Forem: Nyoman Sunima

Turn Nest.Js into Serverless with Nitric in a few seconds

Nyoman Sunima — Sat, 26 Aug 2023 16:15:00 +0000

Hi, my name is Nyoman Sunima. Product Designer and full stack developer. Today I want to share with you a new way to become serverless using your Nest.js application in just a few steps and seconds.

This post will help you create and deploy your serverless backend API easily and without too much effort. Before I jump in, let me tell you about my problems and challenges.

Challenges

When I build a normal Express backend API, I need to know too much about cloud infrastructure. First, think about where I should deploy my project. spec of servers, type of server (vpc, instances, containers, or cloud-native).

Sometimes, when I finish local development, the project never goes live. It's because I need more setup time when deploying the application than the actual time it takes me to code my projects.

That's why so many people love serverless. Alright, I am not saying that serverless is suitable for all cases. But think again when you are building a microservice or simple project. I think you should consider using serverless.

When you are building portfolio projects or dummy projects, you will realize that the actual server never becomes free. For example, AWS EC2 will only allow you to run for about 28 days in a month. Then you need to configure so many things before you can deploy it automatically.

NestJs and Serverless Challenges

Alright, now you know that serverless is powerful and may match your development case. Now the problem is that the setup of the Nest.js application to become serverless requires much effort.

If you are using Express, you might not think too much. Just install some dependencies, and you can make it a serverless project. But if you love to use Nest.Js and want to make it serverless, you need to do more than just install dependencies.

In my case, I have developed a project using Nest.js, which I should then deploy into a serverless project. I need to install serverless, the AWS Lambda adapter, and set the build using Webpack. Then, after that, you will realize that you will get an error when you deploy.

You need to add another plugin and configure it to make it work properly on AWS Lambda. After you realize that it's going to take half a day to set up your Nest.js project into serverless,

I faced this issue and think that developing serverless applications requires many adaptations before I can code. Now I've found the solution. it's called Nitric.

Let me explain more about it.

What's Nitric and why you should use it?

Nitric is an application framework that allows you to build serverless applications without too much effort. They want to provide you with a framework that allows you to work closely with the serverless platform and turn it into code.

Nitric works like Pulumi. They are using Pulumi behind them. But the difference is that they provide you with a general approach to building your application without the need to address specific providers like Amazon or Google.

So when you need to deploy your application to a different provider or use a custom provider, it's possible. So don't worry about compatibility and vendor lock-in.

This feature allows you to deploy your application to different providers at the same time. For example, for stagging deployment to GCP, and production deployment to AWS.

Benefits

Here are some of the benefits and pros when I using Nitric in the development process.

Focus on writing code without worry and think about infrastructure, providers, and scallability. Nitric handles them all.
Easy to set up and easy to run. Beginning from the first step until the application runs, you just need to run a few commands on the terminal
Support multi-providers and even custom providers.
Support auto-deployment using Github Actions
Local Development Environment allows you to run the application on a local machine without needing to connect to your serverless provider
Moving providers without changing a single line of code
Provide almost anything you need to build a backend application, including a database, storage, event-driven messages, and an API.

Nitric also supports HTTP. NOTE: For now, HTTP only supports node.js frameworks like Express, Fastify, Nestjs, and so on.

I will cover them all in detail later, so stay tuned. Now let's move on to how to work with Nest.Js. For more information on nitric please refer to Nitric Official Site

How do I make Nest.JS serverless?

Nitric provides a new feature called HTTP. It allows you to turn your HTTP server into a serverless one. So without further ado, let's get into it

Prerequisites

Before you can use nitric, you need to install some dependencies and stacks on your local machine, including

Nitic Server - Provide a local server for application development.
Pulumi CLI - Nitric using Pulumi to deploy your stacks.
Node.js & npm - Running Nest.js application
Docker Create docker image for project
Git

Local Development: Nest.js using nitric

Start by creating a new nest project by running
```
npx @nestjs/cli new nitric-nestjs
```
It will create a new NestJS project called Nitric-NestJS. Follow the instructions, then open it in your code editor.
Install the Nitric SDK
```
npm i @nitric/sdk
```

Open the main file, and then you will find the bootstrap function. All you need to do is just remove the port, and then make the application run on the specified port from the argument passed to the bootstrap function.


/**
 * Initialize the application and starts listening on the specified port.
 *
 * @param {number} port - The port number to listen on.
 * @return {Promise<void>} - A promise that resolves when the application is successfully started.
 */
async function bootstrap(port: number) {
  const app = await NestFactory.create(AppModule)
  app.useGlobalPipes(
    new ValidationPipe({
      transform: true,
      whitelist: true,
      forbidNonWhitelisted: false,
      transformOptions: {
        enableImplicitConversion: true,
      },
    }),
  )
  app.use(compression())
  app.use(helmet())
  app.enableCors({
    origin: '*',
  })

  // listen on a provided port from nitric
  await app.listen(port)
}

Now all you need to do is import the http\ from '@nitric/sdk', then pass the bootstrap function.

import { http } from '@nitric/sdk'

// the code before

// this will transform your application
// into serverless with adapter
http(bootstrap)

Alright, now everything is fine. All you need to do is start the nitric server by running
```
nitric start
```
then run the Nest.Js application on development mode using
```
npm run dev
```
The command above will start the Nitric server on your local machine and also start the development for Nest.Js. Now you can enjoy coding.
!optional if you are not comfortable with the command and want to execute it on a single line of code. All you need to do is install it concurrently by running
```
npm i -D concurrently
```
Then all you need to do is change the scripts on your "package.json" into
```
"scripts": {
    // your other secrets
   "dev": "concurrently \"nitric start\" \"nest start --watch\"",
}
```
Now it's done.
Start the application by running npm run dev\. Now you can see the results

Deploy Application to the cloud provider

To deploy your serverless application to a serverless provider like Google or Amazon Web Services, you need a few commands to set up and deploy.

Create a new stack for deployment by running this command
```
nitric stack new
```
This command will ask you about the stack name. let's just call it "staging". Then it will move to choose the provider, for now, let's use GCP. You may ask for some information. Just fill it out with your preferences.
Now, after finishing, it will create a new file called "nitric-staging.yaml". And the inside looks like this.
```
name: staging
provider: nitric/gcp@0.32.0
gcp-project-id: test
region: us-east1
```
To deploy, please ensure you have already installed the prerequisites and logged into your Pulumi account. Then run the following command:
```
nitric up -s staging -v0
```
This command will create a Docker image and configure your GCP account to be ready. After the deployment finishes, you will see the URL. If not, you can login to pulumi account and then find the resource URL

Conclusion

What do you think? Have you tried it? It looks easy, right? In my opinion, I would prefer to use Nitric to make my application serverless. Rather than other frameworks like serverless, which need to be configured too much to just deploy a single function,

If you have any questions or anything related to this article, Please let me know in the comment section. Don't forget to like it if it's useful.

Looking for collaboration or projects? Please let me know. I would be glad to hear about your problem.

How to make your GitHub project better

Nyoman Sunima — Mon, 05 Jun 2023 07:15:53 +0000

Hi, welcome. Today, I just want to share my experience using GitHub and how I set it up for the project. This article may be interesting for beginners who need to set up their projects to become more professional and enhance their workflows.

Ok, without further ado, let's get into it.

Add better README

The first one I consider to be set up is to create a fantastic and useful README. The README should contain all information about the project, including background, motivation, process, features, and acknowledgment.

Also, some READMEs can contain the guide, instructions, roadmaps, license, and credits. Of course, if you have just a simple project, what you should include is a description and some acknowledgment, including the stack and features.

I have written an article before about Creeate a better README. If you want more detail, please read the article.

Create License

Now let's move into the license section. If your project is an open-source project, you should have a license to protect your work. Most of the general public can choose MIT or GPL. If you are still confused about what license should pick for your project please refer to https://choosealicense.com/

Creating a license on GitHub has now become easy. I will give you an example of how to create an MIT license in just a few seconds.

First, move into your GitHub project. then start creating a new file named "LICENSE. Now you can see a visible button "Choose a license template" in the header of the file name. You can click and start picking out some templates.
Now you can pick the license using MIT. Then fill in some required information, including the year and full name. You can also see what the differences are between the licenses, like permissions, limitations, and conditions.
Now you have a better license for your project, which can be pretty quick.

Add contributing

Now, let's set up a document to let other contributors know what they should do to contribute to your project. This document is very important to other people if they want to contribute and make changes to your code. I made this document straightforward. Here are some details that can be included in the document:

Getting started
Requirements
Pull Request
Issues and feature requests
Security
Testing
Code of conduct

Here are some references that can help you

Changelog

A changelog is used to log all activity when you release new tags, fix bugs, or add features to your release. You can document your app with the tags, then create a record to let others know what changes you make in each release.

Inside the changelog can contain some information

Tags (Versions)
Update
Bug Fixed
Feature added

Code of conduct

Start coding as soon as possible. A code of conduct helps you and the community specify standards, behaviors, and some rules that can protect all members of the community from unexpected behavior that can drain your work.

This document is pretty important, you may need it as soon as the project is created. If you need some questions and need to know what exactly this feature is, you can this post about the Code of Conduct

To create a code of conduct on GitHub, you can simply create it using a template.

Go add a new file called "CODE_OF_CONDUCT.md"
Start by clicking "Choose a Code of Conduct Template"
Modify and save

Branch protection rule

If you work with multiple branches and collaborate with many contributors, I prefer to use a branch protection rule. This can help you protect your branch by using a rule that can help you reduce some actions and commits that have unexpected results.

In my experience, I will create a default branch as the main and protect it. So we can't force a push to the branch, all we can do is merge that. You can also add some features like

Require checks before the merge
Require pull request before the merge
Lock branch
and event signed commits

To start protecting your branch, go ahead into "Settings", then move into "Branches.". Now you can create one. Here are example

Socials preview

Social previewing can't be important, but this enables you to make your project more confident when sharing it with the community on social media sites like Twitter, Facebook, and others.

Social media doesn't impact your workflow as much, however, in my opinion, adding social media can give you more value and make you look more serious. If you want to add your preview, please head to "General" and then move into the "Social Preview" section.

Issues template

Do you realize that we get bored doing the same things repeatedly? That's why I use a template to create an issue. Templates not only help you save the most time but also give you some boilerplate to create an issue. So the user who wants to report a bug or feature request can have some form to fill out.

I personally at least need two types of issue templates: bug reports and feature requests. You can create as much as you want, for example, a security report or other things.

To create your template, you can easily set it up using GitHub. Just go to Settings > General. In the feature section, you can see a template section. You can create your own.

Now, if you want to create issues, you will be redirected to the template page and guided to use the form.

If you choose bug report, you can see an awesome template you can use to make your life easier.

Pull request template

Pull requests are another one. This feature is the same as the Issues template but works for pull requests. The function is mainly the same, however, pull requests are created under the Markdown file.

To create your pull request template. You can create a new file called pull_request_template.md inside the github folder. For more reference, you can see the documentation in Create PR Template Guide

Sponsorship

If your project looks interesting and has an impact on other people, you can ask for donations from other people to help you maintain the project by using sponsors. You can gain some sponsors by using some platforms including

Ko-fi
Github Sponsors
Open Collective
Patreon
and others

This sponsor works for your personal profile or Github organization. If you prefer to use Github Sponsor, you need to setup your account under https://github.com/sponsors/

How to use this money depends on your needs. You can use the money to buy hosting, domains, paid services, integrations, and even some cash for your hard work.

To setup, you can go into Settings -> General and under Sponsorship

Discussion

You have so many participants, users, and contributors. I will set up the discussion. This will enable communication between the user and the participant. How about issues? Well, you can also use the same feature in an issue to discuss and communicate.

However, I use issues to communicate technical information and fix problems, on the other side, discussions are used to create announcements and polls and collect and discuss ideas.

You can setup and enable discussion under "General" settings.

Now, you can see the discussion tab in the top menu of your project and start creating your discussion with your user.

Projects as project management

Now, move on to how to manage my tasks on GitHub. I love this feature a lot. So when I start creating a blank project with my client, I will prefer to use GitHub projects. Not just about including projects in one platform, projects can help me move faster with my development workflows.

All teams can communicate with each other, including designers, developers, and testers, in one place. I never say that you don't need another project manager. But, in my opinion, projects are far enough away to use with your team.

All features, including tasks (as issues), drafts, goals as milestones, roadmaps, and so on. However, one thing missing from projects is the reminder of tasks. You can also manage your multiple repos in a single project. So if you separate your project into different repositories, you are still able to communicate with each other.

Automatic delete head branch

This feature kind of helps you a lot with multi-branches. How do you manage your branch on GitHub? using the feature approach or the environment approach (dev, staging, and production)? I love the feature approach. If you are working with a team and each team has its job, the feature approach can help you.

You will create a branch for each feature you develop. eg, "signin". Now that the feature is ready, you can start to merge the code. Before we jump, you better do a pull request and then assign a tester or reviewer to review your code. So we can create the best quality code.

If the feature is acceptable, you can merge it into the main branch, which will automatically delete your current branch.

Go ahead and enable it in the general settings.

Code security and analysis

This feature helps you keep your repository code updated and secure. You will grant permission for GitHub to do read-only analysis to check your code. There are several points

Vulnerability reporting
Dependency graph
Dependabot
Code scanning
Secret scanning

I enabled all of these features. The ones I love are code scanning and Dependabot. Code scanning will scan your code automatically if you push it. Dependabot will check every dependency in your repository and create a new pull request to merge if an update is found.

Labels & Milestones

Keep the labels that are needed for your project. then start creating a milestone as a target for your next movement. Labels are very useful when you're working with many issues in your repositories. You can filter and manipulate them using labels.

Keep important labels like bux, fix, enhancement, good first issue, dependencies, and documentation, and add your preferences.

Workflows

Now, let's move into continued development. All we can do is set up actions for our repository. If you don't understanding about action you can read more in documentation

At least you should add this workflows in your actions

Build
Linter
Analysis
Testing
Code scanning

You can also use actions to automatically release your app using tags, deploy it, or publish it to a server or Play Store.

You can explore more features on GitHub, I just want to share my experience while using it. If you have any questions or suggestions, you can send me a message on twitter. If there is a misspelled word, please let me know.

Thanks. Have a nice day, developer.

How to create better README

Nyoman Sunima — Sat, 03 Jun 2023 06:35:10 +0000

Hi, I am Nyoman Sunima, a product designer and full-stack developer in Bali, Indonesia. In this article, we will discuss and start sharing my experiences while creating a README file for the project on GitHub, GitLab, or Bitbucket. Then we will discuss and share some tips that may help you get inspiration while creating a better README file. Ok, with that said, let's get started.

Why is README so essential?

If you're exploring a public repository, no matter if it's on GitHub or GitLab, you will find so many out there that always have a README file. Why? As the name suggests, this file will be read by another visitor while visiting and contributing to your project.

So when they navigate to your project, the first thing they will see is the README file. Creating a good README can help your contributors, visitors, and users understand exactly what your project is.

Understanding your target audience

In my experience, when creating a readme, the first thing I should consider is my target audience. No matter how good your project is, if you can't communicate with your users, it will be nothing.

There are two types of user repositories in general that could use your project.

Technical People, Work as an engineer, developer, scientist, or other technical skill.
Non-technical people work as marketers, content writers, and others.

If your project is about dependencies, packages, SDKs, APIs, etc., you will need to create a README for technical people. However, if your project is just about sharing files, content, and other things, you may not need technical instructions. So now let's do a deep dive and discuss the main topic in the next part.

Adding a banner or logo

When I publish my repository to the public, the first thing I need to do is create some icons or a logo for the project. There is no need to be perfect; at least show the project's identity. This can be a logo or banner that is placed at the top of your readme file.

When I start my readme, I realize that having a banner or logo will make my repository better and more attractive. Below, you can see the difference between using a banner or logo and not.

Now if you take a look at these two READMEs, which one is better? In my opinion, using banners makes them look more attractive and awesome.

Add a title

Next is adding the project title. Ensure you give a clear title so the user can easily capture the repo by name. To make something easy, I use the project name or the purpose. For example

Drillu
NestJs API Helper

To name your project, this depends on your preference or need. So don't think too much about this little name.

Add short description

Before beginning to fully let the user know about the short bio for your project, For example, you have a project that contains a library for 'automate post'. You can create a short description from the context. e.g., "powerful and simple automated cross-post in Hashnode, Medium, and dev.to.".

So the user knows exactly what the project is without needing to read all of the documentation and instructions.

Add badges

Another cool thing I added to my project are status badges. This is not necessarily important, but it can give your audience a little expression about the project status. You can show your code size, build status, test status, and integrations.

The most important thing is that this feature is updated automatically through your processes, issues, requests, and events. If you're quite interested in adding this feature to your README, please check out Shield.io to create your own badges.

Here is how your project will look when using badges, Look cool, right?

Add important links

Another tip for you is to add some links that are quite important to the user. This can include the demo, issues, status, website, community, roadmap, and feature requests.

This is kind of helpful for your users to navigate faster. This feature is optional; however, I prefer to add it if there are important links.

If your project documentation is very long or sometimes has different sections and nested contents, I prefer to use a table of contents; this can help your reader move faster by just clicking on your navigation menu.

About projects

Before starting on another level, I first added a simple description, followed by a strong definition of what the projects are. This is the longer version of the short description. You can add several pieces of information inside the about section, including:

Backgrounds
Motivation to create the project
What is the project aimed to
The purpose of projects

This part is very important, in my opinion. We need to guide the user to understand what the project is before they can use it or contribute to it. Here is an example

How to get started and run

If your project contains a project that can run on a local machine, you better add instructions about how to get started with this project. This can include points like:

Requirements - Before started what, what stack or dependencies should be installed
Instructions - Step by step to running the application locally
Note - Some important information when starting the app on the local machine

This section is very important; sometimes a beginner developer is not familiar with your application. Of course, they don't know how you make the project. That's why we need to guide them with special instructions to help them run the project.

If you have other links about how to get started, all you need to add are the links. So the user can view the better instruction

Acknowledge

Sometimes your project's readme needs to add detailed information about your project and allow the user to peek at what exactly you're doing. This section can be include some section parts like

Feature - Tell what feature, problem solving in the project
Reference - If your project is get inspired by another project explain the chronology, or give a link to it
Tech stacks - Give the user top level information about what technology you're using the build the awesome projects
Scrennshot: Add some visual references to your project. This can be your app design or overview

Supports

If your project becomes bigger or more popular, start by adding a support section. There are a wide range of ways people can help your project. There are several you can add to support including

Contributors: List or add links to people who are building the project with you, helping you fix issues, or adding features.
Sponsors: Some people or companies that spend money to invest in your project You can add the links, images or mention it

Contributing guides

Guide some people who want to contribute to your project by adding this section. So people can understand your behavior and some rules when working. You can also mention some documents that cover this information.

Inside your contribution, you may also find some guides, like a code of conduct or changelog.

Roadmaps

If your project is being developed or is in progress, start by adding the roadmap or mentioning some document to let other people know what you or your team will do next.

Credits

If you create the project as a team, start mentioning your team in their account. Social media or email. You should care about your team's hard work; by mentioning them, you will help them become popular and gain a great reputation.

License

Tell the people what they can and can't do with your project. This can be the last part of the README. There are some licenses that you can choose for your open-source project. Of course, it depends on your preferences.

If you wonder how to pick and use a license, this website will help you pick the right license. Navigate to https://choosealicense.com/

Now, from the content above, you can add a better readme. I have some references or examples of the great readme that might help you out. You can see here

If you have any ideas or think something is missing in the post above, please comment below and let me know your amazing opinion.

Create NestJS API using Typescript, MongoDB, Docker, Docker Compose

Nyoman Sunima — Sun, 14 May 2023 07:33:02 +0000

Ok, let's create a simple CRUD backend API for your app using the:

NestJS
MongoDB
Docker
Docker Compose
Mongoose
Typescript

What you're learn

In this tutorial you will learn how to create a basic API using Nestjs as the core backend, MongoDB as your database, Mongoose as the database client to connect with NestJS, Docker & Docker Compose as your application runner in the container.

We will make something basic just running the crud operation for user data including the name, email, and bio. You can customize and expand this tutorial based on your preference. At the end of the tutorial, I will share the project repository, so you can easily clone and try it on your machine computer.

Architecture

So, before creating the application let's see how the application work, and how the application can be structured.

Create application

First, we need to create our base application using NestJS. Start to create boilerplate code by running

npx @nestjs/cli new nestjs-backend-api

This command will trigger the NestJS cli to create a Nest application starter. Nest also already install some dependencies for the application. Wait a second after the installation is finished.

Install dependencies

Let's install some dependencies to support the application. I will cover and explain what, and why you should install this dependency in your application.

Now run this command in your application terminal.

npm i -S @nestjs/config @nestjs/mongoose @nestjs/swagger @nestjs/throttler class-transformer class-validator compression helmet mongoose

By running the command above you will be install several dependencies including:

@nestjs/config - Allow to resolve the configuration including using the .env file
@nestjs/mongoose - The mongoose module in nestjs
@nestjs/swagger - Allow NestJS to use OpenAPI Specification, and use the mapped type including partial, omit, etc.
@nestjs/throttler - Rate limiter module for application
class-transformer, class-validator - Used to manage the application object transform and validation.
compression - Allow to compress the body response through Gzip
helmet - App protection to avoid the brute force XSS
mongoose - Using to connect MongoDB to the application

Update the project script

Update the script to become more clear. We need to change the preview and start using a new command.

"scripts": {
    "build": "nest build",
    "format": "prettier --write \"src/**/*.ts\" \"test/**/*.ts\"",
    "preview": "nest start",
    "dev": "nest start --watch",
    "debug": "nest start --debug --watch",
    "start": "node dist/main",
    "lint": "eslint \"{src,apps,libs,test}/**/*.ts\" --fix",
    "test": "jest",
    "test:watch": "jest --watch",
    "test:cov": "jest --coverage",
    "test:debug": "node --inspect-brk -r tsconfig-paths/register -r ts-node/register node_modules/.bin/jest --runInBand",
    "test:e2e": "jest --config ./test/jest-e2e.json"
},

After changing to this object, now you can easily run applications using

npm run dev To run on a development server
npm run preview Running the prebuild application to preview
npm run start To run the application on production mode

Bootstrap the application

Now let's jump into the src/main.ts file. Then change the code using this code.

import { NestFactory } from '@nestjs/core'
import { AppModule } from './app.module'
import { ValidationPipe, VersioningType } from '@nestjs/common'
import helmet from 'helmet'
import * as compression from 'compression'

const PORT = parseInt(process.env.PORT, 10) || 4000

async function bootstrap() {
  const app = await NestFactory.create(AppModule)

  // register all plugins and extension
  app.enableCors({ origin: '*' })
  app.useGlobalPipes(new ValidationPipe({}))
  app.enableVersioning({ type: VersioningType.URI })
  app.use(helmet())
  app.use(compression())

  await app.listen(PORT, () => {
    console.log(`🚀 Application running at port ${PORT}`)
  })
}

bootstrap()

lets me explain. First, we need to import all dependencies, and settings into. Then start to use some middleware including the compression, and helmet. Then start o enable the cross-origin sharing resources. You also can change the Cors settings.

Enable to global validation pipe, by using global validation, we automatically use the class-transform and class-validator class. When something error happens in the object, the error will be shown as a response.

Enable the versioning by using URI Type. You can easily manage the version in the controller. This way helps you add some changes in your API without effect the below version.

Wrap the app module

To ensure all applications running you should import all feature modules and another module into the application module. Because if you see in the main.ts file the best application is to create the app from AppModule.

Change the app module using this code

import { Module } from '@nestjs/common'
import { AppController } from './app.controller'
import { ConfigModule } from '@nestjs/config'
import { ThrottlerModule } from '@nestjs/throttler'
import { UserModule } from './user/user.module'
import { MongooseModule } from '@nestjs/mongoose'

@Module({
  imports: [
    ConfigModule.forRoot({ isGlobal: true }),
    ThrottlerModule.forRoot({ limit: 10, ttl: 60 }),
    MongooseModule.forRoot(process.env.DATABASE_URI, {
      dbName: process.env.DATABASE_NAME,
      auth: {
        username: process.env.DATABASE_USER,
        password: process.env.DATABASE_PASS,
      },
    }),

    // feature module
    UserModule,
  ],
  controllers: [AppController],
})
export class AppModule {}

First, we define the class with a module decorator and define the properties inside. Inside the import is used to import the application module. From, your local module or from dependencies.

So first let's import the Config module, remember the isGlobal is set to true. This will allow you to use your configuration, environment, and settings inside all of your application scopes.

Add the Throttler module and give the limit and ttl. This will protect our backend API from brute-force attacks. The user will only allow access to the same API resource up to 10 times, then wait a minute to try. If you wonder about this, you can learn more about brute force attack security.

Install the Mongoose module to connect with MongoDB. Please specify the URI, and the authentication using username, and password. I will cover this using the .env file later. So stay tuned.

Install the feature module, we will cover this later.

Create User feature

Moving into the user feature, we will need set up and create a new module called. User. inside the user feature, we will handle the user information including username, password, bio, email, and full name.

In this module, we will handle the CRUD a.k.a (Create, Read, Update, Delete) operation for the user. So with that said let's jump into it.

Inside the src folder create a new folder called user. All of your module files including schema, service, provider, and model inside this folder.

so make a new file called user.schema.ts . inside the model folder Then paste this code inside

import { Prop, Schema, SchemaFactory } from '@nestjs/mongoose'
import { HydratedDocument } from 'mongoose'

export type UserDocument = HydratedDocument<User>

@Schema({ collection: 'users', timestamps: true })
export class User {
  @Prop()
  fullName: string

  @Prop()
  email: string

  @Prop()
  bio: string

  @Prop()
  password: string
}

export const UserSchema = SchemaFactory.createForClass(User)

this file that is used to manage the user collection on MongoDB. using timestamp allows us to automatically add the createdAt and updatedAt properties in Mongodb. After the model was defined. We need to create the user's schema using schema factory from Mongoose.

Create a new file called user.input.ts inside the model folder. Then put this code inside.

import { OmitType } from '@nestjs/swagger'
import { IsEmail, IsString } from 'class-validator'

export class CreateUserInput {
  @IsString()
  fullName: string

  @IsEmail()
  email: string

  @IsEmail()
  bio: string

  @IsString()
  password: string
}

export class UpdateUserInput extends OmitType(CreateUserInput, [
  'password'
] as const) {}

This model is specific to using input from the controller. So we set all input in one place. Don't forget to use the class validator to validate the input before the user is processed.

The UpdateUserInput extends the omit type from CreateUserInput class. This comes from @nestjs/swagger. As I say you can use the same class and omit the type to remove the specific property. So you don't need to create it twice. You can explore more about Swagger later.

Create UserPayload

We need to create a type to specify what return to the client. That's why we called it payload. Create a new file called user.payload.ts inside the model folder, then put this code inside.

import { PartialType } from '@nestjs/swagger'
import { User } from './user.schema'

export class UserPayload extends PartialType(User) {
  createdA?: string
  updateAt?: string
}

As I say we use the @nestjs/swagger package here. The PartialType allows us to use the same object to extend it.

Create User Service

Create a new file called user.service.ts then put this code inside the file. This will create a new logic to handle the user.

import { Injectable, NotFoundException } from '@nestjs/common'
import { InjectModel } from '@nestjs/mongoose'
import { User } from './model/user.schema'
import { Model } from 'mongoose'
import { CreateUserInput, UpdateUserInput } from './model/user.input'
import { UserPayload } from './model/user.payload'

@Injectable()
export class UserService {
  constructor(@InjectModel(User.name) private userModel: Model<User>) {}

  async createUser(body: CreateUserInput): Promise<UserPayload> {
    const createdUser = new this.userModel(body)
    const user = await createdUser.save()
    return user
  }

  async findUser(id: string): Promise<UserPayload> {
    const user = await this.userModel.findOne({ _id: id }).exec()

    if (!user) {
      throw new NotFoundException(`User with email id:${id} not found `)
    }
    return user
  }

  async listUser(): Promise<UserPayload[]> {
    const users = await this.userModel.find()
    return users
  }

  async updateUser(id: string, body: UpdateUserInput): Promise<UserPayload> {
    await this.userModel.updateOne({ _id: id }, body)
    const updatedUser = this.userModel.findById(id)
    return updatedUser
  }

  async deleteUser(id: string): Promise<void> {
    await this.userModel.deleteOne({ _id: id })
  }

This service handles the CRUD Operation for users, including creating a new user, listing all users, reading details, deleting, and updating. Inside the service constructor, we inject the UserModel using UserSchema.

Create user controller

All the API endpoints, paths, versions, and methods are placed here. Now create a new file called user.controller.ts inside the top-level user folder. Then put this code inside.

import { Body, Controller, Delete, Get, Param, Post, Put } from '@nestjs/common'
import { CreateUserInput } from './model/user.input'
import { UserService } from './user.service'

@Controller({
  path: 'users',
  version: '1',
})
export class UserController {
  constructor(private readonly userService: UserService) {}

  @Post()
  createUser(@Body() body: CreateUserInput) {
    return this.userService.createUser(body)
  }

  @Get('/list')
  listUser() {
    return this.userService.listUser()
  }

  @Get('/:id')
  findUser(@Param('id') id: string) {
    return this.userService.findUser(id)
  }

  @Put('/:id')
  updateUser(@Param('id') id: string, @Body() body: CreateUserInput) {
    return this.userService.updateUser(id, body)
  }

  @Delete('/:id')
  deleteUser(@Param('id') id: string) {
    return this.userService.deleteUser(id)
  }
}

Create user module

Now import all code and wrap it inside the user module. Create a new file called user.module.ts Inside the user. Then put this code inside

import { Module } from '@nestjs/common'
import { UserService } from './user.service'
import { UserController } from './user.controller'
import { MongooseModule } from '@nestjs/mongoose'
import { User, UserSchema } from './model/user.schema'

@Module({
  imports: [
    MongooseModule.forFeature([{ name: User.name, schema: UserSchema }]),
  ],
  providers: [UserService],
  controllers: [UserController],
})
export class UserModule {}

Don't forget to register the MongoDB schema Using forFeature. then import the controller and service.

Creating environment

Now let's create a new file called .env Inside the root folder. Then put this code inside.

# APPS CONFIG
PORT = # YOUR_DATABASE_PORT

# DATABASE CONFIGS
DATABASE_NAME = # YOUR_DATABASE_NAME
DATABASE_USER = # YOUR_DATABASE_USER
DATABASE_PASS = # YOUR DATABASE_PASS
DATABASE_URI = # YOUR_DATABASE_URI, example: mongodb://localhost:2701

Change this environment using your own value.

Dockerize the application

We need to set up our database using docker. So we need to ensure the application running correctly.

Create Dockerfile

Let's create a new file called Dockerfile in the root folder, then put this code inside.

# Application Docker file Configuration
# Visit https://docs.docker.com/engine/reference/builder/
# Using multi stage build

# Prepare the image when build
# also use to minimize the docker image
FROM node:14-alpine as builder

WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build


# Build the image as production
# So we can minimize the size
FROM node:14-alpine

WORKDIR /app
COPY package*.json ./
ENV PORT=4000
ENV NODE_ENV=Production
RUN npm install
COPY --from=builder /app/dist ./dist
EXPOSE ${PORT}

CMD ["npm", "run", "start"]

This file will be used to configure our application to become a docker image. When running the docker-compose. Service will create a new image from our backend app. and then run it as a container.

The concept is just to copy the package.json and package-lock.json file into the working directory, then install the deps. The command will build the application by running npm run build, then copy all dist folders into a last image builder. At least we also add an env file for PORT. So you can change the port dynamically without breaking the app.

Create Docker Compose

Docker Compose allow you to manage all service and container running inside your computer more easily. Compose allow you to define the service, image, and network in the same place without worrying about remembering command in your terminal. So that's why I recommended using docker-compose rather than using manual commands to run the container.

Create a new file called .docker-compose.yaml inside your root folder, then put this code inside.

# Docker Compose Configuration
# visit https://docs.docker.com/compose/

version: '3.8'
services:
  # app service for your backend
  app:
    container_name: backend
    build:
      context: ./
      dockerfile: Dockerfile
    environment:
      DATABASE_NAME: # DATABASE_NAME
      DATABASE_USER: # DATABASE_USER
      DATABASE_PASS: # DATABASE_PASS
      DATABASE_URI: # DATABASE_URI, example: mongodb://database:27017
    ports:
      - '4000:4000'
    depends_on:
      - database

  # start the mongodb service as container
  database:
    image: mongo:6.0
    container_name: mongodb
    restart: always
    ports:
      - '27017:27017'
    environment:
      MONGO_INITDB_ROOT_USERNAME: # DATABASE_NAME
      MONGO_INITDB_ROOT_PASSWORD: # DATABASE_USER

This compose will create two services called app and database. Inside the app, you can see that without an image found. however, we found a context that reference to Dockerfile. This will allow the user to create a new image for the service.

Otherside the mongo, it's come from dockerhub image with a 6.0 version. You also can define any variables and environment for the image including username, and password.

NOTE: when connect database using docker network in application you will no longer access localhost, intead, you access using service name like database. Example if in local you can connect to database using mongodb://localhost:27017, however after using docker you should use the service name like mongodb://database:27017 . This only work you don't expose the new network for database.

Run backend api

To run this application you can run by using this command.

docker-compose up -d

This command will trigger docker compose to run 2 service at the sametime, also pulling the image and tun as docker container. To access you application, you can type http://localhost:4000/v1/users.

Last words

Before jumping please explore and try to code by yourlsef or understand the flow. All of this code are placed in my repository You can clone or fork this repo to understand how it's work.

Create PopUp Modal Using State Manager in React

Nyoman Sunima — Thu, 22 Dec 2022 08:34:37 +0000

Hey dude welcome, Today i want to continue a new article about the modal in react. This article is the next part of article before. if you're not know. Please read the article before about Create Popup Modal In React

In this article we will learn about make a powerful and complex modal type in react using any State Manager

Background & Use Case

Many of you may ask the same question about Why should use a State Manager to handle Modal?. Alright, To make any modal you can follow any approach like Using React Context or using Simple Method. However in Complex and Big Application we will handle many modal in single module. Also any modal will need in the global scope.

That's why we can use the state manager to make the modal accessible from everywhere in your application components.

Concept

To make a modal work with state manager it's kind a like easy stuff. We just need to make a simple modal, but to show and hide we can use the state manager.

In this case i will pick simple and powerful state manager as example, Of course it's zustand. you also can use ant state manager like Recoil, Jotail, Redux, etc. The concep is pretty the same and you just need to modify a little bit. If you just want to make this as you're first time to using state manager i will recomended using zustand.

Ok, before we jump in, to make this modal there some point as step by step.

Create Simple Modal
Create Hooks
Handle Show & Hide
Passing Data & Dynamic Content

1. Create Simple Modal

We need to prepare and make any simple modal for the example. Create a new file call StateModal.js and create a simple component with reference in modal

If you're not understand this part, please read my article before about make simple modal in react

2. Create Hooks

The way we cna handle the modal in global, or component is by using the hooks. So the main key here's is the hooks. In this example i will using zustand.

First, Install the zustand in your react application

  // install zustand using npm
  npm i -S zustand

  //install zustand using yarn
  yard add zustand

Create a file in hooks folder call modal.js and put the code to make a simple hooks for confirm modal

If you need more than confirm modal, we can create a new modal and add new property in modal hooks to show and hide like before.

And now, your hook are ready to use in any component to show the modal globaly.

3. Handle Show & Hide

To handle the show the modal, first we need to put the hooks that specify to the modal component and one side in other component to show the modal like Header, Button, etc.

To show the modal we need to put the hooks in parent where will trigger the modal to show. Example in App will show the modal form button

Now, we need to modify the modal and only show if the state from hook has changed. Inside the modal component we just need to wrap the modal in if statement

Now you're ready to show the modal. To hide the modal you can follow the close Manualy using hooks by calling modal.confirm.hide() or using any approach for closing modal like when user click outside, or by pressing Esc key

4. Passing Data & Dynamic Content

The way we can passing some data like title, desc, or any data into the modal from hooks is by passing some argument from the show method. But before that we need to change the hooks a little bit.

Ok, that the point to make the simple modal using State Manager. If you have any preference for State Manager you also can follow the same way to make this work.

If you have any trouble, or struggle please contact me. Please give any comment and like.

How to Create Popup Modal In React

Nyoman Sunima — Wed, 21 Dec 2022 05:48:49 +0000

After some explorations and make any projects. I found that create the modal kind a like an easy task when building web application with react, But most of the beginner will confused at the first time.

This article is purposed to beginner of developer that work with react project. If you're already know about this concept You can skip this content, or just give me any of approach in the comment below.

Opps, to see the result of this project, you can see the preview at https://modal-in-react.vercel.app/

In this example you will find the 3 way to make any modal or popup, alert in your react application.

Create Simple Modal
Create Modal Using State Manager
Create Modal Using React Context

The different approach may work for you and your project. This method can you pick based on your project scope and possibility.

But in this article i will share about simple and traditional modal. Please waiting, i will make the article in the next day.

Concept

Before we just let me explain about the concept behind the modal and how it's work. Today i will explain to you what should be inside the modal to make it become more attractive and reactive with this several points.

Define Modal layout
Styling Modal
Show & Hide Modal
Close Modal When Outside Clicked
Close Modal When Esc Pressed
Adding Confirm & Cancel Button

1. Define Modal Layout

Ok, when we create a modal we need to structure the modal base on the purpose and the design. But in general modal contain the header, body, and footer section. You can see the detail in the image below.

As you can see above the modal layout, in each of section will use for different function. Header mainly to show the title of modal, You can put the content in the body of your modal. Then the footer use to show the confirm, cancel, and any action button that user can pick and click.

To start let's create a new modal component call SimpleModal.js, then inside you need to create a react component.

We should pass some of props like show, onClose, onConfirm, and onCancel. I will explain all of the passed props later.

We also create some class style for the modal. .modal-backdrop will cover all of the modal and showing as fixed element, including showing the backdrop background. Then following with the .modal-content that include the element like modal-header, modal-body, and modal-footer.

2. Styling Modal

to styling the modal we can easily add the css to the components. Create a file call main.css then import it into the components

You, also can add some element and change the style based on your preference.

3. Show & Hide Modal

The most important thing in modal in react is the way to show and hide. In this post we're just cover to manage show and hide using simple state method.

Add a state to your parent component , where the modal will be placed. This state will be used to manage the show and hide of the modal.

create the hide and show method that will manipulate the state.

After all, we should pass the function and state into the component props to the children.

Now to make this work, you should create a button to trigger to show the modal. Now to make this work we should modify the content of modal and ensure to show the modal only if the show props is equals to true.

4. Close Modal When Outside Clicked

Some modal also will be closed if the user click outside of the modal element, or user click on other components. This is very interesting feature and you should implement in every popup on react.

To make this work is very simple by identify the element that clicked by the user. And if the element is not the modal, the modal will be closed.

OK, first we should do is to add the listener via the useEffect

Now we will handle the function of listener when the user clicked the mouse. We need to create the ref for modal first, then pass the ref of modal into the modal content. Then inside the method, we will ensure all deps, and props was define. The next step is to check if the element of clicked is contain the modal element. if now we will call the close function that we pass from the props.

Now, if the user click outside of the content element, or in backdrop. The modal will be automatically closed.

5. Close Modal When `Esc` Pressed

To implement this feature, basically same like implement the outside click. The difference is we need to listen to the keydown event and also close if the key pressed is Escape.

6. Adding Confirm & Cancel Button

The modal also need to contain at least confirm button. This will trigger the modal to close and do another action like saving data, delete and more.

We need to create couple button element inside the modal footer. then add the clicked function to handle the button trigger.

To use the confirm and cancel button and adding some callback when it's clicked we need to pass methods from the component props.

Good job bro. Now you're have a super rich modal with many feature.

What's Next ?

This article is just teach you about make an simple modal with simple design. However in many case you also need to make very complicated design of modal. Also may need to use state manager, hooks for advance use case.

I will share to you about advance modal using state manager, or context in react for more easy to manage in big scale project.

You can explore this tutorial by adding any modification including dynamic content by passed the props or other.

If you're have any suggestion or any argument about this article please comment below. If this article help you please like this article and follow me.

Opps, i almost forget. You can see the detail of this project in the Github Repository https://github.com/nyomansunima/modal-in-react. Also follow my twitter @nyomansunima

Hope you're understand and Start endeavor.

5 Tips to improve your next UI Design project

Nyoman Sunima — Tue, 14 Dec 2021 15:16:28 +0000

Hey everyone, welcome to the first of my article I'm happy to see you're here.

Today I wanna share with you about some tips for designers especially for UI to improve the result of your design.

What's, What that mean. Yeah boy, I wanna share some tips to make your design look better, friendly, and cool 😍😍. This takes from my mistake when I jump into the design but don't worry the whole process will also increase your skill step by step.

Ok, without waiting any longer, Let's jump right into it.

1. Use Less Typography

Ok, what's going on here. when I first time jumps into a design I feel so blank, with no idea, no topic in my mind. So I just let myself to design whatever I want to do and then pick many fonts maybe 3-5 fonts in my design project.

Avoid this mistake, Only use one typography in your design, and if the design is more complex you can add one font to your design.

This will help your design be more neat, clean, and less boilerplate, So think about this.

if you wanna the best free fonts for design, wait for the next post.

2. Limited Colors Palletes

There are so many designers who add a lot of color to design but don't forget colors bring identity. only focusing on primary color don't let the main color disappear from your design.

In my case, I just use the main color for accent and primary. 1 color for background, 2 colors for text, and some supported colors like success, danger, warning.

3. Give More Space

Letting your design too close is a mistake. If you wanna get a better design use more space in your design component, assets, and text.

Why?, I don't think so !. Ok, let me explain.
with enough space, your eye will enable to process the main object you wanna appear and will easily see the main focus in your design. This means, the design will be user-friendly and you got the purpose.

4. Keep concistency

Consistency ?, What?
Yes, I don't wanna debate with this one, but you should do this. no matter how good you create a design, picking color, take typography, and UX research. Please make sure your design is consistent.

Example: When you create a post card on the home screen and add around padding 16px and the color white, after that you create one again, again, and again the same card but without the same padding (you may pick 20px). This will make your design inconsistent, the impact will make your design like trash.

So the best way to do this is to create a component, style, and colors component. if you are interested in this topic, the next article will discuss more components, and style.

5. Less is More

Keep your object under control, don't let your design full with unnecesary object like too much text, icon, button, and other boilerplates.

In my experience, to make a clean, neat and friendly design need a less object into your design. I dont wanna to teaching you, but trust me use just needed info text, color, and object into your design will help it better.

Ok, just that the tips today i wanna share with you all dude. If you had and idea, or suggest for the next article please give your comment.

Sonibble will release twice article a week, so stay tune to get update. In the end i wanna say "Don't let your self become noob 😙😙"

Forem: Nyoman Sunima

Turn Nest.Js into Serverless with Nitric in a few seconds

Challenges

NestJs and Serverless Challenges

What's Nitric and why you should use it?

Benefits

How do I make Nest.JS serverless?

Prerequisites

Local Development: Nest.js using nitric

Deploy Application to the cloud provider

Conclusion

How to make your GitHub project better

Add better README

Create License

Add contributing

Changelog

Code of conduct

Branch protection rule

Socials preview

Issues template

Pull request template

Sponsorship

Discussion

Projects as project management

Automatic delete head branch

Code security and analysis

Labels & Milestones

Workflows

How to create better README

Why is README so essential?

Understanding your target audience

Adding a banner or logo

Add a title

Add short description

Add badges

Add important links

Table of contents

About projects

How to get started and run

Acknowledge

Supports

Contributing guides

Roadmaps

Credits

License

Create NestJS API using Typescript, MongoDB, Docker, Docker Compose

What you're learn

Architecture

Create application

Install dependencies

Update the project script

Bootstrap the application

Wrap the app module

Create User feature

Create UserPayload

Create User Service

Create user controller

Create user module

Creating environment

Dockerize the application

Create Dockerfile

Create Docker Compose

Run backend api

Last words

Create PopUp Modal Using State Manager in React

Background & Use Case

Concept

1. Create Simple Modal

2. Create Hooks

3. Handle Show & Hide

4. Passing Data & Dynamic Content

How to Create Popup Modal In React

Concept

1. Define Modal Layout

2. Styling Modal

3. Show & Hide Modal

4. Close Modal When Outside Clicked

5. Close Modal When Esc Pressed

6. Adding Confirm & Cancel Button

What's Next ?

5. Close Modal When `Esc` Pressed