מתחיל · 45 דק׳ קריאה · עודכן 2026-06-22

מ-Base44 / Lovable ל-Firebase: המדריך המלא

איך מוציאים את הקוד מ-Base44 או Lovable ומפרסמים אותו ב-Firebase Hosting על דומיין משלך — צעד-צעד, בלי ניסיון קוד, עם SSL חינמי וחשבונית צפויה.

FirebaseBase44LovableHostingDeployment
למי זה מתאים: בנית אתר או אפליקציה קטנה ב-Base44 או Lovable, ואתה רוצה להעביר אותם לתשתית שאתה הבעלים שלה — בלי תלות בכלי שבנית בו, עם דומיין משלך, SSL חינמי וחשבונית צפויה. המדריך הזה מניח אפס ניסיון בקוד; כל פקודה ופעולה מוסברת.

למה לעבור מ-Base44 ל-Firebase בכלל?

המעבר מ-Base44 ל-Firebase הוא לא הצבעת אי-אמון בכלי שבנית בו. גם Base44 וגם Lovable הם כלים מצוינים לבנייה מהירה (אם אתה עדיין שוקל איזה כלי vibe-coding מתאים לך, יש לי השוואה נפרדת במדריך הכלים). הסיבות לעבור הן פרקטיות יותר מאשר אידיאולוגיות:

בעלות מלאה על הקוד. ברגע שהקוד יושב ב-GitHub שלך, אף אחד לא יכול לסגור לך את החנות מחר בבוקר. אתה לא תלוי במחיר של החודש הבא, בשינוי תנאי שימוש או בהחלטה עסקית של חברה שאתה לא מכיר. אם Base44 או Lovable יעלו 200% במחיר, האתר שלך ימשיך לרוץ.

עלויות. ב-2026 רוב האתרים הקטנים ירוצו על Firebase ב-0 ש״ח לחודש. התוכנית החינמית של Firebase Hosting (Spark) נותנת 10GB אחסון ו-10GB תעבורה בחודש, מה שמספיק לאלפי מבקרים על אתר רגיל. בהשוואה — תוכנית ״Builder״ של Base44 (זו שפותחת ייצוא ל-GitHub) היא 40$ לחודש בתשלום שנתי או 50$ בתשלום חודשי, ו-Lovable בטווח דומה. אם האתר שלך הוא דף נחיתה או פורטפוליו, אתה משלם הרבה כסף על מנוע שכבר עשה את העבודה שלו.

ביצועים. Firebase Hosting משתמש ב-CDN גלובלי של גוגל, כך שהאתר נטען מהר מכל מקום בעולם. הבילד של Vite (מה שיצא לך בסוף) הוא קבצים סטטיים — בלי שרת באמצע, בלי latency, בלי "Cold Start". זה פשוט מהיר.

גמישות. ברגע שיש לך את הקוד, אתה יכול לחבר Firebase Auth, Firestore, Cloud Functions, Stripe, Resend, EmailJS — כל מה שבא לך. אתה לא תקוע ביכולות שהפלטפורמה החליטה לתת לך. רוצה לדעת איפה Firebase עומדת מול Vercel לפני שאתה מתחייב? קרא את Vercel מול Firebase Hosting. ואם תרצה טופס יצירת קשר אמיתי אחרי המעבר, טפסים עם EmailJS ו-Resend מכסה בדיוק את זה.

שקיפות. כל השינויים בקוד הם commits ב-Git, ויש לך היסטוריה מלאה. אם משהו נשבר, אתה יכול לחזור אחורה.

אזהרה הוגנת: לא הכל מתאים ל-Firebase Hosting הקלאסי. אם האפליקציה שלך משתמשת ב-Backend של Base44 (פונקציות שרת, מסד נתונים מנוהל) — Firebase Hosting לבדו לא יחליף את זה. תצטרך לחבר Firestore או להשאיר חלק מהשירותים ב-Base44 ולקרוא להם מהקוד שלך. נדבר על זה בהמשך.

שלושה תרחישים — מי אתה מבין השלושה?

לפני שאתה משקיע 45 דקות, שווה לדעת לאיזו קטגוריה אתה שייך. זה משנה לחלוטין כמה עבודה לפניך:

התרחיש שלךמה יש באפליקציהכמה קשה המעברמה תקבל בסוף
אתר סטטידף נחיתה, פורטפוליו, אתר תדמיתי. אין login, אין מסד נתוניםקל — המדריך הזה מספיקאתר חופשי לגמרי מ-Base44, 0 ש״ח לחודש
אתר עם טופסטופס יצירת קשר / רישום, בלי משתמשים מחובריםבינוני — צריך להחליף את שליחת הטופסאתר על Firebase + שירות טפסים חיצוני
אפליקציה מלאהlogin, משתמשים, מסד נתונים, פונקציות שרתמורכב — פרויקט בפני עצמותלוי כמה אתה מוכן לכתוב מחדש

אם אתה בקטגוריה הראשונה — תמשיך לקרוא בלי דאגות. אם אתה בשנייה — המדריך עדיין רלוונטי, ובשלב יצירת הטופס תחליף את ה-SDK של Base44 בקריאה ל-EmailJS או Resend (פירוט במדריך הטפסים).

