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
The proposal sounds good. We could always use new devs and your in depth knowledge is certainly very valuable information for them.
@ ChatGPT: Is that the free version you used for the request? Sounds indeed very smart to notice and understanding such a tiny code-error.
I paid. I think the actual answers are the same as the free but I was always having network timeouts and being told its too busy. I still have network issues (I think Cloudflare doesn't like my home internet) but access is much more reliable.
Understand. Just let me know once you have the new proposal ready, will vote it definitely. Good idea. 👍🏻
That sounds pretty good and I believe that there are many users interested in having a good starting point when beginning a site. If I could make a suggestion, beside the documentation itself you could do a Github open source starting repository for a site. That would really capture attention and bring more support.
Posted Using LeoFinance Beta
I will be publishing everything open on Github for sure and work on better Readme and docs.
I'm going to have to check out Vue 3 and 4v4.app properly (in the cards because micro transactions) before I'm able to make an informed comment.
On ChatGPT. Wow! Holy moly. Developers all over the world will be sobbing with relief! :D
@wwwiebe Look 👆🏼
I have a love/hate relationship with ChatGPT. On the one hand it's going to put me out of a job, but on the other I use it extensively and it helps me in cases very similar to this one. Very cool.
I thought so :)
I've been reading stuff that's clearly written by it. It just feels "flat".
That's sad.
But if it can be used for stuff like this then okay. No more searching for hours for missing semi colons.
ChatGPT is absolutely awesome Ai. For it to tell you that the 2 URLs can be treated differently by the Fast api server is revolutionary. I still haven't actually tried it yet !
Wow smack, yeah that's why middleware is the most expensive part of Enterprise Software. None wants those kinds of stupid errors on a multi-million dollar production part.
Good job Brian, good job.
The way you have shared all the details of the hive coming up is very good as it allows us to understand the user easily. Some of my friends live in other cities when I was talking to them about hive they also wanted to start working on it but they didn't understand the way I understood them. I will share this post with them. Earlier the vision of CHATGPT was not giving the right answer but this version is giving the right answer and people are benefiting a lot. Thanks for sharing.
This is really a great ideology that will be very helpful with how you've analysis the progress of what is set to be achieved and I really appreciate the effort on this.
~~~ embed:1650578015338782741 twitter metadata:MTM1OTYwNDI0MjI1Njk1MzM0NXx8aHR0cHM6Ly90d2l0dGVyLmNvbS8xMzU5NjA0MjQyMjU2OTUzMzQ1L3N0YXR1cy8xNjUwNTc4MDE1MzM4NzgyNzQxfA== ~~~
The rewards earned on this comment will go directly to the people( @brianoflondon, @v4vapp, @zeshan120 ) sharing the post on Twitter as long as they are registered with @poshtoken. Sign up at https://hiveposh.com.
Congratulations @brianoflondon! You have completed the following achievement on the Hive blockchain And have been rewarded with New badge(s)
Your next target is to reach 5000 replies.
You can view your badges on your board and compare yourself to others in the Ranking
If you no longer want to receive notifications, reply to this comment with the word
STOPCheck out our last posts:
Congratulations @brianoflondon! You received a personal badge!
Participate in the next Power Up month to get another one!
You can view your badges on your board and compare yourself to others in the Ranking
Check out our last posts:
Congratulations @brianoflondon! You received a personal badge!
Wait until the end of Power Up Day to find out the size of your Power-Bee.
May the Hive Power be with you!
You can view your badges on your board and compare yourself to others in the Ranking
Check out our last posts: