নেটলিফাইতে রিয়েক্ট প্রজেক্ট অটো ডিপ্লয়

by

আমরা একটা সিম্পল রিয়েক্ট প্রজেক্ট তৈরি করব। যা আমরা netlify.com এ কিভাবে অটোডিপ্লয় করা যায়, তা দেখব। আর এ জন্য আমরা GitHub ব্যবহার করব। যখনি গিটহাব রিপোজিটোরির মেইন ব্রাঞ্চে নতুন পুশ করব, Netlify অটোমেটিক নতুন বিল্ড তৈরি করবে এবং তা লাইভ সাইটে দেখাবে। netlify.com এ টেস্ট প্রজেক্ট করা যায়।

সিম্পল রিয়েক্ট প্রজেক্ট

রিয়েক্ট অ্যাপ তৈরি করার জন্য কম্পিউটারে Node.js ইন্সটল করা থাকতে হবে। খুব সহজে এখান থেকে Node.js ইন্সটলার ডাউনলোড করে কম্পিউটারে ইন্সটল করে নেওয়া যাবে। যে কোন একটা ফোল্ডার তৈরি করে নিব। এরপর টার্মিনাল বা কমান্ডলাইনের মাধ্যমে ঐ ফোল্ডারে ন্যাভিগেট করব। এরপর লিখবঃ

npm init -y

তাহলে ঐ ডিরেক্টরিতে একটা নোড জেএস প্রজেক্ট ইনিশিয়ালাইজ করে দিবে। যার ভেতর package.json দেখব আমরা।  এই ফাইলে লেখা থাকবে এই প্রজেক্টের নাম, নোড জেএস প্রজেক্টে কি কি ফ্রেমওয়ার্ক ইউজ করব, স্টার্টিং ফাইলের নাম ইত্যাদি। আমরা যদি এই ফাইলটা কোড এডিটরে ওপেন করি, তাহলে কিছুটা এমন দেখব:

{
  "name": "hello-npm",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": ""
}

রিয়েক্ট যোগ করতে লিখবঃ

npm install react react-dom react-scripts

react-scripts ব্যবহার করে লোকালি রিয়েক্ট প্রজেক্ট রান করতে পারি। কেউ কেউ Vite ব্যবহার করে। রিয়েক্ট স্ক্রিপ্ট ব্যবহার করলে package.json এ script কী এর জন্য নিচের দুইটা ভ্যালু যোগ করতে হবেঃ

    "start": "react-scripts start",
    "build": "react-scripts build"

তাহলে সম্পূর্ণ package.json ফাইল হবে এমনঃ

{
  "name": "hello-npm",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "dependencies": {
    "react": "^19.1.0",
    "react-dom": "^19.1.0",
    "react-scripts": "^5.0.1"
  },
  "devDependencies": {
    "react-scripts": "^5.0.1"
  }
}

public এবং src নামে দুইটা ফোল্ডার তৈরি করে নিব। কমান্ড লাইন থেকেও করে নিতে পারিঃ

mkdir public src

পাবলিক ফোল্ডারে index.html নামক একটা ফাইল তৈরি করব। তার ভেতর লিখবঃ

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Hello World App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

src এর ভেতর index.js ফাইল তৈরি করে লিখবঃ

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

src এর ভেতর App.js ফাইল তৈরি করে লিখবঃApp

import React from 'react';

function App() {
  return (
    <div style={{ textAlign: 'center', marginTop: '3rem', fontSize: '2rem' }}>
      Hello, World!
    </div>
  );
}

export default App;

এরপর নিচের কমান্ড গুলো রান করবঃ

npm install      # install dependencies
npm start        # run locally

npm start প্রথমবার রান করলে টার্গেট ব্রাউজার যোগ করে বলবে। y প্রেস করে যোগ করে নিব।

এরপর ব্রাউজারে রিয়েক্ট প্রজেক্ট ওপেন হবে।

উপরে সিম্পল Hello, World! অ্যাপ তৈরি করেছি। আমরা যে কোন প্রজেক্টই ব্যবহার করতে পারব।

গিটহাবে প্রজেক্ট হোস্ট

netlify.com গিটহাব, বিটবাকেট, গিটল্যাব ইত্যাদি সাপোর্ট করে। লোকাল বিল্ড থেকেও netlify.com এর কমান্ডলাইন ট্যুল ব্যবহার করে অটো ডিপ্লয় করা যায়। আমরা এখানে গিটহাব ব্যবহার করে কিভাবে ডিপ্লয় করে, তা দেখব।

এর জন্য প্রথমে গিটহাবে একটা রিপোজিটরি তৈরি করে নিব। প্রাইভেট অথবা পাবলিক, যে কোন ভাবেই করতে পারি। এরপর লোকাল প্রজেক্ট গিটহাবে আপলোড করব। গিট সম্পর্কে ধারণা, গিট ইন্সটল, ব্যবহার এবং গিটহাব এ একটা প্রজেক্ট পুশ করা তে বিস্তারিত লেখা রয়েছে। গিট ও গিটহাব – ইবুক ও দেখতে পারেন।

netlify.com তে ডিপ্লয়

netlify.com এ একাউন্ট না থাকলে একাউন্ট তৈরি করে নিব। এরপর Add new site এ ক্লিক করে Import an exisiting project এ ক্লিক করব।

এরপর গিটহাব সিলেক্ট করব। গিটহাব সিলেক্ট করলে আমাদের অথরাইজ করতে বলবে। অথরাইজ করার পর এখান থেকে যে রিপোজিটরি ব্যবহার করব, তা সিলেক্ট করব। সাইটের একটা নাম দিতে বলবে।

এখানে সাধারণত অটোমেটিক বিল্ড কমান্ড এবং পাবলিশ ডিরেক্টরি সেট করা থাকবে। কোন ব্রাঞ্চ অটো ডিপ্লয় করব, তা সিলেক্ট করতে পারব। রিয়েক্ট প্রজেক্টের ক্ষেত্রে অন্য কিছু আর পরিবর্তন করতে হবে না। এরপর Deploy netlify তে ক্লিক করলে ডিপ্লয় হয়ে যাবে।

এই তো। এরপর আমরা রিয়েক্ট প্রজেক্ট সাইটের নাম অনুযায়ী ডোমেইনে দেখতে পাবো।

অটো ডিপ্লয় টেস্ট করা

এবার প্রজেক্টে কিছু পরিবর্তন করে গিটহাবে পুশ করে দেখেন। এরপর নেটলিফাইতে গিয়ে দেখেন। দেখতে পাবেন নতুন বিল্ড তৈরি হয়ে সাইটে আপডেট হয়ে গিয়েছে। জোস না?

উপরে আমি রিয়েক্ট প্রজেক্ট কিভাবে নেটলিফাইতে অটো ডিপ্লয় করে, তা দেখেছি। রিয়েক্ট ছাড়াও আরো অন্যান্য ফ্রেমওয়ার্কও একই ভাবে অটো ডিপ্লয় করতে পারব।

আবার যারা নেটলিফাই ছাড়া অন্য সার্ভিস বা সার্ভার ব্যবহার করেন, তারাও পুরো ডেভেলপমেন্ট প্রসেস অটোমেটেড করতে পারেন গিটহাব একশন ব্যবহার করে। যা সম্পর্কে বিস্তারিত জানা যাবে গিটহাব একশন – গিটহাব থেকে সার্ভারে ডিপ্লয় লেখা থেকে।

Leave a Comment