# एक Remix app को obfuscate करें

@afterpack/remix नाम का कोई package नहीं है। Remix, Vite से build होता है, इसलिए @afterpack/vite इस्तेमाल करें, या build output पर CLI चलाएँ।

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

> **Remix के लिए अलग package नहीं**
>
> AfterPack `@afterpack/remix` publish नहीं करता। Remix v2 और React Router v7, Vite से build होते हैं, इसलिए [Vite plugin](https://www.afterpack.dev/hi/docs/frameworks/vite) इसे जोड़ने का स्वाभाविक तरीका है, और [CLI](https://www.afterpack.dev/hi/docs/cli) हर हाल में output पर काम करता है। पूरी matrix [Frameworks](https://www.afterpack.dev/hi/docs/frameworks) में है।

## Install

Remix का अपना plugin आपकी `vite.config.ts` के अंदर चलता है, इसलिए `@afterpack/vite` उसी `plugins` array में, उसके बाद आता है:

```bash
npm install -D @afterpack/vite
```

```ts
// vite.config.ts
import { defineConfig } from "vite";
import { vitePlugin as remix } from "@remix-run/dev";
import { afterpackVite } from "@afterpack/vite";

export default defineConfig({
  plugins: [remix(), afterpackVite()],
});
```

या package को छोड़ दें और उसकी जगह build output पर [CLI](https://www.afterpack.dev/hi/docs/cli) चलाएँ।

## Build

Plugin `generateBundle` पर चलता है और Vite के bundle लिखने से पहले उसके हर JavaScript chunk को obfuscate करता है। Remix client और server legs को अलग-अलग Vite builds के रूप में build करता है, इसलिए plugin हर leg के लिए एक बार चलता है, केवल उस leg के bundle पर। अगर दोनों legs साथ ship होते हैं और आप चाहते हैं कि वे एक ही seed से build हों, तो एक [`seed`](https://www.afterpack.dev/hi/docs/config#seed) pin करें (`seed: "git"` सबसे आसान है)। [Builds और CI](https://www.afterpack.dev/hi/docs/builds) इस trade-off को कवर करता है।

CLI से build करना भी इसी तरह काम करता है: पहले build करें, फिर AfterPack को हर output directory पर point करें। Remix की Vite build आमतौर पर `build/client` और `build/server` लिखती है:

```bash
npx afterpack@latest build/client --seed=git
```

Directory का नाम [path argument](https://www.afterpack.dev/hi/docs/cli#usage) के रूप में दें: न दें, तो CLI `dist/`, `build/`, `out/`, `.output/` और `.next/` में से सबसे नई चुनता है, जो आप नहीं चाहते जब client और server builds अलग-अलग obfuscate किए जाते हैं। यह traverse करने के लिए एक directory लेता है, या एक अकेली `.js`/`.mjs`/`.cjs` फ़ाइल। हर उस directory के लिए इसे एक बार चलाएँ जिसे आप obfuscate करना चाहते हैं, और जब दोनों साथ ship हों तो दोनों पर एक ही [`--seed`](https://www.afterpack.dev/hi/docs/config#seed) रखें। दोनों रास्ते एक ही shared pass को call करते हैं, इसलिए बाकी सब कुछ ([preset ladder](https://www.afterpack.dev/hi/docs/presets), [fail-closed व्यवहार](https://www.afterpack.dev/hi/docs/diagnostics#fail-closed-no-exceptions), [artifacts](https://www.afterpack.dev/hi/docs/cli#files)) एक जैसा है।

## Verify

[Protection Map](https://www.afterpack.dev/hi/docs/protection-map) डिफ़ॉल्ट रूप से तब लिखा जाता है जब Vite source map emit करे और build CI (`CI=true` या `CI=1`) में न चल रही हो; [build mode](https://www.afterpack.dev/hi/docs/config#build-mode) इसे बंद नहीं करता। जब तक `build.sourcemap` सेट न हो, Vite कोई source map emit नहीं करता, इसलिए जिस build को आप जाँचना चाहते हैं, उसे source maps चालू करके build करें, फिर gitignored `.afterpack/protectionMap.html` खोलें। इसमें आपका पूरा source होता है। इसे कभी commit या serve न करें।

## Options

हर [configuration key](https://www.afterpack.dev/hi/docs/config) इस plugin के ज़रिए वैसे ही काम करती है जैसे [Vite पेज](https://www.afterpack.dev/hi/docs/frameworks/vite#options) पर, directive capture सहित; हर key के लिए [Configuration](https://www.afterpack.dev/hi/docs/config) देखें।

## Directives

Directives एक [Pro](https://www.afterpack.dev/hi/docs/pro) feature हैं। [Free build](https://www.afterpack.dev/hi/docs/directives#free-builds) में protection बढ़ाने वाला directive build को `DIAG_PRO_DIRECTIVE_REQUIRES_KEY` के साथ रोक देता है।

Directives को plugin आपके source से पढ़ता है। CLI कोई directive नहीं पढ़ता। देखें [Directives](https://www.afterpack.dev/hi/docs/directives)।

## Edge cases

- **Fail-closed, कोई override नहीं।** एक `error`/`critical` [diagnostic](https://www.afterpack.dev/hi/docs/diagnostics), एक खाली result, या ऐसी फ़ाइल जिसे engine obfuscate नहीं कर सका, [build को fail कर देती है](https://www.afterpack.dev/hi/docs/diagnostics#exit-codes)।
- **Server output बस JavaScript है।** AfterPack उस directory में मिलने वाली हर `.js` को obfuscate करता है जिस पर आप उसे point करते हैं।

## आगे

- [Frameworks](https://www.afterpack.dev/hi/docs/frameworks): पूरी matrix।
- [Vite](https://www.afterpack.dev/hi/docs/frameworks/vite): वह plugin जिसकी यह पेज सिफ़ारिश करता है।
- [CLI reference](https://www.afterpack.dev/hi/docs/cli#flags): flags की पूरी सूची।
- [Configuration](https://www.afterpack.dev/hi/docs/config): हर विकल्प, और कौन-सी surface उसे सेट कर सकती है।
- [Presets](https://www.afterpack.dev/hi/docs/presets): वह ladder जिसके विरुद्ध `preset` resolve होता है।
- [Builds और CI](https://www.afterpack.dev/hi/docs/builds): seeds, dev बनाम prod, वही bytes promote करना।
- [Protection Map](https://www.afterpack.dev/hi/docs/protection-map): रिपोर्ट पढ़ना।