I would like to have the following implementation for getting a variable from .gitlab-ci.yml file. And depending on the variable set in the CI on gitlab, apply styles for your application on vue 3. But I don't know how to create a chain to pass this name to the frontend.
gitlab-ci.yml
variables:
BRAND_NAME: "FIRST_NAME"
app.vue
console.log(BRAND_NAME)
Unfortunately, I don't even have any idea how to implement it. For assembly and deployment I use docker and vite.
Related
I'm now working on sapui5 project managed by ui5.yaml & #ui5/cli. I don't know how to use something like .env to control some variables' value which can be switched between dev env and pro env.
And i have found a workaround, which creating a env.js and include it into controller file. So i can change some value by editing the env.js file. And now i want to make it more convenient.
I use #ui5/cli ui5 run build to build the project. And there is a configuration for custom tasks. And there is a task called webide-extension-task-copyFile which used to copy the /xs-app.json.
And now i create three env files which named as env-dev.js env-pro.js env.js. And i want to copy the env-pro into the env.js before it is built. And copy the env-dev into env.js when i run the ui5 run serve.
I have the config in ui5.yaml like this
specVersion: '2.4'
metadata:
name: ui
type: application
framework:
name: SAPUI5
....
customTasks:
....
- name: webide-extension-task-copyFile
afterTask: webide-extension-task-resources
configuration:
srcFile: '/webapp/env/env-pro.js'
destFile: '/webapp/env/env.js'
I'm sure the task has been triggered, but the file content hasn't been changed. So could someone can help me, or has another idea or success example about using the env in ui5 project.
Thank you :)
We are working on a Dockerized NextJS application that is thought to be built once and deployed to several environments for which we will have different configuration. This configuration is to be set in the Docker container when deployed as environment variables.
In order to achieve this, we are using next.config.js file, splitting the vars on serverRuntimeConfig and publicRuntimeConfig as suggested here, and we are getting the values for the environment variables from process.env. i.e.:
module.exports = {
serverRuntimeConfig: {
mySecret: process.env.MY_SECRET,
secondSecret: process.env.SECOND_SECRET,
},
publicRuntimeConfig: {
staticFolder: process.env.STATIC_FOLDER_URL,
},
}
The problem we have is that these variables are not set on build time (when we run next build), as they are environment specific and supposed to be set on deployment. Because of this, the build fails complaining about the missing variables.
Making a build per environment is not an option: as referred before, we want to build it once (with next build), put the output of the build in a docker container, and use that docker container deploy in several environments.
Is there any way to solve this so that the application builds without environment vars and we pass them afterwards on runtime (deployment)?
We finally found the issue.
We were importing code in a helper that was being used in the isomorphic side and was relaying on serverRuntimeConfig variables, being then required on build time in order to create the bundle.
Removing the import from the helper fixed the issue.
I am trying to configure EJBCA 6.15.2.1 on Wildfly 12.0.0.Final inside a Docker container with the help of EJBCA .properties files. In $EJBCA_HOME/conf/externalra-gui.properties.sample there is a comment showing that one of the default settings is: appserver.home=${env.APPSRV_HOME}. I tried to set other options in a similar way, e. g. in database.properties: database.datasource=${env.WF_DATASRC}.
I run ant clean deployear and it didn't deploy my EJBCA instance properly at first - server.log showed that there is no datasource under the name "${env.WF_DATASRC}". It proceeded correctly after I'd changed the line to: database.datasource=ejbcads, which is the exact value of the variable and the name of the data source inside the WildFly server.
I get similar errors during further installation steps. Is there another way of setting EJBCA configuration using environment variables?
I have a static site Vue.Js docker image built on nginx:alpine.
In a component, there is a URL variable for an EndPoint - I would like to be able to change this variable. I understand that I only have access to ENV variables at the build stage after this everything is static.
What I want to achieve is being able to build 1 image: that I can deploy Test-Staging-Prod environments setting a different URL for each.
I can run a script that uses variable substitution on deploy that would replace the URL e.g #{url:urlEndpoint} in the js file (i can see it in plaintext) - but this is dangerous for the obvious reasons.
How can set this up and pass the url in Vue.Js without having different images for Test Staging etc?
I'm working on an app with vuejs frontend and nodejs backend. My frontend makes API https requests to the backend. I've started my projet with vue-cli and webpack.
I need to get the backend API url from env variable (BACKEND_URL).
Since i'm using webpack, I added this line to config/prod.env.js :
module.exports = {
NODE_ENV: '"production"',
-> BACKEND_URL: JSON.stringify(process.env.BACKEND_URL)
}
It works flawlessly in dev mode using webpack-dev-server. I pass the env var throught docker-compose file:
environment:
- BACKEND_URL=https://whatever:3000
But when I run build, I use nginx to serve the static files (but the problem is the same using visual studio code live server extension). I send BACKEND_URL env var the same way as before. The thing is now the process.env.BACKEND_URL is undefined in the app (but defined in the container)!! So I cant make backend http calls :(
I'm struggling finding the problem, please don't be rude with the responses. Thank you
They aren not "translated" during build time, this is what is happening with you. On a node environment, when you ask for process.env it will show all environment variables available in the system, that is true. But a web application does not have access to process.env when it is executing. You need a way to translate them during build time.
To achieve that you have to use DefinePlugin. It translates anything during build time and writes a magical string where this other thing was.
Using you own example:
module.exports = {
NODE_ENV: '"production"',
BACKEND_URL: JSON.stringify(process.env.BACKEND_URL)
}
If you do this during build time, without DefinePlugin, webpack won't know what to do with it, and it is going to be a simple string.
If you use DefinePlugin:
new webpack.DefinePlugin({
"process.env.BACKEND_URL": JSON.stringify(process.env.BACKEND_URL)
});
By doing this, you are allowing webpack to translate this during build time.
Give this a shot: https://www.brandonbarnett.io/blog/2018/05/accessing-environment-variables-from-a-webpack-bundle-in-a-docker-container/
If I'm understanding your problem correctly, you're serving a webpack bundle using nginx, and trying to access an environment variable from that bundle.
Unfortunately, it doesn't quite work that way. Your JS file has no access to the environment since it's a resource that has been delivered to the client. I've proposed a solution that also delivers those env variables alongside the bundle in a separate JS file that gets created on container start.
From VueJS Docs: https://cli.vuejs.org/guide/mode-and-env.html
Using Env Variables in Client-side Code
Only variables that start with VUE_APP_ will be statically embedded into the client bundle with webpack.DefinePlugin. You can access them in your application code:
console.log(process.env.VUE_APP_SECRET)
During build, process.env.VUE_APP_SECRET will be replaced by the corresponding value. In the case of VUE_APP_SECRET=secret, it will be replaced by "secret".
So in your case, the following should do the trick. I had the same problem once in my project, which I started with vue/cli and vue create project ...
VUE_APP_BACKEND_URL=https://whatever:3000