Packaging design for折叠 cartons (folding cartons) involves working with dielines — flat layouts that show where cuts, folds, and glue areas will be before the box is assembled. Traditionally this is done in Illustrator or specialized CAD software. I wanted to see if I could build a web-based tool that lets designers edit dielines visually and see the finished 3D box fold in real time.

The project is a live proof of concept: github.com/haku-d/pde

Note: All source code in this project was AI-generated by different models. I’m treating this as an experiment — I’ll share what worked, what didn’t, and what I’d do differently.

What PDE does

PDE has two editor surfaces:

1. Parametric Dieline Editor

The default route. Feed it dimensions and closure parameters — length, width, height, flap types, tuck flap geometry, dust flaps, glue flaps, material thickness, fold allowance, bleed, safe area — and it generates a complete card-box dieline from the card-box-basic model.

From a single set of parameters you get:

• Stable panel IDs, cut lines, fold lines, bleed paths, safe-area paths
• Validation issues if the geometry is invalid
• A compiled shape that the shared renderer can preview in both 2D and 3D

Editor controls include unit switching (mm, cm, in), debounced live regeneration as you edit fields, per-guide visibility and color toggles, and a JSON or SVG export.

2. Dieline-to-3D Editor

Loads fixed template JSON files or imports annotated SVGs, then renders the same 2D canvas texture onto a foldable 3D preview. The SVG importer recognizes common dieline line classes — cut, fold/crease, bleed, safe-area, dimension, construction, glue-area — from the SVG metadata.

The 2D/3D renderer pipeline

Both editors share a renderer pipeline I built as part of this project:

• Canvas-based 2D rendering — renders trim, crease, bleed, safe-area, dimensions, panels, and demo artwork onto a <canvas>
• Texture canvas generation — builds the material texture for 3D panels from the same 2D data
• Three.js panel meshes — UV-mapped panels with material thickness
• Fold graph construction — builds the fold order graph so the 3D animation knows which panel folds into which
• Fold animation — open/close controls with a fold progress slider
• Viewport — pan, zoom, fit, and keyboard navigation in both 2D and 3D views

Project structure

1
2
3
4
5
6
7
8
9
10
src/app/                  Next.js App Router pages and template API
src/components/           Shared editor layout and canvas UI
src/editors/             Client-side editor orchestration
src/core/models/         Parametric model registry and field definitions
src/core/parameters/     Parameter and dimension helpers
src/core/structure/      Fold graph and structural validation
src/core/template/       Template compiler, schema, serializers, SVG importer
src/core/units/          Unit conversion utilities
src/render2d/           Canvas renderer, hit testing, viewport, SVG export
src/render3d/            Three.js scene builder, preview, fold animation

Running it locally

1
2
3
4
5
git clone https://github.com/haku-d/pde.git
cd pde
npm install
npm run dev
# → http://localhost:3000 redirects to /editors/parametric-dieline

Available routes:

• / → redirects to parametric editor
• /editors/parametric-dieline → parametric folding carton editor
• /editors/dieline-to-3d → fixed-template and SVG-import editor
• /api/templates/[templateId] → serves bundled template fixtures

What the AI-generation experiment taught me

This whole project was generated by AI — different models for different parts. Here are a few honest observations:

What worked well:

• Boilerplate-heavy modules (parameter engines, unit converters, test suites) were generated quickly and mostly correctly
• The Three.js scene/fold animation was cleaner than I expected given how much boilerplate it requires
• Test scaffolding for core geometry was solid enough to build on

What needed heavy manual correction:

• SVG import heuristics — the “recognize common dieline line classes” logic required significant manual tuning
• The fold graph construction had edge cases around multi-panel folds that required rethinking the data model
• The parametric model’s validation logic had boundary condition bugs that only surfaced when testing with real-world dimension ranges

What I’d do differently:

• Start with the data model for the fold graph before any rendering code — it’s the foundation everything else builds on
• Treat the 2D canvas renderer and the texture generator as one module, not two — keeping them in sync manually is error-prone
• The 3D panel mesh UV mapping was the hardest part — I’d invest in a dedicated UV-atlas step instead of trying to share canvas coordinates directly

Current state and next steps

PDE is an active proof of concept, not production software. The current limitations:

• Only one registered parametric model: card-box-basic
• The 3D preview is an MVP renderer, not a manufacturing simulator
• SVG import is deterministic for controlled/annotated SVGs and best-effort for arbitrary SVGs
• Production-grade CAD operations, artwork persistence, and multi-format export are still future work

