/ Search - type / Modes - type M Star on GitHub - 5.7k

Docs

npm

Use dotenvx with npm.

Find code examples on GitHub for these framework guides.

Astro

Use dotenvx (as an npm module) with astro.js.

Create an Astro application.

npm create astro@latest

Install dotenvx as an npm module.

npm install @dotenvx/dotenvx --save

Edit src/pages/index.astro to include process.env.HELLO.

---
---

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
        <meta name="viewport" content="width=device-width" />
        <meta name="generator" content={Astro.generator} />
        <title>Astro</title>
    </head>
    <body>
        <h1>Hello {import.meta.env.HELLO}</h1>
    </body>
</html>

Preload Astro scripts with dotenvx. This injects environment variables ahead of Astro.

...
"scripts": {
  "dev": "dotenvx run -- astro dev",
  "start": "dotenvx run -- astro dev",
  "build": "astro check && dotenvx run -- astro build",
  "preview": "dotenvx run -- astro preview",
  "astro": "astro"
},

Run it.

$ npm run dev

> dev
> dotenvx run -- astro dev

⟐ injected env (1) from .env
┃ Local    http://localhost:4321/

Express

Use dotenvx (as an npm module) with express.js.

npm install express @dotenvx/dotenvx --save

Create a simple Hello World application.

// index.js
const express = require('express')
const app = express()
const PORT = process.env.PORT || 3000

app.get('/', (req, res) => {
  res.send(`Hello ${process.env.HELLO || ''}`)
})

app.listen(PORT, () => {
  console.log(`Server running on port:${PORT}`)
})

Add dotenvx run -- to your start script.

{
  "dependencies": {
    "@dotenvx/dotenvx": "^1.48.4",
    "express": "^4.18.2"
  },
  "scripts": {
    "start": "dotenvx run -- node index.js"
  }
}

Run it.

$ npm start

> start
> dotenvx run -- node index.js

⟐ injected env (1) from .env
Server running on port:3000

Next

Use dotenvx (as an npm module) with next.js.

npx create-next-app@latest --example hello-world .
npm install @dotenvx/dotenvx --save

Edit app/page.tsx to include process.env.HELLO.

export default function Page() {
  return <h1>Hello {process.env.HELLO}</h1>;
}

Preload Next.js scripts with dotenvx.

...
"scripts": {
  "dev": "dotenvx run -- next dev --turbo",
  "build": "dotenvx run -- next build",
  "start": "dotenvx run -- next start"
},

Run it.

$ npm run dev

> dev
> dotenvx run -- next dev --turbo

⟐ injected env (1) from .env
   ▲ Next.js 14.0.4 (turbo)
   - Local:        http://localhost:3000

Remix

Use dotenvx (as an npm module) with remix.js.

npx create-remix@latest
npm install @dotenvx/dotenvx --save

Edit app/routes/_index.tsx to include process.env.HELLO using a Remix loader.

import type { V2_MetaFunction } from "@remix-run/node";
import { json } from "@remix-run/node";
import { useLoaderData } from "@remix-run/react";

export const meta: V2_MetaFunction = () => {
  return [
    { title: "New Remix App" },
    { name: "description", content: "Welcome to Remix!" },
  ];
};

export async function loader() {
  return json({
    ENV: {
      HELLO: process.env.HELLO,
    },
  });
}

export default function Index() {
  const data = useLoaderData()

  return (
    <div>
      Hello {data.ENV.HELLO}.
    </div>
  );
}

Preload Remix scripts with dotenvx.

...
"scripts": {
  "build": "dotenvx run -- remix build",
  "dev": "dotenvx run -- remix dev --manual",
  "lint": "eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .",
  "start": "dotenvx run -- remix-serve ./build/index.js",
  "typecheck": "tsc"
},

Run it.

$ npm run dev

> dev
> dotenvx run -- remix dev --manual

⟐ injected env (1) from .env
[remix-serve] http://localhost:3000