I want to print an env variable to console.
I added following veriables in parameters of Serverless app console
in dev: "TESTNAME" : "dev test name"
in prod: "TESTNAME" : "prod test name"
And in js file in my React.js project, I tried
console.log(process.env.TESTNAME);
But it returns nothing.
How come it doesn't work?
Adding additional .env files like
.env.dev
.env.prod
solved.
Related
I'm using VueJs 3 with Vite and Cypress.
In my app I have an environment variable to define my URL:
const url = import.meta.env.VITE_URL
My goal is to replace this VITE_URL in Cypress. I've tried to create a cypress.env.json file in which I wrote:
{
"VITE_URL": "https://...",
}
but it's not working. I've also tried with CYPRESS_URL or CYPRESS_VITE_URL, but I get the same result. Any idea?
Ok, I solved it. I created a .env.testing file that I use by specifying --mode testing in the npm command that launches cypress.
This env.testing has the properties defined like:
'VITE_URL="http://..."'
If you've declared the value in a cypress.env.json file, you can reference it in code with `Cypress.env('varName');
Cypress.env('VITE_URL');
I am trying to use the environment variable in my component. But it works initially when i use the variable, but then it throws an error.
Component.vue
website: 'testing-hard-reality'
The code works absolutely fine when it is hardcoded, shown above. If the environment variable is used rather the hardcode i get an error
.env.local
VUE_APP_WEB_SITE: 'testing-hard-reality'
In the component the variable is used as:
website: process.env.VUE_APP_WEB_SITE
In my console i am getting the error as
[Vue warn]: Error in v-on handler: "Error: WebSite name is not set"
Please do tell me what to do.
Create in the same level of src folder a file
.env.development.local is used for working locally
.env.production.local is used for production
Add in the file your env variable
VUE_APP_MY_VARIABLE_NAME = my-value-here
VUE_APP_* part is important because all env variables in vue project needs to start with this prefix.
Now to get access on this value do:
process.env.VUE_APP_MY_VARIABLE_NAME
IMPORTANT STEP
Whenever you modify the .env files you have to stop your server and start it again in order to get the env changes.
I guess you are using vue-cli to build your vue project. In the vue-cli docs, I found the grammar of env.local would be
VUE_APP_WEB_SITE=testing-hard-reality
not your demo: VUE_APP_WEB_SITE: 'testing-hard-reality'
ref: https://cli.vuejs.org/guide/mode-and-env.html#environment-variables
Hello I'm using VueJS 2 and I have multiple .env in my project.
My app have .env for each company to select the company configuration (skin color / files...)
Actually I have all my .env in the root folder:
.env.company1-dev
.env.company1-staging
.env.company1-prod
.env.company2-dev
.env.company2-staging
.env.company2-prod
.env.company3-dev
.env.company3-staging
.env.company3-prod
So when I'll get 20 companies it will be confused on my root folder so it is possible to create a folder where I can place all my .env ?
The idea :
/environments/company1/
.env.dev
.env.staging
.env.prod
/environments/company2/
.env.dev
.env.staging
.env.prod
/environments/company3/
.env.dev
.env.staging
.env.prod
On your vue.config.js file you can add:
const dotenv = require("dotenv");
const path = require("path");
let envfile = ".env";
if (process.env.NODE_ENV) {
envfile += "." + process.env.NODE_ENV;
}
const result = dotenv.config({
path: path.resolve(`environments/${process.env.VUE_APP_COMPANY}`, envfile)
});
// optional: check for errors
if (result.error) {
throw result.error;
}
the before run you can set VUE_APP_COMPANY to a company name and run your app,
Note: It's important to put this code on vue.config.js and not in main.js because dotenv will use fs to read files.
References
https://github.com/motdotla/dotenv#path
https://github.com/vuejs/vue-cli/issues/787
https://cli.vuejs.org/guide/mode-and-env.html#environment-variables
The accepted answer we have also used in the past. But I found a better solution to handle different environments. Using the npm package dotenv-flow allows not only the use of different environments but has some more benefits like:
local overwriting of variables by using .env.local or .env.staging.local and so on
definition of defaults using .env.defaults
In combination we have set up our projects with this configuration:
.env
.env.defaults
.env.development
.env.production
.env.staging
.env.test
And the only thing you have to do in your vue.config.js, nuxt.config.js or other entry points is
require('dotenv-flow').config()
Reference: https://www.npmjs.com/package/dotenv-flow
The powershell solution
I was handling exactly the same problem. Accepted solution is kind of ok, but it did not solve all differences between companies. Also, if you are using npm, your scripts can look nasty. So if you have powershell, here is what I suggest - get rid of the .env files :)
You can keep your structure like you want in the question. Just convert the env files to ps1.
/build/company1/
build-dev.ps1
build-stage.ps1
build-prod.ps1
/build/company2/
build-dev.ps1
build-stage.ps1
build-prod.ps1
Inside each of those, you can fully customize all env variables, run build process and apply some advanced post-build logic (like careful auto-deploy, publishing, merging with api project, ..).
So for example company1\build-stage.ps1 can look like this:
# You can pass some arguments to the script
param (
[string]$appName = "company1"
)
# Set environment variables for vue pipeline
$env:VUE_APP_ENVIRONMENT = "company1-stage";
$env:NODE_ENV="development";
$env:VUE_APP_NAME=$appName;
$env:VUE_APP_API_BASE_URL="https://company1.stage.mycompany.com"
# Run the vue pipeline build
vue-cli-service build;
# Any additional logic e.g.
# Copy-Item -Path "./dist" -Destination "my-server/my-app" -Recurse¨
Last part is easy - just call it (manualy or from integration service like TeamCity). Or, you can put it inside package.json.
...
"scripts": {
"build-company1-stage": "#powershell -Command ./build/company1/build-stage.ps1 -appName Company-One",
}
...
The you can call whole build process just by calling
npm run build-company1-stage
Similary, you can create localhost, dev, prod, test and any other environment. Let the javascript handle the part of building the app itself. For other advanced work, use poweshell. I think that this solution gives you much more flexibility for configuration and build process.
P.S.
I know that this way I'm merging configuration and build process, but you can always extract the configuration outside the file if it gets bigger.
i am developing a web application with laravel and vue
i deploy application in this route in host:
https://novintech.info/panel
anything is true but chunks file have wrong path and refer to:
https://novintech.info
for example:
https://novintech.info/js/home.js //this is chunk file
how to refrence this file to:
https://novintech.info/panel/js/home.js
please help. thanks
problem solved by adding output.publicPath property in webpackconfig
mix.webpackConfig({
output: {
publicPath: 'https://novintech.info/info/public/',
}
});
Once you ran the production script, go to the file generated folder public/, open the file app.js in an editor.
Research for js/chunk and replace it by info/public/js/chunk.
I had successfully create production build. When i am trying to access production build from chrome than i am getting below error
Error: [Ext.Loader] Failed loading synchronously via XHR:
'src/field/Select.js'; please verify that the file exists. XHR status
code: 404
I had already included Ext.field.Select as requires in app.js.
Please tell me what should i do now
Before the start of your script, i.e., in app.js. Try adding Ext.Loader.setConfig({ enabled: true }); Check this
or
Also, Set the src of sdk in app.js prod environment dir: Ext.Loader