= 30 ਮਿੰਟਾਂ ਵਿੱਚ AWS ਨਾਲ ਤੁਹਾਡੀ ਪ੍ਰਤੀਕਿਰਿਆ ਐਪਲੀਕੇਸ਼ਨ ਦੀ ਮੇਜ਼ਬਾਨੀ ਕਰਨਾ =

ਇਹ ਟਿਊਟੋਰਿਅਲ ਬਹੁਤ ਜ਼ਿਆਦਾ ਚਿੱਤਰ ਹੈ ਅਤੇ ਸੰਪੂਰਨ ਸ਼ੁਰੂਆਤ ਕਰਨ ਵਾਲਿਆਂ ਲਈ ਨਿਸ਼ਾਨਾ ਹੈ। ਇਹ ਦੱਸਦਾ ਹੈ ਕਿ ਤੁਸੀਂ ਇੱਕ ਪੂਰੀ ਅਧਿਕਾਰ ਪ੍ਰਣਾਲੀ ਦੇ ਨਾਲ, ਇੱਕ ਵੈਬਸਾਈਟ 'ਤੇ ਆਪਣੀ ਪ੍ਰਤੀਕਿਰਿਆ ਐਪਲੀਕੇਸ਼ਨ ਦੀ ਮੇਜ਼ਬਾਨੀ ਕਿਵੇਂ ਕਰ ਸਕਦੇ ਹੋ। ਇਹ Mobilehub CLI (ਕਮਾਂਡ ਲਾਈਨ ਇੰਟਰਫੇਸ) ਦੁਆਰਾ AWS MobileHub ਦੀ ਸ਼ਕਤੀ ਨੂੰ ਸੱਦਾ ਦਿੰਦਾ ਹੈ। ਟਿਊਟੋਰਿਅਲ ਲਈ AWS ਸੇਵਾਵਾਂ ਨਾਲ ਕੋਈ ਹੁਨਰ ਦੀ ਲੋੜ ਨਹੀਂ ਹੈ ਅਤੇ ਇਹ ਤੁਹਾਨੂੰ ਇੱਕ ਰੀਐਕਟ ਬੌਇਲਰਪਲੇਟ ਐਪਲੀਕੇਸ਼ਨ ਸੈਟ ਅਪ ਕਰਨ ਲਈ ਵੀ ਦਿਖਾਏਗਾ।

ਜੇਕਰ ਤੁਹਾਡੇ ਕੋਲ ਪਹਿਲਾਂ ਤੋਂ ਹੀ ਇੱਕ React ਐਪਲੀਕੇਸ਼ਨ ਹੈ,

**ਤੁਸੀਂ ਸੈਕਸ਼ਨ 2 'ਤੇ ਜਾ ਸਕਦੇ ਹੋ ਜਿੱਥੇ ਅਸੀਂ awsmobile-cli ਇੰਸਟਾਲ ਕਰਦੇ ਹਾਂ ਅਤੇ ਇਸਨੂੰ ਸਾਡੀ ਐਪਲੀਕੇਸ਼ਨ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰਦੇ ਹਾਂ

= ਇਸ ਤੋਂ ਪਹਿਲਾਂ ਕਿ ਅਸੀਂ ਸ਼ੁਰੂ ਕਰੀਏ ਸਾਨੂੰ ਤੁਹਾਡੇ ਕੰਪਿਊਟਰ ਉੱਤੇ ਸੈੱਟਅੱਪ ਕੀਤੀਆਂ ਕੁਝ ਚੀਜ਼ਾਂ ਦੀ ਲੋੜ ਹੈ =

**ਨੋਡ 8.x ਵਾਤਾਵਰਣ ਤੁਹਾਡੇ ਕੰਪਿਊਟਰ 'ਤੇ ਸਥਾਪਿਤ ਕੀਤਾ ਗਿਆ**

