Day 49 of #100DayOfCode — Deployment II: Deploy Frontend

Previously, on Day 48, I deployed the backend of the auth system on Vercel. For today, Day 49, the goal was to deploy the frontend of the auth system. The thing is, deploying the frontend on Vercel is a very easy process compared to the backend deployment Step 1: Create .env file VITE_API_URL=Backend_API This will store the URL of your deployed backend. Step 2: Change the URL in the App.tsx const API_URL = import.meta.env.VITE_API_URL; Why import.meta.env? import.meta is a JavaScript ES module feature that contains metadata about the current module. In Vite: import.meta.env → holds all environment variables Only variables prefixed with VITE_ are exposed to the frontend So: import.meta → module metadata .env → environment variables .VITE_API_URL → your custom variable 👉 During npm run build, Vite replaces this with the actual value. It’s basically Vite’s version of: process.env.YOUR_VARIABLE Step 3: Deploy on Vercel After pushing the repo to GitHub, go to Vercel Click Add New → Project