راهنمای تنظیم پروژه React برای استفاده در Appsan

در این راهنما، نحوه تنظیم یک پروژه React به‌گونه‌ای که فایل‌های build آن به پوشه webdist در پروژه Appsan منتقل شوند و همچنین پروژه در پوشه web مدیریت شود، آموزش داده می‌شود. این مراحل مشابه با تنظیمات پروژه Angular بوده ولی با در نظر گرفتن تفاوت‌های React و Vite تهیه شده است.

۱. ایجاد پوشه‌های مورد نیاز

ایجاد پوشه web:
در مسیر اصلی پروژه Appsan خود، یک پوشه به نام web ایجاد کنید. این پوشه محل قرارگیری پروژه‌های وب شماست.

ایجاد پوشه برای پروژه React:
در داخل پوشه web، یک پوشه به نام دلخواه برای پروژه React ایجاد کنید. مثلاً:

web/MyReactProject

۲. ایجاد پروژه React در مسیر مناسب

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

npm create vite@latest web/MyReactProject -- --template react

سپس وارد پوشه پروژه شده و پکیج‌ها را نصب کنید:

cd web/MyReactProject  
npm install

۳. تنظیم مسیر خروجی (build output)

برای ذخیره فایل‌های build در پوشه webdist، فایل vite.config.js را باز کرده و تنظیمات زیر را اضافه کنید:

export default defineConfig({
  base: './',
  build: {
    outDir: '../../webdist/MyReactProject',
    emptyOutDir: true,
  },
});

توجه: به جای MyReactProject در مسیر outDir نام پوشه‌ای که می‌خواهید در webdist بسازید را قرار دهید.

۴. تنظیم مسیر (Routing) برای استفاده از مسیرهای داینامیک

در صورتی که اپلیکیشن شما از مسیر داینامیک استفاده می‌کند، باید از HashRouter به جای BrowserRouter استفاده کنید.

مراحل:

1. نصب React Router:

   npm install react-router-dom

2. در فایل App.jsx به صورت زیر تغییر دهید:

   import { HashRouter, Routes, Route } from 'react-router-dom';
   function App() {
   return (
   <HashRouter>
   <Routes>
   <Route path="/" element={} />
   <Route path="/results" element={} />
   {/* مسیرهای دیگر */}
   </Routes>
   </HashRouter>
   );
   }

۵. ساخت پروژه

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

npm run build

با اجرای این دستور، فایل‌های نهایی در مسیر webdist/MyReactProject قرار می‌گیرند.

۶. استفاده از پروژه React در Appsan

در فایل XML مربوط به Appsan، عنصر <webpage> را به شکل زیر اضافه کنید:

<webpage src="MyReactProject" title="پروژه React من"/>

مطمئن شوید که src با نام پوشه‌ای که در webdist ساختید مطابقت داشته باشد.

نکات مهم

• پروژه React باید در مسیر web/[project-name] ایجاد شود.
• مسیر خروجی (outDir) در vite.config.js باید به ../../webdist/[project-name] تنظیم شود.
• مقدار base باید به './' تغییر یابد.
• برای جلوگیری از مشکلات در مسیرهای داینامیک، از HashRouter استفاده کنید.
• هر بار که تغییراتی در پروژه ایجاد می‌کنید، مجدداً دستور npm run build را اجرا نمایید.
• در فایل XML Appsan، مقدار src باید دقیقاً با نام خروجی در webdist یکسان باشد.