The immediate next piece I’m working on is improving the hinges surface in the 3D preview — getting the fold animation to feel more physically accurate rather than just geometrically correct.

Source

github.com/haku-d/pde

I created a self-hosted prerender service to solve this problem for JavaScript-heavy SPAs. The project is available on GitHub: https://github.com/haku-d/prerender

What this project does

The service detects bot traffic and serves pre-rendered HTML instead of the normal JavaScript application shell. Regular users still receive the SPA as usual, while crawlers receive a fully rendered HTML snapshot.

Key features:

• Detects SEO bots and social crawlers from User-Agent
• Uses Nginx to route bot requests to the prerender service
• Renders pages with Puppeteer Core and headless Chromium
• Stores rendered HTML in a disk cache
• Uses CACHE_TTL_SECONDS to refresh stale pages
• Warms the cache by crawling the site’s XML sitemap
• Supports 410 Gone markers for removed pages
• Supports 301 Redirect mappings for old URLs
• Stores bot analytics in PostgreSQL
• Exposes an analytics API for bot traffic and cache status

How it works

At a high level, the architecture is simple:

1. Nginx receives every request.
2. Static assets such as JavaScript, CSS, images, and fonts are served normally.
3. For regular users, Nginx proxies the request to the SPA origin.
4. For known bots, Nginx forwards the request to the prerender service.
5. The prerender service checks whether a cached HTML file already exists.
6. If the cache is fresh, it returns the cached HTML immediately.
7. If the cache is missing or stale, Puppeteer opens the page, waits for hydration, extracts the HTML, minifies it, saves it to disk, and returns it.
8. Bot request details are optionally stored in PostgreSQL for analytics.

The important part is that regular users are not affected. Only bots and crawlers go through the rendering pipeline.

Why self-host it?

There are existing hosted prerender services, but I wanted more control over the full pipeline:

• Control the bot detection rules
• Keep rendered HTML cache on my own infrastructure
• Avoid sending crawler traffic through a third-party SaaS service
• Add custom cache invalidation behavior
• Add analytics around bot traffic, cache hit rate, and render duration
• Integrate it with my own deployment and Nginx setup

For small and medium applications, this approach can be cost-effective because most bot requests are served from disk cache after the first render.

Tech stack

Docker services

The repository includes a docker-compose.yml with three services:

The minimum environment configuration looks like this:

PUPPETEER_EXECUTABLE_PATH=/usr/bin/chromium-browser
SITE_URL=https://your-site.com
STATIC_SITE_DIR=/data/prerender
DATABASE_URL=postgresql://prerender:secret@postgres:5432/prerender
POSTGRES_PASSWORD=secret
CACHE_TTL_SECONDS=43200
EXECUTE_JOB_ON_START=false

Then start the service:

1
docker compose up -d

If analytics are not required, postgres, DATABASE_URL, and prerender-ui can be removed.

Nginx bot detection

The key part is the Nginx configuration. It maps bot user agents to a prerender flag:

1
2
3
4
5
6
7
8
9
10
map $http_user_agent $prerender_ua {
    default 0;
    "~*googlebot" 1;
    "~*bingbot" 1;
    "~*facebookexternalhit" 1;
    "~*twitterbot" 1;
    "~*linkedinbot" 1;
    "~*slackbot" 1;
    "~*discordbot" 1;
}

Static assets are excluded so the service only renders real pages:

1
2
3
4
map $uri $prerender {
    default $x_prerender;
    "~*\.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)" 0;
}

When $prerender is enabled, the request is rewritten to the prerender backend:

1
2
3
4
5
6
7
8
9
10
11
12
13
location / {
    if ($prerender = 1) {
        rewrite (.*) /prerender-proxy last;
    }

    proxy_pass http://s3_bucket;
}

location /prerender-proxy {
    rewrite .* /https://$host$request_uri? break;
    proxy_set_header X-Prerender 1;
    proxy_pass http://prerender_backend;
}

The X-Prerender header is important because it prevents a request from being routed back into the prerender flow again.

Cache behavior

Rendered pages are stored as HTML files under STATIC_SITE_DIR. Each cache file is keyed by an MD5 hash of the full canonical URL.

The service supports these cache states:

The default TTL is 43200 seconds, or 12 hours.

Useful endpoints

The service is intended to run privately behind Nginx, so the API is intentionally simple.

Force refresh one page

1
GET /hit/https://example.com/products/business-cards

This re-renders the page and overwrites the cache entry.

