Making it properly dynamic

2023-05-12

Table of Contents
The Problem
Solution
Process

The Problem

Not long after my last post, the solution quickly became invalid. This is due to the fact the i've exposed my github api key on the frontend in order to add in the dynamic function. I thought this was ok since the api key is "fine grained"(according to github's naming) to only have read access to my website repo, but github revoked it immediatly as soon as i made that repo public.

Solution

The final solution i went with is netlify's serverless functions. They are avaiable for free tier user and can provided dynamic functions.

Here is the Intro article that i followed as a guide.

Honorary mention: The fetch not defined bug after deployment and its solution. I will talk about it more in later.

Process

Attempt 1

Previously i didn't opt in for the whole "building a backend" things because hosting a backend a seperate provider makes the dynamic features really slow. But then i realize the files mdbook generates can be treated as the frontend, and a backend can be wraped around it.

So that's what I did, I took that simple backend I've build previously, swap out the public folder with the generated static web content, and called it day.

My file structure:

my-app/
├─ node_modules/
├─ book(generated)/
│  ├─ favicon.ico
│  ├─ index.html
│  ├─ ...
├─ src/
│  ├─ index.js
│  ├─ ...
├─ .gitignore
├─ package.json
├─ README.md

However, after reaching this step, a new problem arise: where to host all of this code?

Attempt 2

One of the main reasons i'm hosting my website on netlify is that its for free and the expierence is nice, but this only applies to static website. The only free solution(that i know of) for full stack website hosting is cyclic.sh, which has a mediocre experience at best. Any other solutions that is comparable to netlify cost a solid chunk of money.

Here comes netlify's serverless functions. After fiddling with it for bit, i was succeful in implementing the same feature as i did in the simple server.

Here is my file structure:

.
└── Project/
    ├── .netlify(this is generating using netlify-cli)/
    │   └── ...
    ├── node_modules/
    │   └── ...
    ├── book(frontend)/
    │   ├── index.html
    │   └── ...
    ├── netlify/
    │   └── functions/
    │       └── api-endpoint-1.js
    ├── netlify.toml
    ├── package-lock.json
    └── package.json

I copied the commit fetching code into the api-end-point-1.js and made it a function, and added the endpoint function at the top.

The endpoint function:

export const handler = async () => {
    const html = await getLatestCommit();
    try {
      return {
        statusCode: 200,
        body: JSON.stringify({
          content: html,
        }),
      }
    } catch (err) {
      return { statusCode: 500, body: err.toString() }
    }
}

and that's about it, the rest is just following the intro article mentioned at the top.

The bug

One of bugs that was worth mentioning on is the fetch not defined bug.

Bug

fetch not defined

This bug will only appear after deployment to netlify. This probably have to do with node.js version mismatch between the local machine and the cloud service netlify is using, so use the solution given at the top should solve it.

Anthony's blog