راهنمای تنظیم پروژه 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) برای استفاده از مسیرهای داینامیک در Appsan

در صورتی که اپلیکیشن شما از مسیر داینامیک (مانند domain.com/x/y) استفاده می‌کند، باید از HashRouter به جای BrowserRouter استفاده شود.

مراحل:

۱. نصب React Router:

npm install react-router-dom

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

import { HashRouter, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <HashRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/results" element={<Results />} />
        {/* مسیرهای دیگر */}
      </Routes>
    </HashRouter>
  );
}

با این کار، آدرس‌ها در مرورگر به صورت /#/results نمایش داده می‌شوند که باعث می‌شود پروژه در Appsan حتی با مسیرهای داینامیک نیز درست اجرا شود.

---

۵. ساخت پروژه

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

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 یکسان باشد.