Mark a page as gone

1
GET /gone/https://example.com/old-page

Future bot requests for that URL return 410 Gone.

Add a redirect

1
GET /redirect/https://example.com/old-path/https://example.com/new-path

Future bot requests for the old URL return a 301 redirect.

View analytics summary

1
GET /analytics/summary?from=2026-07-01&to=2026-07-14

Example response:

1
2
3
4
5
6
{
  "total": 1240,
  "uniquePages": 87,
  "byBot": [{ "botName": "googlebot", "count": 640 }],
  "byCacheStatus": [{ "cacheStatus": "hit", "count": 980 }]
}

What I learned

The biggest lesson is that prerendering is not only about running Puppeteer. The browser rendering part is important, but the real value comes from the surrounding system:

• Good bot detection
• Avoiding static asset rendering
• Preventing proxy loops
• Cache freshness and invalidation
• Sitemap-based cache warming
• Handling deleted and redirected pages correctly
• Measuring cache hit rate and render performance

A prerender service becomes much more useful when it behaves like infrastructure, not just a script that opens pages in Chromium.

Source code

You can find the full project here:

https://github.com/haku-d/prerender

1
2
3
4
5
6
7
8
9
enum TableCellType {
  Input = 'input',
  InputNumber = 'inputNumber',
  Checkbox = 'checkbox',
  Dropdown = 'dropdown',
  Icon = 'icon',
  Date = 'date',
  Link = 'link',
}

1
2
3
4
5
6
7
8
9
10
type TableColumn = {
  header: string;header.
  field: string;
  cellType?: TableCellType;
  width?: string;
  editable?: boolean;
  align?: 'left' | 'right' | 'center';
  iconClass?: string;
  iconOnClick?: AnyFunc;
};

• header: string: Represents the column’s display name in the table header.
• field: string: Specifies the key in the data source that the column will use.

Define Columns

1
2
3
4
5
6
7
8
9
10
cols: TableColumn[] = [
    {
      header: 'Code',
      field: 'code',
      editable: true,
      cellType: TableCellType.Input,
      width: '100px',
    },
    // More column definitions...
  ];

Define Form Group

To handle the data updates, I use a FormGroup that keeps track of each row’s data:

1
2
3
4
5
6
7
8
9
formGroup = new FormGroup({
  id: new FormControl(),
  code: new FormControl(),
  name: new FormControl(),
  active: new FormControl(),
  price: new FormControl(),
  category: new FormControl(),
  quantity: new FormControl(),
});

Since only one row can be edited at a time, the row’s data is updated into the form group during editing. To listen for editing events, I use onEditInit and onEditComplete

1
2
3
4
5
6
7
onEditInit(event: TableEditInitEvent) {
  const entity = this.products[event.index];
  this.formGroup.setValue(
    pick(entity, ['id', 'code', 'name', 'active', 'price', 'category', 'quantity']),
    { emitEvent: false }
  );
}

1
2
3
4
5
6
7
8
9
10
onEditComplete(event: TableEditCompleteEvent) {
  if (this.formGroup.dirty && event.index) {
    this.products = [
      ...this.products.slice(0, event.index),
      this.formGroup.value,
      ...this.products.slice(event.index + 1),
    ];
    this.formGroup.markAsPristine();
  }
}

Initialize PrimeNG Table

The table is initialized in the HTML as follows:

1
2
3
4
5
6
7
8
9
10
<p-table
  [value]="products"
  dataKey="id"
  [tableStyle]="{ 'min-width': '50rem' }"
  selectionMode="single"
  [columns]="cols"
  (onEditInit)="onEditInit($event)"
  (onEditComplete)="onEditComplete($event)"
  >
</p-table>

Initialize the Table Colgroup

To control the column widths:

1
2
3
4
5
6
7
8
9
<ng-template pTemplate="colgroup" let-columns>
  <colgroup>
    <col
      *ngFor="let col of columns"
      span="1"
      [style.width]="col.width ? col.width : 'auto'"
    />
  </colgroup>
</ng-template>

Initialize the Table Header

The header is rendered as follows:

1
2
3
4
5
6
7
8
9
10
11
<ng-template pTemplate="header" let-columns>
  <tr>
    <th
      *ngFor="let col of columns"
      [class.text-center]="col.align === 'center'"
      [class.text-right]="col.align === 'right'"
    >
      {{ col.header }}
    </th>
  </tr>
</ng-template>

Initialize the Table Body

