استقرار React Apps با Vite: راهنمای کامل

Summarize this content to 400 words in Persian Lang
وقتی نوبت به ساخت اپلیکیشن های وب مدرن می رسد، واکنش نشان دهید به یک کتابخانه مورد علاقه برای توسعه دهندگان در سراسر جهان تبدیل شده است. انعطاف پذیر، قدرتمند و دارای یک اکوسیستم بزرگ است. با این حال، استقرار کارآمد React می‌تواند یک چالش باشد، به‌ویژه با افزایش تقاضا برای ساخت‌های سریع‌تر و فرآیندهای استقرار روان.

در این راهنما، ما به شما نشان خواهیم داد که چگونه یک برنامه React را با استفاده از آن استقرار دهید به سرعت – یک باندلر فوق سریع و سرور توسعه. Vite فرآیند را ساده می کند و به طور چشمگیری سرعت ساخت و بارگذاری در حین پرواز را افزایش می دهد. بیایید روند را طی کنیم!

چرا Vite for React؟

قبل از پرداختن به جزئیات فنی، اجازه دهید به طور خلاصه بفهمیم که چرا Vite انتخاب عالی برای برنامه‌های React است:

زمان ساخت سریع: Vite به دلیل فرآیند ساخت بسیار سریع خود شناخته شده است. از ماژول های ES استفاده می کند و بارگیری بسیار سریع در حین پرواز را فراهم می کند و سرعت توسعه را افزایش می دهد.

پشتیبانی را باز کنید: Vite با پشتیبانی داخلی از React ارائه می شود که به شما امکان می دهد بدون پیکربندی پیچیده به سرعت شروع کنید.

ساختمان های تولید بهینه: Vite به طور خودکار برنامه شما را در طول فرآیند ساخت بهینه می کند و یک برنامه React آماده برای تولید ارائه می دهد.

حالا بیایید جلو برویم و ببینیم که چگونه یک برنامه React را با Vite مستقر کنیم!

مرحله 1: برنامه React خود را با Vite تنظیم کنید

ابتدا باید یک برنامه React جدید با Vite ایجاد کنید. این مراحل را دنبال کنید:

یک پروژه جدید ایجاد کنید:

ترمینال خود را باز کنید و دستور زیر را برای ایجاد یک پروژه جدید با قالب Vite React اجرا کنید.

npm create vite@latest my-react-app –template react

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

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

وابستگی ها را نصب کنید:

به دایرکتوری پروژه بروید و وابستگی ها را نصب کنید.

bash
cd my-react-app
install npm

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

سرور توسعه را راه اندازی کنید:

برای اطمینان از اینکه همه چیز به درستی کار می کند، سرور توسعه را راه اندازی کنید.

bash
npm run dev

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

باید مشاهده کنید که سرور توسعه Vite در حال اجرا است و برنامه شما در دسترس است http://localhost:5173.

مرحله 2: پیکربندی Vite برای تولید

اکنون که برنامه React خود را به صورت محلی راه اندازی و اجرا کرده اید، اجازه دهید Vite را برای استقرار تولید پیکربندی کنیم.

پیکربندی ساخت را تنظیم کنید:

تنظیمات پیش‌فرض Vite معمولاً خوب هستند، اما ممکن است بخواهید خروجی را برای تولید تنظیم کنید. برای این کار، باز کنید vite.config.js و در صورت نیاز تنظیمات را ویرایش یا اضافه کنید. به عنوان مثال:

javascript
export default {
build: {
outDir: ‘build’, // Specify the output directory
sourcemap: true, // Generate source maps for debugging
minify: ‘esbuild’, // Use esbuild for minification
},
};

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

ایجاد اپلیکیشن برای تولید:

پس از پیکربندی، دستور زیر را برای ساخت اپلیکیشن برای تولید اجرا کنید.

bash
npm run build

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

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

مرحله 3: برنامه React خود را مستقر کنید

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

یک حساب Netlify ایجاد کنید:

اگر قبلاً ندارید به Netlify بروید و یک حساب کاربری ایجاد کنید.

مخزن GitHub خود را وصل کنید:

اگر پروژه شما در یک مخزن GitHub ذخیره شده است، حساب GitHub خود را به Netlify متصل کرده و پروژه خود را وارد کنید.

تنظیمات ساخت را پیکربندی کنید:

در تنظیمات ساخت، تنظیم کنید دستور ساخت به npm run build و دایرکتوری انتشار به dist. اینها تنظیمات پیش فرض پروژه های Vite هستند.

استقرار:

پس از تنظیم همه چیز، کلیک کنید استقرار سایت و Netlify به طور خودکار برنامه شما را ساخته و اجرا می کند. پس از چند لحظه، یک پیوند زنده به برنامه React مستقر شده خود دریافت خواهید کرد.

مرحله 4: استقرار را تأیید کنید

پس از تکمیل استقرار، از URL ارائه شده بازدید کنید و باید برنامه React خود را در حال اجرا ببینید. اگر استقرار خود را به درستی تنظیم کرده باشید، برنامه باید بلافاصله بارگیری شود و به آرامی اجرا شود.

افکار نهایی

با Vite، می‌توانید به راحتی برنامه‌های React را اجرا کنید و از ساخت‌های سریع و راه‌اندازی تولید بهینه بهره ببرید. چه در حال استقرار در Netlify، Vercel یا هر پلتفرم میزبانی دیگری باشید، Vite این فرآیند را ساده و ساده می کند.

FAB Builder یک پلتفرم یکپارچه ارائه می دهد که محصولات و ابزارها را به هم متصل می کند و ساخت برنامه ها را بدون نیاز به کد پیچیده برای تیم ها آسان می کند. با استفاده از Vite با React، توسعه‌دهندگان می‌توانند اطمینان حاصل کنند که برنامه‌هایشان به سرعت ساخته شده، برای عملکرد بهینه شده و در کمترین زمان آماده استقرار هستند.

برای تیم هایی که به دنبال توسعه برنامه های کاربردی هستند، به ویژه در زمینه های AI Simplified Analytics یا بازاریابی همه‌کانالی، این رویکرد عملکرد صاف، مقیاس پذیر و بدون درز را تضمین می کند.

npm create vite@latest my-react-app --template react

bash
cd my-react-app
install npm

bash
npm run dev

javascript
  export default {
    build: {
      outDir: 'build', // Specify the output directory
      sourcemap: true, // Generate source maps for debugging
      minify: 'esbuild', // Use esbuild for minification
    },
  };

bash
npm run build