DEV Community: Hoang Trinh

Nest.js Caching With Redis

Hoang Trinh — Tue, 06 Oct 2020 06:55:07 +0000

Originally posted at my blog!

What is Redis

Caching is a technique that you'll hear about a lot in the world of highly scalable and performance systems nowadays.

And when I mention caching, I hope that the first word that pops out of your head is Redis.

Beside caching, Redis is used for some other use cases:

Pub/Sub
Queues
Real-time analysis
...

But today, I will only tell you about Redis as a caching solution.

What is Nest.js

In short, Nest provides an out-of-the-box application architecture that allows developers and teams to create highly testable, scalable, loosely coupled, and easily maintainable applications.

If you've worked with frameworks such as Laravel, PhalconPHP or Java Spring, you will realize immediately that framework like Express.js is lack of a "frame", or architecture. Different Express.js projects built by different teams will have different structures.

But with Nest.js, you can expect that all teams will share the same architecture.

You can find more information about Nest.js at its official website: https://docs.nestjs.com

How to add Redis into your Nest.js project

If you searched Google for keywords like "nest.js redis", you might see some npm packages like this one or some people are even using this package alone.

But you can also use the official way from Nest.js:

1. Create your RedisCacheModule

1.1. `redisCache.module.ts`

import { Module, CacheModule } from '@nestjs/common';
import { ConfigModule, ConfigService } from '@nestjs/config';
import * as redisStore from 'cache-manager-redis-store';
import { RedisCacheService } from './redisCache.service';

@Module({
  imports: [
    CacheModule.registerAsync({
      imports: [ConfigModule],
      inject: [ConfigService],
      useFactory: async (configService: ConfigService) => ({
        store: redisStore,
        host: configService.get('REDIS_HOST'),
        port: configService.get('REDIS_PORT'),
        ttl: configService.get('CACHE_TTL'),
      }),
    }),
  ],
  providers: [RedisCacheService],
  exports: [RedisCacheService] // This is IMPORTANT,  you need to export RedisCacheService here so that other modules can use it
})
export class RedisCacheModule {}

1.2. `redisCache.service.ts`

import { Injectable, Inject, CACHE_MANAGER } from '@nestjs/common';
import { Cache } from 'cache-manager';

@Injectable()
export class RedisCacheService {
  constructor(
    @Inject(CACHE_MANAGER) private readonly cache: Cache,
  ) {}

  async get(key) {
    await this.cache.get(key);
  }

  async set(key, value) {
    await this.cache.set(key, value);
  }
}

2. Inject RedisCacheModule wherever you need it

Let's just assume we will use it in module DailyReportModule:

2.1. `dailyReport.module.ts`:

import { Module } from '@nestjs/common';
import { RedisCacheModule } from '../cache/redisCache.module';
import { DailyReportService } from './dailyReport.service';

@Module({
  imports: [RedisCacheModule],
  providers: [DailyReportService],
})
export class DailyReportModule {}

2.2. `dailyReport.service.ts`

We will use the redisCacheService here:

import { Injectable, Logger } from '@nestjs/common';
import { Cron } from '@nestjs/schedule';
import { RedisCacheService } from '../cache/redisCache.service';

@Injectable()
export class DailyReportService {
  private readonly logger = new Logger(DailyReportService.name);

  constructor(
    private readonly redisCacheService: RedisCacheService, // REMEMBER TO INJECT THIS
  ) {}

  @Cron('0 1 0 * * *') // Run cron job at 00:01:00 everyday
  async handleCacheDailyReport() {
    this.logger.debug('Handle cache to Redis');
  }
}

You can check my sample code here.

Happy coding!

I feel so outdated

Hoang Trinh — Sat, 02 May 2020 04:29:25 +0000

Originally posted at my blog

I remember the old days, when people usually ask "Are you using PHP or ASP.NET?", when the most sophisticated technology at the frontend is jQuery, when we can deploy a website using Filezilla, or when Docker is not a common term yet ...