אם אתה בקטגוריה השלישית, חשוב להבין את הגבול: Base44 מאפשרת ייצוא של ה-Frontend בלבד ל-GitHub. ה-Backend והמסד נתונים נשארים תמיד אצלם. המשמעות — האפליקציה המיוצאת תמשיך לקרוא ל-API של Base44 דרך ה-SDK, וכל עוד היא עושה את זה, אתה עדיין צריך מנוי פעיל שם. כדי להשתחרר לגמרי תצטרך להחליף כל קריאה ל-SDK בקריאה מקבילה ל-Firebase: כל entity הופך לאוסף (collection) ב-Firestore, כל פונקציית Deno הופכת ל-Cloud Function v2, וה-auth של Base44 מוחלף ב-Firebase Auth. זה פרויקט הנדסי שלם, לא צעד-צעד של חצי שעה — ולכן רוב המדריך הזה ממוקד בקטגוריות הראשונה והשנייה, שזה גם רוב מי שבונה ב-Base44. אם אתה כן צריך מסד נתונים מנוהל בצד הלקוח בלי שרת, שווה לקרוא גם על RAG ועוזר מבוסס מסמכים כדי להבין איך נראית ארכיטקטורה עצמאית.

מה תצטרך לפני שמתחילים?

עבור על הצ׳קליסט הזה לפני שאתה ממשיך. אל תדלג — חצי מהבעיות הנפוצות נפתרות בכך שיש לך את הכל מראש:

  • [ ] חשבון GitHub — חינמי, ב-github.com. אם אין לך — תרשם עכשיו, זה דקה.
  • [ ] חשבון Google — לצורך כניסה ל-Firebase. כנראה יש לך כבר.
  • [ ] Node.js גרסה 22 ומעלה (מומלץ 24, שזה ה-LTS של 2026) — נתקין בשלב 3.
  • [ ] Git — נתקין בשלב 3.
  • [ ] Terminal / Command Prompt — ב-Mac זה "Terminal", ב-Windows זה "PowerShell" או "Command Prompt", ב-Linux זה כמעט בטוח שאתה יודע.
  • [ ] VS Code (אופציונלי אבל מומלץ) — עורך טקסט חינמי מ-code.visualstudio.com. עוזר לראות את הקוד.
  • [ ] דומיין (אופציונלי) — אם אין לך דומיין משלך, האתר ירוץ על כתובת xxx.web.app חינמית. אפשר לקנות דומיין אחר כך.
  • [ ] תוכנית בתשלום ב-Base44 או Lovable — לצערי, ייצוא קוד מצריך תוכנית בתשלום ברוב המקרים. ב-Base44 זה Builder ($50/חודש), וב-Lovable זה אחת מתוכניות התשלום. אם אתה רוצה לעבור — תכנן לשדרג חודש אחד, לייצא, ואז לרדת.
  • [ ] סבלנות. המדריך הזה לוקח כ-45 דקות בפעם הראשונה. בפעם השנייה — 5 דקות.

שלב 1: הוצאת הקוד מ-Base44

Base44 עברה ב-2025 לתמיכה רשמית בייצוא ל-GitHub עם סנכרון דו-כיווני. זה אומר שהקוד שלך מתעדכן ב-GitHub כל פעם שאתה עורך ב-Base44, ולהיפך.

שים לב: כפי שצוין למעלה, ייצוא ל-GitHub זמין רק בתוכניות Builder ומעלה ($50/חודש ויותר נכון ל-2026). התוכנית החינמית והתוכנית Starter ב-$20 לא תומכות בייצוא.

1.1 פתיחת הפרויקט שלך ב-Base44

נכנס ל-base44.com, התחבר, ופתח את הפרויקט שאתה רוצה לייצא. וודא שהוא במצב יציב — שהאתר עובד אצלך בתוך Base44 לפני שאתה מייצא. אין טעם לייצא קוד שבור.

1.2 חיבור GitHub

בתוך עורך הפרויקט, חפש את אייקון ה-GitHub בפינה הימנית-עליונה (תלוי בגרסת ה-UI — אם לא רואה, חפש בתפריט "Dashboard" → "GitHub"). לחץ עליו.

יפתח חלון שמבקש ממך:

  1. ללחוץ Connect to GitHub
  2. ללחוץ Connect GitHub (כן, זה נראה כפול — זה התהליך)
  3. ללחוץ Authorize Base44 Builder — תועבר לעמוד של GitHub שמבקש הרשאה
  4. לבחור באיזה חשבון/ארגון של GitHub להתקין את האפליקציה
  5. לבחור אילו ריפוזיטוריז Base44 יוכלו לגשת אליהם — ההמלצה: "Only select repositories" וליצור ריפו חדש ייעודי
  6. ללחוץ Install

1.3 יצירת ריפוזיטורי חדש

חזרה ב-Base44, בחר את החשבון/ארגון שמתחתיו ייווצר הריפו, תן שם לריפו (למשל my-base44-site), ולחץ Create Repository.

מהרגע הזה, כל שינוי שאתה עושה ב-Base44 ידחף אוטומטית ל-GitHub. אין כפתור "push" — זה אוטומטי.

1.4 מה חשוב לדעת לפני שממשיכים

  • הסנכרון הוא קבוע. אי-אפשר לנתק את GitHub ולחזור למצב המקורי. תכנן בהתאם.
  • הקוד שמיוצא הוא ה-Frontend בלבד. אם בנית פונקציות Backend ב-Base44, או אם אתה משתמש במסד הנתונים שלהם, הקוד שתקבל ב-GitHub יקרא לאותם שירותים דרך ה-SDK של Base44. האפליקציה תמשיך לדרוש חיבור ל-Base44 כדי לעבוד — ולכן תידרש שמירה על המנוי שלך שם, או החלפה של אותם שירותים בשירותים מקבילים של Firebase (Firestore, Auth, Functions). זה פרויקט בפני עצמו ולא נכוסה במדריך הזה.
  • אם האתר שלך הוא סטטי לחלוטין (דף נחיתה, פורטפוליו, אתר תדמיתי בלי טופס שמתחבר ל-DB) — אתה במצב הכי טוב. תעבור חלק.

