"Web Development to Deployment and Operations (6/8) — Build, compile, bundle, and Turbopack: how frontend code becomes deployable output"

Code that is comfortable for developers to write is usually not the same shape as the output a browser or server wants to execute.

Key Takeaways

  • A frontend build is the full process that turns source code into files and server artifacts that can actually run in production.
  • Compile, transpile, bundle, and code splitting are different jobs inside one pipeline, even though beginners often experience them as one command.
  • In the current Next.js docs, Turbopack is the default bundler, with Webpack still available when explicitly requested.
  • Many deployment failures come from build output, asset paths, runtime boundaries, or environment-variable timing rather than from the visible application logic alone.

1. What "build" really means

The most practical definition of a build is "the process that turns development source into deployable output."

In frontend work, that usually includes several transformations:

  • converting JSX or TypeScript into executable JavaScript
  • resolving file dependencies
  • optimizing and organizing assets
  • splitting code into delivery units
  • preparing production-specific output

That is why npm run build looks simple from the outside but actually performs a structural rewrite of the application for deployment.

2. Compile, transpile, and bundle are different things

This is one of the most confusing beginner topics, so the distinction is worth making early.

Compile

In a broad sense, compiling means transforming source code into another executable form. In frontend discussions, the word is often used loosely for the whole conversion step.

Transpile

Transpilation usually means converting one high-level source format into another close source format. TypeScript to JavaScript, or JSX into function calls, are common examples.

Bundle

Bundling means collecting many source files and dependencies into delivery units that the browser or server can load efficiently.

Code splitting

Code splitting means not shipping everything at once. The application can send only the route or feature chunks needed at a given moment, which affects startup performance and caching behavior.

These are not competing ideas. They are different responsibilities inside the same build pipeline.

3. Why development mode can feel fine while production build fails

Development mode and production build optimize for different outcomes.

Development mode is designed for fast feedback. It prioritizes quick reloads, clear error messages, and incremental updates.

Production build is designed for correctness and deployability. It has to prepare final output, resolve runtime boundaries, inject the right environment values, and verify that the application can actually ship.

That is why a project can look healthy during local development and still fail at build time. Common examples include:

  • using browser-only APIs inside server-rendered code
  • missing production environment variables
  • import path case mismatches that pass locally but fail on Linux
  • asset or route assumptions that do not match the deployment environment

The key insight is that a green local dev server does not prove that the production artifact is valid.

4. Where Turbopack fits

Turbopack is part of the build and bundling layer in the Next.js ecosystem. The current Next.js documentation presents it as the default bundler, while also documenting a fallback path for Webpack.

The important lesson is not that Turbopack is magical. The real point is that build tooling strongly shapes developer experience.

Turbopack is designed around fast incremental work:

  • recalculate only what changed
  • reduce feedback time during development
  • keep larger projects more responsive during iteration

That means Turbopack is not changing business logic. It is changing how efficiently development code is turned into runnable output.

5. How to view the build system from an operations perspective

If the build system is seen only as a frontend-only concern, many deployment problems become harder to explain. In practice, the build output is the deployment unit.

Static output

If the result is static HTML, CSS, and JavaScript, it may be deployable through a CDN or static host.

Server runtime output

If the application depends on server rendering or API routes, then deployment needs a runtime process rather than only file hosting.

Build-time versus runtime variables

Some values are fixed during the build, while others are read during execution. Confusing those two moments causes many "it works locally but not in production" problems.

Reproducibility and cache behavior

If build caches differ across environments or the artifact is not reproducible, debugging production becomes harder very quickly.

6. Better beginner questions to ask

Tool names matter less than the structural questions underneath them.

  1. Does this app need only static output, or does it need a server runtime?
  2. Is this value decided at build time or at runtime?
  3. Does the issue happen only in the dev server, or also in the production build?
  4. How does code splitting affect first load and later navigation?

If these questions are clear, Webpack versus Turbopack becomes easier to understand as an implementation choice rather than as a mystery.

