I have a reasonably mature Vue 2 app running off a Laravel back end. The route file is fairly standard with a mix of dynamic and static routes. Recently I wanted to add another page to the site so I created the component, imported it into the routes file, and added the route:
import Helsinki from "./components/Helsinki.vue";
...
{
path: "/about-us",
component: AboutUs,
name: "about-us"
},
{
path: "/helsinki",
component: Helsinki,
name: "helsinki"
},
...
I built the JS and tested on my dev server - no problems at all. However when I push it to my live server, things get weird. Several pages that require pulling data from the backend do not work, throwing console errors saying that response data is undefined. However, other pages that access the same data the same way work fine. The new Helsinki component likewise works absolutely fine. If I remove the new route declaration in my routes file, and rebuild, everything is back to working perfectly. I tested running a production build locally in case there was some chunking issue and again, no problem locally.
What might be causing this weirdness?
Related
I've just finished creating my custom error messages in my Nuxt.js application in layouts/error.vue. For the moment I've made it pretty simple as it's just a brochure site for the time being, so I am just handling the errors as shown below as for now I only care about users hitting a page that doesn't exist.
<template v-if="error.statusCode === 404">
<h1>Sorry!</h1>
<p>We can't find the page you are looking for.</p>
</template>
<template v-else>
// Some other message
</template>
When running my application locally, and trying to navigate to a route that doesn't exist, this works perfectly and my error message is displayed.
However, my hosted application does not behave how I want it to. I'm hosting the application on IBM Cloud as a Cloud Foundry application. The application uses the static buildpack, and my manifest.yml file looks like so:
---
applications:
- name: name
path: ./dist
buildpack: https://github.com/cloudfoundry/staticfile-buildpack.git
random-route: true
But if I try and navigate to an incorrect route that way, I am displayed the generic nginx 404 error:
I understand that there are 2 ways you can tell Cloud Foundry that the application requires a static buildpack - Declaring the buildpack in the manifest.yml OR adding a file named Staticfile in the dist directory after running npm run generate. Within this file, you can add some configurations, one of which being status codes which:
Allows to define custom pages for HTTP STATUS codes instead of the default NGINX pages.
status_codes:
404: /404.html
500: /500.html
However, my error handling is done in a layout, not a page. And my generated project folder does not contain a page called error anywhere, so I don't know how to use this method to use my error handling.
If anybody could give me some pointers on how to correctly do it, it would be greatly appreciated!
So in an application that I'm working on currently I'm trying to proxy requests from a Vue-frontend, to an Express-server. The express server is running on localhost:5000. This is in my vue.config.js:
"devServer": {
"proxy": {
"^/api/": {
"target": "http://localhost:5000",
"ws": true,
"changeOrigin": true
}
}
},
What I can't wrap my head around is why in most cases, sending out requests to my server with just api/routename works just fine. Then in only 2 components it doesn't work. In the components where it does work, a GET request looks like this for example:
axios.get('api/base/verified')
.then...
Then in two other components, according to the same principle of just requesting to api/route-name, I'm getting errors. In development mode, the requests then all of a sudden go out to http://localhost:8080/api..., and when trying to deploy, they go to 5000, but I get this error message:
xhr.js:184 GET http://localhost:5000/api/content/course/5f54f3c60bb7a30017c1abf2 net::ERR_CONNECTION_REFUSED
Does anyone have any idea about what the deal is, and why the proxying is acting so differently, depending on environment and component?
You should always use the url with a leading slash e.g. /api/base/verified See this question. So I guess in your case that 2 components may use in different path.
The reason it's different for different environments is that the proxy is working only in development server that's why they called devServer.
I'm not sure why you got that error it seems there must be another config that can go to port 5000 such as proxy in nginx but ERR_CONNECTION_REFUSED usually means there is no server at that endpoint.
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