- ਇਹ Javascript ਐਪਲੀਕੇਸ਼ਨ ਸਰਵਰਾਂ ਲਈ ਰਨਟਾਈਮ ਵਾਤਾਵਰਣ ਹੈ। ਇਹ ਨੋਡ ਪੈਕੇਜ ਮੈਨੇਜਰ (NPM) ਦੀ ਪਾਲਣਾ ਕਰਦਾ ਹੈ।

- NPM ਦੀ ਵਰਤੋਂ ਨੋਡ ਪੈਕੇਜਾਂ ਨੂੰ ਸਥਾਪਿਤ ਕਰਨ ਲਈ ਕੀਤੀ ਜਾਂਦੀ ਹੈ ਜਿਵੇਂ ਕਿ React, AWS ਐਂਪਲੀਫਾਈ, ਇੱਕ AWS-JS ਕਨੈਕਟਰ ਪੈਕੇਜ ਅਤੇ ਇਹ ਅਸਲ ਵਿੱਚ ਇਹ ਹੈ।

- httpsnodejs.org/en/download/

**ਇੱਕ AWS ਮੁਫ਼ਤ ਟੀਅਰ ਖਾਤਾ

- ਤੁਸੀਂ ਮੁਫਤ ਟੀਅਰ ਦੁਆਰਾ AWS ਸੇਵਾਵਾਂ ਤੱਕ ਮੁਫਤ ਪਹੁੰਚ ਪ੍ਰਾਪਤ ਕਰਦੇ ਹੋ। ਇਸ ਟਿਊਟੋਰਿਅਲ ਲਈ, ਇਹ ਕਾਫ਼ੀ ਤੋਂ ਵੱਧ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ। ਹਾਲਾਂਕਿ, ਯਾਦ ਰੱਖੋ ਕਿ ਹਰੇਕ ਸੇਵਾ ਦੀ ਹਰ ਮਹੀਨੇ ਵਰਤੋਂ 'ਤੇ ਇੱਕ ਸੀਮਾ ਹੁੰਦੀ ਹੈ ਅਤੇ ਇਸ ਨਾਲ ਤੁਹਾਨੂੰ ਅਸਲ ਪੈਸਾ ਖਰਚ ਕਰਨਾ ਪੈ ਸਕਦਾ ਹੈ।

- httpsaws.amazon.com/free/

**ਆਪਣੇ ਕੰਸੋਲ ਤੋਂ ਸਿੱਧੇ AWS ਸੇਵਾਵਾਂ ਨੂੰ ਕਾਲ ਕਰਨ ਲਈ AWS CLI (ਕਮਾਂਡ ਲਾਈਨ ਇੰਟਰਫੇਸ) ਨੂੰ ਸਥਾਪਿਤ ਕਰੋ** **ਇਸ ਕੋਰਸ ਲਈ ਅਸੀਂ ਫੇਸਬੁੱਕ, ਰੀਐਕਟ ਦੇ ਸਿਰਜਣਹਾਰਾਂ ਤੋਂ ਬਣਾਈ ਗਈ ਬਾਇਲਰਪਲੇਟ ਦੀ ਵਰਤੋਂ ਕਰਾਂਗੇ **ਤੁਹਾਡੀ ਚੋਣ ਦਾ ਇੱਕ ਸੰਪਾਦਕ

- ਮੈਂ ਵਿਜ਼ੂਅਲ ਸਟੂਡੀਓ ਕੋਡ ਨਾਲ ਸ਼ੁਰੂ ਕਰਨ ਦਾ ਸੁਝਾਅ ਦਿੰਦਾ ਹਾਂ, ਇੱਕ ਬਹੁਤ ਜ਼ਿਆਦਾ ਸੋਧਣ ਯੋਗ ਹਲਕਾ ਸੰਪਾਦਕ ਜੋ ਜ਼ਿਆਦਾਤਰ ਪ੍ਰੋਗਰਾਮਿੰਗ ਭਾਸ਼ਾਵਾਂ ਅਤੇ ਫਰੇਮਵਰਕ ਚਲਾ ਸਕਦਾ ਹੈ।

