نوشته های مهران مطیعی

دیپلوی آسان تر از همیشه

مهران مطیعی — Mon, 21 Oct 2019 01:37:38 +0330

سلاماگه نوشته های قبلی من رو دیده باشین میبینین که شروع کردم تا چیزایی که باهاشون سر وکار دارم رو به هم چسبوندن ... اکسیر سایتیه که دوسش دارم ولی محیطش نیاز های من رو رفع نمیکنه قرار بود یه فرانت برای استفاده از api سایت اکسیر بزنم . دایکیومنت api رو میتونین از apidocs.exir.io ببینین .. که خب تا اینجا ی کار همه کاری کردم به جز زدن اون فرانت ...ابزار های که دوست داشتم رو در کنار هم کانفیگ کردم و رسیدم به یه ترکیب فعلا خوب که برای پروژه های بعدیم ازشون استفاده میکنم. البته ناگفته نماند که یه کمی جلو هم رفتیما .خب بریم سر اصل مطلبکارایی که تا اینجا کردم رو میتونین داخل ریپوی زیر ببینین https://github.com/straxico/react-strix چه عکس بزرگی شد...ویرگول اینم یه فکری به حالش بکن...خلاصه که تا اینجا پیش رفتممن برای توسعه نیاز داشتم که بعد از هر بار پوش کردن یه نسخه از استوری بوک و یه نسخه از وبسایت ساخته بشه. توو قسمت های قبل شروع کردم این کار رو با github action پیش بردن و حالا میشه گفت که تا حدودی اتفاق های خوبی افتاده که گفتم شاید دونستنش به درد بقیه هم بخوره.پدیده ای به نام NOWقطعا همه now رو میشناسن ...یکی ازمحصولات شرکت zeit که توسعه دهنده ی nextjs هم هست . فعال کردن now تقریبا 20 ثانیه طول میکشه و بعد از اون هر بار که شما تغییری رو کامیت و پوش میکنی now یه نسخه پروداکشن از سایت شما بالا میاره و لینکش رو به صورت کامنت به انتهای کامیت تون اضافه میکنه ...لعنتی خیلی معتاد کننده ستبرای فعال کردنش کافیه از ستینگ وارد تب اینتگریت بشید و now رو به پروژه تون وصل کنیدبعد از اون هر وقت که کد هاتون رو پوش کنین اگه مشکلی نداشته باشه در انتهاش همچین کامنتی اضافه میشه.به همین اسانی به همین خوشمزگیخب اینجوری خیالمون از بابت خود وبسایت راحته ولی استوری بوک رو چجوری نگه داریم؟اولین راهی که به ذهنمون میرسه صفحات استاتیک گیت هابه پساستفاده از Github Pagesمیخوایم استوری بوکمون رو روی گیت هاب پیج بالا بیاریم پس اول نیازه که گیت هاب پیج رو فعال کنیم.برای این کار از ستینگ قسمت گیت هاب پیچ رو پیدا کنین و فعالش کنینمن حال ندارم هر وقت که تغییری میدم بیام و استوری بوک رو بیلد بگیرم و فایل هاش رو روی این برنچ پوش کنم پس میریم برای خودکار سازی. برای شروع کتابخونه ی زیر رو نصب میکنیم و این قسمت هارو به فایل package.json اضافه میکنیمnpm install @storybook/storybook-deployerpackage.json "script":{ "build-storybook": "build-storybook -c .storybook -o .out -s ./public", "deploy-storybook": "storybook-to-ghpages", } "storybook-deployer": { "gitUsername": "GH Pages Bot", "gitEmail": "hello@ghbot.com", "commitMessage": "Deploy Storybook to GitHub Pages" }, حالا با زدن دستور npm run deploy-storybook اول استوری بوک بیلد میشه و بعد نسخه بیلد شده خودکار پوش میشه به ریپوزیتوری...این روش خیلی خوبه و جلو تر میبینین که میشه حتی اسن دستور رو هم سپرد به github action تا خودش اون رو جرا کنه و نیاز نباشه ما کاری کنیم . ولی مشکلی که داره اینه که همیشه فقط آخرین نسخه رو داریم و نمیتونیم تغییرات رو نگه داری کنیم . من دلم میخواد وقتی فایلی رو تغییر میدم یه نسخه از استوری بوک فعلی همراه اون کامیت ذخیره بشه . کمی گشتم و رسیدم به سرویس surge.sh . واقعا سرویس لذت بخشیه . حتما بهش سر بزنیناستفاده از surgeفرق surge با now اینه که surge فقط وبسایت های استاتیک رو ساپورت میکنه که خب ما هم میخوایم استوری بوک رو که استاتیکه هندل کنیم .. پس بریم ببینیم چطوریه!اول نصبش میکنیمnpm install --global surgeوقتی که داخل پوشه ی پروژه بودین مثل مثال زیر میتونین ازش استفاده کنینولی خب من دنبال خودکار کردنم.پس با کمی سرچ به یه اکشن خوب توی گیت هاب رسیدماگه وقتی داخل surge لاگین هستین دستور surge token رو بزنین بهتون توکن میده که میتونین ازش توی گیت هاب اکشن استفاده کنین .البته یه راه دیگه ه مبا استفاده از github hook داره که هنوز تستش نکردم ولی میتونین از اینجا دنبالش کنین.. کلا هدف از این نوشته ها اینه که روندی که طی کردم یادم بمونهکاری که الان میخوام بکنم اینه که فایل کانفیگ اکشنم رو تغییر بدم تا هر وقت تغییری رو پوش کردم اول پروژه رو بیلد و تست کنه . بعد استوری بوک رو بسازه و دیپلوی کنه روی github page و بعد یه نسخه از استوری بوک رو هم دیپلوی کنه روی surge و اسم دامنه ای که برای این کار استفاده میشه رو به صورت تابعی از شماره کامیت میسازم تا نسخه های متفاوت رو همزمان داشته باشم.و در انتها میخوام که اون آدرس url به صورت کامنت به آخر کامیت اضافه بشه که خب این قسمت آخرش رو بلد نبودم برای همین توی استک فلو پرسیدم و خیلی زود یکی پیدا شد که جواب رو بدونه. لینکش اینجاست .بعدش هم که ساخت ایمیج از روی داکر فایل و اضافه کردنش به ریجستریه.شت گویی رو کم میکنم و میزارم باقی حرف هارو خود کد بزنه... البته این هنوزم جای کار داره ها ولی تا اینجا داره کار میکنه .بعدا باید برای برنچ های مختلف رول های مجزا بنویسم یا بین پوش و پول رکوئست تفاوت قائل شم و ...{بازم مثل همیشه نمیشه اینجا مثل آدم کد نوشت...درستش کنین دیگه} https://github.com/straxico/react-strix/blob/master/.github/workflows/config.yml نتیجه بعد از هر بار پوش کردن همچین صحنه ای هستش

