रियाक्ट (React) एउटा जाभास्क्रिप्ट (JavaScript) लाइब्रेरी (Library) हो जसले स्टेटफुल युजरसाइड वेब एप्लिकेसन (Stateful user-side web application) सिर्जना गर्न मद्दत गर्दछ। यदि तपाईं सर्भर साइड कम्प्युटेशन (Server-side computation) आवश्यक नपर्ने एप (App) बनाउने योजनामा हुनुहुन्छ भने, तपाईंको सिर्जना संसारसामु प्रस्तुत गर्न गिट्ल्याब पेजहरू (GitLab Pages) एक उत्कृष्ट विकल्प हुनेछ। गिट्ल्याब पेजहरू गिटहब पेजहरू (GitHub Pages) जस्तै नि:शुल्क मात्र छैनन्, यसले आफ्नै डोमेन नाम (Domain Name) र एसएसएल सर्टिफिकेट (SSL Certificate) थप्न सक्ने अतिरिक्त सुविधाहरू पनि प्रदान गर्दछ।

गिट्ल्याब पेजहरूमा रियाक्ट (React) एप होस्ट गर्ने प्रक्रियाका लागि गिट्ल्याबको सीआई (CI - Continuous Integration) पाइपलाइन (Pipeline) बुझ्न आवश्यक हुन्छ, तर यो जटिल छैन। तलको ट्यूटोरियल (Tutorial) पढिसकेपछि तपाईंले यसको मूल कुरा बुझ्नुहुनेछ र मिनेटमै आफ्नै एपहरू होस्ट गर्न सुरु गर्न सक्नुहुनेछ। गिट्ल्याब पेजहरूमा रियाक्ट एप होस्ट गर्ने प्रक्रिया निम्न चरणहरूमा पूरा गर्न सकिन्छ:

१. रियाक्ट एप होस्ट गर्नका लागि गिट्ल्याब रिपोजिटरी (GitLab Repo) सिर्जना गर्नुहोस् Link to heading

गिट्ल्याब डट कम (gitlab.com) को प्रत्येक रिपोजिटरी (Repository) लाई गिट्ल्याब पेजहरू होस्ट गर्न प्रयोग गर्न सकिन्छ। तर गिट्ल्याब पेजहरू दुई प्रकारका हुन्छन्; जुन मुख्यतया तब अर्थ राख्छ जब तपाईंसँग आफ्नै डोमेन छैन र पूर्वनिर्धारित गिट्ल्याब पेजहरूमा आफ्नो साइट होस्ट गर्ने सोच्दै हुनुहुन्छ। सिर्जना गरिएको गिट्ल्याब पेजहरू <username>.gitlab.io/<repo> डोमेनमा होस्ट हुनेछन्। यस नीतिको एउटा अपवाद भनेको <username> नामको रिपोजिटरी हो, जसले <username>.gitlab.io मा होस्ट गरिएको पूर्वनिर्धारित वेबसाइटको रूपमा काम गर्दछ।

२. create-react-app को प्रयोग गरी रियाक्ट एप सिर्जना गर्नुहोस् Link to heading

हामी नयाँ रियाक्ट एप (React App) सिर्जना गर्न create-react-app को प्रयोग गर्न सक्छौँ। यसले रियाक्ट एपको आधारभूत डाइरेक्टरी संरचना (Directory structure) प्रदान गर्दछ र यो त्यही उपकरण हो जसलाई हामीले पछिल्लो कमिट (Commit) गरिएको एपलाई साइटमा होस्ट गर्न गिट्ल्याब सीआई (GitLab CI) इन्टिग्रेसन उपकरणहरूसँग प्रयोग गर्छौँ।

३. package.json फाइल परिमार्जन गर्नुहोस् Link to heading

गिट्ल्याब पेजहरूमा सफलतापूर्वक एप परिनियोजन (Deploy) गर्नु अघि तपाईंले केही आधारभूत परिवर्तनहरू गर्नुपर्ने हुन्छ। रियाक्ट एप कुन डोमेनमा होस्ट गर्ने हो भन्ने माथिको जानकारीको आधारमा, तपाईंले रियाक्ट एपको package.json फाइलमा निम्न लाइन समावेश गर्नुपर्नेछ:

{
  "name": "<app_name>",
  "version": "<app_version>",
  "homepage": "<base_url>",
  ...
  ...
}

तपाईंले उपयुक्त <app_name>, <app_version> र सबैभन्दा महत्त्वपूर्ण रूपमा <base_url> राख्नको लागि package.json फाइल परिमार्जन गर्नुपर्छ।

४. .gitlab-ci.yml फाइल सिर्जना गर्नुहोस् Link to heading

कन्टिन्युअस इन्टिग्रेसन (Continuous Integration) प्रक्रियाका लागि .gitlab-ci.yml निर्देश फाइल (Directive file) हो।

image: node:<version>

pages:
  stage: deploy
  script:
    - npm install
    - npm run build
    - rm -rf public
    - mv build public
  artifacts:
    paths:
      - public
  only:
    - master

गिट्ल्याब सीआई (GitLab CI) परीक्षण डकर इमेजहरू (Docker Images) बाट चल्छ। त्यसैले image: node:<version> मा <version> ले तपाईंले हाल प्रयोग गरिरहनुभएको नोड प्याकेज संस्करण (Node package version) लाई जनाउँछ।

हामीले pages जब (Job) निर्दिष्ट गरेका छौँ जसले केवल master रिपोजिटरीमा क्रमिक स्क्रिप्ट (Script) हरू चलाउँछ र ती कमाण्डहरूले अन्ततः स्ट्याटिक साइट (Static site) लाई public पाथ आर्टिफ्याक्ट (Artifact path) मा राख्नुपर्छ जहाँ गिट्ल्याबले होस्ट गर्नका लागि स्ट्याटिक साइट खोज्छ।