ਪ੍ਰੋ ਟਿਪ: VS ਕੋਡ ਦੀ ਸਥਾਪਨਾ ਪ੍ਰਕਿਰਿਆ ਵਿੱਚ, ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਬਾਕਸ ਨੂੰ ਚੁਣੋ ਜੋ ਇਸਨੂੰ ਤੁਹਾਡੇ ਵਾਤਾਵਰਣ ਮਾਰਗ ਦੇ ਨਾਮਾਂ ਵਿੱਚ ਜੋੜਦਾ ਹੈ। ਇਹ ਤੁਹਾਨੂੰ âÃÂÃÂcode filename.jsâÃÂàਜਾਂ âÃÂà ਟਾਈਪ ਕਰਕੇ ਟਰਮੀਨਲ ਤੋਂ VS ਕੋਡ ਖੋਲ੍ਹਣ ਦੀ ਪਹੁੰਚ ਦਿੰਦਾ ਹੈ। Âਕੋਡ .âÃÂàਪੂਰੇ ਪ੍ਰੋਜੈਕਟ ਲਈ ਜਿਸ ਵਿੱਚ ਤੁਸੀਂ ਹੋ। **ਤੁਹਾਨੂੰ ਇੱਕ ਟਰਮੀਨਲ ਵਿੱਚ ਆਰਾਮਦਾਇਕ ਹਨ

- ਜ਼ਿਆਦਾਤਰ ਡਿਵੈਲਪਰਾਂ ਨੂੰ ਆਪਣੇ ਕੰਪਿਊਟਰ 'ਤੇ Git ਇੰਸਟਾਲ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ। ਇਹ ਤੁਹਾਨੂੰ Git Bash ਤੱਕ ਪਹੁੰਚ ਦਿੰਦਾ ਹੈ ਜੋ ਕਿ ਬਹੁਤ ਸਾਰੇ ਡਿਵੈਲਪਰਾਂ ਦੇ ਟਰਮੀਨਲ 'ਤੇ ਹੈ।

ਆਓ ਸ਼ੁਰੂ ਕਰੀਏ!

**1। ਪ੍ਰਤੀਕਿਰਿਆ ਐਪਲੀਕੇਸ਼ਨ ਬਣਾਓ ਅਤੇ ਟਰਮੀਨਲ ਦੁਆਰਾ ਪ੍ਰੋਜੈਕਟ ਫੋਲਡਰ ਦਾਖਲ ਕਰੋ**

ਟਰਮੀਨਲ ਵਿੱਚ ਦਾਖਲ ਹੋਵੋ ਅਤੇ ਆਪਣੇ ਫੋਲਡਰ ਨੂੰ ਲੱਭੋ ਜਿੱਥੇ ਤੁਸੀਂ ਐਪਲੀਕੇਸ਼ਨ ਸਟੋਰ ਕਰਦੇ ਹੋ। ਮੈਂ âÃÂÃÂdevâÃÂàਨਾਮਕ ਫੋਲਡਰ ਦਾ ਸੁਝਾਅ ਦਿੰਦਾ ਹਾਂ।

npx create-react-app ਪ੍ਰੋਜੈਕਟ-ਨਾਮ&& cd ਪ੍ਰੋਜੈਕਟ-ਨਾਂ

ਜਾਂ
npm -g install create-react-app create-react-app ਪ੍ਰੋਜੈਕਟ-ਨਾਮ

ਇੱਥੇ ਅਸੀਂ ਬਾਇਲਰਪਲੇਟ ਦੇ ਅਧਾਰ ਤੇ ਇੱਕ ਪ੍ਰਤੀਕਿਰਿਆ ਐਪਲੀਕੇਸ਼ਨ ਬਣਾਉਂਦੇ ਹਾਂ। ਇੱਕ ਨੋਡ ਟੂਲ ਹੈ ਜੋ ਰਿਮੋਟ ਪੈਕੇਜਾਂ 'ਤੇ ਕਾਲ ਕਰਨ ਲਈ npm ਸਰਵਰ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ। ਦੂਜਾ ਕੋਡ ਸਨਿੱਪਟ ਸਥਾਨਕ ਤੌਰ 'ਤੇ create-react-app ਨੂੰ ਸਥਾਪਿਤ ਕਰਦਾ ਹੈ