It's just 6 or 7 years ago ...

Technology is moving so fast!

Recently, I've just joined a new company. After working in 3 others (both product and outsourcing companies), I thought I know a lot about software development. I know some backend languages: Node.js, Golang, Python, PHP. Also, my frontend skill with React.js is pretty good: redux, redux-saga, styled-components, webpack, ... I know all those stuff.

Turn out, it's not, I don't know a lot about software development!

There are at least 3 things that I'm lack of while busy chasing cool programming languages, frameworks, libraries:

1. Automation Testing

2. CI/CD

3. Scrum (or Agile process framework in general)

And now I can see how these 3 things are combined to make the software development a much faster and enjoyable process.

1. Automation Testing

In my new company, there are more test cases than I've ever seen in my whole life.

That's a lot. The testing stage when CI runs can take half an hour or even more.

But those test cases make us so confident when we need to add a new feature, to fix a small bug, or just to refactor an old piece of code.

The more important thing is: we don't need QA employees to do the manual testing any time a single developer pushes a new code. It helps us to spend human resources on something that really matters. But don't get me wrong, we still need QA in our software development process, it's just we don't need to waste their time on tedious and boring tasks.

Without automation testing, CI/CD is not possible, or at least, not reliable.

2. CI/CD

Since 2016, I heard a lot about Jenkins, TravisCI, CircleCI, ... But those technologies meant nothing to me at that moment. Because of the fact that all my previous companies didn't have testing, so they couldn't integrate CI/CD in the development process.

I remember in my previous companies, the development process worked like this:

One of the developer guys pushed an update (usually after 3 days or even a week because he needs to manually test in his local machine).
After that, the guy who manages the server needs to deploy that piece of code on the staging server.
QA then had to go to the staging server and do all the manual test cases.
After QA confirmed that the staging site is OK, the "server guy" will deploy that code to the production server.
And QA needs to do this all one more time on the production server to confirm everything is OK.
If there is any bug, the whole process restarts.

That costs us lots of time and human resources. Even a small bug fix took a week to be ready.

In my new company, although there is not an end-to-end test, the integration tests help reduce lots of work for QA.

After a developer pushes an update, the CI (Continuous Integration) process will do all the automation testing, so in just about half an hour, the developer knows that if he causes any issue. And he can fix it immediately.
If the code is OK, we don't need the "server guy" to do all the manual work anymore. The CD (Continuous Delivery) process will do it for us automatically. Now the server guy only needs to review the deployment and press a button if we configured to do so.

So new changes will be live on the production server in a matter of hours. What a great savior of productivity!

3. Scrum

Before joining my new company, I thought Scrum is just a buzzword in software development. And because of the fact that in my previous companies, there was no testing or CI/CD, so the methodology of Scrum couldn't be applied. Because with no testing, no CI/CD, how can you guarantee a 2-weeks sprint if one small bug takes a week?

Sprint planning, daily meetings, sprint grooming, sprint review, ... all are good for one purpose: to deliver the product to customers as fast as possible, which brings more customer satisfaction, which is ... more revenue.

Conclusion

Now you know how automation testing and CI/CD play an important role in modern software development.

I guess that now I need to keep my eyes on other things than just "best programming language to learn" or "best frontend frameworks"

Here are some resources that you can use to learn more about this:

Happy coding!

Using Google Analytics with Next.js

Hoang Trinh — Mon, 13 Apr 2020 08:34:24 +0000

Originally posted at my blog

There are lots of tutorials online that give you instructions on how to set up Google Analytics with Next.js project.

But most of them require you to use react-ga, a library that basically wraps Google Analytics logic inside a React component.

This is good, but I personally prefer a solution that:

Does not require an external dependency (react-ga in this case)
Easy to implement (you don't need to make a thousand lines of custom code)
Is recommended officially

My solution is based on an official example of Next.js team here: Example app with analytics

You can also check this Github issue for some of the other workarounds that people used: Adding GA script tag? #160

Let's get started!

Create GA Helper
Update _document.js
Update _app.js
Conclusion

1. Create GA Helper

This helper file stores your Google Analytics tracking ID and provides some methods that you need to track your page views.

Add this to lib/gtag.js:

export const GA_TRACKING_ID = 'UA-XXXXXXXXX-X' // This is your GA Tracking ID

// https://developers.google.com/analytics/devguides/collection/gtagjs/pages
export const pageview = (url) => {
  window.gtag('config', GA_TRACKING_ID, {
    page_path: url,
  })
}

// https://developers.google.com/analytics/devguides/collection/gtagjs/events
export const event = ({ action, category, label, value }) => {
  window.gtag('event', action, {
    event_category: category,
    event_label: label,
    value: value,
  })
}

2. Update _document.js

Create a custom _document.js that will load our Google Analytics script for us. We will only load this script in production so that we don't track items locally. In the pages directory create a new file, _document.js and add the following code:

File: pages/_document.js

import { Fragment } from 'react'
import Document, { Head, Main, NextScript } from 'next/document'
import FavIcon from '../assets/image/favicon.png'

import { GA_TRACKING_ID } from '../lib/gtag'

export default class CustomDocument extends Document {
  static async getInitialProps(ctx) {
    const sheet = new ServerStyleSheet()
    const originalRenderPage = ctx.renderPage

    const initialProps = await Document.getInitialProps(ctx)

    // Check if in production
    const isProduction = process.env.NODE_ENV === 'production'

    return {
      ...initialProps,
      isProduction,
    }
  }

  render() {
    const { isProduction } = this.props

    return (
      <html lang="en">
        <Head>
          <link rel="shortcut icon" type="image/x-icon" href={FavIcon} />

          {/* We only want to add the scripts if in production */}
          {isProduction && (
            <Fragment>
              {/* Global Site Tag (gtag.js) - Google Analytics */}
              <script
                async
                src={`https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`}
              />
              <script
                dangerouslySetInnerHTML={{
                  __html: `
                    window.dataLayer = window.dataLayer || [];
                    function gtag(){dataLayer.push(arguments);}
                    gtag('js', new Date());

                    gtag('config', '${GA_TRACKING_ID}', {
                      page_path: window.location.pathname,
                    });
                  `,
                }}
              />
            </Fragment>
          )}
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </html>
    )
  }
}

3. Update _app.js

You will trigger pageview event here when the router detects route is changed.

File: pages/_app.js

import React, { Fragment } from 'react'
import Router from 'next/router'

import * as gtag from 'common/src/lib/gtag'

// Notice how we track pageview when route is changed
Router.events.on('routeChangeComplete', (url) => gtag.pageview(url))

export default ({ Component, pageProps }) => {
  return (
    <Fragment>
      <Component {...pageProps} />
    </Fragment>
  )
}

4. Conclusion

Now you can see how easy it is to make Google Analytics works with Next.js without any external dependency.

Happy coding!

DEV Community: Hoang Trinh

Nest.js Caching With Redis

What is Redis

What is Nest.js

How to add Redis into your Nest.js project

1. Create your RedisCacheModule

1.1. redisCache.module.ts

1.2. redisCache.service.ts

2. Inject RedisCacheModule wherever you need it

2.1. dailyReport.module.ts:

2.2. dailyReport.service.ts

I feel so outdated

1. Automation Testing

2. CI/CD

3. Scrum

Conclusion

Using Google Analytics with Next.js

Table of contents

1. Create GA Helper

2. Update _document.js

3. Update _app.js

4. Conclusion

1.1. `redisCache.module.ts`

1.2. `redisCache.service.ts`

2.1. `dailyReport.module.ts`:

2.2. `dailyReport.service.ts`