ریاکت برای غارنشینان 13 (kiwi)

مهران مطیعی — Mon, 07 Oct 2019 02:25:05 +0330

احتمالا نمیدونین kiwi چیه ... در بهترین حالت به فکر یه میوه ی موکتیه خوشمزه یا یه پرنده که نمیتونه پرواز کنه افتادین ... البته این kiwi ما خیلی بی ربط با پرواز نیست . شرکت kiwi.com یه شرکت فروش بلیط هواپیما هست که دولوپرهاش رو خیلی دوست داره و تا جایی که من فهمیدم عاشق پایتون و ریاکته . مدت کوتاهیه که این شرکت تصمیم گرفته کامپوننت هایی که ازش برای ساخت وبسایتش استفاده کرده رو به صورت یه دیزاین سیستم دربیاره و اپن سورس منتشرشون کنه. کارشون چند تا ویژگی داره که من خیلی خوشم اومده ازش .اول از همه این که از styled-components استفاده میکنن و برای استفاده ازش باید styled-components رو نصب کنیم که خب ما هم داریم از همین استفاده میکنیم . دوم این که نحوه ی کد نویسیش به نحوی هست که میشه خیلی راحت توسعه ش داد و اگه داخل سورسش بگردین میبینین که کار عجیبی نکرده و همه چی خیلی سر راست و قابل فهمهسوم این که به اون حالت اتمیک دیزاین ما خیلی نزدیکه و عملا هر کدوم از کامپوننت هاش یه اتم حساب میشه برای ماچهارم این که شاید بگید کامیونیتی قوی نداره ولی kiwi نیومده تکنولوژی جدیدی معرفی کنه و داره فقط برای styled-component کامپوننت های پایه رو میسازه که خب خود styled-component به قدر کافی کامیونیتی داره که خیالمون راحت باشه و به این هم باید توجه کنیم که این پروژه ی kiwi خیلی جدیده و هنوز به ریلیز 1.0.0 نرسیده . تیم توسعه ش که عملا کارمندای شرکت kiwi هستن دارن هر روز روش کار میکنن و تقریبا هفته ای 3 تا ریلیز جدید میدن . خوبیش اینه که برنامه ی مشخصی برای توسعه دارند که از اینجا میتونین ببینین. طبف این برنامه تا دو ماه دیگه ورژن 1.0.0 ریلیز میشه.پنجم این که kiwi هم برای React و هم برای React Native در حال توسعه هست . در کل اینجوریه که اینا اول کامپوننت رو توو sketch دیزاین میکنن .بعد نسخه ی React رو میدن و بعد نسخه ی React Native . وضعیت کامپوننت های منتشر شده هم از اینجا قابل مشاهده هست.میشه قسنگ دید هر کامپوننت الان در چه وضعی هست و تا کی باید منتظر بمونیم تا بیاد .میشه گفت دیگه تقریبا همه ی کامپوننت های اصلی آماده شده و کم کم میریم برای ریلیز 1.0.0ششم این که kiwi رو با flow نوشتن . که خب برای یه عده مزیت محسوب میشه و برای ما که پروژه مون تایپ اسکریپته خیلی خبر خوشحال کننده ای نیست. یه ایشو بهشون زدم و گفتن که توو برنامه شونه که خیلی زود تایپ ها رو هم منتشر کنن .بنابراین خیلی بی تایپ نمیمونیم . البته ما چون حال صبر کردن نداشتیم کل پروژه رو کلون کردیم و بردیمش روی تایپ اسکریپت با این خیال که از اینجا به بعدش رو خودمون توسعه میدیم ...ولی سرعت توسعه ی تیم kiwi اونقدر بالا بود که با خودم گفتم توو این پروژه بیخیال اون کلون بشم و kiwi رو از ریپوی خودش نصب کنیم و امیدوار باشیم تایپ ها زودتر برسه.هفتم این که همه ی کامپوننت ها تست داره و براشون storybook هم نوشته شده .کلا این پروژه حال میده برای این که کلون کنی و برای خودت یه اتمیک دیزاین شخصی باحال درست کنی ..میتونین استوری بوکش رو از لینک پایین ببینین. اگه خود سایت kiwi.com رو هم دیده باشین میبینین که کاملا همونه https://kiwicom.github.io/orbit-components/?path=/story/* هشتم این که از rtl پشتیبانی میکنه ... شاید بعضی جاها هنوز مشکل داشته باشه ولی چیزی نیست که نشه حلش کرد و در کل داخل تم گزینه ی rtl دیده شده و یه util برای rtl render داره .نهم این که بعضی از کامپوننت های قدیمیشون هنوز به صورت کلاس نوشته شدن ولی جدید هارو فانکشنال نوشتن . بهشون ایشو زدم و گفتن که کنم کم قدیمیا رو هم فانکشنال مینویسنیه توکن دیزاین برای تم هم داره که اونم سخت در دست توسعه و بهبود هست .. قابلیت ترجمه هم براش گذاشتن که من نیاز نداشتم و توی کلون خودم پاکش کردم ولی اینجا هست دیگه ...در کل همه چیزش خیلی برام دوست داشتنیه و نکته ی دیگه ای فعلا یادم نمیاد ...بریم که کل اتم های مورد نیاز پروژه مون رو با یه حرکت بسازیم .یادم رفت صفحه ی اصلی داکیومنتش رو معرفی کنم...اینه https://orbit.kiwi/ خب برای نصبش اینو میزنیم npm install @kiwicom/orbit-components شت ...نصب شد ولی بدون تایپ اسکریپت عملا نمیشه باهاش کار کرد :|مشکل استفاده نداره ها ولی نمیدونی کدوم کامپوننت چه پراپ هایی میگیره و همش باید تب داکیومنت باز باشه.مثلا کامپوننت Text رو بخوای استفاده کنی یه همچین چیزی میشه. من از پراپ های element , size, type,weight استفاده کردماینا رو چون تایپ نداریم موقع وارد کردن هیچ هینتی بهم نداد ولی توی داکیومنتش همچین چیزی دارهیه راهش اینه که منتظر بمونیم خودشون تایپ بنویسن و تا اون موقع با داکیومنتش بریم جلو ..یه راهم اینه که اون کلون دست و پا شکسته مون رو فعلا بیاریم داخل و بعدن که تایپ ها رسید با این جایگزینش کنیم.هومممم.یا که اصن پروژه مون رو ببریم روو فلو...اصن همزمان میشه فلو و تایپ اسکریپت فعال باشه؟زودی بر میگردم