שלב 2: הוצאת הקוד מ-Lovable

ל-Lovable יש את ה-GitHub sync הכי חלק בשוק. הוא דו-כיווני אמיתי, ועדכונים ב-GitHub מסונכרנים בחזרה ל-Lovable על ענף main.

2.1 פתיחת הפרויקט

נכנס ל-lovable.dev, התחבר, ופתח את הפרויקט.

2.2 חיבור חשבון GitHub שלך

לחץ על אייקון ה-GitHub בפינה הימנית-עליונה, או נווט ל-Connectors → GitHub. לחץ Connect GitHub והתחבר ל-GitHub עם החשבון שלך.

2.3 התקנת אפליקציית Lovable ב-GitHub

לאחר ההתחברות הראשונית:

  1. חזור ל-Connectors → GitHub בתוך Lovable
  2. לחץ Connect project
  3. לחץ Add organizations ובחר חשבון אישי או ארגון
  4. בחר את רמת הגישה — מומלץ Selected repositories ולא All repositories מטעמי אבטחה
  5. לחץ Install & Authorize

2.4 חיבור הפרויקט עצמו

עכשיו תיווצר התקשורת בין הפרויקט הספציפי לבין ריפו ב-GitHub:

  1. שוב Connectors → GitHub, ולחץ Connect project
  2. בחר את חשבון ה-GitHub שלך
  3. אשר את העברת הקוד — לחץ Transfer anyway
  4. Lovable ייצור ריפו חדש בשם הפרויקט שלך באופן אוטומטי

2.5 כללים חשובים

  • אל תשנה את שם הריפו ב-GitHub אחרי החיבור, ואל תעביר אותו לארגון אחר. זה ישבור את הסנכרון.
  • כל שינוי ב-Lovable מסונכרן אוטומטית ל-GitHub. וגם ההיפך — אם תערוך קוד ב-VS Code ותעשה git push, השינויים יופיעו ב-Lovable.
  • הסנכרון הוא על ענף main בלבד. אם תיצור branches אחרים ב-GitHub, הם לא יופיעו ב-Lovable.

שלב 3: התקנת הכלים על המחשב

עכשיו, בלי קשר אם בא מ-Base44 או Lovable, יש לך ריפוזיטורי ב-GitHub עם הקוד. הצעד הבא הוא להוריד אותו למחשב שלך ולעבוד איתו מקומית.

3.1 התקנת Node.js

נכנס ל-nodejs.org והורד את גרסת LTS (Long Term Support) — נכון ליוני 2026 זו גרסה 24 (קוד-שם Krypton; גם 22 עובד מעולה אבל מגיע לסוף-חיים באפריל 2027; את 20 כבר נמנע, היא בסיום-חיים). להריץ את ההתקנה: הבא, הבא, הבא, סיום.

לאמת שההתקנה עבדה, פתח Terminal/PowerShell חדש (חשוב לסגור ולפתוח מחדש כדי שיזהה את ההתקנה):

node --version
npm --version

צריך לראות משהו כמו v24.x.x (או v22.x.x אם הלכת על LTS הקודם) ו-10.x.x ל-npm. אם רואה "command not found", תפעיל מחדש את המחשב — סטנדרטי ב-Windows.

3.2 התקנת Git

ב-git-scm.com — הורד והתקן. הגדרות ברירת מחדל מתאימות. אחרי ההתקנה, ב-Terminal:

git --version

צריך להופיע משהו כמו git version 2.45.x.

הגדרת שם ומייל (חד-פעמית):

git config --global user.name "השם שלך"
git config --global user.email "האימייל-שלך@example.com"

3.3 התקנת Firebase CLI

זה הכלי שיאפשר לך לדבר עם Firebase מה-Terminal. נכון ל-2026 הגרסה היציבה היא 14+. התקנה:

npm install -g firebase-tools

ה--g פירושו "globally" — שיהיה זמין מכל תיקייה. אימות:

firebase --version

צריך לראות 14.x.x או יותר.

אם קיבלת שגיאת permissions ב-Mac/Linux, נסה:

sudo npm install -g firebase-tools

אם ב-Windows אתה מקבל "execution policy", פתח PowerShell כ-Administrator והרץ:

Set-ExecutionPolicy -Scope CurrentUser RemoteSigned

3.4 התקנת VS Code (מומלץ)

מ-code.visualstudio.com. זה לא הכרחי אבל מאוד מומלץ — ככה תראה את הקוד שלך, תוכל לערוך אותו, ויש Terminal מובנה.

שלב 4: הורדת הקוד מ-GitHub אל המחשב

זה השלב שבו הקוד מ-Base44 או Lovable עובר מ-GitHub אל המחשב שלך.

4.1 העתקת ה-URL של הריפו

נכנס לעמוד הריפו ב-GitHub שלך (github.com/השם-שלך/שם-הריפו), לחץ על הכפתור הירוק Code, ובחר את הטאב HTTPS. העתק את ה-URL — משהו כמו https://github.com/your-username/my-base44-site.git.

4.2 בחירת תיקיית עבודה

החלט איפה במחשב יישב הפרויקט. ההמלצה: צור תיקייה כמו ~/projects (ב-Mac/Linux) או C:\projects (ב-Windows) — שזה לא בתוך OneDrive או iCloud, מה שעלול לגרום לבעיות סנכרון.

