Up next in 10
iNotebook db & Express Server Setup _ Complete React Course in Hindi #43
1K views
Feb 11, 2024
In the 43rd episode of the "Complete React Course in Hindi," the tutorial delves into the essential steps of setting up the iNotebook project by establishing the database and configuring the Express server. The video provides a detailed walkthrough of the process, covering the integration of a database for iNotebook using MongoDB and the setup of an Express server to handle backend functionality. Viewers can expect to gain practical insights into database connections, server configurations, and the seamless interaction between the frontend and backend components. Whether you're a React developer eager to expand your full-stack capabilities or a learner embarking on your first project, this tutorial equips you with the foundational knowledge needed to initiate the iNotebook project successfully.
View Video Transcript
0:00
पिछले वीडियो में हम लोगों ने अपनी iNotebook का back-end बनाया थ��
0:03
और वहाँ पर मैंने आप लोगों एक चीज बताई थी कि ये जो React application ह��
0:07
इसे के अंदर मैं आपर back-end रख रहा हूं बड़ ये back-end एक separate entity होग��
0:11
अगर आप इसको git में भी push करें तो back-end को एलग front-end को एलग push करे��
0:15
पर पर वालिये टूटोरियल और लेरनिंग मैं क्या कर रहा हूं कि iNotebook नामिक��
0:19
मैंने ये folder बनाया है जो कि मेरी एक create React app दुआर��
0:23
बनाए गई React application है मैंने यहाँ पर क्या कराएं कि इसको खोल लिया अपने VS Code मे��
0:27
और एक क्या करूँगा कि आप पर क्या करूँगा जो मेरा Git ignore और मेरे Git ignore और मेरे Git ignore और मेरे Git ignore और मेरे Git ignore और मेरे Git ignore और मेरे Git ignore और मेरे Git ignore और मेरे Git ignore और मेरे Git ignore और मेरे Git ignore और मेरे Git ignore और मेरे Git ignore और मेरे Git ignore और मेरे Git ignore और मेरे Git ignore और मेरे Git ignore और मेरे Git ignore और मेरे Git ignore और मेरे Git ignore और मेरे Git ignore और मेरे Git ignore और मेरे Git ignore और मेरे Git ignore और ��
0:59
वाले बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बह��
1:29
सोड़ा बहुत हमने प्रोगरस बना ली उसके बाद तो गिटफ़ पे जब भी आप आक्सेस करेंगे इस प्रोजेक्ट क��
1:34
तो आप किसी भी पॉइंट, किसी भी कमिट पर इसको आक्सेस कर सकते हैं और उतना कोड आप लोगों को दिख जाएग��
1:39
तो जब आप कोड से उपर से नीचे की तरफ देख रहे हैं सिर्फ अभी तक का जो कोड है वो आपको देखने को मिलेग��
1:43
क्योंकि आने वाले टाइम में मैं इसको रीफाक्टर करूँगा चेंजेस होंगे बहुत सारे तो उन चेंजेस के बगए��
1:47
यानि कि आप लोग समझ गए अब मैं इसको बंग कर दूँगा याप��
1:57
क्योंकि हम लोग काम कर रहे हैं अपने बैक एंड के अंदर और मैंने खोला हुआ है यह वाला फोल्डर अभी अपन��
2:01
Visual Studio Code में ठीक है तो यहाँ पर मैं जल्दी से इसको दूबारा से खोल लेता हूँ विजिल स्टूडियो कोड में अभ��
2:07
मैं इसको दूबारा से खोलूंगा तो आप लोग यापर देखो यह मैंने दूबारा से खोल लिया इसको ठीक है तो अभ��
2:13
Git भी मुझे कुछ नहीं बता रहा है आप देखो पहले यह आप देखो आप देखो आप देखो आप देखो आप देखो आप देखो आप देखो आप देखो आप देखो आप देखो आप देखो आप देखो आप देखो आप देखो आप देखो आप देखो आप देखो आप देखो आप देखो आप देखो आप देखो आप देख��
2:45
यह लोग बता रहे हैं कि भाई देखो MongoDB का वैलिडेशन कास्टिंग और बिज़नस लॉजिक बॉइलर प्लेट बहुत ज़्यादा दिक्कत करता ह��
2:50
इसलिए हमने Mongoose बनाया ताकि आप यह सारी लाइन्स को यूज़ करक��
2:54
बड़े अराम से अपने गाम कर पा और यह इंडीट सच है हम लोग देखेंगा कि किस तरह Mongoose जिंदगी को आसान बनाता है उसी के सासत आप लो��
3:01
यहाँ पर MongoDB Compass जो यही दिखरा है आप लोगो को इस पर आप लोग और MongoDB Compass आपका खुल जाएगा तो मैं आपर जल्दी से आपको दिखा थ��
3:08
है MongoDB Compass क्या है यह एनिशलाइस हो रहा है यह काम ज़्यादा टाइम नहीं लेता है वैस��
3:13
थोड़ा सा टाइम यार इसने यापर ले लिया बट कोई बात नहीं अब यापर आप लोग देख��
3:17
यह कहा रहा है कि connection string यापर अपनी डाल दो तो होता क्या है कि बहुत सारे लो��
3:21
cloud MongoDB, MongoDB Atlas इस तरह की चीज़े इस्तेमाल करते हैं जिसकी वज़ए से उनक��
3:25
string मिलती है वहाँ पर उन online services पर और वह यापर string को उस से string को paste कर देते है��
3:31
और उसकी बात connect पर जब click करते हैं तो वह अपने remote database से connect हो जाते हैं बढ़ हम लोग जो उसकरने वाले हैं वह है local MongoDB का database या नहीं कि जो database ह��
3:39
वह हमारे इसी computer में रहे है जिसमें अभी हम है जब हम deploy करेंगे तो may be हम लोग कोई दूसर instance बना��
3:45
शायद MongoDB Cloud MongoDB Atlas जो होता है वह उसकरेंगे कुछ भी आप लोग कर सकते हो ठीक ह��
3:50
आप देखें जिसमें आप भी बनाए जिसमें आप बनाए जिसमें आप बनाए जिसमें आप बनाए जिसमें आप बनाए जिसमें आप बनाए जिसमें आप बनाए जिसमें आप बनाए जिसमें आप बनाए जिसमें आप बनाए जिसमें आप बनाए जिसमें आप बनाए ��
4:20
जो गेटाबेस के साथ गेटाबेस के साथ गेटाबेस के साथ गेटाबेस के साथ गेटाबेस के साथ गेटाबेस के साथ गेटाबेस के साथ गेटाबेस के साथ गेटाबेस के साथ गेटाबेस के साथ गेटाबेस के साथ गेटाबेस के साथ गेटाबेस के साथ गेटाब��
4:50
और उसके लिए मैं एक फाइल बनाओंगा डी बी डौट जेस तो इसके अंदर मैं डेटाबेस स��
4:54
कनेक्ट होने वाला कोड लिखने वाला हूँ मैं कनसर्स को थोड़ा सेपरेट कर रहा हू��
4:59
तो उसका रीजन यह है कि मैं चीज़े अलग अलग रखना चाहता हूँ सारी ताकि डेटाबेस स��
5:04
रेलेटेट चीज़े एक जगा पर हों मेरे डाउट्स अलग हों मेरे जो मॉडल्स है��
5:08
मॉडल्स के वो अलग हों मैं किस बारे में बात कर रहा हूँ आप लोग को थोड़ी दिर में समझ में आ जाएग��
5:12
और जैसे जैसे आप लोग इस कोडस में आगे बढ़ोगे चीज़े सेंस भी आप लोग को बनाने लग जाएँगे ठीक ह��
5:16
तो आप समझ गया आप लोग कि ये सारे काम क्यों किये जा रहे है ठीक ह��
5:20
तो अब मैं क्या करूँगा यहाँ पर जल्दी से आप लोग को बताऊँगा कि किस तरह से हम लो��
5:24
अपने बेसिक MongoDB सर्वर से कनेक्ट कर सकते हैं ठीक है तो अपने MongoDB सर्वर से कनेक्ट करने के लिए यहाँ पहला काम जो मैं करूँगा वो Mongoose को ले कर आउंग��
5:32
मैं कहूँगा const Mongoose is equal to require Mongoose यहाँ पर आप लोग नोट करें कि हम लोग यहाँ पर ES6 modules को इस्तिमाल नहीं कर रहे है��
5:40
हम CommonJS modules को इस्तिमाल कर रहे हैं क्योंकि हम NodeJS के अंदर है भी ठीक ह��
5:46
और मैं आपर const Mongoose is equal to require Mongoose करूँगा उसके साथ साथ मैं एक चीज और करूँग��
5:51
यहाँ पर जो मेरी URI है MongoUri is equal to मैं यह string को paste करदूँग��
5:58
अब यह multiple line में आपको इसलिए दिखरी है क्योंकि मैंने word wrap को on किया हु��
6:04
तो आप command palette पर जाकर यहाँ पर toggle word wrap कर सकते है��
6:08
तो देखो यहाँ पर अगर मैं ऐसे करूँगा तो यह लीक करने लग जाएगा भार मैं चाहता हूँ कि साली की साली चीज़े screen पर रहे है��
6:14
हमेशा सही मैं word wrap को on करने का fan हूँ ठीक है आप लोग देख सकते हैं यहाँ पर मैंने word wrap को on कर दिया ह��
6:19
तो words मेरे wrap हो जाएंगे अगर मैंने word wrap को off किया था तो यह over flow करता थ��
6:25
बड़ कम से कभी मुझे पूरी string दिख रही है तो मुझे वे यह चीज़ ज़ाधा पसंद ह��
6:29
शायद आप लोग को ना हो आप लोग दूसरी जो हमारा word wrap है उसक��
6:33
आपके उपर है अब यहाँ बहुत ही simple है DB के साथ connect करना मैं क्या करूंगा कि connect to mongo करक��
6:42
एक function में रहूंगा तो मैं यहाँ पर लिखूंगा const connect to mongo
6:46
is equal to एक arrow function ठीक है देखो यहाँ हम promises के सा��
6:51
डिल कर सकते हैं mongo's promises return करता है पर यहाँ पर मैं async await syntax का इस्टेमाल कर रहा हूँ कि मुझे बहु��
6:57
जादा पसंद है वो fetch के साथ भी मैं एसिंक एवेट का इस्टेमाल किया था एसिंक एवेट बहुत ही basic सी चीज़ है यहाँ पर आपक��
7:02
क्या करना है function को एसिंक बनाना है और जहां जहां आप उस एसिंक function के अंदर await करते जाओगे वहाँ वहाँ वो रुकता जाएग��
7:08
यहाँ प्रॉमिस का resolve होने का इंदिजार करता जाएगा करता जाएगा ठीक है तो यहाँ पर हम क्या करेंगे बहुत ही simple सा काम करेंग��
7:14
हम लोग यहाँ पर लिखेंगे mongoos.connect करके एक function होता है और mongoos.connect एक बर आप लोगने कर दिया तो पहला जो argument होता ह��
7:22
इसका आप लोग देखो यह URI string होती है तो मैं mongo URI इसको दे दूँग��
7:26
और इसके बाद एक callback function देता है ठीक है एक callback function देता ह��
7:30
आप लोग इसको callback function यह नहीं return करना चाहते आप async await sentence को इस्तिमाल करना चाहते हो तो आप वो भी कर सकते ह��
7:36
बड़ हम callbacks के साथ भी deal कर सकते हैं यहाँ पर ज़रूरी नहीं है कि आप async await ही इस्तिमाल करो तो यहाँ पर यह callback function ह��
7:42
जो कि आपको कुछ return करके देगा तो अगर आप लोग चाहते हैं यहाँ पर कुछ हो तो मैं यहाँ पर लिख देता हूँ console.log
7:49
connected to mongo successfully ठीक है connected to mongo successfully ठीक है यहाँ पर मैंने यह चीज कर द��
7:59
अब मैं इस function को use कहाँ पर करूँगा मैं क्या करूँगा कि इस module को import करूँग��
8:03
db.js को ठीक है अब यहाँ पर मुझे एक काम और करना पड़ेगा मैं लिखूंगा module.exports is equal to connect to mongo
8:11
तो यह जो function है इसको मैं export कर दूंगा तो यह function मेरा export हो जाएग��
8:15
अब मैं यहाँ पर कुछ ऐसे लिख सकता हूँ const connect to mongo is equal to require
8:23
और इसके अंदर मैं लिख दूँगा यहाँ पर .db अब मैं यहाँ पर connect to mongo अगर इस तरह से रन करूँग��
8:30
और मैं आप लोगो यहाँ पर node-mon से इसको रन करके दिखाओ बाइधा भी मैं यहाँ पर npm i-d node-mon करूँग��
8:38
तो node-mon मेरे इंस्टाल हो जाएगा ठीक है और यहाँ पर माइनस कापिटल डी करने का मतलब यह ह��
8:43
कि यह dev dependency के तारफे मैं इसको रखना चाहता हूँ क्योंकि मैं इसको अपनी application के packages का पार्ट नहीं मना चाहत��
8:50
dependencies का पार्ट नहीं मना चाहता आप समझ गए npm i-d node-mon इसलिए किय��
8:55
और यह node-mon क्या है अगर आप लोग को नहीं पता तो मैं node-mon index.js अगर मान लो मैं लिखूंगा कुछ इस तरह स��
9:01
और इसको मैं run करूँगा तो यहाँ पर देखो यह run हो गया है ठीक है लेकिन index.js जैसे ही मैंने किया थे वो connected to mongo successfully
9:07
तो यह mongo से connect हो चुका है इसका मतलब मेरा connection काम कर रहा है ठीक ह��
9:11
अब यह जो index.js है यह एक express server रहेगा तो हम क्या करेंग��
9:16
express.js की website पर चलेंगे और वहाँ से boilerplate code लेकर आएंग��
9:20
क्योंकि आप देखो मैं बिलकोल भी रटने रटाने में भरोसा नहीं रखता हूँ मैं तो यह कहता हूँ कि आप लोग code के concept को समझो और भूल जाओ ठीक ह��
9:27
और फिर उसके बाद यह वाले काम करो इस तरह से copy करो यहां से और paste करो ठीक ह��
9:31
आप इस तरह से आप इस तरह से आप इस तरह से आप इस तरह से आप इस तरह से आप इस तरह से आप इस तरह से आप इस तरह से आप इस तरह से आप इस तरह से आप इस तरह से आप इस तरह से आप इस तरह से आप इस तरह से आप इस तरह से आप इस तरह से आप इस तरह ��
10:01
से आप इस तरह से आप इस तरह से आप इस तरह से आप इस तरह से आप इस तरह से आप इस तरह से आप इस तरह से आप इस तरह से आप इस तरह से आप इस तरह से आप इस तरह से आप इस तरह से आप इस तरह से आप इस तरह से आप इस तरह से आप इस तरह से आप इस त��
10:31
इसको तो हमने Mongo से कनेट कर लिए अब जड़ा हम अपने Thunder Client में इस Localhost 3000 डाल के देख लेते हैं ठीक ह��
10:37
तो अगर मैं इस Localhost 3000 को कॉपी करूँ और New Request पर क्लिक करू��
10:41
और मैं यहाँ पर इसको paste करके Send पर क्लिक करूँ तो देखो यहाँ पर इसने कुछ response send किया है क्या response send किया है इसको देख लेते है��
10:48
Hello World सेnd किया है यह Hello World कासे आ रहा है यह Hello World यहां से आ रहा है index.js में मैंने जो मेरा endpoint था उसमें Hello World लिखा हुआ ह��
10:55
मैं Hello Harry भी लिख सकता हूँ जस्ट आपलो को बताने के लिए अब देखो नोड बॉन उसकरने का फाइड़ा क्या हुआ मैंने control-s जस जहीं मरा अब देखो नीचे मेरा server restart हु��
11:03
अब मैं अगर इसको send करूँगा तो Hello Harry यहां पर मुझे return होके मिल रहा ह��
11:07
स्टाटस कोड भी लिखा है 12 बाइट आठ मिली सेकंड तो विएस कोड के अंदर नहीं रहते रहते काम हो जाता ह��
11:13
इसलिए मैं postman की जगा अब thunder client का इस्तेमाल करता हूँ जब भी मैं development कर रहा होता हूँ तो ठीक ह��
11:18
तो यहां पर यह tab हमारी खुली रहा है इसको मैं side में खड़ा कर दूँगा यहां पर package.json को बंद करूँग��
11:22
db.js का भी काम निवट गया इतना ही मुझे करना था एक function लिखना था जोकी database से connect कर सक��
11:27
और यहां पर मेरी connection string रहने वाली है तो कभी मुझे कहीं और deploy करना होगा तो यह connection string चेंज करना है मुझ��
11:33
और मेरा काम हो जाएगा तो मैं इसको भी बंद कर दूँगा ठीक है मैं अपने code के बीच में जगा जगा hardcode नहीं करूँगा connection string क��
11:40
इसको जगा जगा जगा जगा जगा जगा जगा जगा जगा जगा जगा जगा जगा जगा जगा जगा जगा जगा जगा जगा जगा जगा जगा जगा जगा जगा जगा जगा जगा जगा जगा जगा जगा जगा जगा जगा जगा जगा जगा जगा जगा जगा जग��
12:10
जगा जगा जगा जगा जगा जगा जगा जगा जगा जगा जगा जगा जगा जगा जगा जगा जगा जगा जगा जगा जगा जगा जगा जगा जगा जगा जगा जगा जगा जगा जगा जगा जगा जगा जगा जगा जगा जगा जगा जगा जगा जगा जगा जग��
12:40
तो वो इस पूरे का देखेगा इस पूरे को मैं एक प्रोजेक्ट के तौर पर पुश करूँग��
12:44
तो आप बैक एंड को खोल के देखना उसमें जो जो चेंज़िस पॉइंट पर है वो आप लोग को मिल जाएंग��
12:48
तो अगर आप लोगों ने अभी तक इस प्लेलिस्ट को एकसेस नहीं कर रहा है तो ज़रूर कर लेन��
12:52
और उसी के सासार यहां क्लिक करके सेव करना प्लेलिस्ट को यहां क्लिक करके बुक मार्क भी कर लेन��
12:56
अभी के लिए इस वीडियो में इतने है गैज बहुत बहुत आपके लिए आपके लिए वीडियो करने के लिए आपके लिए आपके लिए आपके लिए आपके लिए आपके लिए आपके लिए आपके लिए आपके लिए आपके लिए आपके लिए आपके लिए आपके लिए आपके लिए आपके लिए आपके लिए ��