= 30 मिनट में AWS के साथ अपने रिएक्ट एप्लिकेशन को होस्ट करना =

यह ट्यूटोरियल बहुत इमेज हैवी है और पूर्ण शुरुआती लोगों के लिए लक्षित है। यह बताता है कि आप अपने रिएक्ट एप्लिकेशन को एक पूर्ण प्राधिकरण प्रणाली के साथ एक वेबसाइट पर कैसे होस्ट कर सकते हैं। यह Mobilehub CLI (कमांड लाइन इंटरफेस) के माध्यम से AWS MobileHub की शक्ति का आह्वान करता है। ट्यूटोरियल में AWS सेवाओं के साथ किसी कौशल की आवश्यकता नहीं है और यह आपको रिएक्ट बॉयलरप्लेट एप्लिकेशन सेट करने के लिए भी दिखाएगा।

यदि आपके पास पहले से ही एक रिएक्ट एप्लिकेशन है,

**आप सेक्शन 2 पर जा सकते हैं जहां हम awsmobile-cli इंस्टॉल करते हैं और इसे अपने एप्लिकेशन में जोड़ते हैं

= आरंभ करने से पहले हमें आपके कंप्यूटर पर कुछ चीजों को सेट करने की आवश्यकता है =

**आपके कंप्यूटर पर स्थापित नोड 8.x वातावरण**

- यह जावास्क्रिप्ट एप्लिकेशन सर्वर के लिए रनटाइम वातावरण है। यह नोड पैकेज मैनेजर (NPM) के साथ आता है।

- एनपीएम का उपयोग रिएक्ट, एडब्ल्यूएस एम्प्लीफाई, एडब्ल्यूएस-जेएस कनेक्टर पैकेज जैसे नोड पैकेज को स्थापित करने के लिए किया जाता है और यह मूल रूप से यही है।

- httpsnodejs.org/en/download/

**एक एडब्ल्यूएस फ्री टियर खाता

- आपको फ्री टीयर के माध्यम से एडब्ल्यूएस सेवाओं तक मुफ्त पहुंच मिलती है। इस ट्यूटोरियल के लिए, यह पर्याप्त से अधिक होना चाहिए। हालाँकि, ध्यान रखें कि प्रत्येक सेवा की प्रत्येक माह उपयोग की सीमा होती है और इससे आपको वास्तविक धन खर्च हो सकता है।

- httpsaws.amazon.com/free/

** सीधे अपने कंसोल से AWS सेवाओं को कॉल करने के लिए AWS CLI (कमांड लाइन इंटरफ़ेस) स्थापित करें ** इस कोर्स के लिए हम फेसबुक से बनाए रखा बॉयलरप्लेट का उपयोग करेंगे, रिएक्ट के निर्माता ** आपके चयन का एक संपादक

- मेरा सुझाव है कि विज़ुअल स्टूडियो कोड से शुरू करें, एक अत्यधिक संशोधित हल्का संपादक जो अधिकांश प्रोग्रामिंग भाषाओं और रूपरेखाओं को चला सकता है।

प्रो टिप: वीएस कोड की स्थापना प्रक्रिया में, उस बॉक्स को चेक करना सुनिश्चित करें जो इसे आपके पर्यावरण पथ नामों में जोड़ता है। यह आपको ââÃÃÂcode filename.jsâÃÂàया âÃÂà टाइप करके टर्मिनल से ओपन वीएस कोड तक पहुंच प्रदान करता है।  कोड .à एक  ¢ एक  पूरे प्रोजेक्ट के लिए youà एक  ¢ एक एक re in। में सहज हैं

- अधिकांश डेवलपर्स को अपने कंप्यूटर पर गिट इंस्टॉल करना चाहिए। यह आपको गिट बैश तक पहुंच प्रदान करता है जो कई डेवलपर्स टर्मिनल पर जाते हैं।

चलो शुरू करें!

**1. रिएक्ट एप्लिकेशन बनाएं और टर्मिनल ** के माध्यम से प्रोजेक्ट फ़ोल्डर में प्रवेश करें

टर्मिनल दर्ज करें और अपने फ़ोल्डर का पता लगाएं जहां आप एप्लिकेशन स्टोर करते हैं। मैं âÃÂÃÂdevâÃÂàनाम के एक फ़ोल्डर का सुझाव देता हूं।

