itsmunim

Using scss in NextJS components/modules, the traditional way e.g. by passing the actual classname like a-b-c instead of styles['a-b-c'] might seem a bit harder than expected. But actually it's supported out of the box. Just the next.config.js requires a bit of tweaking.

next.config.js changes

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  webpack(config) {

itsmunim

apiVersion: v1
kind: ConfigMap
metadata:
  name: init-container-script
data:
  init.sh: |-
    #!/bin/sh
    echo "Setting up the dependencies..."
    # Setup secrethub cli
    apk add --repository https://alpine.secrethub.io/alpine/edge/main --allow-untrusted secrethub-cli

itsmunim

apiVersion: apps/v1
kind: Deployment
metadata:
  name: my-app
spec:
  template:
    spec:
      # All the volumes we will need
      volumes:
      # Secrethub service account that will be mounted by kubernetes from specified secret name

itsmunim

# First obtain your doks cluster details
data "digitalocean_kubernetes_cluster" "my_cluster" {
  name = var.my_cluster_name # The name of your doks cluster
}

# Supply the cluster details to kubernetes provider
provider "kubernetes" {
  host  = data.digitalocean_kubernetes_cluster.my_cluster.endpoint
  token = data.digitalocean_kubernetes_cluster.my_cluster.kube_config[0].token
  cluster_ca_certificate = base64decode(

itsmunim

name: apply-iac

on:
  push:
    branches:
      - master

jobs:
  deploy:
    runs-on: ubuntu-latest

itsmunim

import { createElement as e } from 'react';
import { createRoot, hydrateRoot } from 'react-dom/client';

/**
 * All the root container refs have to be maintained for re-rendering purpose.
 */
const rootMap = {};

/**
 * For id less root elements, this will generate a specific prefixed id.

itsmunim

import { renderToString } from 'react-dom/server';
import { createElement } from 'react';
import * as allWidgets from 'widget-library';

// POST /api/render
const render = (req, res) => {
  const { widgetName, props } = req.body;

  if (!(widgetName in allWidgets)) {
    return res.status(404).json({ error: `Widget with name ${widgetName} not found.` });

itsmunim

scenario1:
  matches:
    - name: search experience
      run:
        actions:
          - name: open dropdown
            selector: id--filter-dropdown
            type: click
          - name: select prop type
            selector: class--filter-prop-type

itsmunim

apiVersion: v1
kind: ConfigMap
metadata:
  name: app-secrets
data:
  app.env: |-
    AWS_ACCESS_KEY={{my-app/credentials/aws/access-key}}
    AWS_SECRET_KEY={{my-app/credentials/aws/access-secret}}
    MYSQL_USERNAME={{my-app/credentials/mysql/username}}
    MYSQL_PASSWORD={{my-app/credentials/mysql/password}}

itsmunim

name: deploy-from-pr

on:
  pull_request:
    branches:
      - master

env:
  REGISTRY: ghcr.io
  IMAGE_NAME: ${{ github.repository }}