cd ~/projects

(או cd C:\projects ב-Windows.)

4.3 קלון של הריפו

git clone https://github.com/your-username/my-base44-site.git
cd my-base44-site

git clone מוריד את כל הקוד, וה-cd נכנס לתוך התיקייה החדשה.

4.4 התקנת dependencies

בתוך תיקיית הפרויקט:

npm install

הפקודה הזאת קוראת את הקובץ package.json ומורידה את כל החבילות שהפרויקט משתמש בהן (React, Vite, וכו׳). זה ייקח 1-3 דקות בפעם הראשונה ויוריד תיקייה ענקית בשם node_modules.

אם יש שגיאות: רוב הזמן זה בגלל גרסת Node ישנה. תוודא שאתה על Node 22 ומעלה (node --version). אם הריפו כולל קובץ .nvmrc שמצביע על גרסה מסוימת — כדאי להריץ nvm use כדי להתאים בדיוק.

שלב 5: בדיקה מקומית

לפני שאתה מעלה משהו לעולם — תוודא שהאתר עובד אצלך במחשב.

5.1 הרצת השרת המקומי

npm run dev

אחרי כמה שניות תראה משהו כמו:

  VITE v8.x.x  ready in 543 ms
  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose

(נכון ל-2026 רוב הפרויקטים שיוצאים מ-Base44 ו-Lovable רצים על Vite 8, שמשתמש ב-Rolldown ולכן הבילד מהיר משמעותית. אם אתה רואה גרסה ישנה יותר — זה בסדר גמור, הכל יעבוד אותו דבר.)

פתח את http://localhost:5173/ בדפדפן. צריך לראות את האתר שלך.

5.2 דגלי אזהרה נפוצים

  • דף לבן עם שגיאות בקונסול: סביר להניח שיש משתני סביבה (env variables) חסרים. ב-Lovable וב-Base44, ייתכן שהפרויקט משתמש ב-API keys שמוגדרים בשרת שלהם ולא נכנסו לקוד שירד. תצטרך ליצור קובץ .env בשורש הפרויקט ולהעתיק את המפתחות אליו. שאל את הפלטפורמה איזה משתני סביבה היא דורשת.
  • שגיאות "module not found": הרץ npm install שוב.
  • האתר עובד אבל קורא ל-API של Base44 ונכשל: הקוד עדיין תלוי ב-SDK של Base44 כדי לדבר עם ה-Backend. זה תקין — זה רץ אצלך מקומית, ירוץ גם בפרודקשן, אבל יחייב מנוי פעיל ב-Base44.

5.3 משתני סביבה — המלכודת שתופסת את רוב הלא-מתכנתים

זו הסיבה הכי שכיחה לדף לבן אחרי קלון, אז שווה דקה. בכלי כמו Base44 או Lovable מפתחות ה-API נשמרים בצד שלהם, ולכן הם לא יורדים לקוד שתקבל. במחשב שלך הקובץ .env חסר, וכל קריאה שמסתמכת על מפתח כזה תיכשל בשקט.

הטיפול פשוט. צור בשורש הפרויקט קובץ בשם .env (עם הנקודה בהתחלה) והוסף את המפתחות. ב-Vite — וזה ה-output של Base44 ו-Lovable — כל משתנה שאמור להיות נגיש בדפדפן חייב להתחיל ב-VITE_, אחרת Vite יתעלם ממנו לגמרי. דוגמה:

VITE_SUPABASE_URL=https://xxxx.supabase.co
VITE_SUPABASE_ANON_KEY=eyJhbGci...
VITE_EMAILJS_PUBLIC_KEY=abc123

שלוש נקודות שחוסכות שעה של תסכול:

  • בקוד פונים אליהם כך: import.meta.env.VITE_SUPABASE_URL (לא process.env — זה תחביר של Node, לא של Vite בדפדפן).
  • אחרי שמירת .env חובה להפעיל מחדש את npm run dev. Vite קורא את המשתנים פעם אחת בהפעלה ולא מרענן אותם תוך כדי ריצה.
  • .env לא אמור להיכנס ל-Git. וודא שהוא מופיע בקובץ .gitignore כדי לא לדחוף מפתחות סודיים לריפו פומבי. את אותם משתנים תצטרך להזין שוב בסביבת הפריסה (ב-Hosting קלאסי הם נצרבים לתוך הבילד בזמן npm run build, אז מספיק שהם קיימים מקומית כשאתה בונה).

5.4 לעצור את השרת

ב-Terminal, Ctrl+C (או Cmd+C ב-Mac).

שלב 6: יצירת פרויקט Firebase

עכשיו נכין את הצד של Firebase.

6.1 פתיחת Firebase Console

נכנס ל-firebase.google.com ולחץ Go to console. תתחבר עם חשבון Google שלך.

6.2 יצירת פרויקט חדש

לחץ Add project:

  1. Project name: משהו תיאורי. למשל my-portfolio. זה לא חייב להיות זהה לדומיין.
  2. Firebase ייצור אוטומטית ID לפרויקט (משהו כמו my-portfolio-abc12). שמור אותו — נצטרך אותו.
  3. Google Analytics: לרוב המקרים — בטל את זה. אפשר תמיד להוסיף בהמשך, וזה מסבך את ההתחלה.
  4. לחץ Create project. ייקח כדקה.

6.3 הפעלת Hosting