npx क्रिएट-रिएक्शन-ऐप प्रोजेक्ट-नाम&& सीडी प्रोजेक्ट-नाम

या
npm -g इंस्टॉल क्रिएट-रिएक्शन-ऐप क्रिएट-रिएक्शन-ऐप प्रोजेक्ट-नाम

यहां हम बॉयलरप्लेट के आधार पर एक रिएक्ट एप्लिकेशन बनाते हैं। à एक  ¢    npxà  ¢   एक नोड उपकरण है जो रिमोट पैकेज पर कॉल करने के लिए एनपीएम सर्वर का उपयोग करता है। दूसरा कोड स्निपेट स्थानीय रूप से क्रिएट-रिएक्शन-ऐप इंस्टॉल करता है

*npm -g install create-react-app* **और फिर एप्लिकेशन बनाता है। मेरा सुझाव है कि क्रिएट-रिएक्शन-एप के साथ हमेशा अप-टू-डेट रहने के लिए एनपीएक्स का उपयोग करें और फिर एप्लिकेशन बनाएं। मैं सुझाव देता हूं कि क्रिएट-रिएक्शन-ऐप के साथ हमेशा अप-टू-डेट रहने के लिए एनपीएक्स का उपयोग करें। **2. अपने कंप्यूटर पर awsmobile CLI स्थापित करें और इसे प्रोजेक्ट में चलाएं**

इस बिंदु से, आपको अपने कोड संपादक में अपने रिएक्ट एप्लिकेशन पर ध्यान देना चाहिए। जोड़े गए फ़ोल्डर जैसे /awsmobile और package.json फ़ाइल में कुछ जोड़ दिए जाएंगे।

एक टर्मिनल विंडो में, टाइप करें

एनपीएम इंस्टॉल -जी awsmobile-cli

विश्व स्तर पर awsmobile-cli स्थापित करने के लिए। हम एडब्ल्यूएस मोबाइल हब कंसोल में कुछ काम करने के बाद इसका इस्तेमाल करेंगे।

सुनिश्चित करें कि आप अपने प्रोजेक्ट के अंदर हैं और टाइप करें

awsmobile init

आपको प्रश्नों के एक सेट के साथ संकेत दिया जाता है, जिसमें डिफ़ॉल्ट अच्छे होते हैं इसलिए प्रत्येक सेटिंग के माध्यम से एंटर दबाएं जब तक कि यह स्वचालित रूप से आपके डिफ़ॉल्ट ब्राउज़र में AWS नहीं खुल जाता। यदि आपने पहले से नहीं किया है तो अपने फ्री टियर खाते से लॉगिन करें।

![ ](httpsmiro.medium.com/max/1360/1*fqDYITZ3T-JAVMf0TwH7-A.png)

यह awsmobile-cli को आश्वस्त करता है कि हम सही AWS खाते से जुड़े हुए हैं। अपने टर्मिनल पर वापस जाएं और जारी रखने के लिए एंटर दबाएं।

एडब्ल्यूएस को एप्लिकेशन को नियंत्रित करने के लिए उपयोगकर्ता को सेटअप करने की आवश्यकता है। जब आप एंटर दबाना जारी रखेंगे तो यह एडब्ल्यूएसमोबाइल-क्ली द्वारा स्वचालित रूप से किया जाएगा।

![ ](httpsmiro.medium.com/max/1122/1*mUD3gl1bsrU03MKg4CZj9Q.png)

इसे पूरा करने के बाद, आपको AWS IAM में ले जाया जाएगा, जहां आप बस âÃÂÃÂNextà पूर्णता के लिए आपका रास्ता! दूसरे चरण में इसे स्वचालित रूप से ࢠÂÃÂप्रशासक Accessà¢Ã की जांच करनी चाहिए जो उपयोगकर्ता को एडब्ल्यूएस की सभी सुविधाओं तक पहुंच प्रदान करता है।

![ ](httpsmiro.medium.com/max/1400/1*clWJ77BP4-1LcgqmBVnVdQ.png)

जब किया जाता है, तो यह बहुत महत्वपूर्ण है कि आप अपने गुप्त प्रमाण-पत्रों के साथ .csv फ़ाइल डाउनलोड करें क्योंकि वे केवल AWS में एक बार प्रदर्शित होंगे। इन चाबियों का उपयोग आपके टर्मिनल विंडो के अगले चरणों में किया जाना है।

![ ](httpsmiro.medium.com/max/1400/1*eduJiN7QBTezz8y3vVrjkg.png)

