Kuan Jia Hong

Category: Software Development

Software Development related

  • Next.js with strict CSP cause MUI Skeleton to not render

    Solution: https://github.com/mui/material-ui/issues/45682

  • Next.js (App Router) with MUI v6.4.6

    I was working on a project that uses Next.js (App Router v15.2.0) and MUI (v6.4.6).

    It took me quite a while to understand how to integrate MUI and Next.js. For example, I was unfamiliar on how to integrate dark mode and light mode in a Next.js application with MUI.

    Thus, here is a GitHub repository that implemented MUI free react template with Next.js (with dark mode and light mode toggle implemented) for everybody reference if they are curious on how to use Next.js with MUI.

    To be honest, all the implementation details can be found in the MUI documentation (plus some Googling & ChatGPT) but it took me a while to understand the mechanics behind it and how to apply it correctly.

    The project is deployed at Vercel:

    https://nextjs-ts-with-mui-free-templates.vercel.app/

    GitHub repository:

    https://github.com/kuanjiahong/nextjs-ts-with-mui-free-templates

    Some issues I am still figuring it out:

    1. The CSS styling in production environment is different than development environment

  • Next.js: config prettier & next lint with lint-staged

    GitHub Discussion: https://github.com/lint-staged/lint-staged/discussions/1521

    In the project root directory, create a .lintstagedrc.mjs file

    import path from "path";
    const buildEslintCommand = (filenames) =>
    `next lint –fix –file ${filenames
    .map((f) => path.relative(process.cwd(), f))
    .join(" –file ")}`;
    const lintStagedObject = {
    "*.{js,jsx,ts,tsx}": [
    buildEslintCommand,
    "prettier –write –ignore-unknown",
    ],
    };
    export default lintStagedObject;
    view raw .lintstagedrc.mjs hosted with ❤ by GitHub

    Background information:

    I was struggling to come out with a way to combine Next.js next lint command and auto formatting code with prettier with pre-commit hook. After reading documentation and trial-and-error, the above configuration works.

  • Django – Dockerfile and docker-compose.yaml

    The below files can be used as a reference on how to deploy Django application in a container.

    Dockerfile

    FROM python:3.12.8-alpine
    ENV PYTHONDONTWRITEBYTECODE=1
    ENV PYTHONUNBUFFERED=1
    WORKDIR /app
    COPY requirements.txt ./
    RUN pip install -r requirements.txt –no-cache-dir
    COPY ./myresumebuilder/manage.py ./
    COPY ./myresumebuilder/myresumebuildersite ./myresumebuildersite
    COPY ./myresumebuilder/resumebuilder ./resumebuilder
    RUN adduser -D myuser
    USER myuser
    # Collect static files (if any)
    # RUN python myresumebuilder/manage.py collectstatic
    EXPOSE 8000
    # For production
    CMD ["gunicorn", "–bind=0.0.0.0:8000", "myresumebuildersite.wsgi"]
    # For development
    # CMD ["python", "myresumebuilder/manage.py", "runserver", "0.0.0.0:8000"]
    view raw Dockerfile hosted with ❤ by GitHub

    docker-compose.yaml

    # https://github.com/docker/awesome-compose/tree/master/official-documentation-samples/django/
    # https://github.com/docker/awesome-compose/blob/master/django/app/Dockerfile
    services:
    db:
    image: postgres:17.2-alpine
    volumes:
    – ./docker-volume/data/db:/var/lib/postgresql/data
    env_file:
    – .env
    healthcheck:
    test: ["CMD-SHELL", "pg_isready -d $${POSTGRES_DB} -U $${POSTGRES_USER}"]
    interval: 1s
    timeout: 5s
    retries: 10
    web:
    build: .
    ports:
    – "8000:8000"
    env_file:
    – .env
    depends_on:
    – db
    view raw docker-compose.yaml hosted with ❤ by GitHub

  • Raspberry Pi 5: File Upload Server

    At local machine

    GitHub Repository:

    https://github.com/kuanjiahong/file-upload-server

    Pull the repository into your local machine

    git clone https://github.com/kuanjiahong/file-upload-server.git

    Compile the TypeScript file to JavaScript file

    npm run build

    Transfer the built files to your Raspberry Pi 5. There are a few options to do it but I will be using the scp command

    scp -r dist/ <username>@<pi_ip_address>:<destination-path>

    And also to transfer the package.json file

    scp package.json <username>@<pi_ip_address>:<destination-path>

    At Your Raspberry Pi 5 Machine

    Install Node.js.

    refer to Raspberry Pi 5: Install Node post on how to install Node.js

    Set NODE_ENV=production

    export NODE_ENV=production

    Install node modules

    npm install --omit=dev

    Create a uploads directory

    mkdir uploads

    Start server

    node index.js

    Connecting to the server from local network:

    You can connect to the server that is running in the Raspberry Pi 5 by visiting http://[pi-ip-address]:[port-number]

    Connecting to the server from the internet:

    You will have to set up port forwarding at your router to allow remote devices from the internet to connect with your server that is hosted in your local network. It is not recommended to simply expose your home network public IP address. Make sure you read up all related resources and security concerns before exposing your server to the internet.

  • Raspberry Pi 5: Install Node

    Reference: https://nodejs.org/en/download/package-manager

    # installs nvm (Node Version Manager)
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash

# download and install Node.js (you may need to restart the terminal)
nvm install 22

# verifies the right Node.js version is in the environment
node -v # should print `v22.12.0`

# verifies the right npm version is in the environment
npm -v # should print `10.9.0`