ویرگول
ورودثبت نام
masoodsh73
masoodsh73
خواندن ۴ دقیقه·۴ سال پیش

آموزش ساخت یک وبلاگ با Strapi و React JS (قسمت اول)

خب سلام دوستان عزیزتر از جان

  • قسمت های قبلی :
آموزش ساخت یک وبلاگ با Strapi و React JS

امروز میخایم جلسه اول دوره آموزش ساخت یک وبلاگ با Strapi و React JS رو با همدیگه شروع کنیم .

این دوره رو سعی میکنیم جوری پیش ببریم که دوستانی که آشنایی زیادی با ری اکت و استرپی ندارند هم بتونن کار رو یادبگیرن

بهتره کمتر حرف بزنم و زودتر شروع کنم !!!

خب بریم سراغ نصب استرپی و استفاده از اون:

شما برای استفاده از این سیستم مدیریت محتوا و ری اکت جی اس قبل از همه چی Node JS روی سیستمتون نصب کرده باشین و حتما مطمعن شید که npm براتون فعال شده باشه.

نصب استرپی به دو صورت نصب میشه و میتونین ازش استفاده کنین که اونها رو براتون تک به تک توضیح میدم:

روش اول : ( روش توصیه شده )

اول از همه باید CMD ویندوز یا ترمینال لینوکس رو باز کنید . بعد دستور زیر رو وارد کنید:

npm install -g strapi@alpha

این کد رو باید توی CMD ویندوز یا ترمینال لینوکس وارد کنید

نصب استرپی
نصب استرپی

دقیقا مثل شکل بالا کدارو وارد کنید

بعداز چند دقیقه نصب استرپی تموم میشه ( البته نسبت به سرعت فیلترنت و سیستمون ممکنه کمتر از چند دقیقه و یا بیشتر از چند دقیقه بشه)

اتمام نصب استرپی
اتمام نصب استرپی

خب وقتی پیام بالا مطابق تصویر رو دیدین بدونید که آخرین ورژن استرپی براتون نصب شده و آماده استفاده اس ( همون که دورش خط قرمز کشیدم )

نصبش کردیم اما چطور میشه ازش استفاده کرد ؟؟؟

توی این روش استرپی رو مثل نود جی اس روی کل سیستم نصب و پیاده سازی میکنیم اما برای اینکه بتونیم ازش استفاده کنیم نیازه که یک خط کد دیگه بزنیم تا بشه ازش استفاده کرد که اونم بعد روش دوم براتون میگم .

روش دوم :

روش دوم روش ساده تریه اما یکم اذیت کننده اس

توی این روش باید برای هر پروژه جدیدی که دارین یک بار استرپی رو نصب کنین (که البته این روش برای localhost اذیت کننده اس اما روی سرور باید برای هر سرور جداگانه نصب کنین )

برای اینکه پروژه رو استارت بزنیم کد زیر رو توی CMD ویندوز یا ترمینال لینوکس وارد کنید:

اگر از npm استفاده میکنید کد زیر :

npx create-strapi-app my-project --quickstart

و اگر از yarn استفاده میکنید کد زیر رو وارد کنید :

yarn create strapi-app my-project --quickstart

به این خط تیره ها خیلی دقت کنید ونکته هایی راجب این دو کد هست باید بهتون بگم اینه که به جای اون my-project اسم پروژتونو باید بزنین . اون quickstart آخرش رو نزدید هم مشکلی پیش نمیاد ولی برای سرعت بیشتر تو روند نصب بزنیدش

خب اینم از دو روش نصب استرپی بریم سراغ ساخت اولین پروژه استرپیمون:

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

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

خب بعد از اینکه استرپی رو نصب کردیم توی هر جایی که دلتون خواست ی پوشه برای پروژه تون بسازید

برای اینکار میتونید از طریق CMD یا ترمینال هم پیش برین که هم حرفه ای تره D: هم راحت تر

از طریق CMD یا ترمینال وارد درایو مورد نظر بشین با دستور زیر

cd Desktop با این کد من وارد دسکتاپ سیستمم شدم
mkdir weblog با این کد یک پوشه جدید با نام وبلاگ ساختم
cd weblog و با این کد وارد پوشه ای که ساختم شدم

خب حالا کد زیر رو میزنیم تا پروژه برامون ایجاد شه :

اگر از npm استفاده میکنید کد زیر :

npx create-strapi-app backend --quickstart

و اگر از yarn استفاده میکنید کد زیر رو وارد کنید :

yarn create strapi-app backend --quickstart

من اسم پوشه استرپی رو گذاشتم backend که با پوشه ری اکتم قاطی نشه

خب بعد از اینکه پروژه به صورت کامل ایجاد شد با کد زیر وارد پوشه استرپی میشیم :

cd backend

اینجا وارد پوشه استرپی شدیم و حالا نیازه که اون رو اجرا کنیم

هموجا تو خط کامند سیستم کد

strapi develop برای اینکه شما بتونید کانفیگ استرپی رو تغیر بدید strapi start توی این حالت شما فقط میتونید دیتا ها رو تغییر بدید

رو باید بزنید تا پروژه اجرا بشه


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

اگر از این آموزش خوشتون اومده لایک و کامنت و فالو رو فراموش نکنید


تا جلسه بعدی خدا نگهدار

آموزش نصب استرپیآموزش ساخت یک وبلاگ با Strapi و React JS (قسمت اول)ری اکت جی اسبرنامه نویسیheadless cms
Just Code | React JS Developer | Wordpress | Website UI/UX
شاید از این پست‌ها خوشتان بیاید