Quickstart › npm

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.js 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.

src/pages/index.astro

---
---

<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.js scripts with dotenvx. This will inject environment variables ahead of Astro.js.

package.json

...
"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

$ npm run dev

> dev
> dotenvx run -- astro dev

[[email protected]] injecting env (1) from .env
┃ Local    https://localhost:4321/

Express

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

Install dotenvx as an npm module.

npm install express @dotenvx/dotenvx --save

Create a simple Hello World application.

index.js

// 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.

package.json

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

Run it.

npm start

$ npm start

> start
> dotenvx run -- node index.js

[[email protected]] injecting env (1) from .env
Server running on port:3000

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

Create a next.js application.

npx create-next-app@latest --example hello-world .

Install dotenvx as an npm module.

npm install @dotenvx/dotenvx --save

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

app/page.tsx

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

Preload Next.js scripts with dotenvx. This will inject environment variables ahead of Next.js.

package.json

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

Run it.

npm run dev

$ npm run dev

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

[[email protected]] injecting env (1) from .env
   ▲ Next.js 14.0.4 (turbo)
   - Local:        https://localhost:3000

Remix

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

Create a remix application.

npx create-remix@latest

Install dotenvx as an npm module.

npm install @dotenvx/dotenvx --save

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

app/routes/_index.tsx

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, // HELLO="World" in .env file
    },
  });
}

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

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

Preload Remix.js scripts with dotenvx. This will inject environment variables ahead of Remix.js.

package.json

...
"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

$ npm run dev

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

[[email protected]] injecting env (1) from .env
[remix-serve] https://localhost:3000 (https://192.168.1.53:3000)