בתוך הפרויקט החדש, בתפריט הצדדי תחת "Build", בחר Hosting, ולחץ Get started. Firebase ייתן לך הוראות (שאנחנו עומדים לעקוב אחריהן ממילא — אפשר ללחוץ Next, Next, Continue to console).

שלב 7: בניית הקוד לפרודקשן

npm run dev רץ במצב פיתוח — איטי, לא מאופטם, אבל קל לדיבוג. לפרודקשן אנחנו צריכים לבנות את הקוד.

7.1 הרצת ה-Build

npm run build

לוקח 10-30 שניות. בסוף תראה משהו כמו:

✓ built in 12.45s
dist/index.html                   0.45 kB │ gzip:  0.30 kB
dist/assets/index-abc123.css     12.34 kB │ gzip:  3.21 kB
dist/assets/index-def456.js     145.67 kB │ gzip: 47.89 kB

7.2 איזו תיקייה נוצרה?

זה תלוי במה הפרויקט נבנה. ב-2026 רוב הפלטפורמות (Base44, Lovable) משתמשות ב-Vite, ולכן:

  • Vite (רוב המקרים): התיקייה נקראת dist
  • Create React App (פרויקטים ישנים יותר): התיקייה נקראת build
  • Next.js: זה סיפור אחר לגמרי — Next.js צריך App Hosting ולא Hosting קלאסי. ראה הערה בסוף.

איך לוודא איזה Output יש לך? אחרי npm run build, תראה את שם התיקייה במסר הסיכום (built in X seconds עם רשימת קבצים שמתחילים ב-dist/... או build/...). או — תפתח את הקובץ package.json ותחפש את הסקריפט build. ב-Vite זה יהיה vite build, ב-CRA זה יהיה react-scripts build.

שלב 8: התחברות ואתחול Firebase

8.1 התחברות מה-CLI

firebase login

תיפתח לשונית בדפדפן — תתחבר עם חשבון Google שלך, תאשר הרשאות, וחזור ל-Terminal. צריך לראות Success! Logged in as [email protected].

8.2 אתחול Hosting בפרויקט

ודא שאתה בתיקיית הפרויקט (cd my-base44-site אם אתה לא שם):

firebase init hosting

ה-CLI ישאל אותך סדרת שאלות. שים לב לכל אחת:

שאלה 1: "Please select an option"

  • בחר Use an existing project (חץ למטה, Enter)

שאלה 2: "Select a default Firebase project for this directory"

  • בחר את הפרויקט שיצרת קודם (my-portfolio-abc12)

שאלה 3: "What do you want to use as your public directory?"

  • ברירת המחדל היא public. אל תקבל את זה!
  • הקלד dist (אם Vite) או build (אם CRA), והקש Enter.

שאלה 4: "Configure as a single-page app (rewrite all urls to /index.html)?"

  • חובה לבחור Yes (Y). זה קריטי לאפליקציות React.
  • בלי זה, רענון של עמוד פנימי (כמו /about) ייתן 404.

שאלה 5: "Set up automatic builds and deploys with GitHub?"

  • בשלב הראשון בחר No (N). אפשר תמיד להוסיף אחר כך.

שאלה 6: "File dist/index.html already exists. Overwrite?"

  • חובה לבחור No (N). אם כן — תדרוס את ה-build שלך.

אחרי הכל, יוצרו שני קבצים בפרויקט שלך:

  • firebase.json — הגדרות Firebase
  • .firebaserc — קישור לפרויקט Firebase שלך

תפתח את firebase.json ב-VS Code ותראה משהו כזה:

