@socheatsok78/dotenv-env

Enhance dotenv with typescript declaration file.
Work in both JavaScript and TypeScript project with minimal configurations.

Installation

npm install @socheatsok78/dotenv-env
# or
yarn add @socheatsok78/dotenv-env

Usage

Simply add a tsconfig.json or jsconfig.json to indicates that the directory is the root of a TypeScript or JavaScript project.

See https://www.typescriptlang.org/docs/handbook/tsconfig-json.html

Here a minimal configurations:

Example jsconfig.json:

{
  "include": [
    "types/**/*"
  ],
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    "moduleResolution": "node",
    "esModuleInterop": false,
    "baseUrl": ".",
    "paths": {
      //
    }
  }
}

Example tsconfig.json:

{
  "include": [
    "types/**/*"
  ],
  "compilerOptions": {
    "target": "es5",
    "strict": true,
    "module": "es2015",
    "moduleResolution": "node"
  }
}

Using with node

There is no other configuration needed for working with nodejs.

// types/dotenv.d.ts
import { NodeEnvironment } from '@socheatsok78/dotenv-env'

declare module "@socheatsok78/dotenv-env" {
  interface NodeEnvironment {
    /**
     * This will be one of "development", "production" or "test" depending on the mode the app is running in
     */
    NODE_ENV: string
  }
}

Then within your project e.g. index.js

// main.js
import { env } from '@socheatsok78/dotenv-env'

const mode = env(NODE_ENV, 'development')

Using with browser

For this to work in the browser you'll need to use bundler such as webpack, rollup or others for this to work.

Here an example usage with vuejs project. This will work out-of-the-box since @vue/cli uses webpack as its bundler.

First, update your .env file.

# .env
NODE_ENV=development

VUE_APP_MY_ENV_VARIABLE=value
VUE_APP_ANOTHER_VARIABLE=value

Create a new typescript's type declaration dotenv.d.ts in types folder.

// types/dotenv.d.ts
import { NodeEnvironment } from '@socheatsok78/dotenv-env'

declare module "@socheatsok78/dotenv-env" {
  interface NodeEnvironment {
    /**
     * This will be one of "development", "production" or "test" depending on the mode the app is running in
     */
    NODE_ENV: string

    /**
     * This corresponds to the publicPath option in `vue.config.js` and is the base path your app is deployed at
     */
    BASE_URL: string

    VUE_APP_MY_ENV_VARIABLE: string
    VUE_APP_ANOTHER_VARIABLE: string
  }
}

Then within your project e.g. main.js

// main.js
import { env } from '@socheatsok78/dotenv-env'

const MY_ENV_VARIABLE = env(VUE_APP_MY_ENV_VARIABLE, 'default')

Preview

Licensed

Licensed under MIT License.