ریاکت برای غارنشینان 12 (ci /cd با استفاده از github action)

مهران مطیعی — Sun, 29 Sep 2019 19:56:39 +0330

خب این قسمت خیلی وابستگی به ریاکت نداره و برای خیلی از پروژه ها قابل استفاده ست . منم دواپس نیستم ولی در حد نیازم لازم دارم که کارامو خودکار کنم گیت هاب بعد از این که زحمت کشید و مارو تحریم کرد .اومد و github actions رو معرفی کرد.فرصت نشده بود باهاش کار کنم .بریم ببینیم چجوریاستپروژه مون رو که یادتونه روی گیت هاب گذاشته بودیم؟ حالا میخوایم یه سری کار باحال باهاش بکنیم .اول از همه عبارت github cicd رو سرچ کردم و به این لینک رسیدم.بعد از ثبت نام وقتی وارد صفحه ی پروژه شدم دیدم یه تب actions هم اضافه شدههمین که واردش میشید کلی کانفیگ آماده برای انواع کارها میبینید.ما از Node.js شروع میکنیم .وقتی که انتخابش کردم کانفیگ زیر رو نشونم دادچیزی که معلومه اینه که داره این کار هارو روی یه سیستم عامل اوبونتو انجام میده . اومده و 3 نسخه ی متفاوت node رو ریخته توی matrix که نمیدونم چیه .در ادامه هم دستور های npm install , npm run build و npm test رو اجرا کرده ... خب همین رو سیو میکنیم ببینیم چی میشهبعد از سیو وارد تب اکشن شدم و دیدم اون بقل برام 3 نسخه ی مختلف node رو گذاشته که خب معنی matrix هم فهمیدیم . فرایند روی همه ی نسخه ها نا موفق بود ...یکیش رو باز کردم ببینم داستان چیهنصب پکیج ها و بیلد گرفتن پروژه موفق بود ولی چون هیچ تستی وجود نداشت jest ارور داده بود ... رفتم توی package.json و جلوی دستور test فلاگی که حین ارور پیشنهاد داده بود رو اضافه کردم ... از توی فایل تنظیمات اکشن هم فقط node 12.x رو گذاشتم که بمونه درنهایت همه چیز میزون بودولی خب اینا به چه دردمون میخوره؟شما وقتی یه تغییری توی کد ها میدید و تغییرات رو پوش میکنید , گیت هاب میاد و پروژه رو بیلد میکنه و تست هارو هم اجرا میکنه و اگه خطایی وجود داشته باشه بهتون اطلاع میده . میتونید خیلی کارای دیگه رو هم باهاش قاطی کنین .مثلا چی؟توی پست های قبلی یه کم در مورد داکر صحبت کردیم .و برای پروژه مون داکرفایل ساختیم .حالا من میخوام به کمک همین قابلیت های جدید گیت هاب بیام و کاری کنم که بعد از هر باری که من تغییراتم رو پوش میکنم روی گیت هاب ,به طور خودکار فایل ایمیج برام ساخته بشه و روی رجیستری که گیت هاب در اختیارمون گذاشته قرار بگیره..در مرحله ی بعد هم این فایل ایمیج رو متصل کنم به سرویس هایی مثل فندوق تا هروقت که من تغییری رو پوش میکنم به طور خودکار سایتم آپدیت بشه.خب از کجا شروع کنیم؟توی تب اکشن یه workflow جدید میسازیم و اینبار Docker image رو انتخاب میکنیم..بدون تغییر همون رو سیو میکنم و میبینم که همه چیز داره درست کار میکنه :D ...لعنتی خیلی ساده ستالان با هربار کامیت کردن یه بار اون کانفیگ node اجرا میشه و یه بار هم داکر.و خب الان جفتشون موفق بودن . ولی باید دقت کنین که این کارها روی یه سیستم موقت داره انجام میشه .یعنی اون فایل ایمیجی که ساخته میشه عملا جایی ذخیره نمیشه . خب حالا چیکار کنیم؟چجوری فایل ایمیج رو منتقل کنیم به ریجستری گیتهاب؟ برای کار با اکشن خیلیا اومدن و خیلی کانفیگ های آماده ساختن که میتونین برای کارهای مختلف ازشون استفاده کنین . لیستشون رو از اینجا میتونین ببینین.مثلا یکی اومده و وصلش کرده به تلگرام یعنی اگه بعد از پوش کردن کدها اروری وجود داشته باشه داخل تلگرام براتون نوتیفیکیشن میاد . باحاله ولی به دردمون نمیخوره .واسه دردمون یکی اومده و این رو نوشته اسمش رو هم گذاشته publish docker که میشه راحت ازش استفاده کرد ولی ما چرا خودمون ننویسیم؟کاری نداره کهاگه یه نگاه به صفحه ی package توی github بندازین همچین چیزی میبینینخب ما هم بر اساس همین میایم و کانفیگمون رو مثل زیر تغییر میدیمفقط یه نکته وجود داره .مقدار پسورد رو من اومدم و داخل یه سکرت تعریف کردم . سکرت ها رو میتونین توی قسمت تنظیمات ریپوزیتوری پیدا کنین و ست کنین . ولی مشکلی که وجود داشت این بود که بعد از اجرا همچین خطایی گرفتم بعد از کمی جست و جو فهمیدم که باید به جای پسورد یه توکن تعریف کنم که اجازه ی نوشتن داشته باشه .پس رفتم اینجا و یه توکن تعریف کردم و اون توکن رو توی سکرت ها جایگزین پسورد کردم.ایندفه اکشن بدون خطا اجرا شد و توی قسمت package ها هم ایمیجمون اضافه شدحالا میتونیم این ایمیجمون رو توو جاهای مختلف مثل فندوق استفاده کنیمفندوق رو توی شماره ی بعدی میگم .فقط به این نکته توجه کنین که این مراحل باید پشت سر هم باشه یعنی اگه اون قسمت بیلد و تست ناموفق بود دیگه قسمت داکر اجرا نشه ..اینارو بعدا درست میکنیم ..فعلا بریم سروقت فندوق

