I try to inject runtime variable in my vue3 project and it seems it's not possible. All variables are injected at builtime. What i want to to is to do one build in staging instance, put the assets in a cdn and promote the build in production instance by just changing the path of the assets. I had not found any solution and i'm a bit desperate :( Am i missing something or it's just not like that vue3 works ?
Related
I have a Vue.js app hosted by AWS Amplify.
In Vue, env vars can be set application-wide by using .env. files.
I currently use such files for development and for production modes, containing different values.
When locally building and serving my application the above works as expected. However, once Amplify deploys my app (in my case I use Amplify's CD feature), these variables are not defined.
I know I can define the same env vars in Amplify, but that would mean I need to manage these values in two places since won't be redeploying while developing. so this seems to be prone to errors (I will need to remember to update the vars on both the application end and amplify console whenever I need to make a change for example).
I wonder if this behavior is expected or is there something I am missing in my setup.
Thanks!
I was also facing the same issue in my React app.
The thing is, you need to have a .env file in your app with all the environment variables.
Why? — The reason behind that is, it generates static HTML, CSS and JS files. Those files can't access process during the runtime.
After adding all the environment variables in Amplify, you have to add one more command in your build stage in App build specification.
You can refer to this official documentation on how to implement this.
If you don't care much about your environment variables, you can use this hack: printenv. This will store all the environment variables of your OS and your application in the .env file.
My config looks something like this:
build:
commands:
- 'printenv >> .env'
- 'npm run build'
I want my web app, that's built with Nuxt.js and Vue.js to access the environment variables that I added in the Netlify environment UI (setting menu).
When I run the local server I have no problem with my code accessing the .env file and retrieving the right codes.
But when I build it with Netlify, it returns undefined.
I have tried adding different prefixes to the env variables since I saw some people do this:
VUE_APP_MY_VARIABLE
NUXT_APP_MY_VARIABLE
VUE_MY_VARIABLE
NUXT_MY_VARIABLE
I do not understand why the variables can not be accessed when the site is live.
If you're missing any information, let me know and I will add it.
Thanks in advance!
Maybe this page can help you!
https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-env
Try:
NUXT_ENV_MY_VARIABLE
instead of
NUXT_MY_VARIABLE
I use Netlify and Nuxt together with dotenv package:
"#nuxtjs/dotenv": "1.4.1",
Is this possible to change dynamically publicPath for vue application (in vue.config)? This means that I want to set public path be dynamically depends on real url(some domain), e.g. i want to make only one build, but use it for staging and prod env (and use different cdn-s for assets in different countries, etc).
I find that webpack_public_path aims at setting at runtime the public path. But how can I use webpack_public_path with vueJS(vue-cli)?
webpack_public_path - didn't work for me. Maybe someone can provide a real example in repo?
Expected result: if I build once app in "production" mode, deploy (artifact) app in several environments, each environment setting his own publicPath at runtime (cdn).
E.g. for prod artifact on domain test.com in Europe - used cdn: test-cdn-europe.com, for test.ua - is used another-test-cdn.ua and so on. But I want change this publicPath in vue.config in runtime (maybe base on current domain or something like that). So I can make only one build (because it can take too much time - to make several builds).
Can you suggest any ideas to solve this problem? Thanks!
You can assign a new value to __webpack_public_path__, but you have to do so before the app itself starts.
So best would be to put this into its own file and import it before Vue itself:
import './publicpath'
import Vue from 'vue'
then in publicpath.jsyou would do something like this:
__webpack_public_path__ = window.your_public_path
You could of course also use window.location to get the domain or other things
I am wondering if there is a way to change a 'root path' for my site's api which is a string value of a variable at build time in a vue application. I would like the value of my api path to be read in during the build process and set. This functionality exists in angular, and I am wondering if it exists in vue. I have checked the docs and do not see anything similar. This blog describes the functionality that I am after in angular. If there is nothing similar how does one change the root path of an api from for example 'localhost:8080' to 'example.mysite.com' at build time so that the right path is set when building/deploying to production and not needed to be changed manually? Thanks for any help!
You could set it in an environment variable during the build and access it via process.env.MY_VARIABLE.
During development you would use a package like https://www.npmjs.com/package/dotenv and have a .env file with your environment variables but in production you would set it in your CI or build script.
Bare in mind if this is browser based then you will need to replace
process.env references with the explicit values which you can do with most bundlers.
I'm not sure what I'm doing wrong. I am written a module in a file: config/initalizers/constants.rb
I have a defined a module with a constant and a static method. It's accessible when called in a view. The problem occurs when I want to call the method from in one of the environment files where I get an unitialized constant error. I believe the initializers are being run after the environment files are being loaded but I am not sure where best to place the method or file.
Any help would be appreciated.
This may be solved by saving the constant as an environment variable instead. For development I can recommend the Dotenv gem. Of course it would need to be added to the production server environement as well, but Heroku etc make this very easy.
You add something like CONSTANT_NAME=stringofcharacters1234 in a newly created .env file in the root rails directory and everytime you start up rails s it will parse that file and make those variables accessible to you through the ENV hash where you can access it like ENV["CONSTANT_NAME"] wherever it's needed.
I also prefer using ENV.fetch("CONSTANT_NAME") because this will raise an error if it's empty, helping in debugging if something fails because of an empty env variable.
Hope this is what you're looking for!