*npm -g install create-react-app* **ਅਤੇ ਫਿਰ ਐਪਲੀਕੇਸ਼ਨ ਬਣਾਉਂਦਾ ਹੈ। ਮੈਂ npx ਦੀ ਵਰਤੋਂ ਕਰਨ ਦਾ ਸੁਝਾਅ ਦਿੰਦਾ ਹਾਂ ਤਾਂ ਕਿ create-react-app ਦੇ ਨਾਲ ਹਮੇਸ਼ਾ ਅੱਪ-ਟੂ-ਡੇਟ ਰਹੋ ਅਤੇ ਫਿਰ ਐਪਲੀਕੇਸ਼ਨ ਬਣਾਓ। ਮੈਂ npx ਦੀ ਵਰਤੋਂ ਕਰਨ ਦਾ ਸੁਝਾਅ ਦਿੰਦਾ ਹਾਂ ਤਾਂ ਜੋ create-react-app ਦੇ ਨਾਲ ਹਮੇਸ਼ਾ ਅੱਪ-ਟੂ-ਡੇਟ ਰਹੋ। **2. ਆਪਣੇ ਕੰਪਿਊਟਰ 'ਤੇ awsmobile CLI ਇੰਸਟਾਲ ਕਰੋ ਅਤੇ ਇਸਨੂੰ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਚਲਾਓ**

ਇਸ ਬਿੰਦੂ ਤੋਂ, ਤੁਹਾਨੂੰ ਆਪਣੇ ਕੋਡ ਸੰਪਾਦਕ ਵਿੱਚ ਆਪਣੀ ਪ੍ਰਤੀਕਿਰਿਆ ਐਪਲੀਕੇਸ਼ਨ ਵੱਲ ਧਿਆਨ ਦੇਣਾ ਚਾਹੀਦਾ ਹੈ। ਇੱਥੇ /awsmobile ਵਰਗੇ ਫੋਲਡਰ ਅਤੇ ਪੈਕੇਜ.json ਫਾਈਲ ਵਿੱਚ ਕੁਝ ਜੋੜ ਸ਼ਾਮਲ ਕੀਤੇ ਜਾਣਗੇ।

ਟਰਮੀਨਲ ਵਿੰਡੋ ਵਿੱਚ, ਟਾਈਪ ਕਰੋ

npm install -g awsmobile-cli

ਵਿਸ਼ਵ ਪੱਧਰ 'ਤੇ awsmobile-cli ਨੂੰ ਸਥਾਪਿਤ ਕਰਨ ਲਈ। ਅਸੀਂ AWS ਮੋਬਾਈਲ ਹੱਬ ਕੰਸੋਲ ਵਿੱਚ ਕੁਝ ਕੰਮ ਕਰਨ ਤੋਂ ਬਾਅਦ ਇਸਦੀ ਵਰਤੋਂ ਕਰਾਂਗੇ।

ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਤੁਸੀਂ ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਦੇ ਅੰਦਰ ਹੋ ਅਤੇ ਟਾਈਪ ਕਰੋ

awsmobile init

ਤੁਹਾਨੂੰ ਸਵਾਲਾਂ ਦੇ ਇੱਕ ਸਮੂਹ ਦੇ ਨਾਲ ਪੁੱਛਿਆ ਜਾਂਦਾ ਹੈ, ਜਿਸ ਵਿੱਚ ਡਿਫੌਲਟ ਵਧੀਆ ਹੁੰਦੇ ਹਨ ਇਸਲਈ ਹਰੇਕ ਸੈਟਿੰਗ ਵਿੱਚ ਐਂਟਰ ਦਬਾਓ ਜਦੋਂ ਤੱਕ ਇਹ ਤੁਹਾਡੇ ਡਿਫੌਲਟ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ AWS ਨੂੰ ਆਪਣੇ ਆਪ ਨਹੀਂ ਖੋਲ੍ਹਦਾ। ਆਪਣੇ ਮੁਫਤ ਟੀਅਰ ਖਾਤੇ ਨਾਲ ਲੌਗਇਨ ਕਰੋ ਜੇਕਰ ਤੁਸੀਂ ਪਹਿਲਾਂ ਹੀ ਨਹੀਂ ਕੀਤਾ ਹੈ।

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