ریاکت برای غارنشینان 11 (docker)

مهران مطیعی — Fri, 27 Sep 2019 04:29:33 +0330

قشنگ ترین قسمت کد نویسی بزای من اونجاست که ببینم کدی که نوشتم همه جا مثل کامپیوتر خودم بی نقص اجرا میشه .یه زمانی این مثل رویا بود ولی ما الان به لطف گو داکر رو داریم.بریم که پروژه مون رو داکرایز کنیم.داکر اینجوری کار میکنه که شما باید از پروژه تون یه فایل ایمیج بسازین . یه چیزی توو مایه های فایل iso یی که برای سیستم عامل ها داشتیم و هر جا که داکر باشه میشه اون فایل ایمیج رو درست همونجوری که روی سیستم خودتون اجرا میشد اجرا کرد.فایل ایمیج شامل همه ی فایل هاییه که برای اجرای پروژه تون لازمه ..برای نمونه ی ما این فایل شامل node,npm, همه ی پکیج های استفاده شده در پروژه و ... هست که با توجه به نوع پروژه حجم فایل ایمیج هی بزرگ میشه ..یه سری ایمیج های آماده وجود داره که ما برای ساخت ایمیج های خودمون از اون ها استفاده میکنیم .مثلا ایمیج node یا ایمیج پایتون ... شما میتونین این ایمیج هارو از اینجا ببینین. برای هر برنامه ای یه عالمه ایمیج با کانفیک ها و ورژن های متنوع موجوده که بسته به نیاز باید ایمیج مناسب خودتون رو پیدا کنین . مثلا ممکنه یکی برای اجرای پایتون بیاد و از ایمیج یک سیستم عامل اوبونتو کامل استفاده کنه و حجم ایمیجش بشه یه گیگ ..یکی دیگه هم از یه ایمیج خلاصه استفاده کنه و کلا با 50 مگ داستانو ببنده .ایمیج هایی که من برای پروژه های nextjs خودم دیدم حدود 150 تا 200 مگ بودن.خب .. و اما ایمیج رو چطور بسازیم؟داکر برای ساخت فایل های ایمیج از فایلی به نام Dockerfile استفاده میکنه .این فایل فقط شامل چند خط دستوره و حجمش یکی دو کیلوبایته.توی این فایل تعریف میکنیم که پروژه مون به چیا نیاز داره و چطور باید چیکار کنه ساخت Dockerfile برای پروژه nextjsوقتی کدش رو ببینین میفهمین که چه ساده ست ...ما اول میگردیم و یه فایل ایمیج مناسب برای اجرای node پیدا میکنیم. یادتون باشه که نیاز نیست دانلودش کنین , ما فقط اسمش رو میخوایم . همه ی اسم هایی که اینجا میبینین قابل استفاده هستن . من از mhart/alpine-node میخوام استفاده کنم . داکرفایلمون این شکلی میشهاول اومدم و گفتم که بیا و از ایمیج mhart/alpine-node استفاده کن. وقتی از این ایمیج استفاده میکنم یعنی node, npm و... نصبه . میگم که برو توی پوشه ی app .حالا هرچی فایل توی روت پروژه ی من هست رو کپی کن توی پوشه ی app .دستور npm run install رو اجرا کن تا پکیج ها نصب بشن .بعدش بیا برو روو حالت پروداکشن و. برنامه رو بیلد کن . اجازه دسترسی به پورت 3000 رو بده و در نهایت node server.js رو اجرا کن.خب خیلی ساده بود. اگه دقت کنین من اول پکیج هارو نصب کردم و بعد اومدم حالت پروداکشن رو فعال کردم .پس الان پکیج های حالت dev هم نصب شده . اگه نیازی بهشون ندارین میتونین اون خط رو ببرید بالاترخب ما داکرفایل هم ساختیم حالا چجوری از این برسیم به ایمیج؟ و اصلا با اون ایمیج چیکار کنیم؟شما دیگه لازمه که داکر رو نصب کنین.برید توو این سایت دانلود و نصبش کنین.برای ساخت ایمیج کافیه وقتی توی روت پروژه هستین این دستور رو توی ترمینال بزنین.با این کار فایل های لازم رو دانلود و اجرا میکنه.شما به یه فضایی لازم دارین که فایل های ایمیج رو نگه داری کنه که اصطلاحا بهش رجیستری میگن وقتی داخل داکر لاگین میکنین براتون یه چی میسازه و همه چی رواله ..حالا بعدا میریم روو گیت لب و اونجا قشنگ تر جا میافته این چیزا..فعلا هدف آشنایی و ساخت dockerfile بود.docker build --rm -f "DockerFile" -t imagename:latest .بار اول شاید یه کم طول بکشه .ولی بیلد های بعدی خیلی سریع اتفاق میافته و همه چیز رو کش میکنه.فکر کنم ایده ی بدی نباشه این رو روی فندوق هم دیپلوی کنیم .جلو تر میرسیم بهش..دلم میخواد کد بزنم ..چرا کانفیگ تموم نمیشه؟کد ها اینجاست https://github.com/straxico/react-strix

