Extendable environment config with webpack with Typescript support


110.0.73 years ago3 years agoMinified + gzip package size for @f0rr0/webpack-env-ts in KB



Use custom environment configurations in front-end projects with type safety and hints.




  1. Install package

    npm i -S @f0rr0/webpack-env-ts
  2. Add a update-config step

       "scripts" : {
         "update-config": "node-config-ts"
  3. Create a config directory inside your project's root folder and add a default.json file. A typical folder structure looks as follows —

    └── config/
        └── default.json

    default.json should contain your application's configuration

  4. Create typings

    npm run update-config

    A new Config.d.ts will be generated automatically. This file could be ignored from git as it gets automatically generated based on the structure of default.json

  5. Add webpack plugin ```diff // webpack.config.js const webpack = require('webpack');

  • const WebpackEnvTsPlugin = require('@f0rr0/webpack-env-ts/plugin');

    module.exports = { ... plugins: [

  • new WebpackEnvTsPlugin({ verbose: true }) ], devServer: {

  • port: 8000,
  • /* reference variables from your configuration! */
  • port: WebpackEnvTsPlugin.Config.PORT } } ```
  1. Then access variables defined there from your app:
  // app.js
  import Config from '@f0rr0/webpack-env-ts'
  Config.PORT  // 8000


Refer to node-config-ts

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.