_This is a submission for the New Year, New You Portfolio Challenge Presented by Google AI
About Me
My name is John and I come from the era when everyone used stackoverflow 😆. This is my journey of not only building version 2 of my portfolio, but also the hell that came later when deploying to google cloud for the first time. Btw, Google Cloud is a great tool, this is user issue.
Receiving this error after creating a docker file for my google cloud project:
ERROR: (gcloud.run.services.update) The user-provided container failed to start and listen on the port defined provided by the PORT=8080 environment variable within the allocated timeout. This can happen when the container port is misconfigured or if the timeout is too short. The health check timeout can be extended. Logs for this revision might contain more information.
This error pretty much defines 5 hours of my life and how I missed simple logging that could have saved my ass!
How I Built It
I'm always getting nudged by my significant other to do these dev challenges and I've been wanting to rebuild my website in react with a three.js background. This being an Google AI challenge, I figured I would go head deep into this stack. I started by downloading Antigravity, a glorified VSCode with Google AI Studio built in. After downloading, with 0 thought, I crafted a simple prompt to make this happen:
Download my website from https://www.madrigal.design, and redesign the website into a react.js stack. Clean up the website and modernize the code.
Let's just say it did an absolute abominable job in recreating the code. I really wish I had the screenshots from this. Move past how bad it did, I ended up deciding to try it again, but inside my folder with all the code I had originally created.
This time, Antigravity had actually generated something very useable almost right off the top. Using Antigravity and it's built in AI, it first built the project in vanilla Javascript and CSS, which looked nice but I personally wanted it in react. I reprompted it to be built in react and it did a pretty incredible job. This saved me a lot of time, but definitely added a little bit of bloat, all which I'd return to the code to slash out.
I haven't had the time to really learn Three.js, which I absolutely would love to spend some time in at some point. I knew I wanted my background redone in Three.js and I think this is where AI and learning can shine. I prompted the AI to create a particle wave background showing rippling patterns of color and to make it minimal.
After about 3 more prompts updating the colors to fit my website, I was actually pretty amazed at how well it did and was quite impressed at how little code it took to make a background like this happen. I did this also with my creations and projects section, going back in the code and redoing it to make a carousel I wanted to see my projects on. It was nice to have studio, not as a crutch, but as a way to speed things up and learn how Three.js is implemented.
I wanted something different for my site as well. Maybe there's a little bit of chaos hidden within the website. THIS IS A WARNING! Be sure to press the Stop Chaos! button when the time comes.
Deployment from Hell ☠️
Fast forward to the finished portfolio, it's now time to deploy it. I got my google cloud set up was tapping at my desk like the happiest kid on earth, excited to get my website up and deployed ☺️. I opted to do the GitHub Repository continuous deployment where when the server see's a new commit pushed, it'll auto deploy the most current and up to date code on the repository.
This is the first time I encountered an error that would be the bane of my existence.
Receiving this error after creating a docker file for my Google Cloud project: ERROR: (gcloud.run.services.update) The user-provided container failed to start and listen on the port defined provided by the PORT=8080 environment variable within the allocated timeout. This can happen when the container port is misconfigured or if the timeout is too short. The health check timeout can be extended. Logs for this revision might contain more information.
This is where it started to become annoyingly nasty and where trusting AI instead of logs, failed me. Bad habits can form quick, so I used Google Gemini to try and help me with this error. Why not? Antigravity did such a great job, this IS Google Cloud we are using, so it should be able to fix a product of they're own very quickly.
Prompt after prompt, deployment after deployment, I was continuing to still get same error. Why? I've done what you've told me! I've followed your every command google, so why am I still receiving this?! 🤣😵💫
I'm usually not this trusting in AI, but some how I got a little out of control. 🤪 After about 13 failed deployments, I decided to give it 24 hours and to come back to the code.
48 Hours Later
48 hours later (yes, i needed some time) I hopped back in and this time, my significant other nudged me this time to check the logs and we looked at them together. She noticed something wrong when it came to Vite being built, so we dropped this into Google Gemini to see if we could get an answer.
At first I saw and thought, SAME error! 😱 But because we are now checking the logs, we can tell it is truly a different error. The Vite issue was fixed and the way serve was being called was incorrect. After fighting with it a few more deploys later, SUCCESS. Finally! I can breathe. And let me tell you, I gave off the hugest sigh of relief.
Serve Error
Succession!!!
Honestly, I wasn't even sure that it was real, haha 🫣. After all the fighting, I was just waiting for something else to break or be wrong. But it was running, and correctly at that.
After finally resolving the issue, I then created and pointed a subdomain to google cloud using there domain mapping. After giving it time to process, my new domain and new site was finally live on cloud.
Portfolio
Let this be a lesson to use and debug with logs to start, and to also understand that AI can be a useful tool for learning and quick coding when done in a proper manner.
What I'm Most Proud Of
I needed this update for myself and it was enjoyable to play with new tools, new stacks, and do something different. Antigravity was a fun, juiced up version, of vscode to play with and being able to produce a website with Three.js inside my editor in the stack I wanted was nice to try, see, and learn. I think the Three.js background is what really stood out to me in this rebuild. Thanks to the DEV community and there competitions for this.
Top comments (1)
Great job on this one! I love the dots and your cursor is interesting! Very fun. So glad you decided to try it!