🤰 🕞 👩🏻‍🤝‍👨🏾 तेजी से प्रोटोटाइप वेब अनुप्रयोगों के लिए Fastify और Preact का उपयोग करना 👐🏻 👨🏾‍🤝‍👨🏽 👨🏽

सामग्री के लेखक, जिसका अनुवाद आज हम प्रकाशित करते हैं, एक कहानी साझा करना चाहता है कि वह वेब अनुप्रयोगों के प्रोटोटाइप को जल्दी से विकसित करने के लिए किन तकनीकों का उपयोग करता है। इन तकनीकों में Fastify और Preact लाइब्रेरी शामिल हैं। वह htm पुस्तकालय का भी उपयोग करता है। यह Preact के साथ आसानी से एकीकृत होता है और इसका उपयोग DOM तत्वों को JSX की याद दिलाते हुए सहज निर्माण का उपयोग करने के लिए किया जाता है। उसी समय, बाबेल की तरह एक ट्रांसपिलर को इसके साथ काम करने की आवश्यकता नहीं है। प्रोटोटाइपिंग विकास उपकरण और इसके साथ काम करने के तरीकों का प्रदर्शन करने के बाद, सामग्री का लेखक दिखाएगा कि ऐसे अनुप्रयोगों को डॉकटर कंटेनरों में कैसे पैक किया जाए। यह उन सभी के लिए एप्लिकेशन प्रदर्शित करना आसान बनाता है जो रुचि रखते हैं।

शुरुआत

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

मेरा प्रयोग बेहद सफल रहा। मैं बहुत तेज़ी से एक प्रोटोटाइप बनाने में सक्षम था, सहकर्मियों को इसे आसानी से प्रयोग करने का अवसर मिला, वे इसके बारे में अपने छापों को जल्दी से व्यक्त करने में सक्षम थे। उसी समय, वे प्रोजेक्ट का परीक्षण कर सकते थे, भले ही Node.js और NPM उनके कंप्यूटर पर स्थापित नहीं थे।

यह सब मुझे इस विचार के लिए प्रेरित करता है कि मुझे वेब अनुप्रयोगों के तेजी से प्रोटोटाइप के लिए अपने दृष्टिकोण के बारे में सामग्री लिखना चाहिए। यह संभव है कि यह दृष्टिकोण किसी और के लिए उपयोगी होगा। जो लोग पहले से ही Fastify और Preact से परिचित हैं, मैं तुरंत सबसे महत्वपूर्ण बात को रेखांकित करूंगा, जो उन्हें तुरंत मेरे विचारों को व्यवहार में लाने की अनुमति देगा।

मुख्य विचार

यदि आप पहले से ही Fastify और Preact से परिचित हैं और इन तकनीकों के आधार पर परियोजनाओं के विकास को व्यवस्थित करने के तरीके के बारे में सीखना चाहते हैं, तो आप वस्तुतः क्या चाहते हैं, इसके कुछ कदम हैं। अर्थात्, हम निम्नलिखित आदेशों के बारे में बात कर रहे हैं:

git clone https://github.com/lmammino/fastify-preact-htm-boilerplate.git my-new-project cd my-new-project rm -rf .git npm install

बेशक, आप प्रोजेक्ट का नाम बदल सकते हैं, my-new-project , अपने प्रोजेक्ट का नाम।

आपको जो कुछ भी ज़रूरत है उसे स्थापित करने के बाद, आप प्रोजेक्ट पर काम करना शुरू कर सकते हैं। अर्थात्, हम निम्नलिखित के बारे में बात कर रहे हैं:

src/ui फ़ोल्डर में एप्लिकेशन के क्लाइंट भाग की फाइलें शामिल हैं (यहां Preact और htm का उपयोग किया जाता है)।
src/server फोल्डर में एप्लिकेशन के सर्वर साइड से संबंधित फाइलें होती हैं (Fastify का उपयोग यहां किया जाता है)।

उपयुक्त फ़ाइलों को संपादित करके, आप प्रोजेक्ट चला सकते हैं:

 npm start

उसके बाद, आप इसे ब्राउज़र में localhost:3000 पते पर जाकर परीक्षण कर सकते हैं।

और एक बात। अगर आपको मेरा विकास पसंद आया, तो मैं GitHub पर स्टार के लिए बहुत आभारी रहूंगा।

अब आइए यहां पर उपयोग की जाने वाली तकनीकों और उनके साथ काम करने की विशेषताओं को देखें।

Fastify

Fastify Node.js. के लिए एक तेज़ और किफायती वेब फ्रेमवर्क है यह परियोजना मूल रूप से दो प्रोग्रामर द्वारा बनाई गई थी। अब इस पर काम करने वालों की टीम में 10 लोग हैं, 130 से अधिक लोग परियोजना के विकास में मदद करते हैं, उन्होंने गिटहब पर लगभग 10,000 सितारों को एकत्र किया।

Fastify एक्सप्रेस और हापी जैसे Node.js चौखटे से प्रभावित था, जो लगभग कुछ समय के लिए रहे हैं। यह मूल रूप से उत्पादकता पर, प्रोग्रामर की सुविधा पर और प्लगइन्स की मदद से अपनी क्षमताओं का विस्तार करने के उद्देश्य से किया गया था। यह, वैसे, मेरी पसंदीदा Fastify सुविधाओं में से एक है।

यदि आप Fastify ढांचे से परिचित नहीं हैं या इसे बेहतर तरीके से जानना चाहते हैं, तो मैं इसके आधिकारिक दस्तावेज की सिफारिश कर सकता हूं।

यह ध्यान दिया जाना चाहिए कि मैं Fastify से संबंधित हूं। मैं मुख्य विकास टीम का सदस्य हूं और मैं मुख्य रूप से परियोजना स्थल का समर्थन करने और इसके प्रलेखन पर काम करने में लगा हुआ हूं।

Preact

Preact वेब परियोजनाओं के लिए उपयोगकर्ता इंटरफेस विकसित करने के लिए एक पुस्तकालय है, जिसे एक व्यक्ति द्वारा React के लिए एक कॉम्पैक्ट और त्वरित प्रतिस्थापन के रूप में बनाया गया था। यह परियोजना काफी सफल रही, अब डेवलपर्स की एक पूरी टीम इसमें लगी हुई है, GitHub पर उसने 20,000 से अधिक सितारे बनाए।

Preact मुझे पसंद है कारणों में से एक यह है कि इस पुस्तकालय में आवेदन के दृश्य घटकों का वर्णन करने के लिए एक एक्स्टेंसिबल परत है। सामान्य परिस्थितियों में, इस लाइब्रेरी का उपयोग जेएसएक्स का उपयोग बाबेल के साथ मिलकर कोड का अनुवाद करने के लिए किया जा सकता है, लेकिन यदि आप बैबेल को स्थापित नहीं करना चाहते हैं और एप्लिकेशन बिल्ड प्रक्रिया को कॉन्फ़िगर करना चाहते हैं, तो आप Preact का उपयोग कर सकते हैं, उदाहरण के लिए, htm लाइब्रेरी के साथ, जो टेम्पलेट शाब्दिक का उपयोग करता है और इसकी आवश्यकता नहीं होती है परियोजनाओं को लॉन्च करते समय ट्रांसप्लिकेशन जिसमें यह आधुनिक ब्राउज़रों में उपयोग किया जाता है।

इस लेख में हम htm पुस्तकालय का उपयोग करेंगे और जल्द ही कुछ उदाहरणों पर विचार करेंगे।

परियोजना का अवलोकन

यहां हम प्रोजेक्ट बनाने की पूरी प्रक्रिया को देखते हैं। हमारा लक्ष्य एक साधारण वेब एप्लिकेशन विकसित करना होगा जो सर्वर के लॉन्च के समय के बारे में जानकारी प्रदर्शित करता है। यहाँ, यह स्पष्ट करने के लिए कि हम इसके लिए क्या प्रयास करेंगे।

ब्राउज़र में अनुप्रयोग

यह एक सिंगल पेज एप्लीकेशन (एसपीए) है, जिसमें प्रीरेक्ट और htm का उपयोग इसके क्लाइंट भाग को बनाने के लिए किया जाता है, और Fastify का उपयोग सर्वर समय प्राप्त करने के लिए डिज़ाइन की गई एपीआई बनाने के लिए किया जाता है।

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

फ़ेविकॉन

एप्लिकेशन के सर्वर साइड को सेट करना

चलो एक नया फ़ोल्डर बनाकर शुरू करते हैं:

 mkdir server-time cd server-time

