نشر تطبيقات React

يُعدّ النشر المرحلة الأخيرة في تطوير تطبيق React. سنستعرض في هذا الدرس مختلف خيارات النشر والتحسينات اللازمة.

التحضير للنشر

بناء نسخة الإنتاج (Build)

npm run build

ينشئ هذا الأمر مجلد build يحتوي على تطبيقك بعد تحسينه للإنتاج.

إعداد متغيرات البيئة

# .env.production
REACT_APP_API_URL=https://api.production.com
REACT_APP_ANALYTICS_ID=UA-XXXXXXXX-X

منصات النشر الشائعة

Netlify

1. تثبيت Netlify CLI :

npm install -g netlify-cli

2. النشر :

netlify deploy

3. الإعداد (netlify.toml) :

[build]
  command = "npm run build"
  publish = "build"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

Vercel

1. تثبيت Vercel CLI :

npm install -g vercel

2. النشر :

vercel

3. الإعداد (vercel.json) :

{
  "version": 2,
  "builds": [
    {
      "src": "package.json",
      "use": "@vercel/static-build",
      "config": { "distDir": "build" }
    }
  ]
}

GitHub Pages

1. تثبيت الاعتماديات :

npm install gh-pages --save-dev

2. الإعداد (package.json) :

{
  "homepage": "https://votre-username.github.io/votre-repo",
  "scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  }
}