CODEWITHSUNDEEP
javascriptangularjsenvironment-variableswebpack
Daniel Bogart
Daniel Bogart

Reputation: 1295

Accessing env variables inside webpack AngularJS project

I have an AngularJS project that uses webpack for bundling, serving, and building - no task runner such as bower or gulp is used. I'd like to be able to set environment variables for things such as the REST API endpoints that I'll be consuming in local versus production, and then access those within my actual AngularJS project files, particularly inside controllers. What's the best way to define and pass these env variables into the project?

Upvotes: 4

Views: 2770

Answers (1)

Daniel Bogart
Daniel Bogart

Reputation: 1295

The solution was to use Webpack's definePlugin to define free/global variables:

webpack.github.io/docs/list-of-plugins.html#defineplugin

new webpack.DefinePlugin({
    VERSION: JSON.stringify("5fa3b9"),
    BROWSER_SUPPORTS_HTML5: true,
    TWO: "1+1",
    "typeof window": JSON.stringify("object")
})

Upvotes: 7

Related Questions