अब NPM प्रोजेक्ट को इनिशियलाइज़ करें और Fastify स्थापित करें:

 npm init -y npm i --save fastify@next fastify-static@next fastify-cli

कृपया ध्यान दें कि कुछ निर्भरता @next का वर्णन करते समय मैंने @next निर्माण का उपयोग किया था। यह इसलिए किया जाता है कि परियोजना फास्टाइज़ 2 पुस्तकालय का उपयोग करती है, जो वर्तमान में एक रिलीज उम्मीदवार राज्य में है, लेकिन बहुत जल्द मुख्य स्थिर संस्करण बन जाएगा।

कृपया ध्यान दें कि आप fastify-cli कमांड-लाइन fastify-cli का उपयोग करके Fastify पर आधारित एक नई परियोजना भी बना सकते हैं:

 npx fastify-cli generate server-time

इस सामग्री को लिखने के समय, यह टीम Fastify 1.x का उपयोग करने के लिए डिज़ाइन किया गया एक प्रोजेक्ट बनाता है, लेकिन बहुत जल्द, Fastify 2 की रिलीज़ के बाद, यह टूल अपडेट हो जाएगा।

आइए स्थापित पैकेजों का विश्लेषण करें:

fastify का एक मुख्य घटक है।
fastify-static एक अतिरिक्त प्लगइन है जो आपको Fastify सर्वर के साथ आसानी से स्थैतिक फ़ाइलों की सेवा करने की अनुमति देता है।
fastify-cli एक कमांड लाइन टूल है जो आपको Fastify के आधार पर प्रोजेक्ट बनाने की अनुमति देता है।

