I'm using a vueJS boilerplate, which has various settings in a /config directory that are used at build time.
I'm wondering if there is a convention for how these are available client side too? Of course this depends on the boilerplate. I don't see anything setting this up, so I guess I have to create my own API to pass this from client to server.
Alternately is there a convention for including some current config settings into a client side file? I really want to just display some things like the NODE_ENV and other build time settings.
Thanks!
You can assign its value to data then render it in client-side
<div>{{ NODE_ENV }}</div>
data() {
return {
NODE_ENV: process.env.NODE_ENV
}
}
vue-config seems to be a good way to handle client side configs and can read config from an endpoint.
https://github.com/airyland/vue-config
from this question
https://stackoverflow.com/a/42549522/1146785
Related
We're currently using Workbox (v5) for a fairly large SaaS platform. Most of the routes are setup to use NetworkFirst.
Something I've not been able to work out is why, for some routes, when running the platform in none-production mode there are a few Workbox warnings saying Unable to ensure service worker stays alive when updating cache for [route].
Does anyone know what the message actually means, i.e. why is it being triggered? I see that it's coming from the ExpirationPlugin.
The frontend of the platform is Vue.js with Webpack, and we're using the WorkboxWebpackPlugin with InjectManifest.
It's been configured as per below:
config.plugin('workbox')
.use(WorkboxWebpackPlugin.InjectManifest, [{
swSrc: './src/sw.js',
swDest: 'sw.js',
maximumFileSizeToCacheInBytes: 5242880, // 5MB
exclude: [
/\web.config$/,
/refresh.html$/,
/sw.js$/
]
}])
Fingers-crossed I'll be able to learn more on this warning message. Thanks in advance.
After doing further testing, it looks like this warning is displayed when a route that uses NetworkFirst with networkTimeoutSeconds and the response from the route exceeds the number of seconds set in networkTimeoutSeconds.
I wan't to create a client application using Vue.js. Currently I'm facing the question: How do I get the address of my backend service?
I have a primary constraints to the solution that is supposed to answer that question: The final client artifact (the result of the build process, "vue-cli-service build") must be environment independent. This is important! That means that absolutely no environment specific information are supposed to be built-in. If the address of my backend service changes, it MUST NOT be necessary to build a new client artifact. It MUST be possible to just reconfigure the production environment and reuse the current client artifact.
My approach is to add an additional configuration file that is delivered by the same web server that also delivers my Vue.js client: a /configuration.json or something like that. This configuration file can contain the information I need. This approach can be split into 3 sub-tasks:
(a) Add functionality to the Vue.js client to read the configuration.json from the web server (that also delivers the client). This should be easy.
(b) Find a way to let the production web server deliver this configuration.json. I already have some ideas for that.
(c) Find a way to let the local development server deliver the additional configuration.json.
My biggest problem is (c) right now. I don't know how to configure the local development server, which is started by "vue-cli-service serve".
Any ideas how to solve (c)? Maybe you also know a better way?
I just give the following answer to another question, but it might apply to your question as well. If you need to load specific presets from a JSON file. How to produce that JSON file is a separate question I guess.
I’ve had a similar case once with the need to adjust some presets
without rebuilding the project every time. I ended up moving the Vue
object that rendered the app inside an async Axios function. Of course
it affects loading time, since it waits for the JSON file to be
loaded, in my case this was less important. This is a summary of such
a setup.
axios.get('./config.json')
.then(function(response) {
let config = response.data
//commit data to vuex store for example
new Vue({
store,
render: h => h(App)
}).$mount('#app')
})
.catch(function(error) {
console.log(error)
})
I have a project set up based around the Polymer Starter Kit, which includes Web-Component-Tester
This project includes php server code which I would also like to test by writing tests to run in the browser which will utilise the PHP server code through Ajax Calls.
This implies replacing the server that Web Component Tester is using ONLY when testing server side code. I hope to make a separate gulp task for this.
Unfortunately, I don't understand the relationship between WCT, Selenium and what ever server is run currently. I can see that WCT command starts Selenium, but I can't find out what the web server is and how that is started. I suspect it is WCT, because there is configuration of the mapping of directories to urls, but other than that I haven't a clue, despite trying to read the code.
Can someone explain how I go about making it run its own server when testing the client, but relying on an already set up web server (nginx) when running the server. I can set nginx to run from local host, or an other domain if that is a way to choose a different configuration.
EDIT: I have now found that runner/webserver.js starts an express server, and that urls get mapped so the base directory for the test runner and the bower_components directory both get mapped to the /components url.
What is currently confusing me is in what circumstances this gets run. It appears that loading plugins somehow does it, but my understanding from reading the code for this is tenuous.
The answer is that web component tester itself has a comment in the runner/config.js file.
In wct-conf.js, you can use registerHooks key into the Object that gets returned to add a function that does
registerHooks: function(wct) {
wct.hook('prepare:webserver', function(app, done) {
var proxy = require('express-http-proxy');
app.use('/api',
proxy('pas.dev', {
forwardPath: function(req, res) {
return require('url').parse(req.url).path;
}
})
);
done();
});
This register hook function allows you to provide a route (/api in my case) which this proxies to a server which can run the php scripts.
My site is built on a WebAPI back end...
the issues occurs on deployment, as my Uri wasn't formatted correctly due to our IIS deployment/site structure
WRONG
http://itil.mysite.com/api/Building
RIGHT
http://itil.mysite.com/TestSite/api/building
So I modified my http helper to include a baseUri
like so
define(function () {
var baseUri = window.AppPath;
return {
baseUri: baseUri,
defaultJSONPCallbackParam: 'callback',
get: function (url, query) {
return $.ajax(baseUri + url, { data: query });
},
...
});
And on my Index.cshtml
added the following to get the set the root/baseUri path:
var AppPath = '#string.Format("{0}://{1}{2}", Request.Url.Scheme, Request.Url.Authority, Url.Content("~"))';
console.log('AppPath: '+AppPath);
The baseUri path is correct when I log it to the console from the Index.cshtml: EG.
AppPath: http://itil.mysite.com/TestSite/
But when I do the actual api call (from my deployed instance), it still uses the old Uri..
http.get('api/building').done(viewInit);
STILL WRONG
http://itil.mysite.com/api/building
My next thought was that the files must be cached somehow, so I tried the following:
Restarted IIS numerous times,
Deleted and redeployed files
Disabled Caching in chrome,
Disabled .js caching in IIS (usermode & kernel
mode),
Restarted my PC
Modified the ScriptBundle to try and force it
to (for the lack of a better word) go out of sync, then added my
code back
The code works when i use my Visual Studio dev server, but I'm getting the
same issue on my local IIS & Alpha test site... with no luck.
How the hell do i clear the cache on a deployed site :/ This is getting to the point where things seems to be a bit ridiculous. Either I'm losing it, or the "big guy" hates me.
Sigh.. Second time I've been caught out by this. I thought my issue was MVC related, its was Durandal deployment related :P
Note to everyone reading this.
Once you deploy a Durandal project & if you modify ANY of the existing javascript files or main.js. Remember to run optimizer.exe.
...\App\durandal\amd\optimizer.exe
Right now I have my URLs hard-coded for HTTPService to work with my local machine's web server so that I don't need to copy files to htdocs after compiling. What's a good technique to easily transition HTTPService URLs from working on my testing setup to working with a normal web server setup?
Write a service to get the current environment your application is in, similar to how one tests if you're running in AIR or Flex.
In your HTTPService:
url="EnvironmentService.getURL1();"
In EnvironmentService:
public static function getUrl1():URL
{
return (LOCAL_ENVIRONMENT)? LOCAL_URL1 : LIVE_URL1;
}
If this doesn't work for you, post some more code and we'll work on a solution