ریاکت برای غارنشینان 10 (express)

مهران مطیعی — Fri, 27 Sep 2019 03:36:41 +0330

خب تا اینجا ما اکثر کانفیگ هارو انجام دادیم . برای این که در آینده دستمون باز تر باشه من ترجیح میدم از express برای سرو کردن سایتم استفاده کنم.سایت nextjs توضیحات و مثال های کاملی برای اضافه کردن express به پروژه داره ..حالا ما هم قدم قدم میریم ببینیم چجوریهقاعدتا اولین قدم نصب کردن express هست .پس دستور زیر رو وارد میکنیم npm install express --saveما تا الان برای اجرای پروژه دستورات npm run dev یا npm start رو میزدیم که با زدن این ها اسکریپت های زیر اجرا میشدناز الان به بعد من میخوام که با زدن این دستورات node بیاد و یه فایلی که من توش express رو تعریف و استفاده میکنم اجرا بشه . اسم اون فایل رو میزارم server.js و توی روت پروژه قرارش میدم .. server.js رو جلوتر با همدیگه میسازیمش ....پس الان اسکریپت هام رو مثل زیر تغییر میدم تا با زدن npm run dev یا npm start به جای سرور nextjs سرور خودمون اجرا بشه. البته میتونین تنظینات بیشتری رو هم بزارین مثلا حالت پروداکشن رو برای start بزارین که من فعلا بهش نیاز ندارم ..بعدا میفهمین چراخب بریم برای ساختن فایل server.jsساده ترین حالت فایل سرور چیزی شبیه به این فایلهاول express و nextjs ایمپورت شدن و بعد پورت و حالت پروداکشن یا دولوپ مشخص شده .بعد یه سرور سرو شده که تمامی درخواست های رسیده رو پاس میده به nextjs.حالا شما میتونین بعد از زدن دستور npm run build دستور npm run dev رو بزنین و پروژه تون رو با express بالا بیارین .توو نسخه ی جدید next خیلی از کمبود ها رو پوشش داده و نیاز برنامه نویسا به express کمتر شده .مثلا داینامیک روتینگ هارو بهتر از قبل هندل میکنه ولی باز من express رو ترجیح میدم ..اینجا شما میتونین پروکسی تعریف کنین, میتونین مقادیر کوکی ها و هدر هارو چک کنین و بر اساس اون کاری انجام بدین .. میتونین فایل های استاتیک رو از جای دلخواهتون سرو کنین و میتونین از کلی از پلاگین هایی که برای express نوشته شده توی برنامه تون استفاده کنین.من پروژه رو روی گیت هاب گذاشتم و قدم به قدم داریم میریم جلو..لینکش اینجاست https://github.com/straxico/react-strix قدم بعدی داکرایز کردن پروژه هست

