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

अगर आपके पास 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 से कनेक्ट करें. आपने अभी-अभी firebase-framework-tools रिपॉज़िटरी को फ़ोर्क करके जो रिपॉज़िटरी बनाई है उसे चुनें.
  • अपने ऐप्लिकेशन की रूट डायरेक्ट्री को इनमें से किसी एक पर सेट करें:
  • लाइव ब्रांच को main के तौर पर सेट करें.
  • अपने-आप रोल आउट होने की सुविधा चालू करें (यह सुविधा डिफ़ॉल्ट रूप से चालू होती है).
  • अपने बैकएंड को कोई नाम असाइन करें.
  • अपना रनटाइम एनवायरमेंट चुनें. डिफ़ॉल्ट रूप से, 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 पर नज़र रखें, क्योंकि प्रोडक्शन में नया बदलाव लागू किया जा रहा है. लॉन्च होने के बाद, आपको ऐप्लिकेशन के होम पेज पर बदलाव दिखेगा.

अगले चरण