![ ](httpsmiro.medium.com/max/1004/1*-gK1PXA0XNjFmWoOer8xgw.png)


यह आपके AWS MobileHub एप्लिकेशन को सफलतापूर्वक बनाता है और स्वचालित रूप से aws-amplify इंस्टॉल करता है& aws-amplify-react अपने स्थानीय रिएक्ट प्रोजेक्ट में

![ ](httpsmiro.medium.com/max/1224/1*z8xlOVoTSYNKvtOiPsyb1w.png)

जब यह प्रक्रिया पूरी हो जाए (~1 ​​मिनट) तो आप टाइप कर सकते हैं

awsmobile कंसोल

अपने मोबाइल हब एप्लिकेशन को अपने डिफ़ॉल्ट ब्राउज़र में देखने के लिए। विभिन्न कार्यों की सूची देखने के लिए आप ââÂÂÃÂawsmobileââ भी टाइप कर सकते हैं। यहां से, हम ब्राउज़र के साथ Cognito लॉगिन जोड़ देंगे, लेकिन आप इसे awsmobile CLI से कर सकते हैं।

**3. वास्तव में कॉग्निटो साइन-इन और होस्टिंग ** जोड़ना

अंतिम चरण के लिए, हम AWS MobileHub कंसोल के माध्यम से AWS Cognito को अपने प्रोजेक्ट में जोड़ेंगे। आप होस्टिंग भी देख सकते हैं जो पहले से ही डिफ़ॉल्ट रूप से सक्षम है।

![ ](httpsmiro.medium.com/max/1400/1*qs_KoX4Qn4QXJfXqMCZ7tA.png)

होस्टिंग का परीक्षण करने के लिए, अपने कंसोल में सुविधा पर क्लिक करें और उस URL पर क्लिक करें जो आपको प्रदान किया गया है। यहां सामग्री AWS द्वारा एक टेम्प्लेट है, लेकिन आप इसे जल्द ही रिएक्ट एप्लिकेशन के साथ ओवरराइट कर देंगे।

**Cognito उपयोगकर्ता साइन-इन जोड़ने के लिए, âÃÂÃÂउपयोगकर्ता साइन-इन को खोजने के लिए नीचे स्क्रॉल करें और इसे क्लिक करें। **यह प्रमाणीकरण प्रणाली के साथ Cognito उपयोगकर्ता पूल को सक्षम करता है। अपने लॉगिन में उपयोगकर्ता नाम के रूप में ईमेल को बाध्य करने के लिए ईमेल पते या फोन नंबर से à एक         Emailà  ¢  à का उपयोग करें। या आप उपयोगकर्ता नाम का उपयोग कर सकते हैं और ࢠÂÂÂEmailâà+ âÃÂÃÂउपयोगकर्ता नामâà को सक्षम कर सकते हैं उपयोगकर्ता को चुनने देने के लिए ÂÃÂ। आप किसी भी तरह से ईमेल द्वारा पुष्टिकरण कोड प्राप्त करेंगे।

हम ईमेल स्वीकार करते हैं क्योंकि AWS ईमेल पर पंजीकरण पुष्टिकरण कोड भेजने के लिए शुल्क नहीं लेता है, जबकि एसएमएस भेजने के लिए वास्तविक पैसे खर्च होते हैं।

![ ](httpsmiro.medium.com/max/1322/1*4ozbhL2UjGXfwcXk9t-mmg.png)

जिसके परिणामस्वरूप:

![ ](httpsmiro.medium.com/max/1304/1*CCPIwYcPoehI2Bzzwj7BKA.png)

यदि आप Cognito में कार्रवाई >संपादित करें क्लिक करते हैं, तो आपको अपने उपयोगकर्ताओं और उन्नत सुरक्षा सुविधाओं को प्रबंधित करने के लिए Cognito कंसोल दिखाई देगा. इस चरण में आपके द्वारा किया गया कुछ सेटअप वापस नहीं किया जा सकता है लेकिन आप हमेशा अपना उपयोगकर्ता पूल हटा सकते हैं और एक नया बना सकते हैं।

यह MobileHub के अंदर AWS Cognito के कॉन्फ़िगरेशन को पूरा करता है। यह कोड जोड़ने का समय है। कितना? 5 पंक्तियाँ! और उनमें से 3 रिएक्ट में केवल आयात हैं।

