Add a linkchecker for the front end

[Julian]

We should link check every link contained in the frontend UI with an automated link checker in order to catch broken links.

[JeelRajodiya]

We can implement this using a GitHub action, The same way we are currently doing in webiste, see this PR

I like to work on this issue

[officeneerajsaini]

@JeelRajodiya, yeah, that's a great idea. Also, we need to add Vercel to our repository so that anyone making changes can submit a pull request. This way, we can check their pull request's UI with Vercel's development environment before merging it into the main branch.

[Julian]

lychee -- which is the actual tool being used there, seems fine/nice -- but I don't really like the flow in that PR for the JSON Schema website -- specifically it's quite odd to have to spin up the website to do the link check.

I would hope there's some more "integrated" way to run lychee over the output of vite and/or React applications, so that it's simply a final step in the build process.

If you or anyone thinks they're able to can you investigate doing things that way?

[JeelRajodiya]

lychee -- which is the actual tool being used there, seems fine/nice -- but I don't really like the flow in that PR for the JSON Schema website -- specifically it's quite odd to have to spin up the website to do the link check.

I would hope there's some more "integrated" way to run lychee over the output of vite and/or React applications, so that it's simply a final step in the build process.

If you or anyone thinks they're able to can you investigate doing things that way?

Sure! I'll investigate on that

[JeelRajodiya]

I figured that our frontend is a single page react app. So when we build the project our index.html looks something like this

Link checker tools that are available on the internet checks for broken links inside a html or any other static files.

Structure of the build folder

The hyperlinks are available into the main html file when the javascript file is loaded and executed using the browser.

if we want to check for the broken links we'll have to run the build in a virtual browser i.e. something similar to lighthouse ( that will hydrate the index.html ) and then we can check for broken links from that index.html file using tools like lychee.

If we don't want to run a virtual browser, since the index.js file contains the links what we can do is write a script to check for broken links from the index.js file.

This index.js file

Example of links saved in the index.js file

[JeelRajodiya]

I found a npm package puppeteer that can crawl a SPA (Single-Page Application) and generate pre-rendered content (i.e. "SSR" (Server-Side Rendering)).

I am thinking of this flow: First build the project -> run puppeteer to generate a static html file -> run lychee on the generated static html file

[JeelRajodiya]

@Julian let me know if I should proceed or not

[Julian]

Thanks for the research -- I'm not fully thrilled with that kind of setup, but I don't yet have any other suggestion. Let's hold off for a bit then and I'll have to have a look at trying to find something that illustrates, or else I'll give up and we can go with something like that, but I want to look first.