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

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

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

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

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

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

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

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

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

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

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

अगले चरण