= अपनी सेटिंग्स को रिएक्ट प्रोजेक्ट में जोड़ना और अपनी वेबसाइट पर प्रकाशित करना =


अपने टर्मिनल में, आप किसी भी समय awsmobile पुल या awsmobile push का उपयोग करके अपने परिवर्तनों को क्रमशः AWS MobileHub कंसोल ऑनलाइन से अपने एप्लिकेशन में खींच सकते हैं, या टर्मिनल में awsmobile CLI के माध्यम से किए गए अपने स्थानीय परिवर्तनों को पुश कर सकते हैं।

इस उपयोग के मामले में हम अपने द्वारा किए गए परिवर्तनों को प्राप्त करना चाहते हैं। अपने टर्मिनल पर वापस जाएं और टाइप करें

![ ](httpsmiro.medium.com/max/1394/1*zxtajVqajk5MtgNNHea7bg.png)

वीएस कोड में वापस, आप देखेंगे कि आपकी परियोजना अब संशोधित की गई है। आप अपने स्थानीय कॉन्फ़िगरेशन को ./awsmobile/backend/mobile-hub-project.yml में देख सकते हैं

इसके अलावा, ./package.json में आप awsmobile init द्वारा जोड़े जा रहे दो हाइलाइट किए गए पुस्तकालयों को ढूंढेंगे जो हमने पहले किया था।

![ ](httpsmiro.medium.com/max/928/1*0j1ZYd5Qgx3GIUEQ3QA80A.png)

अब हम अपने एप्लिकेशन को Cognito लॉगिन विंडो में लपेटने के लिए इनका उपयोग करेंगे। ./src/index.js खोलें और इसे संशोधित करें:

![ ](httpsmiro.medium.com/max/1244/1*fnbXXDHYud2OC411jcja_w.png)

इसके लिये:

आयात प्रतिक्रिया 'प्रतिक्रिया'से;

'प्रतिक्रिया-डोम'से रिएक्टडोम आयात करें;

आयात index.css';

ऐप से ऐप आयात करें';

रजिस्टर सर्विस वर्कर से रजिस्टर सर्विस वर्कर आयात करें';

aws-exports से awsMobile आयात करें';

आयात प्रवर्धित 'aws-amplify'से;

"aws-amplify-react"Amplify.configure(awsMobile) से {withAuthenticator} आयात करें;

const AppWithAuth = withAuthenticator(App)ReactDOM.render(('root

registerServiceWorker

And you’re done! Try to run your application from your terminal with

npm start

and see it be loaded into the browser with a sleek GUI created by AWS:

![ ](httpsmiro.medium.com/max/1216/1*9pmJHX6DTtFkhhXMtjEL4w.png)

From here you can register, login or reset users, and as an admin you can see the users who are registering.

**To add hosting simply go to your terminal and type

awsmobile publish

If you get this warning, abort the publish, run awsmobile pull and run awsmobile publish again:

![ ](httpsmiro.medium.com/max/1350/1*9vJAXhEKd4FVv121B4i9Uw.png)

When this process is done, your hosted website automatically opens in your default browser:

![ ](httpsmiro.medium.com/max/1400/1*TNAioGF6HyaebijhULw.png)

**There, you’re done

= Pitfalls in the process =

If the application says “No user pools”, make sure your MobileHub console has Sign-In activated, and that you’ve called awsmobile pull from your terminal. This updates the aws-exports.js file which is then added to Amplify.configure() in React. Also, remember to import that file!

**Further challenges** **Use the ** **aws-amplify authentication documentation ** **to add a signout button to your application

Hint: You’ll need to import Auth and call its signOut function.

import { Auth } from aws-amplify-react

**Add your custom domain name to the hosted website**This is done through CloudFront, which you can access in MobileHub “Hosting and Streaming”. Read the docs provided if you want assitance:

== Using Custom URLs for Files by Adding Alternate Domain Names (CNAMEs) - Amazon CloudFront ==

 Describes how to add an alternate domain name, known as a CNAME, to use your own domain name instead of the default… 

docs.aws.amazon.com

**Add Google Login**Delete your Cognito User Pool and add one with Facebook/Google providers. This can be a bit tricky as you need to get e.g. Google Web App Client ID from the google terminal to make this work. **Hope you enjoyed this very detailed introduction to AWS MobileHub. It’s a lot of fun once you get the hang of it, and creating a Serverless backend for your frontend project has never been as easy