1 minute read

Introduction

Today, I worked on deploying my web application to Vercel. Although I finished working on this project around a month ago, I wanted to publically deploy it so that it is visible to everyone.

Development Notes

I initially thought of deploying it on github but after doing some research I realized that github can only host static pages. Since my web application had API calls, that wasn’t an option. So I moved on to Vercel.

Vercel Deployment

First of all, I got rid of the homepage dependency on my package.json file in my frontend and the /AI-Risk-Auditor root on App.tsx since I wasn’t going to deploy on github anymore.

Screenshot 2025-07-21 at 4 39 01 PM

Then, I created a docker file to run my backend on a render server since I was using Java for my backend.

Screenshot 2025-07-21 at 4 40 45 PM

After that, I deployed my backend service on render, and it gave me a primary public url I can use for Vercel.

Screenshot 2025-07-21 at 4 41 32 PM

With that publich url, I made an enviornment variable so that my API can be called from render instead of localhost 8080.

Screenshot 2025-07-21 at 4 42 33 PM

I made according changes to my api.ts file so that it utilizes the enviornment variable I previously set.

Screenshot 2025-07-21 at 4 43 45 PM

Everything was set and I deployed my web application on vercel, but when I tried to run the risk assessment, it returned a “Network Error”. So I went into insepct -> Network and it showed me a CORS error. To fix this issue, I changed my Cross Origins to allow vercel depolyment and added a global CORS configuration just in case.

Screenshot 2025-07-21 at 4 46 29 PM

Screenshot 2025-07-21 at 4 46 47 PM

Thankfully, everything worked out now and I wasn’t getting any errors from running the risk assessment. You can check the web application on https://ai-risk-auditor.vercel.app/home