ریاکت برای غارنشینان 9 (git)

مهران مطیعی — Sat, 07 Sep 2019 05:20:02 +0430

تا اینجا کلی تنظیم و کانفیگ انجام دادیم و دیگه وقتشه که git رو بیاریم وسط ..البته میشد و باید از همون اول گیت رو راه مینداختیم ولی خب من دلم میخواست اولین کامیتمون یه کم پر و پیمون باشهواسه کار کردن با گیت لازم نیست چیزی بلد باشی ..فقط کافیه گیت رو از آدرس زیر نصب کنین و باقیش رو بسپارین به vscodehttps://git-scm.com/downloadsخب بعد از نصب گیت میریم توی vscode و از منوی کنار روی source control کلیک میکنیمخیلی واضح میگه هنوز چیزی نیست و با زدن + گیت به پروژه اضافه میشهبعد از انجام این کار شما با همچین صفحه ای روبه رو میشیناین صفحه میگه شما بیشتر از 5000 فایل دارین که کامیت نشده ..در حالی که من به زور تعداد فایل هام به 20 تا میرسه...این فایل ها مربوط به گتابخونه هایی هست که نصب کردیم و یا فایل هاییه که موقع build نکست میسازه ...گیت این امکان رو داره که این نوع فایل هارو نادیده بگیره ..برای این کار در روت پروژه یه فایل به نام .gitignore بسازین و پوشه ها و فایل هایی که نمیخواین و تغییراتشون براتون مهم نیست رو بزارین توشبعد از ایگنور کردن دو تا پوشه میبینین که تعداد تغییرات شد 12 تا.برای این که این تغییرات ثبت بشه کافیه توی کادر بالا یه متن در مورد تغییرات بنویسین و روی اون تیک کلیک کنین تا تغییرات کامیت بشه. خب ما الن یه گیت داریم که فقط روی کامپیوتر خودمونه و به جایی وصل نیست ..بهتره این پروژه رو اپن سورس کنیمش و فایل هارو روی گیت هاب منتشر کنیم .برای این که یه گیت محلی رو به گیت هاب وصل کنیم میتونستیم کارای دیگه ای هم بکنیم ولی الان اول یه ریپوزیتوری با اسم react-strix روی گیت هاب میسازم و بعد توی vscode کد ctrl+shift+p رو میزنم و داخلش مینویسم git add remote اینتر میکنم و نام ریپو و url ریپو رو که از gthub رفتم وارد میکنم و این دوتا به هم وصل میشنوقتی روی اون علامت پایین کلیک میکنین یه پنجره باز میشه و بعد از لاگین شدن داخل گیت هاب فایل هاتون پوش میشه ..به همین سادگی ...حالا میتونین برین توی لینک گیت هابتون و فایل هاتون رو ببینینالان آدرس گیت ما اینه https://github.com/straxico/react-strix اگه یه نگاهی بندازین میبینین که پوشه های خالی کامیت نشده ..هر وقت که داخل این پوشه ها فایلی قرار بدیم خود به خود وارد گیت میشه .از حالا به بعد هر تغییری که میدیم همراه با کامیت پوش میکنیم روی سرور ..جلوتر که بریم دو تا شاخه ی جدا درست میکنیم و با گیت بیشتر کار خواهیم داشت ..فعلا همین بسه مونهاسمشو گذاشتم react-strix ...دوسش دارم

ریاکت برای غارنشینان 8 (resolve import)

مهران مطیعی — Sat, 07 Sep 2019 04:27:42 +0430

