NextJS How to create dynamic backend routes - javascript

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.

Related

How can I suppress 404 error when a file is not found?

I have a list of webpages example.com/object/140, example.com/object/141, example.com/object/142, ...
and each page should have a particular background image example.com/assets/images/object/140.jpg, example.com/assets/images/object/141.jpg, ...
Some images are missing and then I use a default image. In that case, when I check if the image exists, I get a 404 error. I have already seen in several pages there isn't a direct way to avoid this problem.
Then I did the following: I created a service in the backend (C#) that checks if the file exists File.Exists(fileName);. That way I managed to avoid this error in my localhost. So far so good.
Now I published both my frontend and backend in two different services in Azure. The images are in the frontend but the file service is in the backend. My method does not work anymore because I can't access directly the frontend folders from the backend. One solution could be to make an http call from the backend to the frontend, but I think this doesn't make much sense, it's getting too messy.
One option could be to store in the DB a boolean with the (non)existence information, but I think this is prone to inconsistencies (if the boolean is not updated immediately when a new image is loaded or deleted, for example), even if I run a daily job to clean it.
Still another option could be to store the images directly in the DB and retrieve them together with the DTOs of the objects I'm loading in each particular page, but I guess that images that are shown only in the frondend should be stored in the frontend... shouldn't they?
Therefore:
a) Is any of these ideas acceptable? Is there a better way to avoid this error?
b) Another possibility: is there a way to access the frontend folders from the backend? I get a bit lost with the publishing and artifacts in Azure and I don't know if I could do it somehow.
I'm not sure how you've built the frontend, but I'm assuming that the background images are set using CSS. It is possible to set multiple background images in the same rule, and the browser will load them all and display them one below the other - if the first one loads successfully, and isn't transparent, then that is the only thing the user will see. But if the first image fails to load - for example because it doesn't exist, the second image will be shown.
See this other answer for more details: https://stackoverflow.com/a/22287702/53538

How to display BaseX get results in http website?

I have create a BaseX database and a mytest.xq file containing an XQuery for that database. When I write in my browser the following:
localhost:8984/rest?run=mytest.xq
I get the desired results in an xml form. However I want to perform this using the html language to display those results in a website. Is this possible? If it is, can the results from xml be visualized better for example a table?
I have looked all the documentation regarding baseX http and have not found a way
You can add &method=html to your url like so:
localhost:8984/rest?run=mytest.xq&method=html
As long as you are returning html from your query then it will render with the method argument. You don't need RESTXQ for your simple needs.
The main BaseX page has an example file in the webapp folder called restxq.xqm where you can see how the basic home page is set up. You don't need RESTXQ but you can use the header information from that file in your test query and render your page with that in mind.
Also there is an entire app in the webapp/dba folder that is written entirely in RESTXQ.

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

URL rewriting Node js - dynamic URLs

This seems to be a Noob question, but still i dont know how to go about with this.
Im using node js for my server side development and recently came across SEO friendly URLs.
How do i rewrite the URLS which are something like www.abc.com/meet_team.html to
www.abc.com/meet-the-team/
One answer would be to use controllers and to route to html pages. This works fine for static web pages.
My problem is with dynamic data. To quote an example, Lets say, yts.ag page has movies stored in the db and it gets retrieved and the url changes dynamically.
For example : www.yts.ag/movies/the-revenant - > This would pick up details about the movie revenant. If the change it to movies/the-dark-knight, it would do so accordingly. Here movies would be the controller, In my Node code, i would handle it something like this.
app.get('/:controller/:movieName', func(req, res){
// get controller and movie name from req object and query from DB and respond back.
})
Now the problem is, i would have stored the name of movie as "The Revenant" in the DB. I would be getting the movie name from the GET request as "the-revenant". How do i query this from the database?
Should i parse the param first? strip the hyphen and then pass it to the DB or any other solution?
Please help me on this. I dont know whether this is the right approach.
Thanks in advance.
It is as you describe. Now you have to retrieve the movie from the slug reference.
Look for mongo or mysql

Efficient way to pass arrays in url

I am building a webapp and have a few arrays that I would like to pass through the URL in order to make the results of my application easily sharable.
Is there an efficient way to do this? I know a lot of websites (like youtube) use some sort of encoding to make their URLs shorter, would that be an option here?
Thanks in advance!
What I suspect you're asking is you have some page where the user can alter information, etc, and you want a way to create a URL on the fly with that information so it can easily be accessed again. I've listed two approaches here:
Use the query string. On your page you can have a button saying "save" that produces a URL with info about what the user did. For example, if I have a webpage where all I do is put my name in and select a color, I can encode that as http://my-website.com/page?name=John_Doe&color=red. Then, if I visit that link, your page could access the query object in JavaScript and load a page with the name and color field already set.
An approach for the "YouTube-style" URLs would be to create a hash of the relevant information corresponding to the page. For example, if I were creating a service for users to store plaintext files. These files are to have the following attributes: title, date, name, and body. We can create a hash of the string hash_string = someHashFunction(title+date+name).
Of course, this is a very naive hashing scheme, but something like this may be what you are looking for. Following this, your URL would be something like http://my-website.com/hash_string. The key here is not only creating these URLs, but having a means to route requests on the server side to the page corresponding to the hash_string.

Categories

Resources