react

پلتفرم ReactJS

(ReactJS Platform)

فهرست عناوین:

استقرار با Liara Desktop

در صورتی که تمایلی به خواندن آموزش متنی ندارید می‌توانید ویدیوی آموزشی زیر ‌را مشاهده کنید.

پروژه و کدهای مورد استفاده در ویدیوی فوق در اینجا قابل مشاهده و دسترسی هستند.

نصب Liara Desktop

شما می‌توانید از طریق این لینک؛ Liara Desktop را؛ متناسب با سیستم عامل خود دانلود و نصب کنید.

ورود به حساب کاربری

برای ورود به حساب کاربری از طریق Liara Desktop، ابتدا نرم‌افزار را اجرا کرده، سپس از طریق مروگر، وارد حساب‌تان شوید.

اولین استقرار

توجه داشته باشید؛ تنها برنامه‌هایی که با دو روشVite و یاcreate-react-appساخته شده باشند، در پلتفرم React لیارا قابل اجرا خواهند بود.

گام اول) کافیست به بخش ایجاد برنامه‌ها در لیارا بروید و با انتخاب پلتفرم REACT و نوشتن شناسه برنامه‌ی موردنظرتان و در نهایت انتخاب پلن، برنامه خود را ایجاد کنید. برای نمونه، ما در این آموزش برای برنامه آزمایشی‌مان، شناسه react-starter را انتخاب کردیم.

گام دوم) داخل فایلpackage.jsonیک فیلد با نامscriptsوجود دارد. شما باید حتما یک اسکریپت در این بخش با نامstartتعریف کنید.

نمونه فایل package.json استفاده شده از create-react-app:

{
  "name": "react-getting-started",
  "version": "0.1.0",
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.1.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build"
  }
}

نمونه فایل package.json استفاده شده از Vite:

{
  "name": "react-getting-started",
  "version": "0.1.0",
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.1.2"
  },
  "devDependencies": {
    "vite": "^2.4.4", 
    "@vitejs.plugin-react-refresh": "^1.3.1" 
  },
  "scripts": {
    "start": "vite preview",
    "build": "vite build"
  }
}

بعد از این‌که برنامه‌ی شما آپلود شد، لیارا برای شما دستورnpm startرا اجرا می‌کند. شما باید داخل این اسکریپت، دستوری بنویسید که باعث اجرا شدن برنامه‌ی‌تان شود.(مانند نمونه‌ی بالا)

توجه داشته باشید که لیارا به‌طور خودکار در فرایند استقرار برنامه‌های React دستور npm run build را اجرا می‌کند.

گام سوم) در قدم بعدی کافیست Liara Desktop را اجرا کرده و پوشه پروژه‌تان را انتخاب کنید. بعد از انتخاب پروژه‌تان، از شما شناسه برنامه‌ موردنظرتان پرسیده می‌شود و بعد از انتخاب شناسه، لیارا عملیات استقرار را شروع می‌کند.

برنامه‌ی شما حتما باید دارای فایلpackage.json باشد تا بتواند در لیارا مستقر شود.
لیارا به صورت خودکار پکیج‌هایی که در فایلpackage.jsonلیست شده‌اند را برای شما نصب می‌کند. پس نیازی ندارید که به دنبال اجرای دستورnpm installباشید. از آن‌جایی که اجرای این دستور زمان‌بر است، برای سرعت بیشتر، این دستور را روی سرورهای قدرتمندمان اجرا می‌کنیم تا زمان زیادی را منتظر نمانید.

گام چهارم و پایانی) بعد از انجام گام‌های قبلی، لیارا به برنامه شما یک زیردامنه رایگان اختصاص می‌دهد که به وسیله آن می‌توانید مطمئن شوید که برنامه‌ی‌تان به صورت صحیح به بستر لیارا منتقل شده است یا خیر. این آدرس بر اساس شناسه برنامه‌ی شما است، برای نمونه:

https://react-starter.liara.run

متوجه شدم، برو گام بعدی!
;