یکی از دردسر های کار با ریاکت اینه که به طور دیفالت برای ایمپورت کردن فایل ها باید آدرس دهی رو یا از روت پروژه و یا پوشه ای که داخلشی شروع کنی .بنابراین ما گاهی شاهد همچین ایمپورت هایی هستیمimport Button from 'src/components/atom/buttom'و یا import Button from '../../../../atom/buttom'در حالی که دلم میخواد بدون توجه به این که کجا هستم اینجوری ایمپورت کنم import Buttom from 'atom/buttom'برای این کار لازمه تا تنظیمات تایپ اسکریپت رو عوض کنیمبا توجه به پوشه هایی که قبلا ساختیم فایل tsconfig.json رو به شکل زیر در میاریم ... بخشی که به فایل اضافه شده رو علامت زدمالان تایپ اسکریپت کد مارو میشناسه ولی eslint نمیتونه کار کنه و ارور میده که ایمپورت ها درست نیستبرای این که درست شه باید تنظیمات eslint رو کمی دستکاری کنیم . دوتا روش داریم یکی این که مجدد توی تنظیمات eslint بیایم و path هارو معرفی کنیم و یا کاری کنیم که eslint تنظیمات تایپ اسکریپت رو بخونه که من دومی رو ترجیح میدم ..برای دومی لازمه که یه کتابخونه نصب کنیم....! پس اینو نصب میکنیمnpm install --save-dev eslint-import-resolver-typescriptو حالا کافیه ستینگ زیر رو توی eslintrc.json اضافه کنیمو حالا به سادگی میتونیم ایمپورت هامون رو انجام بدیم.برای نمونه من دوتا فایل ساختم و یکی رو داخل دیگری ایمپورت میکنماینجوری import هامون تمیز هستن و موقع ایمپورت کردن با نوشتن atom تمامی فایل های قابل ایمپورت نمایش داده میشن و کار کردن خیلی ساده میشه ...جلوتر میبینین که با نصب افزونه ها حتی دیگه نیاز به ایمپورت هم نخواهیم داشت و فایل هایی که در کد استفاده میکنیم خودکار ایمپورت میشن.اما بزارین یه قدم دیگه هم بریم جلوتر.یعنی چی؟ما اگه این فایل رو داخل یه تست ایمپورت کنیم چی؟ آیا jest هم تنظیماتمون رو میشناشه؟خب من یه فایل داخل تست ایمپورت کردم و میبینید که تست فیلد شد.خب باز برای این مشکل دو راه وجود داره که من راه دوم رو انتخاب میکنم.(این که تنظیمات از یه جا صورت بگیره بعدا خیلی بهمون کمک میکنه). پس پکیج زیر رو نصب میکنیمnpm install --save-dev jest-module-name-mapper در روت پروژه یه فایل برای تنظیمات jest به نام jest.config.js میسازیم و مثل زیر کانفیگش میکنیم.کافیه یه بار vscode ببندین و باز کنین و ایندفه میبینین که تست پاس شدهآپدیت:علاوه بر این روش یه روش بهتر هم هست که برای من تا همین امروز صبح جواب نمیدادکافیه پکیج زیر رو نصب کنین npm install --save-dev ts-jestتنظیمات زیر رو در فایل jest.config.js اضافه کنین و در تنظیمات tsconfig.json مقدار preserve رو به react تغییر بدیدمن چون این تغییر رو انجام نداده بودم برام کار نمیکرد و نمیدونستم مشکلم از کجاست ..امروز صبح به طور اتفاقی در این ایشو مشکل و راه حل رو پیدا کردم و کلی خوشحال شدم ...بازم آپدیت: عاقا همون روش اول بهتره انگار https://github.com/zeit/next.js/issues/8663 تقریبا میشه گفت که تموم شد.ولی وقتی استوری بوک رو هم نصب کنیم باز لازمه که براش کمی کانفیگ انجام بدیم که اون رو بعدا انجام میدیم

ریاکت برای غار نشینان 7 (ساختار پوشه ها)

مهران مطیعی — Fri, 06 Sep 2019 22:16:03 +0430

