Read on Twitter
This weekend I finally got to release my side-project I've been working on for the past couple of months. Here's a little thread about what I've learned working full-stack for the first time.
1/
1/
My stack for this was @vercel's Next.js for the frontend and @prisma for my backend. Both parts are hosted on Vercel which has been a pleasure to work with.
The hardest thing was finding a way to not spend a fortune on a Database. I tried @heroku for a while, but their free tier was just too limited and I didn't want to spend 10$+ a month for something I was testing out.
Thankfully I was tipped off to getting a free Google Server from this article, so I managed to set up a Postgres instance for .10c a month on an Ubuntu VM on Google Cloud. https://dev.to/phocks/how-to-get-a-free-google-server-forever-1fpf
If you're looking for a way to start a project without spending anything before making some profits, going serverless + self hosted database is the best way I've found.
You're in control of your data and open to scaling to another platform whenever you want!
You're in control of your data and open to scaling to another platform whenever you want!
@prisma Is also absolutely fantastic, when I started I knew literally zero SQL beyond the basics of SELECT *, but Prisma allowed me to have a solid foundation I could test and build things upon without worrying.
I ended up using actual SQL for only 3 of my requests, everything else is still using Prisma's API. I've released a boilerplate version of my API which you can find here: https://ironeko.com/posts/serverless-api-with-prisma-on-vercel/?ref=twitter
That said, I've realised SQL is actually not as hard as every single tutorial seems to make it. I had the luck to be helped by someone that writes SQL professionally and his best advice was:
Stop trying to do everything in a single query.
Stop trying to do everything in a single query.
Before and after.
Yes it's a lot wordier, but it made it a lot easier to test and maintain. I'm not an expert in any way but separating my Joins allowed me to actually understand what I was doing.
Yes it's a lot wordier, but it made it a lot easier to test and maintain. I'm not an expert in any way but separating my Joins allowed me to actually understand what I was doing.
On the frontend side of things my main problem was that I:
- Wanted users to be able to submit pages and making them accessible immediately
- Have them SSR for search engines
- But without having to run a server
- Wanted users to be able to submit pages and making them accessible immediately
- Have them SSR for search engines
- But without having to run a server
Turns out this is doable by keeping a Next.js fallback active.
If the page doesn't exist, it's rendered on the client, if it is, then it renders statically generated HTML. https://nextjs.org/docs/basic-features/data-fetching#fallback-false
If the page doesn't exist, it's rendered on the client, if it is, then it renders statically generated HTML. https://nextjs.org/docs/basic-features/data-fetching#fallback-false
The second piece of the puzzle was creating a cron Action in Github that runs daily/weekly to just redeploy my pages. You can check that out here: https://github.com/creativiii/mci-servers/blob/master/.github/workflows/weekly-deploy.yml
I suspect I might need to scale this to something different in the future, or by returning only things created after a certain time, but it works for now!
In general this was a really cool experience, I'm glad I stepped outside of my frontend comfort zone and gave the fullstack experience a shot.
You can find the final (beta) result here. It's Minecraft-related so I doubt it'll of much interest to many, but I'm still very proud of how it came out.
https://servers.minecraftitalia.net/
https://servers.minecraftitalia.net/