References

  • Next.js Docs, Getting Started: Installation — https://nextjs.org/docs/pages/getting-started/installation
  • Next.js Docs, Turbopack — https://nextjs.org/docs/pages/api-reference/turbopack
  • Next.js Docs, Deploying — https://nextjs.org/docs/pages/building-your-application/deploying

This is Part 6 of the Web Development to Deployment and Operations series.

Series overview: Series index

๋Œ“๊ธ€

๋Œ“๊ธ€ ์“ฐ๊ธฐ

์ด ๋ธ”๋กœ๊ทธ์˜ ์ธ๊ธฐ ๊ฒŒ์‹œ๋ฌผ

Agent Memory Engine (2/10) — Building an AI Agent Memory System with SQLite Alone

← 1/10 SQLite Memory Engine f… ๐Ÿ“š Series Index 3/10 memcore Completed → A memory engine that runs without daemons, without dependencies, anywhere ํ•ต์‹ฌ ์š”์•ฝ This post covers how to design an AI agent memory engine (memcore) on a single-file SQLite backend. - Structure: 25 modules, ~6,464 lines, 22 DB tables - Principles: no daemon, single-file portability, no required external dependencies, host-agnostic - Core techniques: 4-layer hybrid search (topic · vector · FTS5 · LIKE), U-tag dialectic-based confidence evolution, ingestion-layer bias rejection rules What This Post Covers One approach to building AI agent memory without a server or cloud vector DB. Specifically: (1) the limitations of text-file-based memory, (2) vector DB alternatives compared and selection criteria, (3) how to layer search tiers, (4) how to evolve confidence scores over time, and (5) how to block biased memory accumulation at the ingestion stage. Design Principles: Why Single-File SQLite Text-file-based ...
Read more »

"ML Foundations (9/9) — PyTorch vs TensorFlow, and the Road to Local LLMs"

์ด๋ฏธ์ง€
← 8/9 Deep Learning Architec… ๐Ÿ“š Series Index (series end) The final part. So far we've focused on models. Now we focus on the tools that actually run them . We'll lay out the philosophical difference between PyTorch and TensorFlow, and trace how Hugging Face transformers , llama.cpp , MLX , and Ollama built the bridge to running large language models on your own machine. By the end you should have the full mental model of "download a pretrained LLM and serve it locally." 0. Learning Objectives Explain the eager-vs-graph difference between PyTorch and TensorFlow. Explain, in graph terms, how autograd automates the backward pass. Use Hugging Face transformers ' AutoModel , AutoTokenizer , and pipeline abstractions. Describe llama.cpp's GGUF quantization, INT4 inference, and CPU-first flow. Describe Apple MLX's use of unified memory and how it differs from PyTorch. Run a local LLM with Ollama and call it through an OpenAI-compatible API. ...
Read more »

"RAG Core Study (14/26) — Evaluation Sets with RAGAS & DeepEval"

์ด๋ฏธ์ง€
Series overview: Series index ๐Ÿ“š Series Index Without an evaluation set, every RAG improvement is a story, not evidence. RAG systems fail in more than one place: retrieval, context selection, answer generation, and grounding. That means "looks better" is not a metric. Part 14 explains how to build a golden dataset , how RAGAS and DeepEval fit into the workflow, and why teams must separate retrieval quality from answer quality if they want tuning decisions to hold up. 0. Prerequisites Part 13 reranking — system quality now depends on multi-stage ranking. Part 1 grounding — a correct-looking answer is not enough. Part 12 Hybrid — multiple retrieval settings need comparison on fixed data. 1. Learning Objectives Build a small but useful golden dataset for RAG. Distinguish retrieval metrics from answer metrics . Use RAGAS and DeepEval in the right roles. Avoid the common traps in judge-model-based evaluation. 2. ํ•ต์‹ฌ ์š”์•ฝ An evaluation set for RAG is ...
Read more »

"ML Foundations (8/9) — Deep Learning Architectures: CNN, RNN, Attention"