خب ... یه جورایی میشه گفت هیچ قانونی برای ساختار پوشه ها وجود نداره و شما میتونین هر طوری که دوست دارین کدهاتون رو بنویسی. میدونیم که یه برنامه ی ریاکت ترکیبی از کامپوننت هاست ...هر کامپوننت هم تعدادی فایل js , فایل تست , فایل استایل, فایل استوری ,فایل ترجمه و... ممکنه داشته باشه. وقتی پروژه هارو نگاه میکنی میبینی که از دو تا شیوه ی کلی استفاده میکنندر شیوه ی اول توی روت پروژه یه پوشه برای تست ,یه پوشه برای استوری , یه پوشه برای ترجمه , یه پوشه برای استایل و در نهایت یه پوشه برای کامپوننت ها درست میکنن ...حالا متناسب با هر پوشه و فایل جدیدی که برای کامپوننت ساخته میشه پوشه ها و فایل هایی هم داخل استایل, تست,ترجمه و استوری میسازن.این شیوه خوبیش اینه که همه ی استایل ها داخل یه پوشه هستن یا همه ی تست ها داخل یه پوشه هستن. بدیش هم اینه که شما وقتی با یه کامپوننت کار داری بایداجزای مختلفش رو در جاهای مختلف دنبالش بگردی که اصلا به نظرم جالب نیست.در شیوه ی دوم هر فایلی که مربوط به یه کامپوننت هست همراه همون کامپوننت و توی همون پوشه نگه داری میشه ..اینجوری اگه بخوای کامپوننتی رو ادیت کنی همه ی فایل های مربوط به اون رو میتونی یه جا ببینی و ویرایش کنی و یا اگه بخوای محل قرارگیری کامپوننتی رو عوض کنی کافیه همین یه پوشه رو جابه جا کنی. من این شیوه رو بیشتر دوست دارم.ما چون داریم از next.jsاستفاده میکنیم مجبوریم پوشه ی page و static رو داشته باشیم ..البته next.js قراره در نسخه های جدیدش این اجازه رو به ما بده که بتونیم این پوشه هارو جابه جا کنیم. پوشه ی page رو که قبلا دیده بودید ...پوشه ی static هم برای نگه داری فایل های استاتیک کاربرد داره ..هر فایلی مثل yourfile.jpg که داخل این پوشه قرار بگیره از طریق آدرس زیر قابل دسترسه 127.0.0.1:3000/static/yourfile.jpgالبته اگه شما از express استفاده میکنین میتونین فایل های استاتیکتون رو از هر جایی که دوست دارین هندل کنینیه پوشه به اسم src درست میکنیم تا سایر پوشه های پروژه رو داخلش بسازیم . پس تا اینجا ما داخل روت پروژه مون همچین ساختاری داریمپوشه vscode شامل تنظیمات vscode هست. پوشه ی node_module هم شامل کتابخونه هایی هست که ما نصب کردیم. پوشه ی next هم بعد از این که پروژه رو بیلد میگیرید به صورت خودکار ساخته میشه و شامل بیلد ها و... هست. اون فایل های زیر هم تنظیماتی هستن که قبلا دیدیمشونو اما در ادامهما برای پروژه مون واقعا به چه پوشه هایی نیاز داریم؟پوشه ی apiیه بخش زیادی از یه پروژه ی فرانت استفاده از api هایی هست که بک اند برامون ساخته ..این که بخوایم مدام در وسط کد api هارو صدا بزنیم کار قشنگی نیست و من ترجیح میدم توابعی برای کار با api هام بسازم و اونارو توی پوشه ی api نگه داری کنم..و اگه قراره تنظیمات خاصی براشون در نظر بگیرم یه بار این کار رو انجام بدم..شاید شما دلتون نخواد همچین پوشه ای داشته باشین و حس کنین نهایتا لازم دارین که یه فایل به اسم api داشته باشین ...تجربه ی شخصی میگه اگه یه روز حس کردی لازم داری یه فایل به اسم api یا rout یا هر چی داشته باشی... به زودی و با گسترش پروژه ت لازم میشه اون فایل رو به چند تا فایل ریز تر بشکونی.پوشه ی contextما برای مدیریت استیت هامون داریم از context ها استفاده میکنیم برای مدیریت راحت تر کانتکست ها بهتره اونارو یه جا نگه دارید ..کجا بهتر از پوشه ای به نام context? پوشه ی typeوقتی که دارید از تایپ اسکریپت استفاده میکنید تایپ ها خیلی کمکتون میکنن. اگه تایپی رو داخل فایلی با فرمت .d.ts بزارید . در کل پروژه بدون نیاز به ایمپورت میتونین از اون تایپ استفاده کنین .اینقابلیت خیلی کمکتون میکنه. بنابراین برای قسمت های مختلف بهتره که چند تا فایل برای نگه داری تایپ ها داشته باشیم و اونارو توی پوشه ی type قرار بدیمپوشه ی hookنسخه ی جدید react بهمون اجازه میده تا کاستون هوک هایی بسازیم که کاربرد های متنوعی دارند و جاهای مختلفی از پروژه بتونیم از اونا استفاده کنیم ما این هوک هارو در پوشه hook نگه داری میکنیمپوشه ی utilبعضی از فانکشن ها هستند که کارهایی رو برای ما انجام میدن و ما دوس داریم در سراسر پروژه هر جا که لازم شد بتونیم ازشون استفاده کنیم .چنین فانکشن هایی رو توی پوشه ی util نگه میداریم ...میپرسی مثل چی؟ مثل فانکشن تبدیل عدد به حروف.پوشه ی constantهر پروژه ای مجموعه ای از مقادیر ثابت داره که میتونیم اینجا نگه داریشون کنیم و یا اگه حس میکنین مقادیرتون کمه میتونین موقتا توی یه فایل و در پوشه ی util نگه داریدشونو اما پوشه ی componentاول اینو بگم که ما دولوپر هایی هستیم که مجبوریم موقع تنظیم express نقش بک اند هارو بازی کنیم , موقع تنظیم چرخه ci\cd و دیپلوی و nginx نقش دواپس هارو بازی کنیم و موقع طراحی کامپوننت ها هم گریزی به دیزاینر ها بزنیم. اینو نگفتم که بگم خیلی خفنیم ...اینو گفتم که بدونین خیلی کم و در حدی که لازم مون میشه از سایر چیزا میدونیم .. پس قطعا من توی خیلی از قضایا همه ی مسیر هارو نرفتم و فقط قدر مسیری که تا اینجا طی کردم دانش دارم.اتمیک دیزاین یا atomic designخیلی خلاصه میگه که شما برای طراحی یک سایت باید اون رو به قسمت های کوچیکی که قابلیت استفاده ی مجدد داشته باشه بشکونین یک سایت از قسمت های مختلفی تشکیل شده که میشه اون هارو به اجزای ریز تری تقسیم کرد .اسم کوچک ترین اجزا رو atom گذاشتن که شامل دکمه ها, آیکن ها , input, select و ... میشهترکیب این اجزای کوچک تر منجر به تشکیل قسمت های بزرگتری میشه که بهش میگن مولکول ...مثلا شما اگه هدر یک سایت رو نگاه کنی شامل منوی جستجو , ناوبار, لوگو و... هست . حالا خود منوی جستجو شامل یک input و یک button هست .شما ممکنه این منوی جستجو رو علاوه بر هدر در منوی کناری صفحات دیگر هم استفاده کنین بنابراین بهتره خود منوی جستجو رو هم در جایی جدا نگه داریم . و اگه لازم شد دوباره ازش استفاده کنیممیتونین در این لینک بیشتر در مورد اتمیک دیزاین بخونین http:/w.sotouch.on.ca/a/c%20gn.pdf atom,molecule,organism,templateو توی هر کدوم از این پوشه ها پوشه هایی متناسب با اسم کامپوننت ها ساخته میشه که شامل فایل های تست و استوری و ... هست.این سیستم چند تا چیز رو به ما دیکته میکنههیچ ایمپورتی از لایه های بالاتر به لایه های پایین تر نباید داشته باشیم.لایه ی اتم ها نباید لاجیک وابسته ای داشته باشه این که اسمشون چیه اصلا مهم نیست بلکه ساختارشون مهمه ..شما میتونین از اسم های دیگه ای مثل element,component,module,layout استفاده کنینما فقط توی اتم ها اجازه داریم از المان هایی مثل