setup-frontend.mdx

setup-frontend.mdx (1247B)
      1 ---
      2 title: "Step 4: Setup Frontend (The Viewer)"
      3 sidebarTitle: "4. Setup Frontend"
      4 ---
      5 
      6 import Copyright from "/snippets/copyright.mdx";
      7 
      8 1. Download `index.html` from the repository.
      9 2. Open it in a text editor.
     10 3. Find the configuration line near the top of the `<script>` block. Before editing, it looks like this:
     11 
     12 ```javascript
     13 const RENDER_BACKEND_URL = "";
     14 ```
     15 
     16 4. Fill in your Render URL, e.g. `https://your-app.onrender.com` (**no trailing slash**).
     17 
     18 That's the only setting needed. As of v4.2.1, the frontend has no Firebase configuration of its own — it authenticates against your Render backend (`/api/verify`) and gets a session token back, then uses that token for every chat/message request over Server-Sent Events. Firebase credentials only ever live on the backend, set in [Deploy the Backend](/whatsapp-logger/deploy-backend).
     19 
     20 ## Deploy the frontend
     21 
     22 You can host this single file anywhere:
     23 
     24 - **Firebase Hosting** (recommended): `firebase init` → Hosting → select `public` directory → put `index.html` there → `firebase deploy`
     25 - **GitHub Pages**: enable Pages in your repo settings
     26 - **Netlify / Vercel**: drag and drop the folder containing `index.html`
     27 
     28 Continue to [Usage](/whatsapp-logger/usage).
     29 
     30 <Copyright />