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
Related
I am using a structured API that has a service layer, and a data layer. when I deployed my function on netlify I am getting an invocation failure.
but when I removed the folders and added a simple js file, routes are working fine.
I am using the express app with serverless-http.
I am building an express folder, In this folder, I am having a function file.
as we can see after commenting on the nested folder call it is working fine. But if I uncomment the lines of the controller and try to use it, I am getting invocation failed.
When I try to import anything in the API function like this...
const customerController = require('./service/customer.controller')
I am getting the below error after invocation.
Due to CSP Requirements I have had to convert a static vue application within the Vue 2 CLI environment.
After reading a lot of online documentation I am aware that for CSP compliant vue you need to use Render functions and a runtime version of Vue.js
My problem is that after converting my old static vue application to the Vue CLI build process I am still getting a 'unsafe-eval' is not an allowed message. I am not sure why this is the case, due to Vue 2's cli build process apparently using the CSP compliant runtime vue version, unless otherwise specified in the config file for webpack.
The specific code causing the CSP error (there is only one instance of it) is found in the built/output vendor.js file. The code causing the issue is:
function Ts(t, e) {
try {
return new Function(t)
} catch (n) {
return e.push({
err: n,
code: t
}), D
}
}
I have looked far and wide to figure out why this non CSP compliant code is appearing in Vue's built vendor.js file. Any advice would be great. I have read all of Vue's main documentation on CSP, and should re-iterate that I used Vue 2 CLI for the build and conversion of the static app.
For any other poor soul who have gone down the rabbit hole of Vue.js static to non-compiled CSP conversion, these 2 steps solved my issue:
Manually change csp\build\webpack.base.conf.js '$vue' property to the following:
Click to see image
In your main.js file change vue instantiation to the following pattern, this is needed so the component will mount correctly with the runtime build Click to see image
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.
I am trying to load already trained model into web browser for further use, but I am stuck in the loading step
I am using WAMP and not using node, because the the project is super small and not meant for anything serious.
My question would be, is it even possible to load the module w/o the node ?
I have set up WAMP and folder structure for the mini-project is:
.../www/TestProject/
- index.html
- model/
- model.json
- group1-shard1of1.bin
In the index.html file I tried following ways to load the model
- tf.loadLayersModel('http://...')
- tf.loadLayersModel('localstorage://...')
- tf.loadLayersModel('model/model.json')
I get error messages:
index.html:13 Uncaught (in promise) TypeError: Failed to fetch
Or
Uncaught (in promise) TypeError: Failed to fetch
This is my current script:
<script>
async function model(){
const model = await tf.loadLayersModel('http://model/model.json');
}
model();
</script>
It is possible to load the model since wamp will load all static assets.
However by changing the name of the weight file, it could not be loaded since it is referenced in the topology file model.json. The name of the files need to be kept as they were when they were generated or the corresponding names should changed in the model.json.
Yes, TensorFlow.js can work in Node.js OR client side in the web browser like you want. In that case, so long as you host the HTML, CSS, JS, and the model files so they are accessible then it would work fine. However it seems you have changed the file name to modelbin.bin instead of model.bin. My guess is that you are on Windows and have file extensions turned off so it looked like you had the incorrect name but in fact it was there but hidden. I would recommend ensuring this default extension hiding behaviour in Windows is turned off to prevent this in the future. Simply go to Windows control panel (Start -> Control Panel) and then search for "Folder Options". Click on the search result which opens up new window and click on the "view" tab. In that big list of options uncheck the "Hide extensions for known file types" and you should now see the full name of files on your machine. Rename the file to be just model.bin and then it should load correctly.
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.