फिलहाल, हम Fastify पर आधारित एक एपीआई बनाने के लिए तैयार हैं। तो चलो src/server/server.js में सर्वर कोड src/server/server.js :

 const path = require('path') module.exports = async function(fastify, opts) { //      `src/ui` fastify.register(require('fastify-static'), {   root: path.join(__dirname, '..', 'ui'), }) //     API fastify.get('/api/time', async (request, reply) => {   return { time: new Date().toISOString() } }) }

मेरा मानना है कि उपरोक्त कोड खुद को अच्छी तरह से समझाता है, लेकिन कुछ दिलचस्प विवरण हैं जो बात करने लायक हैं। यह उन लोगों के लिए विशेष रूप से उपयोगी होगा जिनके पास Fastify के साथ अनुभव नहीं है।

इस कोड में पहली बात जिस पर आप ध्यान दे सकते हैं वह यह है कि यहाँ async कीवर्ड का उपयोग किया जाता है। Fastify दोनों async / प्रतीक्षा शैली के विकास और एक अधिक पारंपरिक कॉलबैक दृष्टिकोण का समर्थन करता है। वास्तव में क्या चुनना है यह किसी विशेष डेवलपर की प्राथमिकताओं पर निर्भर करता है।

एक और दिलचस्प विवरण यह है कि हम यहां सर्वर को एक निर्यातित मॉड्यूल के रूप में परिभाषित करते हैं। यह मॉड्यूल (Fastify jargon में इसे "प्लगइन" कहा जाता है) एक फ़ंक्शन है जो एक तर्क के रूप में Fastify इंस्टेंस ( fastify ) और विकल्पों का एक सेट ( fastify ) opts । मॉड्यूल घोषणा के अंदर, हम प्लगइन्स को रजिस्टर करने के लिए तेजी का एक उदाहरण का उपयोग कर सकते हैं। यह ठीक वैसा ही है जैसा कि fastify-static प्लगइन के साथ होता है। हम विशेष तरीकों जैसे कि fastify.get और fastify.post का उपयोग करके HTTP एंडपॉइंट्स का भी वर्णन कर सकते हैं।

यहां उपयोग किए गए मॉड्यूलर दृष्टिकोण, हालांकि यह थोड़ा असामान्य दिखता है, इसके फायदे हैं। इसके साथ शुरू करने के लिए, यह ध्यान दिया जाना चाहिए कि यह आपको कई सर्वरों को संयोजित करने की अनुमति देता है। कल्पना कीजिए कि आपने एक ब्लॉग बनाने के लिए डिज़ाइन किया गया एक सर्वर बनाया है, और एक मंच के लिए दूसरा। उन्हें एक मौजूदा एप्लिकेशन में /blog और /forum जैसे रास्तों पर संलग्न करके आसानी से एकीकृत किया जा सकता है।

इसके अलावा, यह दृष्टिकोण आपको सर्वर बाइंडिंग (उदाहरण के लिए, सॉकेट बाइंडिंग) से अनुप्रयोगों और उप-अनुप्रयोगों को सार करने की अनुमति देता है, इस कार्य के समाधान को रूट एप्लिकेशन या fastify-cli ।

सर्वर को fastify कमांड लाइन fastify का उपयोग करना शुरू करें:

 node_modules/.bin/fastify start --log-level info src/server/server.js

अपने जीवन को सरल बनाने के लिए, हम इस कमांड को अपने package.json के scripts सेक्शन में जोड़ सकते हैं package.json फाइल फ़ाइल:

 { "scripts": {   "start": "fastify start --log-level info src/server/server.js" } }

वास्तव में सर्वर शुरू करने से पहले, हमें यह सुनिश्चित करने की आवश्यकता है कि एक फ़ोल्डर है जिसमें स्थिर संसाधन स्थित होंगे। अन्यथा, fastify-static एरर fastify-static देगा। यह फ़ोल्डर बनाएँ:

 mkdir src/ui

अब हम npm start कमांड के साथ आवेदन शुरू कर सकते हैं और ब्राउजर का उपयोग करके npm start नेविगेट कर सकते हैं localhost:3000/api/time ।

यदि सब कुछ सही ढंग से काम करता है, तो ब्राउज़र में आप निम्नलिखित जैसे कुछ देख सकते हैं:

 { "time": "2019-02-17T19:32:03.354Z" }

इस बिंदु पर, आप Fastify की एक और अच्छी सुविधा की सराहना कर सकते हैं। यह इस तथ्य में निहित है कि JSON क्रमांकन, इस घटना में कि एक निश्चित मार्ग एक वस्तु देता है, स्वचालित रूप से लागू होता है।

अब सर्वर एपीआई पर काम पूरा हो गया है। चलो एक दृश्य है।

ललाट सेटअप

फ्रंटेंड से संबंधित हमारी परियोजना के सभी कोड src/ui फ़ोल्डर में स्थित होंगे। इसमें 5 फाइलें शामिल होंगी:

app.js - app.js आवेदन कोड।
bootstrap.min.css - एप्लिकेशन को स्टाइल करने के लिए CSS कोड (इसे सीधे बूटस्ट्रैप फ्रेमवर्क से लिया गया है)।
favicon.ico - फ़ेविकॉन फ़ाइल। यदि आप एक गंभीर एप्लिकेशन विकसित कर रहे हैं, तो आप एक अच्छी फ़ेविकॉन फ़ाइल के बिना नहीं कर सकते।
index.html हमारे एक-पृष्ठ एप्लिकेशन की मुख्य HTML फ़ाइल है।
preacthtm.js - preacthtm.js और htm पुस्तकालयों का कोड।

सबसे पहले, फ़ाइलों को फ़ोल्डर में रखें, जो शैली, पुस्तकालय और फ़ेविकॉन आइकन हैं:

 curl "https://unpkg.com/htm@2.0.0/preact/standalone.js" > src/ui/preacthtm.js curl "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" > src/ui/bootstrap.min.css curl "https://github.com/lmammino/fastify-preact-htm-boilerplate/blob/master/src/ui/favicon.ico?raw=true" > src/ui/favicon.ico

अब src/ui/index.html फ़ाइल बनाएँ:

 <!DOCTYPE html> <html lang="en"> <head>   <meta charset="utf-8" />   <meta     name="viewport"     content="width=device-width, initial-scale=1, shrink-to-fit=no"   />   <!-- Bootstrap CSS -->   <link rel="stylesheet" href="/bootstrap.min.css" />   <title>My awesome server time</title> </head> <body>   <div id="app"></div>   <!-- JavaScript -->   <script src="/preacthtm.js"></script>   <script src="/app.js"></script> </body> </html>

हमारे सामने एक बहुत ही सामान्य HTML पृष्ठ है, जिसके साथ हम सभी संसाधनों (CSS और JS) को लोड करते हैं और पहचानकर्ता app साथ एक खाली <div> तत्व बनाते हैं, जिसमें हम परियोजना के निष्पादन के दौरान अपने आवेदन को आउटपुट करेंगे।

अब आवेदन कोड पर एक नज़र डालें, जो src/ui/app.js में होना चाहिए:

 /*  htmPreact */ const { html, Component, render } = htmPreact class App extends Component { componentDidMount() {   this.setState({ loading: true, time: null })   fetch('/api/time')     .then(response => response.json())     .then(data => this.setState({ loading: false, time: data.time })) } render(props, state) {   return html`     <div class="container mt-5">       <div class="row justify-content-center">         <div class="col">           <h1>Hello from your new App</h1>           <div>             ${state.loading &&               html`                 <p>Loading time from server...</p>               `} ${state.time &&               html`                 <p>Time from server: <i><font color="#999999">${state.time}</font></i> </p>               `}           </div>           <hr />           <div>             Have fun changing the code from this boilerplate:             <ul>               <li>UI code available at <code>/src/ui</code></li>               <li>Server-side code available at <code>/src/server</code></li>             </ul>           </div>         </div>       </div>     </div>   ` } } render( html`   <${App} /> `, document.getElementById('app') )

इस एप्लिकेशन में केवल एक स्टेटफुल कंपोनेंट है, जिसे App कहा जाता है। इस घटक की स्थिति में 2 चर शामिल हैं:

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

यदि आप React से परिचित हैं, तो आप उपरोक्त कोड को आसानी से समझ सकते हैं।
Preact और htm का उपयोग करके, हम उन वर्गों की घोषणा करके घटक बना सकते हैं जो अंतर्निर्मित Component वर्ग का विस्तार करते हैं।

इस वर्ग में, हम एक घटक के व्यवहार का वर्णन कर सकते हैं जीवन-चक्र विधियों का उपयोग करते हुए, जैसे componentDidMount() , और एक विधि का उपयोग भी करते हैं जो प्रतिक्रिया से एक नियमित render() विधि की तरह व्यवहार करता है।

हमारे मामले में, जैसे ही घटक पृष्ठ ( componentDidMount() विधि) से जुड़ा होता है, हम स्थिति loading संपत्ति सेट करते हैं और fetch लिए एक एपीआई अनुरोध निष्पादित करते हैं।
अनुरोध पूरा होने के बाद, हम time राज्य संपत्ति का मूल्य निर्धारित करते हैं और loading संपत्ति को false रीसेट करते हैं।

render() विधि को हर बार एक घटक स्थिति में परिवर्तन या जब नई संपत्तियां पास की जाती हैं, तो स्वचालित रूप से कहा जाता है। इस पद्धति में, हम htm का उपयोग करते हुए DOM घटक का वर्णन करते हैं।

Htm पुस्तकालय आपको एक विशेष टैग - html साथ टैग किए गए टेम्पलेट शाब्दिकों का उपयोग करके डोम नोड्स का वर्णन करने की अनुमति देता है। हमारे टेम्पलेट शाब्दिक के भीतर, गतिशील अभिव्यक्तियाँ मौजूद हो सकती हैं, जैसे कि हम स्थिति की जांच करने के लिए और यह तय करने के लिए उपयोग करते हैं कि क्या अनुप्रयोग सर्वर से डेटा लोड कर रहा है, और यदि डेटा पहले से ही है भरी हुई।

यह भी ध्यान देने योग्य है कि हमें एप्लिकेशन का एक उदाहरण बनाने और इसे एक HTML पृष्ठ पर प्रदर्शित करने की आवश्यकता है। यह htmPreact ग्लोबल ऑब्जेक्ट के render() फ़ंक्शन का उपयोग करके किया जाता है।

अब फ्रंट-एंड एप्लिकेशन पर काम पूरा हो गया है। आप सर्वर को पुनरारंभ कर सकते हैं, localhost:3000 जा सकते हैं localhost:3000 और जो हमने अभी बनाया है, उसके साथ प्रयोग करें। उदाहरण के लिए, आप इस एप्लिकेशन के आधार पर अपना खुद का विकास कर सकते हैं। और जब आप जो निर्माण करते हैं वह किसी और को दिखाने के लिए काफी दिलचस्प लगता है, तो संभवतः आपके लिए डॉकटर कंटेनर में अपना एप्लिकेशन पैक करना उपयोगी होगा।

अनुप्रयोग कंटेनरीकरण

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

डॉकर के लिए धन्यवाद, जो कोई भी आपके एप्लिकेशन को घर पर चलाने की कोशिश करता है, वह यह सोचने से मुक्त हो जाएगा कि उसके पास Node.js और NPM का उपयुक्त संस्करण है या नहीं, उसे इस बात का ध्यान रखने के लिए एप्लिकेशन स्रोत कोड डाउनलोड करने की आवश्यकता नहीं होगी कि कमांडों का सही क्रम दर्ज करके , अपनी निर्भरता स्थापित करें और सर्वर शुरू करें।

Dockerfile कंटेनर में एप्लिकेशन को पैक करने के लिए, हमें अपनी परियोजना के रूट फ़ोल्डर में एक बहुत ही सरल Dockerfile बनाने की आवश्यकता है:

 FROM node:11-alpine WORKDIR /app COPY . /app RUN npm install --production EXPOSE 3000 CMD ["npm", "start"]

यहाँ हम निम्नलिखित क्रियाओं का वर्णन करते हैं:

छवि Node.js 11 छवि के आधार पर बनाई गई है, जिसे अल्पाइन लिनक्स के आधार पर बनाया गया है।
वर्तमान फ़ोल्डर से सब कुछ कंटेनर के /app फ़ोल्डर में कॉपी किया जाता है।
उसके बाद, हम निर्भरता डाउनलोड करने और स्थापित npm install लिए npm install कमांड चलाते हैं। --production ध्वज का उपयोग इस तथ्य की ओर जाता है कि उत्पादन में परियोजना की तैनाती के लिए आवश्यक निर्भरताएं ही स्थापित की जाएंगी। यह छवि निर्माण को गति देता है अगर परियोजना कई विकास निर्भरता का उपयोग करती है।
हम इंगित करते हैं कि कंटेनर में खुले छिद्र 3000 होना चाहिए, जिस पर, डिफ़ॉल्ट रूप से, सर्वर काम करेगा।
अंत में, हम एक कमांड, npm start वर्णन करते हैं, जिसे कंटेनर शुरू होने पर निष्पादित किया जाएगा। उसने एप्लिकेशन लॉन्च किया।

कंटेनर के लिए छवि एकत्र करने के लिए, निम्नलिखित कमांड निष्पादित करें:

 docker build -t server-time .

कुछ सेकंड के बाद, छवि तैयार होनी चाहिए और आपको कंटेनर शुरू करने में सक्षम होना चाहिए:

 docker run -it -p 3000:3000 server-time

-p आपको कंटेनर पोर्ट 3000 और स्थानीय पोर्ट 3000 के बीच कनेक्शन को कॉन्फ़िगर करने की अनुमति देता है। यह आपको localhost:3000 पर कंटेनरीकृत एप्लिकेशन को एक्सेस करने की अनुमति देगा।
अब आप अन्य लोगों के साथ अपने आवेदन को साझा करने के लिए तैयार हैं। डॉकर वातावरण में इसे चलाने के लिए, यह पर्याप्त है, बशर्ते कि डॉकटर को कंप्यूटर पर स्थापित किया गया है, इसके फ़ोल्डर में उपरोक्त दो आदेशों को निष्पादित करने के लिए।

परिणाम

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

जैसा कि ऊपर उल्लेख किया गया है, प्रस्तावित उपकरण तेजी से प्रोटोटाइप के लिए डिज़ाइन किए गए हैं, इसलिए अब आप सोच रहे होंगे कि वास्तविक अनुप्रयोगों को विकसित करने के लिए यहां क्या गायब है। सबसे अधिक संभावना है, जब आप "वास्तविक अनुप्रयोगों" की बात करते हैं, तो आपका मतलब निम्नलिखित विशेषताएं हैं:

अनुप्रयोग के अग्र-भाग के संसाधनों का संकलन: अनुकूलित फ़ाइलों (बंडलों) का निर्माण, संभवतः वेबपैक, बैबल या अन्य उपकरणों का उपयोग करना।
आवेदन के सामने के अंत में रूटिंग।
सर्वर रेंडरिंग
स्थायी डेटा संग्रहण के साधन।

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

प्रिय पाठकों! आप वेब अनुप्रयोगों को कैसे प्रोटोटाइप करते हैं?

तेजी से प्रोटोटाइप वेब अनुप्रयोगों के लिए Fastify और Preact का उपयोग करना