Up next in 10
[Free] Building + Hosting React App For free on Github Pages _ Complete React Course in Hindi #17
72 views
Feb 10, 2024
The video "[Free] Building + Hosting React App For free on Github Pages _ Complete React Course in Hindi #17" likely provides a tutorial on building and hosting a React application for free using GitHub Pages, within a course presented in Hindi. In this video, viewers will learn how to deploy their React projects to GitHub Pages, a free hosting service provided by GitHub. The instructor likely demonstrates the steps required to build the React application, configure it for deployment, and publish it to GitHub Pages. Through step-by-step instructions and practical demonstrations provided in Hindi, viewers can understand how to leverage GitHub Pages to make their React applications accessible online without any cost. This tutorial aims to empower Hindi-speaking audiences with the knowledge and skills needed to deploy and share their React projects with the world.
View Video Transcript
0:00
तो हमने इस TaxiRootle app को build किया, मज़ा आया, सब कुछ हुआ, dark mode enable किया
0:05
अब हम लोग देखेंगे कि इस तरह से GitHub पर hosting की जा सकती है, वो भी free में बिना पैसे दिये
0:10
तो यहाँ पर हम लोग क्या करेंगे, सबसे पहले एक बात समझेंगे, कि हम जो भी follow करेंग��
0:15
वो official documentation के हिसाब से होगा दूसरी बात जो आप लोगों को समझने की ज़रूरत ह��
0:19
वो यह है कि in order to use GitHub for hosting applications आपको क्या करना होगा क��
0:25
GitHub को install करना पड़ेगा अपने computer के अंदर तो आप क्या कर सकते है��
0:29
GitHub desktop को install करें तो GitHub desktop आप यहाँ से install कर सकते हैं इसको download करें Windows के लिए और इसके setup को run कर लें और आप simply
0:40
गिटअप डेस्टॉप जो है वह यूज कर पाएंगे ठीक है तो आप लोग जो गिटअप डेस्टॉप इसको इस्तेमाल कर लें और उस��
0:46
जो गिट है उसको भी डाउनलोड कर लें वो आप गिट SCM डॉट कॉम से डाउनलोड करेंगे तो ये दोनों चीज़��
0:52
आप लोगों को इंस्टॉल करनी है एक तो गिट इंस्टॉल करना है पहले गिट करना फिर गिट अब डेस्टॉप करन��
0:56
जाना ठीक है मेरे में गिट बिंट टॉल्ड है गिटअप डेस्टॉप भी इंस्टॉल्ड है मैंने फिर से कर दिया इंस्टॉल्��
1:01
हो गया ठीक है फिर से हो गया इंस्टॉल कोई बात नहीं अब यहां पर आपको भी कुछ इस तरह से चीज दिखेगी मैं इसक��
1:07
बंद कर देता हूं यहां पर आप लोग यहां पर देखो कि आप अलग-अलग तरह की रिपोजिटरी जो यहां से देख पाओगे और आ��
1:15
अपनी रिपोजिटरी को ओपन करना चाहते हो तो आप आईड लोकल रिपोजिटरी पर क्लिक कर सकते हो यह चूस पर क्लिक करक��
1:21
अपने मन पसंद रिपोजिटरी को सिलेक्ट कर सकते हो ठीक है फॉर एक्सांपल यहां पर मैंने टेक्स यूटिल्स इसको मै��
1:26
खोलना चाहता हूं वह रिपोजिटरी हो तो मैं यहां पर आईड रिपोजिटरी कर दूंगा यह टेक्स यूटिल्स रियल्ट वाल��
1:31
यहां पर आ गई तो इससे क्या होता है इसका फायदा क्या है आप अगर गिट प्रो हो गिट प्रो हो तो आप बड़े आराम स��
1:37
यूज कर सकते हो गिट के कमांड्स बड़ा प्लू एक बिगनर तो यह चीज बहुत अलार्म हिल्प हो जाती है तो यह ची��
1:42
इंस्टॉल करी गेट अपने स्टॉल करा पहले फिर में गेट अप डेस्टॉप इंस्टॉल करा और सब कुछ सेट है य��
1:48
हमारी डियाट एप्लीकेशन है इस � schwer एप्लीकेशन में कुछ चेंजेस आप लोगों को कर लोगा मैं सबसे पहले तो आ��
1:53
यहाँ पर नेट पर जाएं और लिखें deployment deployment किसी इसका deployment of create react आप एन इ��
2:03
ग्रीड रियल आप से बनी गई application का deployment कैसे किया जाए इसका � costing रियल टैप की वेबसाइ��
2:08
यहीं पर आप control F करके लिख सकते हो अम गिटफ पेज़े��
2:13
अब गिटफ पेज़ेस क्या होता है गिटफ पेज़ेस dot github dot io करक��
2:17
जो पेज़ेस होस्टेड होते हैं ना गिटफ पेज़ेस वो होता है बस simply इससे ज़्यादा कुछ नहीं ह��
2:21
बहुत सिंपल सी चीज है गिटअप पेजेस अब गिटअप पेजेस पर अगर आप लोग मैनुअली npm run build करोगे सबसे पहले मैं आपको npm run build के बारे में बता देता हूँ और आप लोग यहाँ पर npm run build लिखोगे तो यहाँ पर क्या होता है कि एक build folder बन जाता है यहाँ पर ��
2:51
मैं आप लोगों को इस चीज का प्रूव दिखाता हूँ, मैं क्या करूँगा, कीस को बंद करूँगा, VS Code को बंद करूँगा, और मैं सिर्फ Build के अंदर घुसकर
2:58
VS Code में खोलूँगा इस Folder को, Open with Live Server करूँगा
3:01
या किसी भी सरवर से आप इसको ओपन कर सकते हो, मेरे लिए यह सबसे आसान तरीका लाइफ सरवर खोलना है
3:05
तो मैं लाइफ सरवर में खोलूंगा, और यह देखो, मेरी अप्लिकेशन बिलकुल सही से काम कर रही है, यहाँ पर बिल्कुल सही से काम कर रही है, तो मैं इसको किसी भी एक सर्वर पर जाकर होस्ट कर सकता हूँ
3:13
डिजिटल ओशन से सर्वर खरीज सकता हूँ, या फिर AWS से खरीज सकता हूँ, वॉल्टर ले नोट बहुत ऑप्शन से कहीं भी जहां सस्ता पड़े वहां से खरीदो ठीक है और लॉन तरह में जहां प��
3:22
सस्ता पड़े शॉर्ट टर्म का यह मत देखना कि पहला मंत इतना दे रहा है और फिर उसके बाद आपको जो लूटी ल��
3:58
यही वाला folder को लेता हूँ VS Code में, आप जब npm run start करते हो
4:02
यानि कि आप जब development server चलाते हो, npm run start, जब आप npm run start करते हो
4:08
तो बहुत अग्या है कि, एक development server start होता है, और वो development server आपको बताता है
4:13
वो कहता है कि या देखो, आप जो हो ये, अच्छा यहाँ पर एक link मैंने use नहीं किया है कौन कहाँ पर app.js में line number 11 मैं इसको जड़ा ठीक कर लेता हू��
4:23
मैंने link को import किया बट use नहीं किया कोई बात नहीं इसको मैं हटा देता हूँ link क��
4:27
मैं import भी नहीं कर रहा हूँ आप सही है compile successfully बिना warnings क��
4:30
अब देखो यहाँ पर एक बात लिखे हुई है, यहाँ पर लिखाई कि यह एक development build है, और यह optimized नहीं है, अगर आपको एक optimized production build चाहिए, तो आप npm run build use करें, react behind the scenes आपकी application में कुछ optimizations provide करेगा, compress करेगा files को ताकि जब वो user को deliver की जाएं, तो उनका net जो है कम से कम खर्च हो, और ��
5:00
तो आप नहीं चाहते ऐसा हो और आप जो है यहाँ पर optimized production build यूज करना चाहोग��
5:06
जो कि हमें npm run build चला कर मिलता है कहाँ पर build folder के अंदर यह बात हम लोगों ने देख ल��
5:10
अब अगर मैं इस build folder को traditional तरीके से deploy करने की कोशिश करू��
5:15
गिट अप पेजेस पर आप लोगों को मालूम होगा कि अगर गिट अप पेजेस पर हमको डिप्लोय करना है तो आप सिंपली यहा��
5:20
पर सेटिंग्स में जाकर पेजेस में जाकर बड़े आराम से डिप्लोय कर सकते हैं और बहुत आराम से यह चीज हो जाती ह��
5:26
देखो यहाँ पर आप यहाँ पर सोर्स चूज कर सकते हैं मास्टर और उसके बाद यहाँ पर रूट और उसके बाद से पर आ��
5:33
क्लिक करेंगे तो अगर आपकी रूट पर कोई इंडेक्स्ट और एसटीमल फाइल है तो वह सर्वोन स्टार्ट हो जाएगी ब��
5:38
अपने पास रिएक्ट अप थोड़ी सी कम्प्लीकेटेड होती है, रिएक्ट में राउटर भी है, बहुत सारी चीजे है, और उसी के साथ सार्थ रिएक्ट जो स्टा Circtic File सर्व करेगा, जावा स्क्रिप्ट, सी एस एस, वो हमारी Build फोल्डर के अंदर होंगी, तो कम्प्लीके��
6:08
बड़े अराम से चीजे हो जाती है अगर आप GitHub pages का इस्तेमाल करते हैं तो अब एक बात और अगर आप लोग इसको बढ़ेंगे तो इसमें लिखी होई है और वो यह है क��
6:15
जो React का router है वो अच्छी तरह से काम नहीं करता है GitHub pages के सा��
6:19
आप अगर server पर deploy कर रहे हैं तो बिलकुल seamlessly काम करेगा अब इसको client-side routing क��
6:25
चलाने से अच्छा है कि मैं अपना about page हटा दूँ अब आप लोगों को या��
6:28
about page क्यों हटा रहे हो देखो यार मेरे text utils में about page में वैसे भी कुछ नहीं ह��
6:32
कुछ जादा लंबा चड़ा है नहीं about page के अंदर simply मैंने आप लोगो routing समझाने के लिए about page बनाया थ��
6:38
तो हम जल्दी से काम करेंगे about page को हटा लेंगे about page को हम लोग क्यों हटाएंग��
6:43
क्योंकि मैं नहीं चाहता router के चक्कर में पढ़ाना तो जितने भी routing वाली मैंने चीजें लिखी हुई हैं यहां पर उन सब को comment out करूंगा तो यह ज��
6:51
राउट लिखे हुए मैंने यह जो अब आउट लिखा हुआ है स्विच लिखा हुआ है और उसी के साथ साथ यह लिखा हुआ ह��
7:31
जरूर नाव बार में लिंक यूज किया हुआ है तो Samsung बार कंपोनेंट में भी जाना पड़ेगा और वहां से ज��
7:37
लिंक में यूज किया हुआ वह भी अटाना पड़ेगा यह पूरा निजात पाना होगा मुझे रियाट राउटर से ठीक है त��
7:42
यहां पर होम और यह देखो यहां पर मैंने इसको कमेंट आउट कर दिया और जो लिंक मैंने यूज किया हुआ है उसक��
7:51
मैं वापस से प्लेस कर दूंगा एचरफ वाली जो मेरा पहले मैं यूज करा था ए और टू की जगह एचरफ कर दूंगा मै��
7:58
एचर एफ आप ठीक है वह वापस से इसको लेकर आऊंगा अपने रियल प्राउटर को बट अभी के लिए जो हम इसको हटा रह��
8:06
हूं क्योंकि मैं चाहता हूं कि मेरी आप काम की रहे लिंक इस नॉट डिफाइन लाइन नंबर नाइन पर ओके तो इसक��
8:14
एच रेफ कर देता हूं ए और टू की जगह एच रेफ सेव किया कंपाइल सक्सेसफुली बहुत बढ़िया ठीक है तो अभी मेर��
8:23
होम है यहां पर रियल टेक्स्ट यूटिल्स है और राउटर में हटा दिया कि काम कर रही है ऑफिसली आई क्यों नही��
8:29
चाहिए कि अब यहां पर हम लोग क्या करेंगे कि अब इसको डिप्लाई करेंगे ताकि कोई दिक्कत ना है हम लोगों क��
8:50
ठीक है अब देखना आप लोग मैं क्या करूंगा यहां पर तो बेसिकली मैं यहां पर जो मेरा स्लैश है एक इस इकॉल ट��
8:58
स्लैश में लिंक डिसेबल करूंगा मैंने चाहता कि यूजर भटक जाए और इसका मैं इसको क्यों है शकर रहा है आपक��
9:04
चलेगा बड़ा भी के लिए आप बस है शकलो मेरे साथ इसको ठीक है शकलो कर लिया है शापने बढ़िया यहां प��
9:11
कुछ ऐड मुझे देखने को मिल रहा है और यह मुझे गराइब ट्रिप्ट रिक्वेट्स अब वालेड वैल्यू टू बी एकसेसिब��
9:18
तो ये कुछ warnings है ये बुकल मिला कर मुझसे कह रहा है कि आप इसमें एक actual link डालो ना कि है hashes डालो ठीक है तो hashes डालने से क्या होता है है जब डालने से कुछ नहीं होता है बस वो link काम नहीं करेगा ठीक है तो ये यहाँ पर कुछ warnings दे रहा है आप इसको ignore कर सकते हो अभी के ल��
9:48
अपने गेटअप अकाउंट के हिसाब से आप लोग फॉलो करना मेरे गेटअप अकाउंट के हिसाब से मत करना कि आप मेरे गेटअप अकाउंट में डिप्लॉ��
9:53
कर सकते, मैं मेरे में कर सकता हूँ, मैं आपके में नहीं कर सकता, जो मुझे access नहीं होगा
9:57
ठीक है, तो आपने github desktop download किया, यह आपका चल रहा है, बिल्कुल सही सही
10:01
सब कुछ आपने किया, अब आप एक काम करो, यह home page वाली line है, इसको copy करो यहाँ से
10:04
और अपने package.json में आकर paste कर दो कहाँ पर paste करोगे at the top
10:11
just name के उपर अब इसमें username मेरा क्या है मेरा username है codewithharry
10:16
ठीक है और मेरी application का ये क्या है जो URL है textutilsreact
10:23
तो मैं textutilsreact के home पे जाओंगा ये चीज़ copy करूँगा और ये जो नाम ह��
10:27
आपका ये textutilsreact है spelling spelling mistake step package install
10:46
npm install, minus minus save, gh pages, इसको install कर लीजिए, enter मारो, install हो जाएगा यह भी, हो जा भाई install, wait करें install होने का इसका, चलो यह install हो जाएगा, आगे की step पढ़ते हैं, आगे की step यह है कि आपको script में दो line add करनी है, एक तो pre deploy और एक deploy, ठीक है, और यह plus हटाना है हमको, ठीक है, तो हम क्या करेंगे, कि scripts में यह add
11:19
बाद क्या करना है सिंपल से यह कमांड करना एंटीएम रन डिप्लॉय दाट्स एड बाकी सब गिट अब पीजेस वाली ज��
11:24
एंटीएम पैकेज है वह खुद मैनेज कर लेगा सब कुछ एंटीएम डिप्लॉय अभी मुझसे कह रही है यार यह क्या दिक्कत आ रह��
11:31
करा है कि मिसिंग स्क्रिप्ट डिप्लॉय ओके तो मैंने सेव नहीं किया अक्शनी सेव नहीं किया इसको पैके��
11:37
और जैसे मुझे सेव कर देना चाहिए तो पहली थोड़ा सा टाइम ले गई आप देखो यह डिप्लॉय होना स्टार्ट ह��
11:42
और एंटीएम रन बिल्ड रियाट स्क्रिप्ट बिल्ड क्रिएट कर रहा है कॉप्टीमाइजेशन आप टोरी ऑप्टिमाइस बिल्ड अ��
11:51
उसे कराएगी टप लॉग इन कर लो भाई तो मैं लॉग इन करके और फिर वापस आता हूं ठीक है एक मिनट रुकोर्डिं��
11:59
तो मैंने तो पासवर्ड डाल दिया अपना और यह पब्लिश भी हो गया बढ़िया ठीक है तो देखते हैं पब्लिश हुआ भी कि नहीं हु��
12:05
मैं यहाँ पर जाता हूँ और reload करता हूँ इसको ठीक है अब मुझे क्य��
12:09
करना है settings में जाना है settings में जाने के बाद pages में जाना है अभ��
12:13
काम खतम नहीं हुआ है pages में जाना है और यह जो branch है इसको gh branches
12:17
गिए ज पेजेस कर लेना है अगर यह I think यह automatically हो चुकी ह��
12:21
तो मेरी साइट अभी यहाँ पर उपलब्ध होगी जो की उपलब्ध है यह लिंक आप लोग यूज़ कर सकते ह��
12:26
अपने दोस्तों को दे सकते हो मैंने कहूँगा यार खुद से डिप्लॉय करो अपनी वेबसाइट क��
12:30
तो बहुत सारे लोग सवाल पूछेंगे कि राउटर क्यों अटा दिया उसके लिए आप लोग यह पढ़ लेना यहां पर लिखा हु��
12:35
है यह वाला सेक्शन पढ़ लेना नोट सॉन क्लाइट साइड राउटिंग सिर्फ गिट अप पेजेस के लिए मैंने हटाया मैंन��
12:40
अगर आप यहां पर मैं नवीड नहीं कर पा रहा हूं अगर मैं नवीड कर पाता तो बताइए क्या होता है अगर मैं ए��
13:06
इग्ल टू स्लैश कर देता तो मैं सीधे यहां पर नवीड गए तो जाकर तो मैं बाहर आया था 404 मुझे मिलता है इसलि��
13:12
मैंने हैश कर दिया ठीक है अब यहां पर मैं इसको रिलोड करूंगा बैक करूंगा रिलोड करूंगा और यह देखो देख रह��
13:20
लोग इनेबल कर लिया डाख मोड डिसेबल कर लिया डाख मोड क्लेयर टेक्स्ट कॉपी टेक्स्ट पता नहीं किया किय��
13:25
सब कुछ सब कुछ आप बहुत कुछ कर सकते हैं यार इसमें ठीक है आपने डिप्लॉय कर लिया बदाई हो मिठाई भेजे��
13:32
पर मेरे घर पर अभी के लिए इस वीडियो में इतना है गैस हां यार इसको प्लेलिस्ट को एक्सेस करो सब लोग अभ��
13:37
भी बहुत सारे लोग ऐसे ने प्लेलिस्ट एक्सेस नहीं कर रही है तो यार प्लेलिस्ट को एक्सेस करें यहा��
13:41
क्लिक करके सेव करें यह क्लिक करके बुकमार्क करें मजा आया की नहीं आए इस वीडियो में मुझे जरूर बतान��
13:46
मजा आया अभी के लिए इस वीडियो में इतना है गाइस थैंक यू सो मज गाइस वाचिंग इस वीडियो एंड आवल सीओ नेक्स्ट टाइ��
13:55
कर द��