✓
the short answer

The most robust way to style and white-label the app is injecting CSS specificity overrides (#base44-edit-badge { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; }) directly into src/index.css via Base44's AI assistant, followed by calling POST /api/apps/:appId/deploy. When Vite compiles the bundle, the CSS rules take effect instantaneously upon DOM insertion.

📖 Introduction

Understanding how Base44 structures production applications is key to creating clean, white-label client deliverables. In this technical deep-dive, we examine the Base44 server injection pipeline, DOM node lifecycle, and how Push44 automates live CSS overrides and production redeployments.

The Problem with Walled Gardens

Base44 apps deployed to *.base44.app are served by a Cloudflare-fronted reverse proxy. The server HTML template injects /static/js/badge.js, which creates a fixed container with id='base44-edit-badge' on DOMContentLoaded. Because the script is loaded at runtime, static edits must be compiled into the production stylesheet.

The Push44 Solution

The most robust way to style and white-label the app is injecting CSS specificity overrides (#base44-edit-badge { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; }) directly into src/index.css via Base44's AI assistant, followed by calling POST /api/apps/:appId/deploy. When Vite compiles the bundle, the CSS rules take effect instantaneously upon DOM insertion.

Step-by-Step Walkthrough

4 steps
1

Inspect the Base44 runtime architecture

Base44 injects <script src='/static/js/badge.js'></script> into the document <head>. On DOMContentLoaded, it constructs a fixed container with ID #base44-edit-badge at zIndex 999999 containing branding links.

💡 expert tip

The DOM node ID is always strictly #base44-edit-badge across all Base44 generated applications.

2

Formulate CSS specificity override rules

To guarantee proper styling across all browser engines, the rule uses: #base44-edit-badge, #base44-badge, div[id*='base44'], .base44-badge { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; }.

💡 expert tip

Appending these rules to src/index.css ensures Vite compiles them into dist/assets/index-*.css with maximum priority.

3

Automate code injection via Base44 AI Chat API

Push44 calls POST /api/apps/:appId/chat/message with instructions to update src/index.css. Base44's backend assistant processes the diff and updates the sandbox checkpoint.

💡 expert tip

Push44 waits for the sandbox checkpoint status to transition to ready before triggering deployment.

4

Trigger production redeployment

Push44 sends a POST request to /api/apps/:appId/deploy. Base44 initiates a fresh Vite production build and publishes the static artifacts to their CDN edge, delivering a 100% white-label live site.

💡 expert tip

The deployment response includes the latest commit hash and checkpoint ID.

Pro Recommendations

✓

The CSS override rule applies before React hydration, preventing any visual flickering or layout shifts

✓

All live URLs (https://<slug>.base44.app) update immediately upon deploy completion

✓

Push44's automated workflow takes under 20 seconds from click to live deployment

Common Pitfalls to Avoid

⚠️

Trying to use ad-hoc DOM scripts that fail race conditions

⚠️

Editing dist files locally without updating the upstream Base44 source checkpoint

⚠️

Failing to purge browser cache after redeployment

Frequently Asked Questions

Why does the CSS injection approach work best?

Because CSS rules are evaluated synchronously by the browser's rendering engine before scripts execute. When badge.js creates #base44-edit-badge, the element is instantly styled with zero layout shift.

Can I also export the full white-label code to GitHub?

Yes! Push44 also strips platform links from all exported JSX/TSX and index.html files before pushing commits to your GitHub repository.

100% free · zero backend · client-side

Export and push your code in seconds.

Connect your platform, preview the visual diff, and create atomic commits on GitHub with zero server data retention.

Start exporting now → Learn more