ਇਹ awsmobile-cli ਨੂੰ ਭਰੋਸਾ ਦਿਵਾਉਂਦਾ ਹੈ ਕਿ ਅਸੀਂ ਸਹੀ AWS ਖਾਤੇ ਨਾਲ ਜੁੜੇ ਹੋਏ ਹਾਂ। ਆਪਣੇ ਟਰਮੀਨਲ 'ਤੇ ਵਾਪਸ ਜਾਓ ਅਤੇ ਜਾਰੀ ਰੱਖਣ ਲਈ ਐਂਟਰ ਦਬਾਓ।

AWS ਨੂੰ ਐਪਲੀਕੇਸ਼ਨ ਨੂੰ ਨਿਯੰਤਰਿਤ ਕਰਨ ਲਈ ਇੱਕ ਉਪਭੋਗਤਾ ਨੂੰ ਸੈੱਟਅੱਪ ਕਰਨ ਦੀ ਲੋੜ ਹੈ। ਇਹ awsmobile-cli ਦੁਆਰਾ ਆਪਣੇ ਆਪ ਹੀ ਹੋ ਜਾਵੇਗਾ ਜਦੋਂ ਤੁਸੀਂ ਐਂਟਰ ਦਬਾਉਂਦੇ ਰਹੋਗੇ।

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

ਇਸ ਨੂੰ ਪੂਰਾ ਕਰਨ ਤੋਂ ਬਾਅਦ, ਤੁਹਾਨੂੰ AWS IAM 'ਤੇ ਲਿਜਾਇਆ ਜਾਵੇਗਾ ਜਿੱਥੇ ਤੁਸੀਂ ਸਿਰਫ਼ ਅਗਲਾ ¢ÃÂàਪੂਰਨਤਾ ਵੱਲ ਆਪਣਾ ਰਾਹ! ਦੂਜੇ ਪੜਾਅ ਵਿੱਚ ਇਸਨੂੰ ਆਪਣੇ ਆਪ âÃÂÃÂAdministrator AccessâÃÂàਦੀ ਜਾਂਚ ਕਰਨੀ ਚਾਹੀਦੀ ਹੈ ਜੋ ਉਪਭੋਗਤਾ ਨੂੰ AWS ਦੀਆਂ ਸਾਰੀਆਂ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਤੱਕ ਪਹੁੰਚ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ ਜਿਸਦੀ ਸਾਨੂੰ ਲੋੜ ਹੈ।

