Scaffolding, Frameworks, and Build Tools: A Simple Guide to What They Are

In modern frontend development, we interact with "tools" every day: Vite, Next.js, Turbopack, create-vite, pnpm init... These concepts pop up endlessly, and it's easy to get confused.

Many people (especially beginners) often wonder: Next.js and React are both frameworks, so what's the difference? Are Vite and create-vite the same thing?

This article will serve as my learning notes to clearly break down the relationship between these three core concepts: Scaffolding, Framework, and Build Tool.

1. Scaffolding: Your "Project Starter Tool"

Everything begins with scaffolding.

Simply put, scaffolding is your "project starter tool." Its core task is to generate the basic directory structure, install core dependencies, and configure the build tools and development environment for you.

We can classify scaffolding into three types based on how "opinionated" they are and what they deliver:

• 1. Heavyweight (Dedicated Scaffolding)

  • Example: npx create-next-app
  • Characteristics: This type of tool builds a complete and dedicated setup for a specific framework. It generates the directories, routing, configuration, and sample code. It makes all the important decisions for you. You just need to "fill in the blanks."

• 2. Medium-weight (General-Purpose Scaffolding)

  • Example: pnpm create vite
  • Characteristics: The core of this tool is to deliver a build tool (like Vite). It sets up the build configuration and base directories, then lets you choose the framework you want (e.g., React, Vue, Svelte, Vanilla, etc.). It's more general-purpose and flexible.

• 3. Lightweight

  • Example: pnpm init
  • Characteristics: It does only one thing—it creates a package.json file. This merely declares "this is a project" and doesn't care about your framework or build tool.

Why Do We Need Scaffolding?

In a production environment, the vast majority of modern frontend projects (especially those using a framework) are created by scaffolding.

Note: Why not "all" projects? Many backend projects (Go, Python), ops scripts, or very simple pure HTML/CSS static pages might just start with pnpm init or even an empty folder. They don't rely on complex frontend scaffolding.

2. Framework: The "Soul" and "Main Body" of the Project

Projects created by scaffolding (aside from pnpm init) are essentially built around a framework.

The framework is the 'soul' and 'main body' of the project. It's the core dependency itself (e.g., the React, Vue, Next.js, or Hono code).

However, there's a crucial distinction between frameworks: their Degree of Constraint (Opinionated vs. Unopinionated).

• 1. Opinionated Frameworks

  • Examples: Next.js (frontend), Nest.js (backend)
  • Characteristics: These frameworks are highly "opinionated" (or "constrained"). They provide a complete set of "best practices" for everything from routing and data fetching to state management. Developers simply follow their conventions to fill in content. The development experience is unified, but flexibility is lower.

• 2. Unopinionated Frameworks (or Libraries)

  • Examples: Vue/React (frontend), Koa (backend)
  • Characteristics: These frameworks (or libraries) are "unopinionated." They only provide core functionality (like view rendering or middleware). They allow developers to make flexible adjustments during development, such as freely combining third-party libraries for routing, state management, etc.

create-next-app (heavyweight scaffolding) delivers an "opinionated framework." In contrast, create-vite (medium-weight scaffolding) typically lets you choose an "unopinionated framework" (like React) so you can build the rest of the ecosystem yourself.

3. Build Tool: The "Engine" and "Glue"

Before we explore its relationship with scaffolding, we must first clarify: what exactly is a build tool?

Simply put, the build tool is the project's "engine." It works behind the scenes to handle all the complex work of code "compilation" and "optimization." Its main responsibilities include:

1. Code Transformation: Converting modern code that browsers don't understand (like TypeScript, JSX, SCSS, Vue Single File Components) into standard code that browsers can read (JavaScript, CSS).
2. Dev Server: During development (pnpm dev), it provides a high-speed development server and enables Hot Module Replacement (HMR), allowing us to see code changes in the browser instantly. This greatly improves the development experience (DX).
3. Bundling & Optimization: For production (pnpm build), it bundles all our code modules, minifies them, and performs "tree-shaking" to remove unused code. It ultimately generates the most efficient, smallest static files for deployment.

Vite, Webpack, esbuild, and Turbopack are all top contenders in this role.

As you can see, configuring these build tools and frameworks is extremely complex. The core value of scaffolding is to save developers from worrying about this configuration by providing a set of "best practices."

Therefore, the scaffolding you choose almost always determines the build tool you will use.

Key Point: Choosing a scaffolder is equivalent to choosing the build tool it's bundled with.

This naturally leads to the two most common patterns we see when creating projects:

• Pattern 1: Scaffolding Name = Build Tool Name

  • Example: pnpm create vite@latest
  • Logic: "Hello, I need to start a project centered around the Vite build tool. Please start one for me (and by the way, ask me which framework to use)."

• Pattern 2: Scaffolding Name = Framework Name

  • Example: npx create-next-app@latest
  • Logic: "Hello, I need the Next.js opinionated framework. Please install everything I need (including its built-in build tool, like Turbopack or Webpack)."

4. The Trend: Why pnpm create Instead of npm install -g

Finally, let's talk about the trend in how we use scaffolding.

• The Old Way (Global Install):

  1. npm install -g @vue/cli (First, install globally)
  2. vue create my-project (Use your locally installed version)
  3. The Problem: If you installed @vue/cli six months ago, you're now creating a six-month-old template. You have to constantly remember to npm update -g, which is a hassle.

• The New Way (Online Invocation):

  1. pnpm create vue@latest (or npx create-vue@latest)
  2. How it works: pnpm create (which is like pnpm dlx) or npx temporarily downloads the create-vue package from the npm registry, runs it, and then discards it.
  3. The Benefit: This 100% guarantees that you are using the latest version of the scaffolding template every time you create a project.

Conclusion

I hope this summary helps you fully understand the relationship between these three concepts:

1. Framework: The "soul" and "main body" of the project.
2. Build Tool: The "engine" that drives the project.
3. Scaffolding: The "launcher" that assembles the "framework" and "build tool" together according to "best practices" and delivers them to you.

The next time you type pnpm create ... in your terminal, you'll have a much clearer picture of what's happening behind the scenes.

---

This article is a summary of my notes from my learning process. As English is not my first language, if there are any omissions or errors, I warmly welcome feedback and corrections in the comments!