System environment variables ignored by Nuxt - javascript

My Nuxt project uses system environment variables to set client ids, secrets, urls, etc...
An example is in my nuxt.config.js where I set several properties with the following formula:
{
something: process.env.SOMETHING || 'something_for_dev'
}
Nuxt dev version is working fine because looks after the process.env.SOMETHING and correctly use something_for_dev.
Nuxt on staging has its own configuration on Azure and the SOMETHING env var is correctly set but suddenly it still continue using something_for_dev...
What should I do to let Nuxt use the sys env vars I set on my Server rather than the default used for dev? Thanks

Env variables are set build time, not runtime. So it will be the env variables that set during your build, which seems you do on your dev machine.
So you can either build with proper env variables or use nuxt-env module, which allows runtime variables, but keep in mind that it wont allow webpack to optimize dead code and environment variables used in nuxt-env are exposed client side, so if you store secrets use the secret config option

In addition to Aldarund comment above you could build a proper env variables in nuxt by following:
Use cross-env: npm install cross-env
In your project add a folder named environment
and under the folder you could have different environment (e.g. development, staging, production)
Your environment configs will have your baseUrl and other configs, let's say for development you could have your localhost then for the staging or production you could have your API_URL
defaults.json \\development
defaults.prod.json \\production
In nuxt.config.ts build > extend configure your different environment
This will replace defaults.json depending on which environment we will run our script in package.json.
In package.json configure your script to what environment will be run (e.g npm run start will use NODE_ENV=development which will use the defaults.json with baseUrl: http://localhost:3000 and npm run build will use defaults.prod.json with baseUrl: http://www.API_URL.com and other configs
For more detail you could see cross-env

Related

React - Env variables in development AND production

As I've read here, React does support environment variables as long as they are prefixed with REACT_APP_. However, I need them in development and production. How can I get this support?
Note: I'm using Next.js
I'm sure this has been answered before, but it says it right on what you linked. Create 2 files, .env.development and .env.production in the root of your project (same level as package.json, .gitignore, etc). Whichever script you run determines which one gets used, in accordance with the hierarchy listed below.
.env: Default.
.env.local: Local overrides. This file is loaded for all environments except test.
.env.development, .env.test, .env.production: Environment-specific settings.
.env.development.local, .env.test.local, .env.production.local: Local overrides of environment-specific settings.
Files on the left have more priority than files on the right:
npm start: .env.development.local, .env.development, .env.local, .env
npm run build: .env.production.local, .env.production, .env.local, .env
npm test: .env.test.local, .env.test, .env (note .env.local is missing)

configure environments with restify

I'm familiar with gulp and the ability to have a distinct configuration for each environment within a single configuration file. That way running gulp dev would allow you to start your server with the configuration of your dev environment, gulp staging for your staging and gulp prod fro production.
I'm now looking at restify and am trying to determine if something similar can be done with it. I've tried researching this online and haven't found anything meaningful. Is this possible and if so could somebody provide an example?
You can use dotenv package to load different configuration file. For example
.env.dev For Development environment
.env.prod for Production environment
.env.test for Testing environment
you can import file according to NODE_ENV var
or you can simply add all configuration variable in one file for example
.conf.env and import it.

How can I know the Vue.js environment is development or production?

How can I know the Vue.js environment is development or production ?
In my AxiosConfig's config.js:
AxiosConfig:{
baseURL:dev.NODE_ENV.BASE_API,
responseType: "json",
withCredentials: true,
...
You see the BASE_API in there:
there is the definition of dev.NODE_ENV:
dev.NODE_ENV = {
BASE_API: 'http://localhost:8000',
APP_ORIGIN: 'http://103.20.32.16:8000/'
}
How can I check the environment is development or production?
then in the AxiosConfig config.js I can use the judgement, when npm run build I will not need to change thebaseURL` then.
Take a look at process.env.NODE_ENV and test for development or production. You might want to replace your dev.NODE_ENV.BASE_API with something like process.env.NODE_ENV.BASE_API.
Further to this, if you're using the vue-cli-service to bootstrap and build your app, you can use .env files and switch the baseURL using those, depending upon your environment. You can find out about it in more detail here: https://cli.vuejs.org/guide/mode-and-env.html
as normally when you run the command npm run dev then it will be a webpack development server and if you run npm run build then it will be for production use and it will make a minified version of it in the dist folder

How to create new environments with create-react-app?

I am using react-scripts v2 (beta) and I have read the documentation here.
We need to create many environments.
We want to store env file under folder config/env.
We might use javascript file in config/env/staging.js because .env seems to be only for root directory.
We have real environment :
default
development
staging
preproduction
production
We expect the default environment to be a default config under version control in config/env/default.js, it must be the default configuration used when doing npm start
We expect the user to be able to override with a file with no version control. (something like config/env/default.local.js
Basically that can be reduced to two issues :
Is it possible to relocate env location folder?
How can we create and select a new environment on npm start/build?
without ejecting.
Just copy the environment file to .env before starting / building. You can even put .env in .gitignore that way
"start": "cp $ENV .env && react-scripts start"
Then run it:
ENV=config/staging/.env npm start
There are lots of ways of doing what you want without ejecting, since it's all preprocessing (before your app starts / builds).

Two ways to Handle Environment Variables with Webpack in production server after a continuous integration

We're trying to run a ReactJs in production using Webpack as my build tool. For this purpose we use DefinePlugin to set environment variables.
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('development'),
'process.env.API_URL': JSON.stringify("http://localhost:7852/"),
}),
However for security reasons I don't want to have sensible information in my source code, as example we don't want to put api keys or private urls in webpack configuration. So we are planning to store that values in the environment variables of the production server.
We do the Webpack build in a continuous integration server (Docker Hub). We want to compile in the Docker Servers but we don't want to put the settings in the Docker servers, we only want the settings in the production server. However when we set these values in my production server the result is undefined. Is there a way to set some configuration variables in Webpack to be handle during transpilation (there are several methods) and let the the production server handle the others? Any advice? Thanks in advance.
I've just run into the exact same problem. What I've found is at the time when webpack is run, is where the environment needs to be set in order to be visible by the application. This means that only what's on your CI server (which builds a docker image) will be available to webpack and consequently your app.
Unless your app routes requests through it's server, where the environment is available, to an api server, I couldn't think of a decent solution. What I've chosen to do is set the environment during my TeamCity build and have a separate build for each test and production servers which would create a separate docker image but using the same dockerfile.
You can use different webpacks for different environments, and move the sensitive configuration to environment variables. Your app can only see environment variables in a container if they are defined in the Dockerfile using ENV. If you change your app to read all sensitive information from environment variables, and have matching ENV instructions in your Dockerfile, you can specify them at runtime when you start the container.
E.g. in webpack:
new webpack.DefinePlugin({
'process.env.API_KEY': JSON.stringify(process.env.API_KEY || 'API_KEY environment variable not defined'),
...
In your Dockerfile add ENV API_KEY and when you run your container, you can pass the environment variables with -e: docker run -e API_KEY=ba3d4db....
Better still, if you have multiple sensitive values, define them in the Dockerfile and at run time pass them in an environment file using --env-file:
> cat Dockerfile
FROM ubuntu
ENV API_KEY \
ANOTHER_SECRET
> cat env.file
API_KEY=ab3da3bda4d4a4c4c4
ANOTHER_SECRET=shhh!
> docker run --env-file env.file -it temp bash
root#545d5945ab1b:/# echo $API_KEY
ab3da3bda4d4a4c4c4
root#545d5945ab1b:/# echo $ANOTHER_SECRET
shhh!
Then you can have the same Docker config for every environment, with different contents in env.file, and secure access to the file.

Categories