מ-Base44 / Lovable ל-Firebase: המדריך המלא
איך מוציאים את הקוד מ-Base44 או Lovable ומפרסמים אותו ב-Firebase Hosting על דומיין משלך — צעד-צעד, בלי ניסיון קוד, עם SSL חינמי וחשבונית צפויה.
למי זה מתאים: בנית אתר או אפליקציה קטנה ב-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"). לחץ עליו.
יפתח חלון שמבקש ממך:
- ללחוץ Connect to GitHub
- ללחוץ Connect GitHub (כן, זה נראה כפול — זה התהליך)
- ללחוץ Authorize Base44 Builder — תועבר לעמוד של GitHub שמבקש הרשאה
- לבחור באיזה חשבון/ארגון של GitHub להתקין את האפליקציה
- לבחור אילו ריפוזיטוריז Base44 יוכלו לגשת אליהם — ההמלצה: "Only select repositories" וליצור ריפו חדש ייעודי
- ללחוץ 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
לאחר ההתחברות הראשונית:
- חזור ל-Connectors → GitHub בתוך Lovable
- לחץ Connect project
- לחץ Add organizations ובחר חשבון אישי או ארגון
- בחר את רמת הגישה — מומלץ Selected repositories ולא All repositories מטעמי אבטחה
- לחץ Install & Authorize
2.4 חיבור הפרויקט עצמו
עכשיו תיווצר התקשורת בין הפרויקט הספציפי לבין ריפו ב-GitHub:
- שוב Connectors → GitHub, ולחץ Connect project
- בחר את חשבון ה-GitHub שלך
- אשר את העברת הקוד — לחץ Transfer anyway
- 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:
- Project name: משהו תיאורי. למשל
my-portfolio. זה לא חייב להיות זהה לדומיין. - Firebase ייצור אוטומטית ID לפרויקט (משהו כמו
my-portfolio-abc12). שמור אותו — נצטרך אותו. - Google Analytics: לרוב המקרים — בטל את זה. אפשר תמיד להוסיף בהמשך, וזה מסבך את ההתחלה.
- לחץ 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.apphttps://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 שלך. משהו כמו:
| Type | Host | Value |
|---|---|---|
| TXT | @ | google-site-verification=abc123... |
זה מוכיח ש-Firebase יכול להוציא בשבילך תעודת SSL. אסור למחוק את ה-TXT הזה גם אחרי האימות — זה נדרש להמשך.
10.3 רישומי A
אחרי האימות, Firebase ייתן לך שני רישומי A:
| Type | Host | Value |
|---|---|---|
| A | @ | 151.101.1.195 |
| A | @ | 151.101.65.195 |
(הכתובות המדויקות עלולות להשתנות — תמיד תיקח את מה ש-Firebase Console מציג לך, לא את מה שכתוב פה.)
10.4 הגדרת DNS אצל הרשם שלך
זה החלק שמשתנה לפי איפה קנית את הדומיין. כל ספק נראה קצת אחר, אבל הפעולה אותה דבר: הוסף שני רישומי A ורישום TXT אחד, מחק רישומי A קיימים שמצביעים למקום אחר.
| ספק | איפה למצוא | טיפ |
|---|---|---|
| Hover | Domains → לחץ דומיין → DNS | UI נקי, פשוט הוסף Records. שים לב ש"Host" שלהם הוא @ עבור הדומיין הראשי. |
| GoDaddy | My Products → DNS | יש כפתור "Add" מתחת לטבלה. ל-TXT, "Host" = @. |
| Namecheap | Domain List → Manage → Advanced DNS | הם קוראים לזה "A Record" ו-"TXT Record". "Host" = @. |
| Domain.com.il | אזור הניהול → DNS | ה-UI עברי. ״סוג״ = A, ״מקור״ = @, ״ערך״ = ה-IP. |
| Cloudflare | Sites → דומיין → DNS | חשוב: לחץ על הענן הכתום והפוך אותו לאפור (DNS only) — אחרת תהיה התנגשות עם ה-Proxy של Cloudflare. |
| Google Domains / Squarespace | DNS → 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
הזרימה היא:
- עורך באפליקציה כרגיל
- השינויים נדחפים אוטומטית ל-GitHub
- במחשב שלך, בתיקיית הפרויקט:
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 found | npm 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 Console | DNS לא הוגדר נכון. בדוק ב-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, אתר תדמית, פורטפוליו, SPA | Next.js, SvelteKit, Nuxt עם רנדור שרת |
| תוכנית נדרשת | Spark (חינם) | Blaze בלבד (חיוב לפי שימוש) |
| בנייה | אתה מריץ npm run build ומעלה את dist | Firebase בונה מ-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, ספר באיזה שלב אתה ומה השגיאה שאתה רואה (צילום מסך עוזר), ואני אנסה לכוון. רוב הבעיות נפתרות בעוד שורה אחת.
מקורות
- Base44 — GitHub Integration Documentation
- Base44 — GitHub Integration Blog Post
- Lovable — GitHub Integration Documentation
- Lovable — Code Export FAQ
- Firebase Hosting — Get Started Quickstart
- Firebase Hosting — Connect a Custom Domain
- Firebase Hosting — Usage, Quotas, and Pricing
- Firebase — Pricing Plans Overview
- Firebase CLI Release Notes
- Firebase App Hosting vs Hosting — Product Comparison
- Firebase Blog — App Hosting Frameworks Support