Nuxt environment variables in nuxt.config.ts - vue.js

nuxt.config.ts:
env: {
cmsUrl: process.env.CMS_URL || 'http://localhost:1337'
}
I'm setting CMS_URL as system variable on a production/staging mode, otherwise it would use a localhost in a dev mode.
However if i reuse this env variable inside nuxt.config.ts:
axios: {
baseURL: process.env.cmsUrl
}
My NUXT app won't even start, saying ECONNREFUSED 127.0.0.1:80, i assume thats because env variable is not working.

The problem was in the stage, where i was applying environment variables, i was applying them in a docker-compose file, with npm run start command, and i built image one stage before with npm run build, that's why my env variables wasn't picked at all.

Related

environmental variable not being read (NPM)

So I have a project running with nodejs, and an env file using multiple variables. For some reason one of these does not seem to be working though.
Here the code should be printing out the port and namespace/ip of that the env file should have specified
`==> API is running on port ${process.env.API_PORT}`,
'\n',
`==> Send requests to http://${process.env.API_HOST}:${process.env.API_PORT}`
But for some reason it is only finding the host, as this is what the console actually outputs
==> API is running on port undefined
==> Send requests to http://127.0.0.1:undefined
Here is the .env file entries for these two variables
API_PORT=8080
API_HOST=127.0.0.1
The only guidance I have found so far was that I had to include require('dotenv').config(); but this did not resolve anything either.
What could be blocking the API_PORT variable?
UPDATE: So it seems when I host the server using npm, it works, but when I try to run code coverage over it using chai is when this error pops up (still npm run test).
Fast solution at the moment
in your package.json
Put your envs in your scripts
"scripts": {
"dev": "API_PORT=8080 API_HOST=127.0.0.1 node index.js",
"test": "your script here"
},
npm run dev should work fine.

Quasar: build with development mode

I have in quasar.conf.js env settings with something like this:
env: {
API_URL: ctx.dev
? 'https://dev.apis.test.io/v2/'
: 'https://apis.test.io/v2/'
}
When I run app on local host dev api is used, when I run quasar build production api is used. So that is working.
How can I build with dev env settings?
For example on plain Vue yarn build --mode development works just fine. How can I do the same thing with quasar?
I tried:
quasar build --mode development
quasar build --mode dev
quasar build --development
quasar build --dev
quasar build --debug
and I always get production link in dist folder files
the answer above is not really wrong. You can do something like this:
create multiple .env files, for me best option is:
.env.local
.env.development
.env.production
inside quasar.conf.js use dotenv library:
const env = require('dotenv').config({ path: `.env.${process.env.ENV_FILE.toLowerCase()}` }).parsed
then put vars to quasar env:
build: {
vueRouterMode: 'history', // available values: 'hash', 'history'
env: {
...env
},
then run build for production or stage or run dev server with command:
ENV_FILE=development quasar build
For me it works like a charm, because i have more than two envs
try run
MY_API=api.com quasar build

npm run serve on vue does not serve to localhost

I am trying to get a grasp on Vue, because frameworks, frameworks, frameworks. I installed vue with npm using npm install -g #vue/cli which worked, then i made my project folder using vue create myproj, choosing all default options. When I tried to run with npm run serve this was my output:
App running at:
- Local: http://x86_64-conda_cos6-linux-gnu:8080/
- Network: http://x86_64-conda_cos6-linux-gnu:8080/
Which doesn't connect in browser. As far as I understand, it should have localhost or 127.0.0.1 followed by the port numbers. The port is not being used by anything else. I checked my hosts:
(base) alan#skynet:~/dev/myproj$ cat /etc/hosts
127.0.0.1 localhost
127.0.1.1 skynet
I followed the steps in this similar question: https://forum.vuejs.org/t/npm-run-serve-is-not-defaulting-to-localhost/88007/13 and added a vue.config.js with the following:
module.exports = {
devServer: {
host: '127.0.0.1',
port: 8080,
public: 'localhost:8080',
}
}
but it only changed my network. I have not changed my package.json or any of the default files that come with vue create. I even deleted the directory, uninstalled and reinstalled vue in the same location and that did not resolve. This other SO thread Not running at local when "npm run serve" command in vue project was also similar, but I do not have a .bash_profile and I'm not sure if I can just throw in HOST="localhost" anywhere into my .profile file, as I'm relatively new to Linux and don't want to break things. I'm just trying to get the initial setup off the ground so I can move on to actually doing vue stuff.
I'm not sure if what I did worked, but it now works. See https://github.com/vuejs/vue-cli/issues/4081#issuecomment-694904714

Vue can I set process.env.NODE_ENV

Concerning modes and environmental variables as documented here
https://cli.vuejs.org/guide/mode-and-env.html#modes
I was rather confused why I can't set the following variable to mock for example. As the document seems to say this will be the mode that you pass in!
process.env.NODE_ENV
I have create the following server-mock command string in my package.json as follows
"serve-mock": "vue-cli-service serve --mode mock"
But when I run
npm run server-mock
The process.env.NODE_ENV is still set to development and not to mock. Am I supposed to set this in the .env.mock file? I presumed that it would be set based on the mode that was passed in as mock?
Vue CLI's serve command uses the mode option to load environment variables from mode-specific .env files. It also sets the NODE_ENV to one of the three standard modes (test, development, or production) only if not already set. However, if the specified mode is not standard (as is the case with mock), Vue CLI defaults to development.
So, you could set NODE_ENV=mock inside .env.mock to bypass the NODE_ENV setting mentioned above.
Alternatively, you could set NODE_ENV on the NPM script's command line in *nix shells:
{
"scripts": {
"serve-mock": "NODE_ENV=mock vue-cli-service serve"
}
}
For a cross-platform solution (including Windows), you could install cross-env (as recommended in comments), and edit your NPM script as follows:
{
"scripts": {
"serve-mock": "cross-env NODE_ENV=mock vue-cli-service serve"
}
}

environment variables not visible in production

I've built a Vue CLI project with an .env.development.local and .env.production.local file.
When I run npm run serve it loads the variables fine. When I run npm run build and serve the dist directory, it doesn't load the variables.
I've made sure the variables are prefixed with 'VUE_APP_' and when I console.log process.env I get just {NODE_ENV: "production", BASE_URL: "/"}
How can I get the environment variables to be read in production?
Edit: I've included one of my .env files as an example:
NODE_ENV=production
VUE_APP_API_URL=http://10.0.0.28:4323/api
VUE_APP_HOME_URL=http://localhost:9098