# JavaScript obfuscation for your framework

Which package to install for your stack, where it hooks, and what it writes.

Source: https://www.afterpack.dev/docs/frameworks

AfterPack obfuscates the JavaScript your bundler produced. Install the package for your stack and your normal build emits obfuscated output. For anything else, run [`npx afterpack@latest`](https://www.afterpack.dev/docs/cli) over the build output.

## Framework matrix

| Framework | Package | How you wire it | Where it runs | Build output |
|---|---|---|---|---|
| [Next.js](https://www.afterpack.dev/docs/frameworks/nextjs) | `@afterpack/next` | `withAfterpack(config)` | `runAfterProductionCompile`, inside `next build` | `.next/static/chunks`, `out/` |
| [Vite](https://www.afterpack.dev/docs/frameworks/vite) | `@afterpack/vite` | `afterpackVite()` in `plugins` | `generateBundle`, in the pipeline | `build.outDir` |
| [Webpack](https://www.afterpack.dev/docs/frameworks/webpack) | `@afterpack/webpack` | `new AfterpackWebpackPlugin()` | `compilation.hooks.processAssets`, in the pipeline | `output.path` |
| [Rollup](https://www.afterpack.dev/docs/frameworks/rollup) | `@afterpack/rollup` | `afterpackRollup()` in `plugins` | `generateBundle`, in the pipeline | `output.dir` or `output.file` |
| [esbuild](https://www.afterpack.dev/docs/frameworks/esbuild) | `@afterpack/esbuild` | `afterpackEsbuild()` in `plugins` | `onEnd`, after esbuild writes | `outdir` or `outfile` |
| [Astro](https://www.afterpack.dev/docs/frameworks/astro) | `@afterpack/astro` | `afterpack()` in `integrations` | `@afterpack/vite` inside Astro's Vite config | `dist/` |
| [Svelte](https://www.afterpack.dev/docs/frameworks/svelte) | `@afterpack/svelte` | `afterpackSvelte()` in `plugins` | `@afterpack/vite` | `dist/` |
| [SvelteKit](https://www.afterpack.dev/docs/frameworks/sveltekit) | `@afterpack/sveltekit` | `afterpackSveltekit()` after `sveltekit()` | `@afterpack/vite` | adapter output (`build/`) |
| [Vue 3](https://www.afterpack.dev/docs/frameworks/vue) | `@afterpack/vue` | `afterpackVue()` after `vue()` | `@afterpack/vite` | `dist/` |
| [Nuxt 3](https://www.afterpack.dev/docs/frameworks/nuxt) | `@afterpack/nuxt` | `modules: ["@afterpack/nuxt"]` | `@afterpack/vite` on Nuxt's Vite config | `.output/public/_nuxt/` |
| [Angular v17+](https://www.afterpack.dev/docs/frameworks/angular) | `@afterpack/angular` | `afterpackAngular()` in a postbuild script | a postbuild pass, after `ng build` writes | `dist/<app>/browser` |
| [Electron](https://www.afterpack.dev/docs/frameworks/electron) | `@afterpack/electron` | `withAfterpack(config)` around `electron-vite` | `@afterpack/vite` on all three legs, one seed | each leg's `out/` |
| [Parcel](https://www.afterpack.dev/docs/frameworks/parcel) | `@afterpack/parcel-optimizer` | an entry in `.parcelrc` `optimizers` | a Parcel 2 Optimizer, per bundle, in the pipeline | Parcel's `distDir` |

Astro, Svelte, SvelteKit, Vue, Nuxt and Angular install `@afterpack/vite`, or run the same shared pass, so you do not have to wire it by hand.

## No plugin

| Stack | Path |
|---|---|
| [Remix / React Router v7](https://www.afterpack.dev/docs/frameworks/remix) | Builds on Vite: use `@afterpack/vite`, or the CLI. |
| [Plain JS](https://www.afterpack.dev/docs/frameworks/plain) | No bundler to hook: `npx afterpack@latest <dir>`. |

## What every integration does

The defaults are on the [Quickstart](https://www.afterpack.dev/docs/quickstart#what-a-build-does-by-default). Beyond those, every plugin and the CLI share this behavior:

- **[Build mode](https://www.afterpack.dev/docs/config#build-mode) is detected.** `NODE_ENV=production` or `CI=true` selects production, which turns [source-map emission](https://www.afterpack.dev/docs/config#sourceMap-emitUrl) off. A shipped map reverses the obfuscation.
- **The same [artifacts](https://www.afterpack.dev/docs/cli#files).** One combined [`protectionMap.html`](https://www.afterpack.dev/docs/config#protectionMap-enabled) in the gitignored `.afterpack/`, and a `.map` next to each file when maps are on. The guard globs are appended to your `.gitignore`. [`build.backup`](https://www.afterpack.dev/docs/config#build-backup) takes two shapes: the CLI mirrors your originals into `.afterpack/backup/` on every run, and a plugin that obfuscates files on disk (`@afterpack/next`, `@afterpack/esbuild`, `@afterpack/angular`) writes a `.backup.<hash>` sibling beside the output when you ask for one. The in-pipeline plugins have no emitted file for a backup to sit beside, and warn when you ask.
- **One switch to skip a run.** [`build.autorun: false`](https://www.afterpack.dev/docs/config#build-autorun) keeps the plugin installed and skips the engine.
- **Directives are read from your source by the plugin** — on every integration that has a hook to
  read them from. [Angular](https://www.afterpack.dev/docs/frameworks/angular) refuses the key outright: its builder is
  sealed, so the pass only sees already-minified output.

## Next

- [Quickstart](https://www.afterpack.dev/docs/quickstart): pick a stack and build.
- [Builds and CI](https://www.afterpack.dev/docs/builds): seeds, dev versus production, promoting the same bytes.
- [Configuration](https://www.afterpack.dev/docs/config): every option and where to set it.