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
Related
Is there away for me to create dynamic backend routes? I am creating and image host. I am wanting the user to be able to get their image saved on the server under a domain like this http://localhost/<random_id> and example of the link would be http://localhost/a3Fafght5, I have looked around online and I could not find anything about creating dynamic backend routes and then when I did find one thing it said I needed to use getStaticPaths to declare all the possible ids. I dont know what the id is going to be when I build the project, I need to be able to query the database with it and check if it exists and do things from there.
You can use dynamic page routing if you have file like pages/[imageId].js
and then simply put getServerSideProps in your file which can call your database and determine if this is valid ID or not. For valid ID your would return image, for not valid simply 404.
If you don't want to have server-side rendering, but static one instead. You could have the same file as above and have getStaticPaths function which would query the database and return array of all possible IDs. This however could be issue if you have a lot of images, then the server-side solution would be easiest.
I have a React Front-end connected to Wordpress API and the routes are defined in clientside with React Router. When i use Link to direct them to dynamic routes they work fine. But when i use browser address bar directly to access the links pressing enter, or i refresh.i get
404 page not found
and i got to know that is because a direct call to server is happening and the there's no javascript to manipulate the react-router actions on the shared host when we have a PHP Server on that.
Thought about react-snapshot but its not going to suit the dynamic nature from the API.Please can anyone i give a possible way to go around this issue?
Check this out: https://github.com/rafrex/spa-github-pages
The concept might help you.
When the GitHub Pages server gets a request for a path defined with frontend routes, e.g. example.tld/foo, it returns a custom 404.html page. The custom 404.html page contains a script that takes the current url and converts the path and query string into just a query string, and then redirects the browser to the new url with only a query string and hash fragment.
If i have somesite.com/thisiswhatiwant, how can I transform that into a variable and process it, without using get vars? What should I google in the first place?
The idea is to create a dynamic page structure where that part of the url will populate variables in the page and be used to return dynamic page specific queries.
Is there a framework I can use that has a way to handle this easily?
If I use javascript for this, how should I handle it to not return any 404 errors but rather just pull a templating page and then use that part of the url for developing of the page?
Thank you!
Here is how you parse the path of a url in PHP
$url = "http://somesite.com/thisiswhatiwant";
var_dump(parse_url($url, PHP_URL_PATH));
If i have somesite.com/thisiswhatiwant, how can I transform that into a variable and process it, without using get vars? What should I google in the first place?
That's simply getting the current URL and parsing it. (Which are pretty well covered in the linked questions).
You do need to get the server to execute the PHP first. This question about the front controller pattern explains that.
If I use javascript for this, how should I handle it to not return any 404 errors but rather just pull a templating page and then use that part of the url for developing of the page?
Assuming you mean client-side JavaScript: You can't.
JavaScript runs in the context of a webpage.
Get page from server
Parse HTML document
Run JavaScript that page says to run
If you 404 at step 1 then everything stops and no JS runs.
The correct terminology is vanity URLs. They are static urls that behave like dynamic urls. Dynamic urls are urls with queries which is not what we want here.
This tutorial will help.
The solution is trough the .htaccess rules as i expected.
The rest is basic php/db queries.
I still do not know of a web app framework that makes this trivial to implement, but there must be.
Here is the tutorial
http://culttt.com/2011/11/16/how-to-make-vanity-urls-using-php-htaccess-and-mysql/
I'm writing a Wordpress/AJAX based SAP web application, and I have a question about URL handling.
My application (roughly) looks like this:
There is an index.php file which basically contains a page container and the client-side code to handle ajax calls.
The client-side code is responsible for switching the pages according to user clicks. It does that by calling the registered action, which is mapped to a server-side function that returns the html for that page. (So there is a function named get_about_page() that prints/returns the HTML of the requested page)
The problem with this setup is handling URLs.
The question at hand is how do I handle requests to URLs like http://domain.com/about, for example?
Had I had an about.php page, I could add a rewrite rule to direct all requests there.
I could also, theoretically, parse the URL on the client-side, and decide which ajax call to fire, but that seems like a bad idea.
Use pre define wordpress api, it may help you
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.