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)
})
Related
I am trying to write tests for my Apollo GraphQL application, but my problem is that I can't find a way to separate the tests into multiple files. The executeOperation method I need to execute queries and mutations is located on the ApolloServer instance object and I don't know how i could access it in other files.
Each time i run jest i want to:
Create an instance of MongoMemoryServer and use mongoose to connect to it (which i need to test mutations that updates the database).
Start a new apollo-express-server.
Run tests in multiple test files using the method executeOperation that is located on the ApolloServer instance variable.
Disconnect mongoose, stop MongoMemoryServer and stop the ApolloServer.
I've tried setting up this testing environment using a jest configuration with globalSetup and globalTeardown. But global variables set during the globalSetup can't be accessed in the test files. So there was no way to export the server object.
Iv'e also tried creating a new ApolloServer for every test file using the jest functions "beforeAll" and "afterAll", when I did that my program ended up trying to start multiple servers at once on the same port which obviously did not work.
The Apollo docs mention the "apollo-server-testing" library (which they don't recommend), but its method "createTestClient" also require the server instance so that could not solve my problem.
How can i expose the apollo server instance to my test files? Or maybe there's another way to run GraphQL queries and mutations in my test files without exposing the server at all. I am happy to hear all your suggestions!
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
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
I'm using the web deploy API to deploy a web package (.zip file, created by MSDeploy.exe) to programmatically roll the package out to a server (we need to do some other things before we release the package which is why we're not doing it all in one go using MSDeploy.exe).
Here's the code I have. My question is really to clarify what is happening when this is executed. In the package parameters XML file I have the application name specified ("Default Web Site") but that's about it, there's no other params are specified in there. From testing the server it appears the package gets deployed successfully but my question is are any other settings on the server I'm deploying to getting changed without my knowledge, are any default settings published etc.? Things like security settings, directory browsing etc. that I might not be aware of? The code here seems to deploy the package but I'm anxious about using this on a production environment when I'm so unsure of how this API works. The MS documentation is not helpful (more like non-existant, actually).
DeploymentChangeSummary changes;
string packageToDeploy = "C:/MyPackageLocation.zip";
string packageParametersFile = "C:/MyPackageLocation.SetParameters.xml";
DeploymentBaseOptions destinationOptions = new DeploymentBaseOptions()
{
UserName = "MyUsername",
Password = "MyPassword",
ComputerName = "localhost"
};
using (DeploymentObject deploymentObject = DeploymentManager.CreateObject(DeploymentWellKnownProvider.Package,
packageToDeploy))
{
deploymentObject.SyncParameters.Load(packageParametersFile);
DeploymentSyncOptions syncOptions = new DeploymentSyncOptions();
syncOptions.WhatIf = false;
//Deploy the package to the server.
changes = deploymentObject.SyncTo(destinationOptions, syncOptions);
}
If anyone could clarify that this snippet should deploy a package to a web site application on a server, without changing any existing server settings (unless specified in the SetParameters.xml file) that would be really helpful. Any good resources on using the API or an explanation of how web deployment works behind the scenes would also be much appreciated!
The setparameters file just controls the value for the parameters defined in the package. A package might be doing much more than that. Web deploy has a concept of providers and any given package can have one or more providers.
If you want to make sure that the package is not changing server side settings the best approach you can take is to use the API but make the packages be deployed via Web Management Service. This will give you two benefits:
You can control what providers you allow through.
You can add users and give restricted permissions to them to deploy to their site or their folder etc.
The alternate approach is to:
In the package manually look at the archive.xml and look for the providers in the package. As long as you dont see any of the following providers that can cause server settings change such as apphostconfig or webserver or regkey (this is not a comprehensive list) you should be good. Runcommand is a provider that allows you to execute batch scripts or commands. While it is a good provider for admins themselves you need to consider whether you want to allow packages with such providers to run.
You can do the above mentioned inspection in code by calling getchildren on the deployment object you create out of the package and inspect the providers and the provider paths.