For rendering the table body dynamically and handling inline editing:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<ng-template
  pTemplate="body"
  let-rowData
  let-columns="columns"
  let-i="rowIndex"
>
  <tr>
    <td
      *ngFor="let col of columns"
      [class.text-center]="col.align === 'center'"
      [class.text-right]="col.align === 'right'"
      [pEditableColumn]="rowData[col.field]"
      [pEditableColumnField]="col.field"
      [pEditableColumnRowIndex]="i"
      [pEditableColumnDisabled]="!col.editable"
    >
      <p-cellEditor>
        <ng-template pTemplate="input">
          @switch (col.cellType) {
            @case (cellType.InputNumber) {
              <form [formGroup]="formGroup">
                <p-inputNumber [formControlName]="col.field" inputStyleClass="w-full text-right" />
              </form>
            }
            @default {
              <form [formGroup]="formGroup">
                <input [formControlName]="col.field" pInputText class="w-full" />
              </form>
            }
          }
        </ng-template>
        <ng-template pTemplate="output">
          @switch (col.cellType) {
            @case (cellType.Dropdown) {
              <p-dropdown 
                [options]="categories" 
                optionLabel="label"
                optionValue="label"
                appendTo="body"
                [ngModel]="rowData[col.field]"
                placeholder="Select a category" />
            }
            @case (cellType.Checkbox) {
              <p-checkbox [binary]="true"  [ngModel]="rowData[col.field]"/>
            }
            @case (cellType.Icon) {
              <i
                class="{{ col.iconClass }}"
                [ngStyle]="{ cursor: 'pointer' }"
                (click)="
                  col.iconOnClick &&
                    col.iconOnClick(rowData[col.field], i, $event)
                "
              ></i>
            }
            @default  {
              {{ rowData[col.field] }}
            }
          }
        </ng-template>
      </p-cellEditor>
    </td>
  </tr>
</ng-template>

The complete source code can be found on Stackblitz.

Summary

You may have noticed that the left and right arrow keys trigger a focus event on the table, which should ideally be disabled while editing a cell. To achieve this, you can create a custom directive and apply it to each cell to override this behavior.

Additionally, you can enhance the grid by adding a feature that selects the cell’s data automatically when it receives focus, making editing more convenient.

Just drop me a message if you have any question.

Thanks for reading!

Let’s consider the below monorepo structure . └── YourMonoRepo/ ├── apps/ │ ├── app1 │ └── app2 └── libs/ ├── lib1 └── lib2

The workflow will be triggered if there is any commit is made on branch develop.

1
2
3
4
5
6
name: CI-Deploy

on:
  push:
    branches:
      - develop

Setup build job

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
jobs:
  build:
    runs-on: ubuntu-latest
    outputs:
      app1_exist: $
      app2_exist: $
    steps:
      - name: 🛎️ Checkout code
        uses: actions/checkout@v4
        with:
          fetch-depth: 0
      - name: 📥 Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 20  # Specify your Node.js version
          cache: 'npm'
      - name: 📦 Install dependencies
        run: npm ci
      - name: 🏗️ Build only affected apps
        run: npx nx affected -t build --base=develop~1 --head=develop
      - name: 🔍 Check if app1 build output folder exists
        id: check_build_output1
        if: $
        run: echo "app1_exist=true" >> "$GITHUB_OUTPUT"
      - name: 🔍 Check if app1 build output folder exists
        id: check_build_output2
        if: $
        run: echo "app2_exist=true" >> "$GITHUB_OUTPUT"
      - name: ⬆️ Upload app1 artifact
        if: steps.check_build_output.outputs.app1_exist == 'true'
        uses: actions/upload-artifact@v4
        with:
          name: dist
          path: dist/apps/app1
      - name: ⬆️ Upload app2 artifact
        if: steps.check_build_output.outputs.app2_exist == 'true'
        uses: actions/upload-artifact@v4
        with:
          name: dist
          path: dist/apps/app2

Steps

1. Checkout the source code
2. Setup node.js env
3. Install dependencies
4. Build affected apps
5. Check if output folder of app1 is existed
6. Check if output folder of app2 is existed
7. Upload artifacts

Since ChatGPT’s rise in popularity, it has transformed how new developers approach problem-solving. Rather than searching on Google, they now turn to ChatGPT. Instead of consulting documentation, they ask ChatGPT. And instead of seeking answers from other developers on StackOverflow, they rely on ChatGPT.

