This is a value for value post: see the explanation in the footer.
Future Plan for a Proposal
I'm asking for opinions here: I'm busy learning Vue 3 (the latest version with the Composition API) and the Quasar Framework. I want to put in a funding proposal to create a properly explained way to build a Hive site within this framework.
I want to turn my learning experiments into clean, easy to understand code with the following main features:
- Login in with Hive via Keychain and HAS
- Send Hive transactions
- View Hive content
- Docker containers
- Github actions
- How to host the site
I want to document and present everything I've been learning because this stuff wasn't easy to pull together. The more devs we have on Hive, the better it is for everyone!
This won't be a full site, it'll be a learning framework and as I add features to my own upgrade of @v4vapp's front end, they'll be there in the skeleton site to learn from.
Let me know what you think in the comments.
Today's story of coding Hell
As I am learning Vue 3 and Javascript I'm slowly building in the components I need for the refresh of v4v.app. A day or two ago I started to experiment with calling the Podcast Index API which I'm going to need for the next stage of @v4vapp.
Unlike the API's I run (api.v4v.app), the Podcast Index API requires authentication. That means it is hard for me to call it from the web front end and the best thing for me to do is proxy the calls via my own API server.
That should be easy enough so I set that up and wrote the code to call my own API server.
And it worked. Nice. I got back a list of podcasts for any search term.
Dev vs Prod
But then I put it all up on Github, let Github Actions do their thing and create a Docker Image, sent that to Hub.docker.com and went to my @privex server and told it to use the new image.
And that's when the "fun" started. Suddenly the call to my own API server wasn't working when it was running from my test site https://dev.v4v.app.
Instead of a list of shows on my very bad looking screen, I got angry red errors.
Mixed Content: The page at 'https://dev.v4v.app/testing' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://api.v4v.app/v1/pi/?call=%2Fsearch%2Fbyterm%3Fq%3Dno+agenda%26val%3Dlightning'. This request has been blocked; the content must be served over HTTPS.
But why? The error message said something about not loading over https but I absolutely knew that my code was always calling https:// and not http://.
Sure enough, the call that fails is to https://
But why is it a status code of 307?
And then I dig down a bit and see an http://. What? Where on earth did that come from?
Where's the beef?
So then begins the excruciating process of trying to figure this nightmare out.
Traefik?
When my APIs run on a server, they run in Docker Containers. They're written in my safe space: Python and FastAPI. It's been wonderfully reliable.
But in front of the API server in its happy little Docker Container is the mother of all configuration catastrophes: Traefik.
I only started using Traefik because the interestingly hirsute creator of FastAPI made a video showing how to use it. I followed that video to letter and managed to get it working... but Traefik remains a bit of a darn mystery.
My first thought is that I have to change this mysterious Location header which is mentioned in the error message and seems to have been inserted at some point. Traefik does re-write headers, I know this.
So I turn to my newest friend, $20 per month ChatGPT.
ChatGPT
3 hours of bashing my head away at that, I hadn't managed to do anything except take v4v.app off line half a dozen times.
FastAPI
I then put in a sold hour with FastAPI seeing if the problem was in there and that resulted in... aboslutely nothing.
And then my kid came home
And then my kid came home with a big bunch of friends. One them got looking at my screen and asked what I was doing. So I probably over shared and showed him a bunch of stuff about Hive, Lightning and Podping. I probably embarrassed my son.
But at some point I was showing him the pickle I was in and pointing out the specific error messages on the screen and for some reason, while explaining it to someone else, my eyes looked again at this:
You see that bit where it says /pi?call=%2Fsearch ? well if you're using a web browser as a human, these two links:
https://api.v4v.app/v1/pi?call=/search/byterm?q=no+agenda&val=lightning
https://api.v4v.app/v1/pi/?call=/search/byterm?q=no+agenda&val=lightning
will give you the same result.
But they're not the same. I saw it in a flash.... I went back into my ORIGINAL Vue 3 javascript component and added ONE LITTLE FORWARD SLASH /.
That's where the 307 comes from.
Instantly everything worked. The 307 redirect to an http:// address disappeared and was replaced by a happy green 200. All is good and I can move on.
But one last look at ChatGPT
So now as I'm at the end of my story, I think, what would happen if I noticed that slash at the beginning and asked Chat GPT about it?
So I asked this:
can you explain why the following get requests to a FastAPI server are different when called from within javascript:
https://api.v4v.app/v1/pi?call=/search/byterm?q=no+agenda&val=lightning
https://api.v4v.app/v1/pi/?call=/search/byterm?q=no+agenda&val=lightning
And I've got to tell you, this answer is absolutely perfect.
The two URLs differ only in the presence or absence of a trailing slash after the "/v1/pi" path segment. While the difference may seem minor, it can have an impact on how the FastAPI server handles the request.
The presence or absence of a trailing slash can affect how the URL is interpreted by the server and how it routes the request. In the first URL (without the trailing slash), FastAPI will interpret "/v1/pi" as the last part of the path and will try to match the subsequent query string parameters (call and val) against the route defined for that path.
In the second URL (with the trailing slash), FastAPI will interpret "/v1/pi/" as the last part of the path and will try to match the subsequent query string parameters against a route defined for that path. If no route is defined for that path, the server may return a 404 error.
Depending on how the FastAPI server is configured, it may treat the two URLs differently and handle them in different ways. Therefore, it is important to be consistent in how URLs are constructed and to ensure that the URLs are valid and match the expected route on the server.
But there is a detail missing... so I asked a follow up:
can this cause a 307 redirection status code?
And the answer...
Yes, the difference in the URLs could potentially cause a 307 (Temporary Redirect) status code to be returned by the server. If the server is configured to redirect requests from one URL format to another, then a request to one of the URLs may result in a redirect to the other URL.
For example, if the server is configured to redirect requests without a trailing slash to URLs with a trailing slash, then a request to "https://api.v4v.app/v1/pi?call=/search/byterm?q=no+agenda&val=lightning" could result in a redirect to "https://api.v4v.app/v1/pi/?call=/search/byterm?q=no+agenda&val=lightning", and a 307 status code would be returned.
However, it's important to note that whether or not a redirect occurs and what status code is returned depends entirely on the configuration of the server. The specific behavior of the server will depend on how it is configured and what rules have been put in place for handling requests.
I've got to say, this kinda blows me away. I think most of the hyperbolic expectations around this kind of "AI" are bunk, but for being able to absorb, digest and regurgitate technical computer information, this is amazing.
Value for Value
For the last few months while building @v4vapp I was generously supported by the DHF. Going forward I have a much more modest support which covers direct server costs and a little of my time.
If you appreciate the work I do on and around Hive, you can express this directly: upvoting posts on Hive is great. Also consider a direct donation (there's a Tip button on Hive or a Lightning Address) on all my posts.
Support Proposal 244 on PeakD
Support Proposal 244 with Hivesigner
Support Proposal 244 on Ecency
Vote for Brianoflondon's Witness KeyChain or HiveSigner
