ऐप्लिकेशन होस्टिंग का इस्तेमाल शुरू करें

GitHub रिपॉज़िटरी में मौजूद Next.js या Angular ऐप्लिकेशन (Next.js 13.5.x या इसके बाद के वर्शन या Angular 18.2.x या इसके बाद के वर्शन) के साथ, App Hosting का इस्तेमाल शुरू करना उतना ही आसान है जितना App Hosting बैकएंड बनाना. इसके बाद, लाइव ब्रांच में पुश करके रोलआउट शुरू करना. अगर आपके पास कोई ऐप्लिकेशन नहीं है, तो इस गाइड में बताए गए चरणों को पूरा करने के लिए, हमारे किसी सैंपल ऐप्लिकेशन का इस्तेमाल करें.

एआई की मदद पाने के लिए, नीचे दिए गए प्रॉम्प्ट को अपने एआई कोडिंग एजेंट (जैसे कि Antigravity, Claude Code, Codex, और Cursor) में कॉपी करें. आपके पास प्रॉम्प्ट को पसंद के मुताबिक बनाने और एजेंट के साथ मिलकर उसे बेहतर बनाने का विकल्प होता है. इंस्टॉल करने के बारे में ज़्यादा जानकारी के लिए, Firebase एजेंट स्किल पर जाएं. 

Help me use Firebase in my app.
1. Make sure that **Firebase agent skills** are installed and updated. For Claude Code, Codex, or Cursor agents, help me install the Firebase plugin. For other agents, run `npx skills add firebase/agent-skills`.  Always try to use **Firebase agent skills** for Firebase-related tasks.
2. Help me use Firebase to host my web app. Set up my app to use Firebase, and then deploy my app.

इस गाइड में, Firebase कंसोल में App Hosting को सेट अप करने का तरीका बताया गया है. इससे GitHub रिपॉज़िटरी में नया कमिट किए जाने पर, हर बार अपने-आप डिप्लॉय हो जाता है. इस प्रोसेस के आखिर में, आपके पास Next.js या Angular का लाइव उदाहरण ऐप्लिकेशन होगा. जब भी GitHub रिपॉज़िटरी की main ब्रांच में कोई नया बदलाव किया जाएगा, तब यह ऐप्लिकेशन फिर से डिप्लॉय हो जाएगा.

हालांकि, इस गाइड में Firebase कंसोल फ़्लो के बारे में बताया गया है, लेकिन डिप्लॉय करने के अन्य तरीके भी हैं. इनमें, GitHub कनेक्शन के बिना लोकल कोड डिप्लॉय करने के लिए, Firebase CLI का इस्तेमाल करना शामिल है.

पहला चरण: डेमो रिपॉज़िटरी को फ़ोर्क करना

https://github.com/firebase/apphosting-adapters पर जाएं और Fork को चुनें.

दूसरा चरण: App Hosting बैकएंड बनाना

  1. Firebase console में, होस्टिंग और सर्वरलेस > App Hosting पर जाएं.

  2. शुरू करें पर क्लिक करें.

  3. अगर कहा जाए, तो App Hosting का इस्तेमाल करने के लिए, इस्तेमाल के हिसाब से पैसे चुकाने वाले ब्लेज़ प्लान पर अपग्रेड करें.

ऐप्लिकेशन होस्टिंग के बैकएंड सेटअप का स्क्रीनशॉट.

इन चरणों को पूरा करने के लिए, स्क्रीन पर दिया गया तरीका अपनाएं:

  • कोई प्राइमरी क्षेत्र चुनें. आम तौर पर, यह वह क्षेत्र होता है जो आपके उपयोगकर्ताओं के सबसे नज़दीक होता है.
  • GitHub से कनेक्ट करें. आपने अभी-अभी apphosting-adapters रिपॉज़िटरी को फ़ोर्क करके जो रिपॉज़िटरी बनाई है उसे चुनें.
  • अपने ऐप्लिकेशन की रूट डायरेक्ट्री को इनमें से किसी एक पर सेट करें:
  • लाइव ब्रांच को मुख्य के तौर पर सेट करें.
  • अपने-आप रोल आउट होने की सुविधा चालू करें (यह सुविधा डिफ़ॉल्ट रूप से चालू होती है).
  • अपने बैकएंड को कोई नाम असाइन करें.
  • अपना रनटाइम एनवायरमेंट चुनें. डिफ़ॉल्ट रूप से, Node.js का सबसे नया सुझाया गया वर्शन आपके लिए पहले से चुना हुआ होता है.
  • नया Firebase वेब ऐप्लिकेशन बनाएं.

पूरा करें और लागू करें को चुनें.

तीसरा चरण: डिप्लॉय किया गया ऐप्लिकेशन देखना

बैकएंड बनाने पर, Firebase आपको बिना किसी शुल्क के एक सबडोमेन देता है. इस पर जाकर, असली उपयोगकर्ता आपके वेब ऐप्लिकेशन को ऐक्सेस कर सकते हैं. इसका फ़ॉर्मैट backend-id--project-id.us-central1.hosted.app होता है.

अपने बैकएंड के डैशबोर्ड में, बैकएंड की जानकारी लाइन में जाकर, अपनी नई वेबसाइट देखने के लिए, लाइव बैकएंड का लिंक चुनें:

बैकएंड की जानकारी वाली लाइन का स्क्रीनशॉट. इसमें लाइव ऐप्लिकेशन के लिंक को हाइलाइट किया गया है.

चौथा चरण: बदलाव को पुश करके रोलआउट को ट्रिगर करना

बैकएंड बन जाने और लाइव यूआरएल मिल जाने के बाद, GitHub रिपॉज़िटरी की लाइव ब्रांच में बदलाव करने पर, वेब ऐप्लिकेशन के नए वर्शन को रोल आउट किया जा सकता है. अपने App Hosting सेटअप की जांच करने के लिए:

  1. डेमो GitHub रिपॉज़िटरी के अपने फ़ोर्क में, डेमो ऐप्लिकेशन के होम पेज के सोर्स पर जाएं. इसके बाद, अपनी पसंद के हिसाब से कोई भी बदलाव करें. इसके बाद, अपने बदलाव को मुख्य ब्रांच में पुश करें. होम पेज ढूंढने के लिए:

    • Next.js: /starters/nextjs/basic/src/app/page.tsx
    • Angular: /starters/angular/basic/src/app/pages/home/home.component.html

  2. Firebase कंसोल में, App Hosting पर नज़र रखें, क्योंकि प्रोडक्शन में नया बदलाव रोल आउट किया जाता है. रोलआउट पूरा होने के बाद, आपको ऐप्लिकेशन के होम पेज पर बदलाव दिखेगा.

अगले चरण