دوره های پرنیان

آموزش vercel ، آپلود پروژه ری اکت و گرفتن دمو آنلاین

آموزش vercel ، آپلود پروژه ری اکت و گرفتن دمو آنلاین

قطعا کسانی که در بحث فرانت اند مشغول به کار هستند ، برای گرفتن دمو و نمونه از پروژه های Next  و React  خودشان با مشکلاتی روبرو هستند، زیرا متاسفانه در حال حاظر نمیتوان از گیت هاب دمو آنلاین برای پروژه های Next  و React دریافت کرد.

دراین مقاله قصد داریم که نحوه گرفتن دمو آنلاین از پروژه های Next  و React  را آموزش دهیم.

ورسل (vercel) چیست؟

ورسل یک کمپانی امریکایی است که در سال 2015 تاسیس شده و خدمات فضای ابری را ارائه میدهد.

این سایت خدمات رایگان و اشتراکی را ارائه میدهد که ما از خدمات رایگان آن برای گرفتن دمو از پروژه هایمان استفاده میکنیم.

دلیل انتخاب این سایت اتصال راحت به GitHub  برای Manage کردن پروژه ها و رابط کاربری راحت و آسان آن میباشد.

نحوه ساخت اکانت در سایت vercel

  • درمرحله اول وارد سایت Vercel.com  میشویم
  • بر روی SingUp کلیک میکنید
آموزش سایت vercel
آموزش سایت vercel

در مرحله بعد بر روی hobby  کلیک میکنیم و اسم خود را وارد میکنیم:

آموزش سایت vercel
آموزش سایت vercel

در مرحله بعد بر رویwith GitHub  Continue کلیک میکنیم:

آموزش سایت vercel
آموزش سایت vercel

در این مرحله بعد از اتصال اکانت گیت هاب خود با استفاده از رمز و یا تایید دو مرحله ای وارد محیط زیر میشویم:

آموزش سایت vercel
آموزش سایت vercel

نحوه آپلود پروژه ریکت بر روی گیت هاب

  • برای آپلود پروژه  reactبر روی گیت هاب که با استفاده ازvite  نصب شده است در ابتدا لازم است که با استفاده از دستور yarn dev  درCMD وارد محیطDevelop   شوید.
آموزش سایت vercel
آموزش سایت vercel

با اجرای دستور yarn run build و موفیقت امیز بودن کار (مانند عکس زیر) یک پوشه به نام dist ساخته شده خروجی پروژه ما میباشد.

آموزش سایت vercel
آموزش سایت vercel

حالا فایل های پروژه که در پوشه dist   وجود دارد را  به صورت معمول در گیت هاب اپلود میکنیم ( برای دیدن آموزش نحوه اپلود پروژه ها بروی گیت هاب از لینک آموزش کامل گیت و گیت هاب اقدام کنید)

نحوه گرفتن دمو از پروژه در سایت vercel

  • وارد پنل کاربری خود در سایت vercel  شوید
  • بر روی گزینه  (Add a repo from your Github) Import Project کلیک کنید.
آموزش سایت vercel
آموزش سایت vercel

بر روی ریپازیتوری اپلود شده کلیک کنید ( من برای مثال پروژه ی اسنپ خود را انتخاب میکنم)

آموزش سایت vercel
آموزش سایت vercel

دراین مرحله بر روی Name  کلیک کرده  و اسم پروژه خود را وارد میکنیم و در مرحله بعد بدون انجام تغییری در تنظیمات بر روی deploy  کلیک میکنید.

آموزش سایت vercel
آموزش سایت vercel

در این مرحله بر روی عکس پروژه خود کلیک میکنید:

آموزش سایت vercel
آموزش سایت vercel
  • در صفحه باز شده شما پروژه خود را بر روی فضای ابری vercel  مشاهده میکنید
  • برای استفاده از این فضای ابری بر روی قسمت url  سایت کلیک کرده و آن را کپی کرده و برای دمو های گیت هاب خود استفاده کنید.
آموزش سایت vercel
آموزش سایت vercel

حالا میتوانید با استفاده از روش بالا برای پروژه های خود دمو ساخته و ان را استفاده کنید.

این مقاله توسط دانشجوی دوره چهاردهم، عرشیا فرخی نوشته شده است و ویدیو آموزشی آن هم توسط خانم پرستو عسگری، از بچه های دوره چهاردهم تهیه شده است.

امیدواریم از این مقاله ساخت آموزش vercel ، آپلود پروژه ری اکت و گرفتن دمو آنلاین نهایت استفاده را برده باشید و آن را با دوستانتان به اشتراک بگذارید. تیم تولید محتوای مدرسه اینترنتی پرنیان این مقاله را تهیه کرده است.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

کلاس طراحی سایت