![ ](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 in your local React Project

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

ਜਦੋਂ ਇਹ ਪ੍ਰਕਿਰਿਆ ਪੂਰੀ ਹੋ ਜਾਂਦੀ ਹੈ (~1 ਮਿੰਟ) ਤੁਸੀਂ ਟਾਈਪ ਕਰ ਸਕਦੇ ਹੋ

awsmobile ਕੰਸੋਲ

ਤੁਹਾਡੇ ਡਿਫੌਲਟ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਤੁਹਾਡੀ ਮੋਬਾਈਲ ਹੱਬ ਐਪਲੀਕੇਸ਼ਨ ਨੂੰ ਦੇਖਣ ਲਈ। ਤੁਸੀਂ ਵੱਖ-ਵੱਖ ਕਾਰਵਾਈਆਂ ਦੀ ਸੂਚੀ ਦੇਖਣ ਲਈ âÃÂÃÂawsmobileâÃÂàਵੀ ਟਾਈਪ ਕਰ ਸਕਦੇ ਹੋ। ਇੱਥੋਂ, ਅਸੀਂ ਬ੍ਰਾਊਜ਼ਰ ਨਾਲ ਕੋਗਨਿਟੋ ਲੌਗਇਨ ਜੋੜਾਂਗੇ, ਪਰ ਤੁਸੀਂ ਇਹ awsmobile CLI ਤੋਂ ਕਰ ਸਕਦੇ ਹੋ।

**3. ਅਸਲ ਵਿੱਚ ਕੋਗਨਿਟੋ ਸਾਈਨ-ਇਨ ਅਤੇ ਹੋਸਟਿੰਗ ਨੂੰ ਜੋੜਨਾ**

ਆਖਰੀ ਪੜਾਅ ਲਈ, ਅਸੀਂ AWS MobileHub ਕੰਸੋਲ ਰਾਹੀਂ ਸਾਡੇ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ AWS Cognito ਨੂੰ ਸ਼ਾਮਲ ਕਰਾਂਗੇ। ਤੁਸੀਂ ਹੋਸਟਿੰਗ ਨੂੰ ਵੀ ਦੇਖ ਸਕਦੇ ਹੋ ਜੋ ਪਹਿਲਾਂ ਹੀ ਡਿਫੌਲਟ ਰੂਪ ਵਿੱਚ ਸਮਰੱਥ ਹੈ।

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

ਹੋਸਟਿੰਗ ਦੀ ਜਾਂਚ ਕਰਨ ਲਈ, ਆਪਣੇ ਕੰਸੋਲ ਵਿੱਚ ਵਿਸ਼ੇਸ਼ਤਾ 'ਤੇ ਕਲਿੱਕ ਕਰੋ ਅਤੇ ਉਸ URL 'ਤੇ ਕਲਿੱਕ ਕਰੋ ਜੋ ਤੁਹਾਨੂੰ ਪ੍ਰਦਾਨ ਕੀਤਾ ਗਿਆ ਹੈ। ਇੱਥੇ ਸਮੱਗਰੀ AWS ਦੁਆਰਾ ਇੱਕ ਟੈਮਪਲੇਟ ਹੈ, ਪਰ ਤੁਸੀਂ ਇਸਨੂੰ ਜਲਦੀ ਹੀ React ਐਪਲੀਕੇਸ਼ਨ ਨਾਲ ਓਵਰਰਾਈਟ ਕਰੋਗੇ।

**ਕੋਗਨਿਟੋ ਯੂਜ਼ਰ ਸਾਈਨ-ਇਨ ਜੋੜਨ ਲਈ, ਯੂਜ਼ਰ ਸਾਈਨ-ਇਨ ਲੱਭਣ ਲਈ ਹੇਠਾਂ ਸਕ੍ਰੋਲ ਕਰੋ ਅਤੇ ਇਸ 'ਤੇ ਕਲਿੱਕ ਕਰੋ। **ਇਹ ਪ੍ਰਮਾਣਿਕਤਾ ਸਿਸਟਮ ਨਾਲ ਕੌਗਨਿਟੋ ਯੂਜ਼ਰ ਪੂਲ ਨੂੰ ਸਮਰੱਥ ਬਣਾਉਂਦਾ ਹੈ। ਆਪਣੇ ਲੌਗਇਨ ਵਿੱਚ ਵਰਤੋਂਕਾਰ ਨਾਮ ਵਜੋਂ ਈਮੇਲ ਨੂੰ ਮਜਬੂਰ ਕਰਨ ਲਈ ਈਮੇਲ ਪਤੇ ਜਾਂ ਫ਼ੋਨ ਨੰਬਰ ਤੋਂ âÃÂÃÂEmailàਵਰਤੋ। ਜਾਂ ਤੁਸੀਂ ਯੂਜ਼ਰਨੇਮ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ ਅਤੇ âÃÂÃÂEmailâÃÂà+ âÃÂÃÂUsernameâà ਯੋਗ ਕਰ ਸਕਦੇ ਹੋ। Âàਉਪਭੋਗਤਾ ਨੂੰ ਚੁਣਨ ਦੇਣ ਲਈ। ਤੁਹਾਨੂੰ ਕਿਸੇ ਵੀ ਤਰੀਕੇ ਨਾਲ ਈਮੇਲ ਦੁਆਰਾ ਪੁਸ਼ਟੀਕਰਨ ਕੋਡ ਪ੍ਰਾਪਤ ਹੋਵੇਗਾ।

ਅਸੀਂ ਈਮੇਲ ਸਵੀਕਾਰ ਕਰਦੇ ਹਾਂ ਕਿਉਂਕਿ AWS ਈਮੇਲ 'ਤੇ ਰਜਿਸਟ੍ਰੇਸ਼ਨ ਪੁਸ਼ਟੀਕਰਨ ਕੋਡ ਭੇਜਣ ਲਈ ਕੋਈ ਖਰਚਾ ਨਹੀਂ ਲੈਂਦਾ, ਜਦੋਂ ਕਿ SMS ਭੇਜਣ ਲਈ ਅਸਲ ਪੈਸੇ ਖਰਚ ਹੁੰਦੇ ਹਨ।

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

ਜਿਸ ਦੇ ਨਤੀਜੇ ਵਜੋਂ:

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

ਜੇਕਰ ਤੁਸੀਂ Cognito ਵਿੱਚ ਐਕਸ਼ਨ >ਸੰਪਾਦਿਤ ਕਰੋ 'ਤੇ ਕਲਿੱਕ ਕਰਦੇ ਹੋ, ਤਾਂ ਤੁਸੀਂ ਆਪਣੇ ਵਰਤੋਂਕਾਰਾਂ ਅਤੇ ਉੱਨਤ ਸੁਰੱਖਿਆ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦੇ ਪ੍ਰਬੰਧਨ ਲਈ ਕੋਗਨਿਟੋ ਕੰਸੋਲ ਦੇਖੋਗੇ। ਕੁਝ ਸੈਟਅਪ ਜੋ ਤੁਸੀਂ ਇਸ ਪਗ ਵਿੱਚ ਕੀਤਾ ਸੀ ਉਹ ਗੈਰ-ਉਲਟਣਯੋਗ ਹੈ ਪਰ ਤੁਸੀਂ ਹਮੇਸ਼ਾਂ ਆਪਣੇ ਉਪਭੋਗਤਾ ਪੂਲ ਨੂੰ ਮਿਟਾ ਸਕਦੇ ਹੋ ਅਤੇ ਇੱਕ ਨਵਾਂ ਬਣਾ ਸਕਦੇ ਹੋ।

ਇਹ MobileHub ਦੇ ਅੰਦਰ AWS Cognito ਦੀ ਸੰਰਚਨਾ ਨੂੰ ਪੂਰਾ ਕਰਦਾ ਹੈ। ਇਹ ਕੋਡ ਜੋੜਨ ਦਾ ਸਮਾਂ ਹੈ। ਕਿੰਨੇ ਹੋਏ? 5 ਲਾਈਨਾਂ! ਅਤੇ ਉਹਨਾਂ ਵਿੱਚੋਂ 3 ਸਿਰਫ ਪ੍ਰਤੀਕਿਰਿਆ ਵਿੱਚ ਆਯਾਤ ਹਨ।

= ਤੁਹਾਡੀਆਂ ਸੈਟਿੰਗਾਂ ਨੂੰ ਰੀਐਕਟ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਜੋੜਨਾ ਅਤੇ ਤੁਹਾਡੀ ਵੈਬਸਾਈਟ ਤੇ ਪ੍ਰਕਾਸ਼ਿਤ ਕਰਨਾ =


ਆਪਣੇ ਟਰਮੀਨਲ ਵਿੱਚ, ਤੁਸੀਂ ਕਿਸੇ ਵੀ ਸਮੇਂ AWS MobileHub ਕੰਸੋਲ ਤੋਂ ਆਪਣੀਆਂ ਤਬਦੀਲੀਆਂ ਨੂੰ ਕ੍ਰਮਵਾਰ ਆਪਣੀ ਐਪਲੀਕੇਸ਼ਨ ਵਿੱਚ ਖਿੱਚਣ ਲਈ awsmobile ਪੁੱਲ ਜਾਂ awsmobile ਪੁਸ਼ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ, ਜਾਂ ਟਰਮੀਨਲ ਵਿੱਚ awsmobile CLI ਰਾਹੀਂ ਕੀਤੀਆਂ ਸਥਾਨਕ ਤਬਦੀਲੀਆਂ ਨੂੰ ਅੱਗੇ ਵਧਾ ਸਕਦੇ ਹੋ।

ਇਸ ਵਰਤੋਂ ਦੇ ਕੇਸ ਲਈ ਅਸੀਂ ਉਹਨਾਂ ਤਬਦੀਲੀਆਂ ਨੂੰ ਪ੍ਰਾਪਤ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹਾਂ ਜੋ ਅਸੀਂ ਕੀਤੀਆਂ ਹਨ। ਆਪਣੇ ਟਰਮੀਨਲ 'ਤੇ ਵਾਪਸ ਜਾਓ ਅਤੇ ਟਾਈਪ ਕਰੋ

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

VS ਕੋਡ ਵਿੱਚ ਵਾਪਸ, ਤੁਸੀਂ ਦੇਖੋਗੇ ਕਿ ਤੁਹਾਡੇ ਪ੍ਰੋਜੈਕਟ ਨੂੰ ਹੁਣ ਸੋਧਿਆ ਗਿਆ ਹੈ। ਤੁਸੀਂ ./awsmobile/backend/mobile-hub-project.yml ਵਿੱਚ ਆਪਣੀਆਂ ਸਥਾਨਕ ਸੰਰਚਨਾਵਾਂ ਦੀ ਜਾਂਚ ਕਰ ਸਕਦੇ ਹੋ

ਨਾਲ ਹੀ, ./package.json ਵਿੱਚ ਤੁਸੀਂ awsmobile init ਦੁਆਰਾ ਜੋੜੀਆਂ ਜਾ ਰਹੀਆਂ ਦੋ ਹਾਈਲਾਈਟ ਕੀਤੀਆਂ ਲਾਇਬ੍ਰੇਰੀਆਂ ਲੱਭ ਸਕੋਗੇ ਜੋ ਅਸੀਂ ਪਹਿਲਾਂ ਕੀਤੀਆਂ ਸਨ।

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

ਅਸੀਂ ਹੁਣ ਇਹਨਾਂ ਦੀ ਵਰਤੋਂ ਸਾਡੀ ਐਪਲੀਕੇਸ਼ਨ ਨੂੰ ਇੱਕ ਕੋਗਨਿਟੋ ਲੌਗਇਨ ਵਿੰਡੋ ਵਿੱਚ ਸਮੇਟਣ ਲਈ ਕਰਾਂਗੇ। ./src/index.js ਖੋਲ੍ਹੋ ਅਤੇ ਇਸਨੂੰ ਸੋਧੋ:

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

ਇਸ ਨੂੰ:

'ਪ੍ਰਤੀਕਿਰਿਆ'ਤੋਂ ਪ੍ਰਤੀਕ੍ਰਿਆ ਆਯਾਤ ਕਰੋ;

'react-dom'ਤੋਂ ReactDOM ਆਯਾਤ ਕਰੋ;

ਆਯਾਤ index.css';

ਐਪ ਤੋਂ ਐਪ ਆਯਾਤ ਕਰੋ';

registerServiceWorker'ਤੋਂ ਰਜਿਸਟਰ ਸਰਵਿਸਵਰਕਰ ਆਯਾਤ ਕਰੋ;

aws-export'ਤੋਂ 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