However, there are notable disadvantages to relying on ChatGPT for problem-solving. One major concern is the risk of over-reliance, where developers might use ChatGPT as a crutch rather than developing critical thinking and problem-solving skills. Instead of learning how to independently research, debug, or fully understand complex concepts, some may become too dependent on instant answers, which could limit their long-term growth as developers.

Another issue is inaccuracy or incomplete information. While ChatGPT is highly sophisticated, it is not infallible and can sometimes provide incorrect or outdated solutions. Without proper vetting, developers may implement faulty code or follow suboptimal practices, leading to potential bugs or inefficiencies in their projects.

Additionally, context limitations can hinder the effectiveness of ChatGPT in solving more nuanced or project-specific problems. It may not fully grasp the intricacies of a developer’s entire codebase or the unique environment in which they are working, making some of its suggestions less applicable or even harmful if blindly followed.

Finally, there’s the concern of diminishing community engagement. Traditionally, developers would turn to communities like StackOverflow or GitHub discussions for help, contributing to a shared knowledge base. As more developers rely on ChatGPT for immediate answers, fewer may engage in these collaborative spaces, potentially leading to a decline in community-driven problem-solving and innovation.

You can found all the source code in folder tools/builder and follow my instructions in this post to configure it on your project.

1. Create an nx executor

Run this command to create new library

npx nx g @nx/angular:library builder --directory=tools/builder

Feel free to modify the library name (builder) and its directory(tools/builder)

2. Get the source code

Go to https://github.com/haku-d/nx-aws-deploy and copy all source files inside folder tools/builder to your project.

3. Integrate the executor into your application

Open project.json in your app folder, add new deploy target as below:

Replace hello-bucket by your desire bucket name Replace <your-cloud-front-distribution-id> by your cloudfront distribution id

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
{
  "name": "hello",
  "$schema": "../node_modules/nx/schemas/project-schema.json",
  "projectType": "application",
  "prefix": "app",
  "sourceRoot": "hello/src",
  "tags": [],
  "targets": {
    // other target
    "deploy": {
      "executor": "@ng-mf/builder:deploy",
      "options": {
        "bucket": "hello-bucket",
        "cfDistributionId": "<your-cloud-front-distribution-id>",
        "globFileUploadParamsList": [
          {
            "glob": "*",
            "ACL": "public-read",
            "CacheControl": "max-age=3600"
          },
          {
            "glob": "*.html",
            "CacheControl": "max-age=300"
          }
        ]
      }
    }
  }
}

4: Deploy your application

1
npx cross-env NG_DEPLOY_AWS_ACCESS_KEY_ID=1234 NG_DEPLOY_AWS_SECRET_ACCESS_KEY=321ACCESS NG_DEPLOY_AWS_REGION=ca-central-1 nx run hello:deploy

There are two parts to the assessment. The first part is related to the front-end application. It required adding new features, modifying the existing ones, and even updating the unit test. The second part is related to back-end development. In this article, I would like to share what I have done so far on this assessment even though I couldn’t get it done in 2 hours (:sob::sob::sob:). Btw, it was good to have a chance to do the assessment :smile:.

Let’s jump right into it.

The title of the assessment was called “Javascript: Parallel Asynchronous Programming”. It means that you have to create something that is gonna run asynchronous and parallelly.

The objective

Your goal is to write an asynchronous function pooledDownload. This function needs to be able to parallelly download and save files from a given array of URLs, using a connection pool of a given size.

The interesting part was the acceptance criteria

• All files need to be downloaded and saved.
• File contents should be saved as soon as they are downloaded.
• Downloads must be distributed over the connections as evenly as possible.
• One connection can only be downloading one file at a time. You’ll need to create more connections to download multiple files at the same time.
• Any opened connections must always be closed.
• If no connections could be opened to the server, your function needs to reject with a new Error containing the message "connection failed".
• If any error occurred during the transfer, your function needs to reject with this same error.
• BONUS: Sometimes, the server may not have enough slots to accept the requested amount of concurrent connections. In this case, you are to stop opening new connections once the server reaches its capacity and proceed with as many connections as the server allows.
• You can choose whether to use Promises, async/await or a mixture of them

At first, I tried to solve it by using Promise but I couldn’t get it. Then I switched to async/await and passed all the unit tests.

The code below reflects what I was able to accomplish after the time expired. I wish I had more time or another opportunity to revisit it, as I found the task truly engaging.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
/**
 * downloads were distributed evenly among the successful connections
 * @param {*} numberOfRecipients
 * @param {*} totalAmount
 * @returns Array
 *
 * Example: if number of recipients is 4, and totalAmount is 10
 *  -> Output: [3, 3, 2, 2]
 */
