# TanStack Start ## Prerequisites Start with a [TanStack Start React app using Vite](https://tanstack.com/start/latest/docs/framework/react/overview) and a supported Node.js release. This guide uses Nitro to deploy a Node server. ## Install In your TanStack Start project, install Dotenvx. **npm** ```console $ npm install @dotenvx/dotenvx ``` **pnpm** ```console $ pnpm add @dotenvx/dotenvx ``` ## Encrypt Start with a secret value in the .env file at your project root, like: ```dotenv # .env HELLO="Secret" ``` Encrypt it with a single command. **npm** ```console $ npx dotenvx encrypt ◈ encrypted .env (022 0D8) via .env.keys ⛉ ``` **pnpm** ```console $ pnpm exec dotenvx encrypt ◈ encrypted .env (022 0D8) via .env.keys ⛉ ``` The values become ciphertext and only your private key can unlock them. ```dotenv # .env DOTENV_PUBLIC_KEY="0220d830351410598be484f43a7b07097e09851f50426832876e8b5815a1752990" HELLO="encrypted:BHLTACNJMr00nTG6yXpkCyWFKF/MY0ajN855tg3uVtKopTe2AGzSkQlcPd21pTOT3Ci8IKrdIg2TMZFoq1mDR6yb06QCRvqHXtpkZkAHYCEHfeWqqC8tMFovcYq5JS2uZSrC/qUGDA==" ``` ## Commit Commit your encrypted .env files with your code. It's safe. Now you can securely share secrets through git. ```console $ git add .env $ git commit -m "encrypt .env" ``` ## Ship Read your value inside a server function: ```tsx // src/routes/index.tsx import { createFileRoute } from '@tanstack/react-router' import { createServerFn } from '@tanstack/react-start' const getHello = createServerFn({ method: 'GET' }).handler(() => { return process.env.HELLO }) export const Route = createFileRoute('/')({ loader: () => getHello(), component: Home, }) function Home() { const hello = Route.useLoaderData() return

Hello {hello}

} ``` The handler runs on the server. Route loaders can also run during browser navigation, so read secrets inside the server function. HELLO is a demonstration value. Server function results reach the browser; use real secrets inside the handler without returning them. Update these scripts in package.json, keeping your other scripts: **package.json** ```json { "scripts": { "dev": "dotenvx run --strict -- vite --port 3000", "build": "vite build", "start": "dotenvx run -f .env.production --strict -- node .output/server/index.mjs" } } ``` Run your app: **npm** ```console $ npm run dev ⟐ injected env (2) from .env (022 0D8) via .env.keys ``` **pnpm** ```console $ pnpm dev ⟐ injected env (2) from .env (022 0D8) via .env.keys ``` Dotenvx loads and decrypts .env before TanStack Start starts. Your server function reads process.env when it handles a request. Visit [http://localhost:3000](http://localhost:3000) to see Hello Secret. Browser response at [http://localhost:3000](http://localhost:3000): ```text Hello Secret ``` [**Public browser variables** Alternative →](https://dotenvx.com/docs/tanstack-start/public-variables.md) ## Share Have teammates? Share access with Dotenvx Armor ⛨ Log in to Dotenvx. **npm** ```console $ npx dotenvx login ◉ logged in (username) ``` **pnpm** ```console $ pnpm exec dotenvx login ◉ logged in (username) ``` Create the Armored Key ⛨ **npm** ```console $ npx dotenvx armor up ⛨ armored .env (022 0D8) ``` **pnpm** ```console $ pnpm exec dotenvx armor up ⛨ armored .env (022 0D8) ``` Invite your teammate. **npm** ```console $ npx dotenvx armor invite ⛨ invited person@example.com to team ``` **pnpm** ```console $ pnpm exec dotenvx armor invite ⛨ invited person@example.com to team ``` Your teammate accepts the invitation, pulls the repository, installs dependencies, and logs in with dotenvx login. They can then run the app: **npm** ```console $ npm run dev ⟐ injected env (2) from .env (022 0D8) via Armor ⛨ ``` **pnpm** ```console $ pnpm dev ⟐ injected env (2) from .env (022 0D8) via Armor ⛨ ``` Visit [http://localhost:3000](http://localhost:3000) to see Hello Secret. Browser response at [http://localhost:3000](http://localhost:3000): ```text Hello Secret ``` [**Share a private key** Alternative →](https://dotenvx.com/docs/tanstack-start/share-private-key.md) ## Production Install [Nitro](https://tanstack.com/start/latest/docs/framework/react/guide/hosting#nitro) for Node deployment: **npm** ```console $ npm install -D nitro ``` **pnpm** ```console $ pnpm add -D nitro ``` Add Nitro to your existing Vite configuration, keeping your other plugins and options: ```ts // vite.config.ts import { defineConfig } from 'vite' import { tanstackStart } from '@tanstack/react-start/plugin/vite' import react from '@vitejs/plugin-react' import { nitro } from 'nitro/vite' export default defineConfig({ plugins: [ tanstackStart(), nitro({ preset: 'node-server' }), react(), ], }) ``` Create a .env.production file. ```dotenv # .env.production HELLO="Production" ``` Encrypt it with an Enclaved Key ◊ **npm** ```console $ npx dotenvx encrypt -f .env.production ◈ encrypted .env.production (022 0D8) via Armor Enclave ◊ ``` **pnpm** ```console $ pnpm exec dotenvx encrypt -f .env.production ◈ encrypted .env.production (022 0D8) via Armor Enclave ◊ ``` When prompted, choose **Enclaved**, select your deployment service, connection, and resource, and use DOTENV_PRIVATE_KEY_PRODUCTION as the private key name. Commit .env.production. ```console $ git add -f .env.production $ git commit -m "encrypt .env.production" ``` Install dependencies and build your app in your deployment build step: **npm** ```console $ npm install $ npm run build ``` **pnpm** ```console $ pnpm install $ pnpm build ``` This server-rendered example only needs its secret at runtime, so the build script does not decrypt it. Deploy .output, package.json, the dependencies needed to run Dotenvx, and the encrypted .env.production file to the selected resource. Keep .env.production at the project root and .env.keys on your local machine. Set NODE_ENV to production and PORT to the port your host expects (3000 by default). From the project root, run: **npm** ```console $ npm start ``` **pnpm** ```console $ pnpm start ``` Dotenvx loads and decrypts .env.production with your Enclaved Key ◊ Open your deployed app's URL to see Hello Production. Browser response at [https://your-app.example.com](https://your-app.example.com): ```text Hello Production ``` [**Build-time configuration** Alternative →](https://dotenvx.com/docs/tanstack-start/build-time.md) [**Deploy with a private key** Alternative →](https://dotenvx.com/docs/tanstack-start/deploy-private-key.md) For serverless or edge deployments, follow your platform’s [TanStack Start hosting setup](https://tanstack.com/start/latest/docs/framework/react/guide/hosting); the scripts above target a Node server. ## Conclusion You've encrypted your secrets, shared access with Armor, and loaded production secrets in TanStack Start with an Enclaved Key. Your secrets now travel with your code.