Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to setup environment files for dev, local and prod api urls, flag in NativeScript Vue?

The agenda is to use certain flags and a specific api base url for different modes say dev, local and prod in my NativeScript Vue app. Just like NativeScript angular has environment.[mode].ts files?

I've tried using .env.[mode] files, by referring to VueJs docs // https://cli.vuejs.org/guide/mode-and-env.html#environment-variables.com But this did not favour the scenario.

// Something like this of a config, module.exports = { NODE_ENV: "production", ROOT_API: "some api url" }

The config should be accessible like this process.env.ROOT_API throughout the app.

like image 889
Akash Potdar Avatar asked Oct 16 '25 02:10

Akash Potdar


1 Answers

Refer the Pass Environment Variables section in the docs.

You can also provide environmental variables to the Webpack build:

$ tns build android --bundle --env.development --env.property=value They can be accessed through the env object in the Webpack configuration:

// webpack.config.js
module.exports = env => {
    console.dir(env); // { development: true, property: 'value' }
}

You may update your DefinePlugin something like below,

new webpack.DefinePlugin({
            "global.TNS_WEBPACK": "true",
            "global.ENV_NAME": JSON.stringify(name),
            "global.ENV_PROPERTY": JSON.stringify(env.property),
            process: undefined,
        }),

Now using global.ENV_PROPERTY anywhere in your project should be replaced by actual value you pass in command line at compile time.

If you are familar with webpack, you may also configure the CopyWebpackPlugin to copy right environment file to your app instead of having variable for each configuration.

like image 98
Manoj Avatar answered Oct 18 '25 21:10

Manoj



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!