More Complex UI Server

I had to lower the security of Chrome to let it pass through. Anyway to get this to work without increasing the risk?

Figured out the issue....but have a question regarding pathing of the index.html file from the public folder. I needed to change public to ../public when registering the fastify-static plugin. Any idea why???

Here is some code that i have in each of the folders.

API Folder
// originally had this in my API (this func resides in api folder)
// where path = /Users/.../my-git/auth-service/ui/src/public
export const registerStaticPlugins = (app) => {
  app.register(fastifyStatic, {
    root: path.join(__dirname, 'public'),
  });
  logMessage(`📂 Registered fastifyStatic plugin`, logLevel.STARTUP);
};

UI Folder
// BUT, in the UI folder I needed to change to "../public". Not sure why. Any idea? (this func resides in UI folder)
export const registerStaticPlugins = (app) => { 
  app.register(fastifyStatic, {
    root: path.join(__dirname, '../public'),
  });
  logMessage(`📂 Registered fastifyStatic plugin`, logLevel.STARTUP);
};