์ด๋ฏธ์ง€
← 7/9 Deep Learning Training ๐Ÿ“š Series Index 9/9 PyTorch vs TensorFlow → What did we keep adding on top of an MLP? Vision went CNN, sequences went RNN/LSTM, and eventually both converged on Attention and the Transformer. Each architecture is easier to remember if you read it as what it gave up to gain something else . This part is the one-line summary of the decisive inflection points: LeNet → AlexNet → ResNet → LSTM → Attention → Transformer. 0. Learning Objectives Explain why CNN's convolution, pooling, and weight sharing match images so well. Trace what got unblocked from LeNet → AlexNet → VGG → ResNet as depth grew. State BPTT for RNNs and the vanishing/exploding gradient problem. Write the LSTM gate equations (forget, input, output) with intuition. Write the attention formula in query/key/value form and the scaled dot-product variant. State the precise reasons Transformers replaced RNNs (parallelism + long-range dependencies). 1. ํ•ต์‹ฌ ์š”์•ฝ CNN : weight sharin...
Read more »

"ML Foundations (7/9) — Deep Learning Training: Optimizers, Regularization, Initialization"

← 6/9 Neural Networks ๐Ÿ“š Series Index 8/9 Deep Learning Architec… → Building an MLP, as we did in Part 6, is not the same as getting it to train well . The right optimizer, regularization, initialization, and learning rate — when these line up, deep networks converge. When they don't, the network refuses to learn at all. This part is the catalog of those crafts, with formulas, paper citations, and code in one place. 0. Learning Objectives Compare and write the update rules for SGD, Momentum, Nesterov, and Adam. Explain how Dropout, BatchNorm, and LayerNorm work and where they belong in a model. Derive the variance formulas for Xavier and He initialization and match them to activations. Implement step, cosine, and warmup learning-rate schedules in PyTorch. Explain why gradient clipping is effectively required for RNNs and Transformers. Diagnose the most common training failures (NaN, plateau, overfitting) and apply first-line fixes. 1. ํ•ต์‹ฌ ์š”์•ฝ SGD : \(w \leftarro...
Read more »

OpenClaw to Hermes Migration (2/13) — What to Preserve, Partially Port, or Discard

← 1/13 Current Structure Inve… ๐Ÿ“š Series Index 3/13 What Moves to Hermes → A code review record classifying operational scripts into three tiers: preserve, partial-preserve, and discard. What This Post Covers An asset classification framework (preserve / partial-preserve / discard) for migrating a legacy agent system to a successor A concrete case applying the Strangler Fig + Subset Migration strategy to a memory pipeline Classification results evaluated across LOC, external dependencies, and replaceability axes A method for slimming down a bloated single file (1,310 LOC) using the migration as a natural entry point Problem Definition: Port Everything or Cut Deep? The OpenClaw inventory comprises multiple agents, multiple scheduler/daemon processes, and multiple operational scripts. When moving to the successor system, Hermes, the choice is not binary. A full port carries accumulated technical debt along with it; a minimal port discards hard-won domain logic. Code-revie...
Read more »

AI Agents I Built (5/7) — Building an Automated Blogger API Publishing System

← 4/7 My Life Organizer Agent ๐Ÿ“š Series Index 6/7 Dual → Designing a Markdown-Based Auto-Publish Pipeline with Blogger API v3 + OAuth 2.0 Key Summary Blogger API v3 + OAuth 2.0 enables a pipeline that converts Markdown files into publishable HTML posts blogger_publish.py handles the full flow — frontmatter parsing → body cleanup → HTML conversion → CSS injection → API post — in a single script For bulk publishing, quota management (delay, retry, TOC suppression) is the critical design concern Platform Selection Criteria API access is mandatory for AI agent-driven content publishing. A comparison of platforms: Platform API Cost AdSense Decision WordPress.com REST API Paid plan required Paid only Cost overhead Ghost REST API Self-hosted or paid Manual setup Ops overhead Blogger v3 API Free Native integration Adopted Blogger is free, exposes a REST API, and integrates natively with AdSense. For personal blog automation, this combination i...
Read more »