Quickstart › npm

npm

Use dotenvx with npm

The below framework guides all assume the presence of a .env file containing HELLO=World. Find code examples on GitHub.

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    http://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:        http://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] http://localhost:3000 (http://192.168.1.53:3000)