دسته بندی ها

نوشته های اخیر

آموزش شیرپوینت
آموزش نصب شیرپوینت
آموزش نصب SharePoint ۶ دی, ۱۴۰۴

برچسب ها

javascript در sharepoint spfx چیست آموزش شیرپوینت آموزش نصب spfx برنامه نویسی در SharePoint برنامه نویسی در شیرپوینت توسعه شیرپوینت چگونه به شیرپوینت کد javascript اضاقه کنم راهنمای شیرپوینت سفارشی سازی شیرپوینت

آموزش قدم به قدم نصب spfx

🚀 آموزش کامل و ساده آماده‌سازی محیط توسعه SPFx

(SharePoint Framework Prerequisites + Setup Guide)

برای توسعه WebPart و Extension در SharePoint (Online یا On-Prem)، باید ابتدا محیط SPFx را درست و اصولی آماده کنید. راهنمای زیر نسخه‌ی کاملاً بهینه و سئو شده است.

 

🔧 ۱) پیش‌نیازهای نصب SPFx (Prerequisites)
 
✔ سیستم‌عامل

  • ویندوز

  • macOS

  • لینوکس (برای توسعه لوکال کاملاً مناسب است)

✔ ویرایشگر پیشنهادی

  • VS Code (بهترین و سبک‌ترین انتخاب برای SPFx)

✔ نصب Node.js

Node.js را فقط از سایت رسمی دریافت کنید:
https://nodejs.org

 

 

⚠ کدام نسخه Node برای SPFx مناسب است؟ (نکته بسیار مهم)

انتخاب نسخه‌ی درست Node مهم‌ترین قدم است؛ زیرا SPFx فقط با نسخه‌های مشخصی از Node کار می‌کند.

 

🔵 اگر هدف شما SharePoint Online (جدیدترین SPFx) است:

 

  • از نسخه Node LTS همان نسخه SPFx استفاده کنید.

  • مایکروسافت در Microsoft Learn جدول سازگاری (Compatibility Table) منتشر می‌کند.
    (معمولاً SPFx جدید از Node 18 یا Node 22 پشتیبانی می‌کند.)

🔵 اگر هدف شما SharePoint Server 2019 (On-Prem) است:

  • SPFx نسخه 1.4.1 یا نسخه‌های سازگار را باید نصب کنید.

  • این نسخه فقط با Node 6 یا Node 8 کار می‌کند.
    بنابراین انتخاب Node مطابق نسخه SPFx الزامی است.

🧰 ۲) نصب nvm و مدیریت نسخه‌های Node

برای جلوگیری از تداخل نسخه‌ها، حتماً از nvm استفاده کنید.

نصب nvm (macOS / Linux):

 
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.4/install.sh | bash
source ~/.nvm/nvm.sh

مثال: نصب Node مناسب SPFx مدرن (Node 18)

 
nvm install 18
nvm use 18
node -v

مثال: نصب Node 8 برای SPFx 1.4.1 (SharePoint 2019)

 
nvm install 8
nvm use 8
node -v

🛠 ۳) نصب Yeoman، SPFx Generator و Gulp

 
npm install -g yo @microsoft/generator-sharepoint
npm install -g gulp

اگر خطای دسترسی داشتید، ترمینال را با Run as Administrator باز کنید.

📁 ۴) ایجاد پروژه SPFx

ساخت فولدر پروژه:

 
mkdir my-spfx-project
cd my-spfx-project

اجرای Yeoman برای ساخت پروژه:

 
yo @microsoft/sharepoint

در مرحله ساخت:

  • نام پروژه

  • نوع (WebPart یا Extension)

  • توضیحات

  • انتخاب فریم‌ورک (React توصیه می‌شود)

بعد از پایان، npm install به‌صورت خودکار اجرا می‌شود.

👨‍💻 ۵) اجرای محلی و تست در Workbench

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

 
gulp serve

آدرس تست محلی:

 
https://localhost:4321/temp/workbench.html

به‌راحتی می‌توانید WebPart را Drag & Drop کرده و تست کنید.

 

📦 ۶) آماده‌سازی نهایی برای انتشار

 

زمان انتشار (Production):

 
gulp bundle --ship
gulp package-solution --ship

فایل خروجی:

 
sharepoint/solution/*.sppkg

این فایل را باید در App Catalog آپلود کنید.

 

☁ ۷) آپلود در App Catalog و انتشار

🔵 SharePoint Online:

 

  • ورود به Admin Center

  • باز کردن App Catalog

  • آپلود فایل .sppkg

  • در صورت نیاز گزینه Available to all sites را فعال کنید

🔵 SharePoint 2019:

 

  • وارد سایت App Catalog (مثلاً: /sites/AppCatalog) شوید

  • فایل را آپلود و فعال کنید

  •  

➕ ۸) اضافه کردن WebPart به صفحه

 

  1. صفحه را Edit کنید

  2. روی علامت + بزنید

  3. WebPart خود را انتخاب کنید

  4. تنظیمات آن را ویرایش و منتشر کنید

🔄 ۹) بروزرسانی WebPart پس از تغییر کد

هر بار که تغییر دادید:

 
gulp bundle --ship
gulp package-solution --ship

بعد در App Catalog فایل را Replace کنید.

اگر بروزرسانی نمایش داده نشد:

  • کش مرورگر را پاک کنید

  • یا چند دقیقه صبر کنید (CDN cache)

🩺 ۱۰) نکات مهم و عیب‌یابی (Troubleshooting)

 

❗ خطای نسخه Node / خطای npm

۹۰٪ مشکلات مربوط به نسخه اشتباه Node است.
با این دستور چک کنید:

 
node -v

❗ gulp serve خطا می‌دهد؟

  • generator قدیمی یا ناسازگار است

  • پوشه node_modules را حذف و دوباره نصب کنید:

 
rm -rf node_modules
npm install

❗ مشکل CORS در Workbench آنلاین

از workbench واقعی سایت استفاده کنید:

 
https://<site>/_layouts/15/workbench.aspx

🛡 بهترین روش‌ها (Best Practices)

  • از TypeScript (strict mode) استفاده کنید

  • وابستگی‌ها را مرتب بررسی کنید

  • برای ارتباط با SharePoint از PnPjs استفاده کنید (بهینه، امن و ساده)

اشتراک گذاری :