I am building a docker image for my vuejs app. And I want some environment variable to read by my vuejs application.
For example:
I want to change my 'baseUrl' after creating and building the image, in runtime environment.
What I've tried & Search is:
It says you can not read outside an application after creating vuejs application build.
Check the docs of React example. You can inject to the html any variable at runtime (from backend, server side). Here the simple schema used in React.
html:
<script>
window.SERVER_DATA = __SERVER_DATA__;
</script>
client:
const constants = {
debug: false,
port: 8443,
host: window.SERVER_DATA,
graphql: {
path: '/graphql'
},
}
On the server side use the functions to pipe (and change your variable) the html output to client.
Related
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.
I'd like to have a debug endpoint available only for stage. One way to do it is to the authorization in server code, but it would be even better not to create the API Gateway endpoint all together. Is it possible to achieve using Serverless framework?
In Serverless Framework, you can use a switch based on your environment to toggle configuration options, within the context of your YAML file.
For example, if you wanted to setup a normal HTTP endpoint via API Gateway you'd add something like the following to your functions section:
functions:
ping:
handler: "src/functions/ping/handler.main"
events:
http:
method: "any"
path: "/ping"
If you want this http event to be available for only a certain stage, you can define a block elsewhere and reference it based on the current stage name. It's commonplace to use the custom block in your serverless.yml file for this. To isolate between the stages prod and dev, with dev being your staging area you'd do this:
custom:
pingEvents: "${opt:stage, self:provider.stage}"
prod:
http:
method: "any"
path: "/ping"
dev:
http:
functions:
ping:
handler: "src/functions/ping/handler.main"
events: "${self:custom.pingEvents.${opt:stage, self:provider.stage}}"
The above would only expose the endpoint via HTTP when you run sls deploy --stage dev to release your application; any other stage (e.g. – prod) will have it disabled. Do note, that in this example, if you want to support stages outside of dev and prod you'll need to add a new block under custom.pingEvents.
I am deploying a Nuxt App with Zeit/Now. In the development phase I was using a .env file to store the secrets to my Contentful CMS, exposing the secrets to process.env with the nuxt-dotenv package. To do that, at the top of the nuxt.config I was calling require('dotenv').config().
I then stored the secrets with Zeit/Now and created a now.json to set them up for build and runtime like so:
{
"env": {
"DEMO_ID": "#demo_id"
},
"build": {
"env": {
"DEMO_ID": "#demo_id"
}
}
}
With that setup, the build was only working for the index page and all of the Javascript did not function. Only when I added the env-property to the nuxt.config.jsfile, the app started working properly on the Zeit-server.
require('dotenv').config()
export default {
...
env: {
DEMO_ID: process.env.DEMO_ID
},
...
modules: [
'#nuxtjs/dotenv'
],
...
}
BUT: When I then checked the uploaded Javascript files, my secrets were exposed, which I obviously don't want.
What am I doing wrong here? Thanks for your help.
You aren't necessarily doing anything wrong here, this is just how Nuxtjs works.
Variables declared in the env property are used to replace instances of process.env.MY_ENV, but because Nuxt is isomoorphic, this can be both on the server and client.
If you want these secrets accessible only on the server, then the easiest way to solve this is to use a serverMiddleware.
As serverMiddleware is decoupled from the main Nuxt build, env variables defined in nuxt.config.js are not available there.
This means your normal ENV variables should be accessible, since the server middleware are run on Node.
Obviously, this means these secrets won't be available client side, but this works if you have something like a Stripe secret key that you need to make backend requests with.
We had a similar problem in our project. Even, We created a nuxt project from scratch and checked to see if there was a situation we skipped. We noticed that, while nuxt building, it copies the .env variables into the utils.js in the nuxt folder. Through the document here, we changed the modules section in nuxt.config.js as follows,
modules: ['# nuxtjs / apollo', '# nuxtjs / axios', ['# nuxtjs / dotenv', { only: ['']}]],
Then we noticed that .env variables are not exposed.
I hope it helped.
Our nuxt version is "nuxt": "^ 2.13.0".
Also, some discussion over here.
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