In our the Javascript file, we were using
export const endpoint_base_url = import.meta.env.VITE_ENDPOINT_BASE_URL;
to read in a URL for our API calls. In our .env.development file we have the value that we needed and all was working properly until we did an NPM update and now this no longer works.
The code is now returning 'undefined'.
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 am trying to add an external script to my React Native app. The script is not available as an NPM package, so a tag is required.
The script requires me to attach a function to the window object. That function is triggered when the script loads. window.onExampleScriptReady = () => {}
I added polyfills for the window/document.
This code works perfectly in a web browser, but yields nothing on iOS. Not even any errors.
const script = document.createElement("script")
script.src = "https://my-example-script.js"
script.async = true
document.body.appendChild(script)
My solution does not require dynamic/runtime tag creation, so I'm open to solutions similar to adding a script tag in the index.html file. (which I don't believe React Native has)
I'm trying to create a file like the appsettings in a web.config in my vue app, that my vue app can use to load config info at runtime that changes form one deployment level to another (dev/qa/prod)
I'm loading it thusly
Vue.prototype.$config = require('/public/config.json')
but when I look at the transpiled output, it has the values of the file loaded in and hardcoded, not code to load from the file
in app90117256.js: (and js.map)
t.exports = JSON.parse('{""name":"value" etc.....
How do I get it to load the file at runtime instead.
If you want to load the config at runtime, do not use build time constructs, which require or import (or Vue CLI ENV variables) are...
Options:
use either XHR or fetch browser API to request the json file from the server during (or before) your app starts
transform the json into JS file which assigns some global variable (window.appConfig for example), load it using <script> placed in index.html (before your app bundle) and then access it using window.appConfig from the app
I have some js file which is generated by aws cognito, and its content is different based on environment.
As I should not modify it manually, so vue's environment variables may not work for me.
How should I dynamically load the js file based on the environment?
I use following command to run my server on local
vue-cli-service serve --mode=dev
I located the file under /environment/dev/aws-exports.js
const awsmobile = {
"aws_project_region": "ap-northeast-1",
... some more json...
};
export default awsmobile;
and load in the main.js
import config from "./environment/dev/aws-exports"
Amplify.configure(config);
How should I modify my code so that it can load it based on --mode?
I am not sure if this is exactly what you are looking for but I'll try to help:
To dynamically load the js file based on the environment you can create a function that returns an import:
function getConfig(mode) {
return import(`./environment/${mode}/aws-exports`) // import returns a Promise
}
Note: remember that import is a Promise so you might need to await it.
tldr;
My project is an NPM module that is used by an ExpressJS server. The server needs to specify an endpoint and my module will do the rest. How do I get my module to load the correct html page and grab the correct js/css files from the correct path?
The Problem
I'm running into a problem where I can see the directory structure of the site, using the serveIndex library, and all the files are in their correct directories but for some reason when I try to load any of the files, whether from the serveIndex view or from the actual endpoint where it should load, I get nothing but 404 errors.
Here's an example if someone wanted to use this NPM module from their project.
app.js (their server)
const express = require('express')
const { adminAreaConfig } = require('express-admin-area')
const app = express()
const adminArea = adminAreaConfig(express) // my module being passed the "express" library
app.use('/admin', adminArea) // specify a URL to use my module
app.listen(3000, () => console.log('\n\nServer Online\n\n'))
Here's an image of my projects dir structure after it's been built.
Going off of a console.log(__dirname), which returns <long path string>/express-admin-area/build/src, I then tell my module, using the express reference passed by the actual server in the code above, to look in the views directory with
... import libraries etc ...
const adminAreaConfig = express => {
const adminArea = express.Router()
adminArea.use('/', express.static(__dirname + '/views') // sets my modules views to the "http://localhost:3000/admin" path
adminArea.use('/dirs', serveIndex(__dirname)) // will get into this later
... some other stuff like exports etc ...
This then attempts to load the index.html file in the express-admin-area/build/src/views directory but fails because it can't locate the CSS and JS files inside express-admin-area/build/src/views/static/css or .../js.
First, I know it fails because instead of looking for http://localhost:3000/admin/static/css/styles.css it looks for http://localhost:3000/static/css/styles.css, so that's another problem I need to solve entirely.
Second, looking back at the small code sample above, adminArea.use('/dirs', serveIndex(__dirname)), I'm using the serveIndex library in an attempt to view the directory structure. If I go to http://localhost:3000/admin/dirs I get the correct directories and files in the browser
But now, if I try to view an actual file I'm met with the error Cannot GET /admin/dir/main.js for example if I were to go to http://localhost:3000/admin/dir/main.js, but I can continue going deeper in the directories if I wanted such as the controllers or routes directories from the image.
What I want
I need a way to get these static assets to load. If I point my module to a basic html page with a simple <h1>Hello, World!</h1> then that's what Ill get but trying to load any outside scripts/stylesheets is when I get the 404 errors and nothing loads.
I'll be answering my own question.
The solution is actually pretty simple. The view layer of this module is handled by React, CRA to be specific. CRA will look for some specific environment variables, one of them being PUBLIC_URL. All I had to do was
Create a .env file in the root directory of my CRA
add PUBLIC_URL="/admin"
Afterward, it's just rebuilding the project, yarn build, and reset the server. CRA will then look at http://localhost:3000/admin/static/... instead of http://localhost:3000/static/... for static assets.