{
  "hosting": {
    "public": "dist",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

זה הקובץ הקריטי. ה-rewrites הוא מה שמאפשר ל-React Router לעבוד.

שלב 9: פריסה ראשונה

הרגע הגדול:

firebase deploy --only hosting

תראה רצף של מסרים:

=== Deploying to 'my-portfolio-abc12'...
i  deploying hosting
i  hosting[my-portfolio-abc12]: beginning deploy...
i  hosting[my-portfolio-abc12]: found 12 files in dist
✔  hosting[my-portfolio-abc12]: file upload complete
i  hosting[my-portfolio-abc12]: finalizing version...
✔  hosting[my-portfolio-abc12]: version finalized
i  hosting[my-portfolio-abc12]: releasing new version...
✔  hosting[my-portfolio-abc12]: release complete

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/my-portfolio-abc12/overview
Hosting URL: https://my-portfolio-abc12.web.app

לחץ על ה-Hosting URL — האתר שלך חי באוויר. תקבל גם:

  • https://my-portfolio-abc12.web.app
  • https://my-portfolio-abc12.firebaseapp.com

שתיהן זהות, רק שמות שונים.

ברכות. אתה מארח אתר אמיתי.

שלב 10: דומיין מותאם אישית

הכתובת xxx.web.app חינמית ופועלת — אבל אתה כנראה רוצה את nisai.dev שלך, או my-business.co.il. בואו נחבר.

10.1 הוספת הדומיין ב-Firebase Console

ב-Firebase Console, פתח Hosting, ולחץ Add custom domain.

הקלד את הדומיין (mybusiness.co.il). אם רוצים גם www, יוסיפו אותו אחר כך.

לחץ Continue.

10.2 אימות בעלות (TXT record)

Firebase ייתן לך TXT record להוסיף ל-DNS שלך. משהו כמו:

TypeHostValue
TXT@google-site-verification=abc123...

זה מוכיח ש-Firebase יכול להוציא בשבילך תעודת SSL. אסור למחוק את ה-TXT הזה גם אחרי האימות — זה נדרש להמשך.

10.3 רישומי A

אחרי האימות, Firebase ייתן לך שני רישומי A:

TypeHostValue
A@151.101.1.195
A@151.101.65.195

(הכתובות המדויקות עלולות להשתנות — תמיד תיקח את מה ש-Firebase Console מציג לך, לא את מה שכתוב פה.)

10.4 הגדרת DNS אצל הרשם שלך

זה החלק שמשתנה לפי איפה קנית את הדומיין. כל ספק נראה קצת אחר, אבל הפעולה אותה דבר: הוסף שני רישומי A ורישום TXT אחד, מחק רישומי A קיימים שמצביעים למקום אחר.

ספקאיפה למצואטיפ
HoverDomains → לחץ דומיין → DNSUI נקי, פשוט הוסף Records. שים לב ש"Host" שלהם הוא @ עבור הדומיין הראשי.
GoDaddyMy Products → DNSיש כפתור "Add" מתחת לטבלה. ל-TXT, "Host" = @.
NamecheapDomain List → Manage → Advanced DNSהם קוראים לזה "A Record" ו-"TXT Record". "Host" = @.
Domain.com.ilאזור הניהול → DNSה-UI עברי. ״סוג״ = A, ״מקור״ = @, ״ערך״ = ה-IP.
CloudflareSites → דומיין → DNSחשוב: לחץ על הענן הכתום והפוך אותו לאפור (DNS only) — אחרת תהיה התנגשות עם ה-Proxy של Cloudflare.
Google Domains / SquarespaceDNS → Custom recordsפשוט יחסית.

10.5 המתנה ל-SSL

אחרי שהוספת את הרישומים, חזור ל-Firebase Console. הוא יציג "Pending" — Firebase מאמת את הרישומים, לוקח כמה דקות עד 24 שעות (לרוב 1-4 שעות).

כשהאימות עובר, Firebase מנפיק תעודת SSL חינמית מ-Let's Encrypt באופן אוטומטי. תסתכל על העמוד שלך ב-https://mybusiness.co.il — אם המנעול ירוק, הצלחת.

אם אחרי 24 שעות עדיין לא עבד:

  • בדוק שהרישומים הוגדרו נכון: לך ל-dnschecker.org, הקלד את הדומיין ובחר A — צריך לראות את ה-IPs של Firebase מסביב לעולם.
  • ב-Cloudflare — וודא שכבית את ה-Proxy (ענן אפור).
  • אצל Domain.com.il לפעמים יש cache ארוך — חפש "TTL" ותקטין אותו ל-300 שניות.

שלב 11: שינויים עתידיים (workflow מתמשך)

הצלחת. האתר חי. עכשיו — איך מעדכנים?

11.1 אם עורכים ב-Lovable / Base44

הזרימה היא:

  1. עורך באפליקציה כרגיל
  2. השינויים נדחפים אוטומטית ל-GitHub
  3. במחשב שלך, בתיקיית הפרויקט:
git pull
npm run build
firebase deploy --only hosting

11.2 אם עורכים ישירות בקוד

אם אתה כבר נוח ב-VS Code, אתה יכול לערוך את הקוד מקומית:

npm run dev          # בדיקה מקומית
git add .
git commit -m "תיקון טופס יצירת קשר"
git push
npm run build
firebase deploy --only hosting

(ב-Lovable, ה-git push יחזיר את השינויים גם לעורך של Lovable. ב-Base44 — זה יותר מורכב, וייתכן שיהיו התנגשויות.)

11.3 אוטומציה (אופציונלי)

אם אתה עושה את זה הרבה, שווה להגדיר GitHub Actions שירוץ deploy אוטומטי בכל push. הרץ:

firebase init hosting:github

זה יוסיף קובץ .github/workflows/firebase-hosting-merge.yml שיעשה build + deploy בכל merge ל-main. אבל לתחילת הדרך — תעשה ידני, פשוט יותר להבין מה קורה.

שלב 12: בעיות נפוצות

בעיהסימפטוםפתרון
Module not foundnpm install או npm run build נכשלים עם הודעה "Cannot find module..."מחק node_modules ו-package-lock.json, אז npm install מחדש: rm -rf node_modules package-lock.json && npm install
404 ברענון דף פנימיmysite.com/about עובד מ-link, אבל F5 נותן 404לא בחרת SPA mode ב-firebase init. ערוך את firebase.json והוסף rewrites ל-index.html (ראה שלב 8)
Permission denied ב-firebase login"Cannot navigate" או דפדפן לא נפתחהרץ firebase login --no-localhost במקום, וזה ייתן לך URL להעתיק ידנית
דף ריק (white screen)האתר נטען אבל לבן לחלוטיןפתח DevTools → Console. כנראה משתני סביבה חסרים. בדוק .env
Build נכשל עם "Out of memory"פרויקט גדול, מחשב חלשNODE_OPTIONS=--max-old-space-size=4096 npm run build
deploy מעלה אבל כתובת מציגה ישןרענון לא עוזרלחץ Ctrl+Shift+R (hard refresh). אם עדיין לא — Firebase CDN cache, יעדכן בדקות
SSL לא יוצא אחרי 24 שעות"Pending" שלא נגמר ב-Firebase ConsoleDNS לא הוגדר נכון. בדוק ב-dnschecker.org. אם Cloudflare — כיבית Proxy?
firebase not recognizedאחרי התקנה, הפקודה לא עובדתלסגור ולפתוח Terminal חדש. ב-Windows — אולי להפעיל מחדש את המחשב
שגיאת CORS לבקשות APIהאתר נטען, אבל קריאות ל-Base44 נכשלות בקונסולתוסיף את הדומיין החדש שלך ל-allowed origins בהגדרות של Base44 / Supabase / איפה שה-API שלך
"You don't have permission to access this site"המסר הזה ב-xxx.web.appהפרויקט במצב Disabled. ב-Console → Hosting, וודא ששלמת את ה-firebase deploy

איך זה עולה? (Pricing 2026)

הבשורות הטובות: לרוב האנשים שקוראים את המדריך הזה — Firebase Hosting הוא חינמי לחלוטין.

תוכנית Spark (חינם)

  • 10 GB אחסון. מספיק בנוחות לבילד של אתר רגיל — דף נחיתה או פורטפוליו שוקל בדרך כלל כמה מגה-בייט בלבד, אז את התקרה הזו כמעט בלתי-אפשרי לגעת בה.
  • 10 GB תעבורה בחודש. מספיק לאלפי-עשרות אלפי מבקרים בחודש (תלוי בגודל הדף — דף של 1MB מאפשר בערך 10,000 צפיות בחודש לפני שאתה נוגע בתקרה).
  • דומיין מותאם אישית — חינם, כולל SSL חינמי.
  • Firebase Hosting הקלאסי זמין ב-Spark.

תוכנית Blaze (Pay-as-you-go)

מתחיל לעלות רק מעבר למכסות החינמיות, וגם אז מדובר בסנט-בודדים. נכון ל-2026 התעריפים מעבר לחינם הם בערך 0.026$ לכל GB אחסון נוסף ו-0.15$ לכל GB תעבורה נוספת. אתר תדמיתי שעבר את ה-10GB תעבורה בחודש (כלומר עשרות אלפי מבקרים) ישלם בדרך כלל פחות מ-5$ בחודש — עדיין הרבה פחות מ-40-50$ של Base44 Builder.

חשוב לדעת: כדי לעבור ל-Blaze צריך להזין כרטיס אשראי, ו-Blaze הוא חיוב לפי שימוש בלי תקרה אוטומטית. אם אתה דואג מחיוב מפתיע (למשל פיצוץ תנועה פתאומי), אפשר להגדיר Budget Alert ב-Google Cloud Console שישלח לך מייל כשאתה מתקרב לסכום שהגדרת. בשביל אתר תדמיתי רגיל — זה כמעט תיאורטי, אבל עדיף לדעת.

מתי בכל זאת תעבור ל-Blaze?

  • אם תרצה להשתמש ב-Cloud Functions (שרת)
  • אם תרצה App Hosting (SSR)
  • אם האתר שלך ממש פופולרי — מעל ~50K מבקרים/חודש
  • אם תרצה Firebase Storage (קבצי מדיה גדולים מהמשתמשים)

לרוב המקרים של פורטפוליו, אתר תדמיתי, או SaaS קטן — Spark מספיק לחלוטין.

האם לעבור ל-App Hosting?

App Hosting היא תוכנית חדשה יותר של Firebase (יצאה ב-2024), שתומכת ב-SSR — Server-Side Rendering. זה נחוץ אם:

  • אתה משתמש ב-Next.js עם getServerSideProps
  • אתה משתמש ב-SvelteKit / Nuxt עם רנדור צד-שרת
  • יש לך תוכן דינמי שצריך SEO מבוסס שרת

אם בנית ב-Base44 או Lovable, רוב הסיכויים שאתה לא צריך SSR. ה-output שלהם הוא React + Vite שהוא SPA סטטי — Hosting הקלאסי הוא הבחירה הטבעית. App Hosting דורש Blaze, יקר יותר, ומורכב יותר.

כדי שהבחירה תהיה חד-משמעית, הנה ההשוואה ראש-בראש:

Hosting קלאסיApp Hosting
מה זה מגישקבצים סטטיים (HTML/JS/CSS) דרך CDNאפליקציה עם רנדור צד-שרת (SSR) ובניית-מחדש בענן
מתאים לReact + Vite, Vue, אתר תדמית, פורטפוליו, SPANext.js, SvelteKit, Nuxt עם רנדור שרת
תוכנית נדרשתSpark (חינם)Blaze בלבד (חיוב לפי שימוש)
בנייהאתה מריץ npm run build ומעלה את distFirebase בונה מ-GitHub אוטומטית בכל push
עלות טיפוסית0 ש״חתלוי בזמן-ריצת השרת, לרוב כמה דולרים בחודש
ה-output של Base44/Lovable✅ הבחירה הנכונה כמעט תמידרק אם תכתוב מחדש ל-Next.js

ההמלצה: תישאר ב-Hosting הקלאסי אלא אם יש לך סיבה ספציפית מאוד.

יש בכל זאת מקרה אחד שכדאי לשים אליו לב: SPA סטטי בעייתי ל-SEO, כי גוגל מקבל בהתחלה דף ריק שמתמלא ב-JavaScript. אם קידום אורגני חשוב לך, יש שתי דרכים — או להוסיף pre-rendering לאתר ה-Vite הקיים (מוסבר בSEO לאתרי React SPA), או, אם אתה מוכן לכתוב מחדש, לעבור ל-Next.js עם App Hosting (ראה Next.js 16 App Router). לרוב אתרי התדמית — pre-rendering פשוט על Hosting הקלאסי מספיק לחלוטין ולא דורש Blaze.

שאלות נפוצות

האם אפשר להוציא את הקוד מ-Base44 בלי לשלם?

לא במצב הרגיל. ייצוא ל-GitHub נפתח רק בתוכנית Builder ומעלה (40$ לחודש בתשלום שנתי, 50$ חודשי נכון ל-2026). התוכנית החינמית והתוכנית Starter לא תומכות בייצוא. הטריק המקובל: לשדרג ל-Builder לחודש אחד, לחבר את GitHub, לוודא שהקוד ירד למחשב, ואז לרדת חזרה — הקוד כבר אצלך ב-GitHub והוא נשאר שלך.

האם המעבר ל-Firebase ינתק אותי לגמרי מ-Base44?

תלוי באתר. אם הוא סטטי (דף נחיתה, פורטפוליו) — כן, תהיה חופשי לגמרי. אבל אם האפליקציה משתמשת ב-Backend או במסד הנתונים של Base44, הקוד המיוצא ימשיך לקרוא לשירותים האלה דרך ה-SDK, ולכן תצטרך מנוי פעיל ב-Base44 — או להחליף כל קריאה בשירות מקביל של Firebase (Firestore, Auth, Functions). זה פרויקט הנדסי נפרד.

כמה זה באמת עולה לארח אתר ב-Firebase?

לרוב הקוראים — 0 ש״ח. תוכנית Spark החינמית נותנת 10GB אחסון, 10GB תעבורה בחודש ו-SSL חינמי לדומיין שלך, וזה מספיק לאלפי מבקרים. רק אם תעבור את המכסות תתחיל לשלם, וגם אז מדובר בסנט-בודדים (0.15$ לכל GB תעבורה נוסף). אתר תדמיתי טיפוסי לא יגיע לשם.

מה ההבדל בין Firebase Hosting ל-App Hosting, ומה מתאים לי?

Hosting הקלאסי מגיש קבצים סטטיים (HTML/JS/CSS) דרך CDN — מושלם ל-SPA של React + Vite, וזה מה שיוצא מ-Base44 ו-Lovable. App Hosting תומך ב-SSR (רנדור צד-שרת) ונחוץ רק אם אתה על Next.js עם getServerSideProps או SvelteKit/Nuxt עם רנדור שרת. App Hosting דורש את תוכנית Blaze. אם בנית בכלי vibe-coding — כמעט בוודאות תישאר ב-Hosting הקלאסי.

למה אחרי הפריסה רענון של דף פנימי נותן 404?

כי לא הפעלת מצב SPA. ב-firebase init hosting חייבים לענות Yes על השאלה ״Configure as a single-page app״, מה שמוסיף rewrites שמפנה כל כתובת ל-index.html. בלי זה, השרת מחפש קובץ פיזי בשם /about ולא מוצא. אם כבר פרסת בלי זה — פשוט הוסף את ה-rewrites ל-firebase.json (ראה שלב 8) ופרוס שוב.

כמה זמן לוקח לדומיין המותאם להתחבר עם SSL?

בדרך כלל בין כמה דקות לארבע שעות, ובמקרים נדירים עד 24 שעות — תלוי בכמה מהר ה-DNS שלך מתעדכן ברחבי העולם. Firebase מנפיק תעודת SSL חינמית מ-Let's Encrypt אוטומטית ברגע שהוא מזהה את רישומי ה-A. אם זה תקוע מעבר ל-24 שעות, כמעט תמיד הבעיה היא ב-DNS — בדוק ב-dnschecker.org, ואם אתה ב-Cloudflare ודא שכיבית את ה-Proxy (ענן אפור). אם הדומיין שלך הוא co.il, שווה לקרוא גם על ניהול דומיין ישראלי.

האם אני יכול להמשיך לערוך ב-Base44 / Lovable אחרי המעבר?

כן. הסנכרון דו-כיווני: כל עריכה בכלי נדחפת אוטומטית ל-GitHub, ואז אתה מריץ git pull + npm run build + firebase deploy במחשב. רק שים לב — ב-Base44 עריכה ישירה בקוד מקומי עלולה להתנגש עם השינויים מהפלטפורמה, אז כדאי לבחור מסלול אחד עיקרי (או הכלי, או הקוד) ולא לקפוץ ביניהם באמצע פיצ׳ר.

לסיכום

המעבר מ-Base44 (או Lovable) ל-Firebase הוא בעיקר עניין של בעלות, עלות וגמישות — לא של ביצועים בלבד. אם האתר שלך סטטי, התהליך הוא בערך חצי שעה בפעם הראשונה: מוציאים את הקוד ל-GitHub, מורידים למחשב, בונים עם npm run build, מאתחלים Firebase Hosting (לא לשכוח SPA mode!), ומריצים firebase deploy. אחר כך מחברים דומיין משלך עם SSL חינמי, והאתר שלך חי על תשתית שאתה הבעלים שלה ב-0 ש״ח לחודש.

המלכודת היחידה האמיתית היא ה-Backend: Base44 מייצאת רק Frontend, אז אם יש לך login או מסד נתונים זה פרויקט גדול יותר שדורש החלפה לשירותי Firebase. עבור כל השאר — דף נחיתה, פורטפוליו, אתר תדמיתי — זה אחד המעברים הכי משתלמים שתעשה השנה.

למי לפנות אם נתקעת

נתקעת איפשהו? אל תיכנס לפאניקה — זה קורה לכולנו. שלח לי הודעה ב-WhatsApp ב-wa.me/972585802298, ספר באיזה שלב אתה ומה השגיאה שאתה רואה (צילום מסך עוזר), ואני אנסה לכוון. רוב הבעיות נפתרות בעוד שורה אחת.

מקורות