const distributeEvenly = (numberOfRecipients, totalAmount) => {
  const min = parseInt(totalAmount / numberOfRecipients);
  const remainder = totalAmount % numberOfRecipients;
  return Array(numberOfRecipients)
    .fill(0)
    .map((_, idx) => min + (idx < remainder ? 1 : 0));
};

const pooledDownload = async (connect, save, downloadList, maxConcurrency) => {
  const connections = [];

  try {
    for (let i = 0; i < maxConcurrency; i++) {
      connections.push(await connect());
    }
  } catch (_) {
    /** Ignore error & stop calling connect to server */
  }

  if (connections.length === 0) {
    throw new Error("connection failed");
  }

  const fileDistributed = distributeEvenly(
    connections.length,
    downloadList.length
  );

  return Promise.all(
    connections.map((connection, idx) => {
      const { download } = connection;
      const count = fileDistributed[idx];
      const files = downloadList.splice(0, count);
      return Promise.all(
        files.map((file) => {
          return download(file).then((result) => save(result));
        })
      );
    })
  ).finally(() => connections.forEach((conn) => conn.close()));
};

module.exports = pooledDownload;

Hope you all enjoy it and good luck if you found one with your search in 2024. In the next post, I will share my journey with another technical assessment which almost took me for three days.

Step 1: Get your angular application ready

Before you begin, make sure your angular application is ready for production.

Step 2: Create the Dockerfile

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
FROM node:20-alpine as dist

WORKDIR /app

# Install dependencies
COPY package.json package-lock.json ./
RUN npm install

# Copy application source code
COPY . .

# Build the application
ARG NODE_ENV=production
RUN npm run build --configuration=${NODE_ENV}

FROM nginx:alpine-slim

# Copy custom NGINX configuration
COPY nginx.conf /etc/nginx/conf.d/default.conf

WORKDIR /usr/share/nginx/html

COPY --from=dist app/dist/my-app/browser .

# Rename the main HTML file if necessary
RUN mv index.csr.html index.html

Step 3: Create custom nginx configuration file

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
server {
  listen 80;
  sendfile on;
  default_type application/octet-stream;

  gzip on;
  gzip_http_version 1.1;
  gzip_disable      "MSIE [1-6]\.";
  gzip_min_length   256;
  gzip_vary         on;
  gzip_proxied      expired no-cache no-store private auth;
  gzip_types        text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;
  gzip_comp_level   9;

  root /usr/share/nginx/html;

  location / {
    try_files $uri /index.html =404;
  }

  location ~* \.(?:jpg|jpeg|gif|png)$ {
    try_files $uri /assets/No-Image-Placeholder.png;
  }
}

You might be found same guideline on the internet or by asking ChatGPT. But it did not tell you to create custom nginx configuration. Let’s take a look at this case: once your application was deployed successfully and running on port 4200. You open it on your favourite browser, click on any router link to access other pages, such as /profile. The full url will be http://localhost:4200/profile.

If you used default nginx configuration for your application and you refresh the browser while opening http://localhost:4200/profile, nginx will show 404 page. But with this configuration, the nginx server will return the application’s host page (index.html) when asked for a file that it does not have. All routes must fall back to index.html

Step 4: Build the Docker Image

To build the Docker image, navigate to the directory containing your Dockerfile and run:

1
docker build -t my-angular-app .

This command will package your Angular application into a Docker image.

Step 5: Run the Docker Container After the image is built, you can run it with the following command:

1
docker run -p 80:80 my-angular-app

This command starts an NGINX server inside a Docker container, serving your Angular application on http://localhost.

Thanks for your reading

I started with PDFKit and jsPDF to generate pdf but it became difficult with complex layouts. jsPDF supports generating a PDF from an HTML element or string but it does not work in node environment.

Finally, I ended up using puppeteer to generate a PDF page from an HTML string. I created a simple code using NestJS framework, including a POST endpoint which will generate a PDF from HTML string input.

Recently, I found Google Chrome for AWS Lambda as a layer. That means I can setup a serverless api with Lambda running puppeteer. THAT IS ALL WE NEED!.

You can check out the set up with AWS SAM CLI on my github repo: https://github.com/haku-d/html-2-pdf-lambda

Currently, only React is supported

My work can be found at https://github.com/haku-d/tw-decoded

View Demo

TODOS

• Application Shells
• Forms (WIP)
• Lists
• Navigations
• More