Tech Tim (@TechTim42)
Posted on October 11, 2022
There is one request from a friend/customer for me to build a simple agenda website. These are the requirements, (nothing is hard here😎)
- Mobile First
- Users are able to view and scroll to view the agenda, when they click the link, the will be redirected to the detailed part
- A few UI requirements (font, font-size, color etc)
Repeat myself again, nothing is hard. 😎 The only concern here is:
- How to deliver it fast,
- At the same time to have a good Flexibility to have changes,
- And have a very goof Performance
JAMStack is quite popular, to gain better flexibility, Headless CMS could be used. For having even better flexibility, I decided to use a BaaS here. (Read more about Comparison between BaaS and JAMStack) SupaBase is one of the stable and popular option. It is a BaaS powered by PostgresDB, with Real time feature and AWS S3 compatible Storage Service.
React/NextJS is the front-end stack I have been used for years, it is popular and have very good performance, especially with NextJS Server Side Rendering + Vercel Edge Computing
Vercel (aka Zeit), is the company behind NextJS, it is a dev friendly front-end application host platform. With build-in extra features, such as CDN, edge computing, pipeline, Github integration etc.
Back-end => SupaBase
Supabase has many regions to choose when set up a new project. It has a free tier for users with 2GB Bandwidth and 500Mb DB Storage, not a big amount, but it is more than enough for an single agenda web application.
If each request is going through the Supsbase, the free tier resources will be easy to be gone. Next.js is used here to solve the problem. More about SupaBase Pricing
Front-end => Next + Vercel
Basides the famous SSR (Server Side Rendering) feature of NextJS, it supports SSG (Static Site Generation) as a Static Content Generator Framework. SSG it will request only once when the site is build, which it will save a lot of Bandwidth of Supabase.
Other Tips
Tips to use SupaBase for free
Supabase has one limit for the free pricing plan users.
Free projects are paused after 1 week of inactivity.
How to bypass weekly inactivity pause of Supebase?
The solution I have for this is to use Github Schedule Action to consume the supabase project 3 days a week.
# .github/workflows/Health.yml
name: Health Check
on:
schedule:
# every Mon, Wed, Fri
- cron: "30 5 * * 1,3,5"
jobs:
build:
runs-on: ubuntu-latest
steps:
- name: Ping the Ping
run: wget https://xxxxxx.vercel.app/api/ping
In the yaml code above for github action config, it requires an API/Ping endpoint which connnect to Supabase.
// ping.ts
export default function handler(
req: NextApiRequest,
res: NextApiResponse<Data>
) {
MyPingFunction().then((data)=> {
res.status(200).json({ result: 'Echo' })
}).catch((e)=>{
res.status(500).json({ result: 'error, not healthy' })
})
}
How to avoid to avoid external reference of a public image
There are always some images, they are better to not have a public url.
This could be solved as an signed url (with expiration date) like how AWS S3 manage this.
Actually, there is another way to solve it.
To use Base64 to store the image as string.
Please note, users are still able to view and download images.
to generate base64 string as a file:
openssl base64 -in <infile> -out <outfile>
Summary
References:
Posted on October 11, 2022
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.