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');
Related
I'm using Vue 3 and Webpack 5 and wanted to install dotenv-webpack, but I can't get it to work.
Here's full code: https://github.com/golebiewska-n/webpack5-vue3
Setup:
package.json script I'm using to launch the app
webpack-cli serve
webpack.config.js
const Dotenv = require('dotenv-webpack')
...
module.exports = (env) => {
return {
...
plugins: [
...
new Dotenv()
]
}
}
.env (added in the root folder of my app)
VUE_APP_VAR=123
main.js
console.log(process.env)
and output in console is: "MISSING_ENV_VAR"
I tried removing new webpack.DefinePlugin({...}) from plugins in webpack config, but it didn't help.
In fact you successfully loaded the .env file with dotenv-webpack and the VUE_APP_VAR is accessible. It is just you cannot use the entire process.env object as dotenv-webpack does not allow it showing you MISSING_ENV_VAR instead.
If you chnange line 12 in your src\Layout.vue as follows:
- return process.env
+ return process.env.VUE_APP_VAR
you get your 123 value of the variable in your Vue app.
The reason is at the time of building your application with webpack dotenv-webpack replaces the explicit string process.env.SOME_EXPLICIT_VARIABLE_NAME_HERE existing in your code with the actual value of SOME_EXPLICIT_VARIABLE_NAME_HERE if that exist in the Webpack JS environment's actual process.env object.
This means you never get the entire process.env object accessible in your webpack bundle, and the bundle does not comprise the variable names like VUE_APP_VAR=123. This is the goal of dotenv-webpack.
You can get some more details in my answer here.
PS: DefinePlugin, being returned in the build config, could override process.env. It does so in Vue CLI (which is hardly justifiable). So its effect there sould be neutralized manually for dotenv-webpack to work within Vue CLI (v4 and v5) applications as expected.
I do yarn build without the .env file
Add the .env file to the project
I do yarn start.
Print the useRuntimeConfig().public.baseURL to the console and get undefined.
Why is runtime not tracking my environment variables?
.env
NUXT_PUBLIC_BASE_URL=https://example.com/api/v1
nuxt.config.js
export default defineNuxtConfig({
runtimeConfig: {
public: {
baseUrl: ''
}
},
plugins/app.js
export default defineNuxtPlugin(() => {
console.log('baseURL', useRuntimeConfig().public.baseURL
})
From the documentation page:
However, after your server is built, you are responsible for setting environment variables when you run the server. Your .env file will not be read at this point. How you do this is different for every environment. On a Linux server, you could pass the environment variables as arguments using the terminal DATABASE_HOST=mydatabaseconnectionstring node .output/server/index.mjs. Or you could source your env file using source .env && node .output/server/index.mjs.
Note that for a purely static site, it is not possible to set runtime configuration config after your project is prerendered.
So, source .env && yarn start should do it.
You might check the version of nuxt.
If it's the bridge version, runtimeConfig cannot work.
Cause I use #nuxt/bridge, not work.
and then it worked on the 3.0.0-rc.3 version. I've tried.
baseUrl: process.env.NUXT_PUBLIC_BASE_URL
try it that way. what you do is setting it explicitly to a empty string.
I created two components in react-native, they are working fine in my dev environment, when I use bit compile and bit status, everything remains on track, no errors. But when i use bit build or bit tag, it starts giving me error
Validation Error: Preset react-native not found.
To counter this, I have added a new env extension that is using react-native and my components are using the env extension. I have overrided the jest config and added preset there. Nothing works. Any solution to this?
I have also confirmed that components are using the env extension only.
configured tester: teambit.defender/jest (Jest # 27.5.1) I tried overriding this jest version, which I was unable to.
I got the solution, for this we have to add react-native as dev-dependecies in workspace.jsonc file. Bit does't pick from the package.json.
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
I am new to webpack and attempting to use it together with the Babel loader to write a library in ES6. I also want to use Karma/PhantomJS for a testing pipeline.
I have hit an odd issue where PhantomJS indicates that ES6 code didn't get converted when I run the tests:
SyntaxError: Use of reserved word 'let' in strict mode
at webpack:///say/hello.js:2:0 <- say/hello.spec.js:22929
But this only happens when I export my webpack config as a function (to take advantage of environment as per https://webpack.js.org/configuration/configuration-types/#exporting-a-function-to-use-env). Exporting config as an object is fine.
I have made a public repo to help others reproduce this at https://github.com/agentreno/es6-library-example with the npm 'test' and 'test:broken' tasks to demonstrate. I would greatly appreciate any assistance.
The problem is not the webpack config, but how you use it in your karma.config on line 37. The webpack option in the karma config expects an object, but you're giving it a function. You actually need to call the function to get the resulting object, which webpack usually does for you when you run webpack from the command line.
As you're not currently using env (the input parameter to the webpack function), you can simply call it:
webpack: webpackConfig(),
But when you start having conditions based on this, you'd need to pass the correct values. Let's say you're using the example mentioned in the docs: --env.production and --env.platform=web. Webpack will call the function as follows:
webpackConfig({ production: true, target: 'web' })