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

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 सीएलआई का इस्तेमाल करना शामिल है.

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

अगर आपके पास GitHub रिपॉज़िटरी में पहले से ही कोई Next.js या Angular ऐप्लिकेशन है, तो इस चरण को छोड़ें और चरण 2: App Hosting बैकएंड बनाएं पर जाएं. अपना ऐप्लिकेशन डिप्लॉय करने के लिए, आपको apphosting-adapters डेटाबेस को फ़ोर्क या इंस्टॉल करने की ज़रूरत नहीं है.

अगर आपके पास कोई ऐप्लिकेशन नहीं है और आपको सैंपल के तौर पर मिला ऐप्लिकेशन डिप्लॉय करना है, तो https://github.com/firebase/apphosting-adapters पर जाएं और Fork को चुनें. फ़्रेमवर्क अडैप्टर टूल के अलावा, इस रिपॉज़िटरी में /starters डायरेक्ट्री में Next.js और Angular के आधिकारिक स्टार्टर टेंप्लेट शामिल हैं.

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

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

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

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

App Hosting के बैकएंड सेटअप का स्क्रीनशॉट.

यह तरीका अपनाने के लिए, स्क्रीन पर दिए गए निर्देशों का पालन करें:

  • कोई प्राइमरी इलाका चुनें. आम तौर पर, यह इलाका आपके उपयोगकर्ताओं के सबसे नज़दीक होता है.

  • GitHub से कनेक्ट करें. वह रिपॉज़िटरी चुनें जिसे आपने apphosting-adapters रिपॉज़िटरी को फ़ोर्क करके बनाया है या अपनी मौजूदा ऐप्लिकेशन रिपॉज़िटरी चुनें.

  • अपने ऐप्लिकेशन की रूट डायरेक्ट्री सेट करें:

    • अगर आपको अपना ऐप्लिकेशन डिप्लॉय करना है, तो उसकी रूट डायरेक्ट्री की जानकारी दें. डिफ़ॉल्ट रूप से, यह / पर सेट होती है. आम तौर पर, यह डायरेक्ट्री वह जगह होती है जहां आपकी package.json फ़ाइल मौजूद होती है.

    • अगर apphosting-adapters डेमो रिपॉज़िटरी का इस्तेमाल किया जाता है, तो अपने ऐप्लिकेशन की रूट डायरेक्ट्री को इनमें से किसी एक पाथ पर सेट करें:

    • /starters/nextjs/basic

    • /starters/angular/basic

  • लाइव ब्रांच को 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

    • ऐंग्युलर: /starters/angular/basic/src/app/pages/home/home.component.html

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

अगले चरण