Develop Reference

Reflect and make Axios request in the browser's URL

What I'm looking for
Bit of JavaScript logic help; although, I am not sure what I will need to do via Vue Router. Not looking exactly for the answer, but more pointed in the right direction (I'm not even sure I'm phrasing this question correctly).
Problem
I have been making API requests with Axios (no problem there). I have a JWT token in the requests’ headers. However, (never done this before) I now need to have the search params the user entered in the browser’s URL when they make a request to share the link to their coworkers which will route to the same page with the same options entered/selected and the API request called with those query params.
What I really don’t know is:
A. What’s the best way to make an API request on route (loading the url with query params)? The route of the page does NOT match the corresponding API endpoint Url.
B. How do I get the users’ entered/selected data into the browser’s URL?
C. Do I need to modify my route objects for those pages to still route correctly even if there is now a query string?
Solution
(Must be purely a frontend solution - I’m using the whole vue ecosystem)

Figured out what I need to do:
A
The project is not server-side rendered; therefore, I need to parse the URL on Vue's created and make a request with the params in the query string. This will seem like the URL caused a API request.
B
Simply append Axios' request query string to the URL, which I believe is cosmetic and should be fine.
C
I'm not sure, but will play around with it.

Dynamically returning a sitemap with Vue.js

I am working on a vue js project which has multiple tenants. I am trying to find a solution where I can dynamically generate an xml file for each tenant. Tenants are identified by the url, so example.com/sitemap.xml would be one sitemap, tenant 2 would be example1.com/sitemap.xml and a different sitemap. Both of the urls hit the same server but load different data because of their domain. In turn I need to make the sitemap.xml dynamically generated as well.
I have been doing some research and I have used routes in my project but I'm not sure if I can set a route for an actual filename, and if so is it possible to return an xml response straight from vue through javascript. I previously tried something similar for generating html outside of my application. So I had a route call it /test, which would load a component called test, the component would then have javscript code that replaces the html document with some other html. Would this possibly be an approach to use?
https://www.npmjs.com/package/vue-router-middleware
I also found the package above and another similar one, that looks to do what I need by allowing me to intervene between route changes. However, I am not sure if this will allow me to return xml, the example seems to have logic and then end with next(), wondering if instead of calling next I can actually just return the xml document at that point.
Any help would be much appreciated.
Thank you.

If you have a regular Vue app, it is running on the client side not the server side. So for all routes, your webserver returns index.html. Once loaded, vue router initialises on the client and detects the route to show the appropriate view/components.
So a request to example.com/sitemap.xml returns index.html
I would guess that web crawlers are expecting the following header in the response, and the response body of an XML document for sitemaps.
content-type: text/xml;
You may be able to generate on the client side if crawlers run the javascript but I would suggest it is better to generate server side and return plain old XML. Your server side code should be able to generate this and switch based on the tenant.
Then in the server put a special route for /sitemap.xml to not return the vue app

Keycloak is having issue with Angular Js # routing

I am integrating keycloak.js file with my application. My application URL is http://localhost:8083/#!/
Because of the # in the URL it was not working. So I used $locationProvider.html5Mode(true); to remove # from the URL, and now Keycloak integration is working.
But now the browser is making a server call when refreshing my URL (for example, to http://localhost:8083/page1) after removing the #.
Can any help me to solve the refresh problem?

when you use html5mode, you need also server side rewrite as written in angular documentation (https://docs.angularjs.org/guide/$location), paragraph Server Side.
So if you are able to rewrite URL on the server to root of your application, it will work.
BUT
You might get into trouble as I did on EAP 6.4.
If you would want to access some context other than your root, for example
/root/some/angular/context
and you weren't logged in, than the rewrite would strip the context and the login fails on missing OAuth_Token_Request_State.
The problem is, that the KeycloakAuthenticatorValve is called after the RewriteValve, which strips the context. If Keycloak would have been called in reverse order, it would all work perfectly. I checked the KeycloakAdapterConfigDeploymentProcessor, which is responsible for adding the valve, and it adds the valve at the end of the list instead at the beginning of the list.
To fix this I had to create custom DeploymentProcessor, which ads the RewriteValve after the KeycloakAuthenticatorValve instead of having the valve registered in jboss-web.xml descriptor.

How can I dynamically change the meta data of a MEAN.JS application before it loads the client?

Using the MEAN.JS framework, I am trying to dynamically change a page's meta data by modifying the app.locals variables in the app/config/express.js file. Does anyone have experience with trying to do this?
If it's an inner page being requested such as /t/elonmusk, I want to include the path (elonmusk) in the meta title and have a different title if they are requesting the home page. I tried simply using an if statement on req.url in the app.use function but this will not work because it sends the home page request ('/') after requesting '/t/elonmusk'. I can't find a way to see the original url that is being requested by the server.
Is there a better way to modify the meta data server side?
Edit: I'm using URL rerouting to remove the hashbang so the actual full URL is indeed being sent to the server.

Since the part of URL after # in your case /t/elonmusk is not send to the server, there's no way you could do this server-side, however , you can change the title on the client once the page loads.

I ended up solving this by storing the previous URL in a variable. If the current URL is '/' and previous URL contains '/t/' then I know an inner page is being loaded and can then update the meta data appropriately.

Getting backbone routing to work with pushstate and node.js/express as server

I'm trying to build a single page app with backbone.js on front end and node.js/express as server, I want to have a base HTML file for the root, and then when user navigates to any path such as
mydomain.com/foo/bar
I want to be able to handle that path on the client side by javascript instead of making a round trip to server. I am reading about backbone routing and HTML5 push state. In this article he describes push state like this,
In fact, PushState is really nothing more than a standard API for JavaScript, that allows us to manipulate the browser history by “push”ing full URLs into the browser’s URL without making a round trip to the server, and respond to changes in the URL with Javascript – all without the use of URL hash fragments.
but when I use push state it does actually makes a server request and expects server to deliver contents under /foo/bar . I don't understand how I can avoid that.
Now let's assume that even with push state, your client is going to make a server request under mydomain.com/foo/bar when you visit this URL directly. In that case, since I'm serving the default HTML file, and this default HTML file has links to scripts in it:
<script type="text/javascript" src="/scripts/myscript.js" ></script>
When this HTML loads, it starts looking for scripts under /foo directory instead of root since the server was requested under /foo which obviously does not exist. How do I fix this?
I'm really confused at this point. I'd like to know how URL routing is usually done in a single page application. Any help will be greatly appreciated. You can also refer to this other question I have posted about the same issue: Backbone Router : Get rid of # in the URL

The solution you're trying to implement is very interesting but not that simple. When your server gets a request to mydomain.com/foo/bar, you should redirect to your root with some parameter that the frontend (JavaScript) app can pick-up to know what the original request was for. For example:
Client sends GET http://mydomain.com/foo/bar
Server redirects (responds 302 with Location header set) to http://mydomain.com/#!/foo/bar
Your SPA is loaded in the browser, and on startup you check for the hash and find #!/foo/bar, so you remove the hash and trigger the /foo/bar route (that's a push-state). Your resulting URL is again http://mydomain.com/foo/bar: the original URL the user browsed to.
Grooveshark does something similar to this, though it actually responds with a page to the request sent in 1., which does the hash replacement in the client and then sends another request to the server. It looks unnecessary to me, maybe I'm overlooking something.