React + Vite + Codespaces GitHub

در این مقاله، من به شما نشان می دهم که چگونه یک برنامه React را با Vite ایجاد کنید و کانتینر توسعه دهنده را برای اجرای آن در GitHub Codespaces پیکربندی کنید.

به گزارش سایت رسمی:

فضای کد یک محیط توسعه است که در فضای ابری میزبانی می شود. شما می توانید پروژه خود را برای GitHub Codespaces با قرار دادن فایل های پیکربندی در مخزن خود سفارشی کنید، که یک پیکربندی فضای کد قابل تکرار برای همه کاربران پروژه شما ایجاد می کند.

در حال حاضر GitHub Codespaces برای همه در دسترس است و شما تا 60 ساعت در ماه به صورت رایگان دریافت می کنید که برای آزمایش ها و پروژه های حیوانات خانگی کافی است.

ساخت اپلیکیشن React با Vite.js

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

1. برنامه را بسازید – یکی از این دستورات را اجرا کنید

# npm 6.x
npm create vite@latest devc-react-app --template react-ts

# npm 7+, extra double-dash is needed:
npm create vite@latest devc-react-app -- --template react-ts

# yarn
yarn create vite devc-react-app --template react-ts

2. نصب و اجرا کنید

cd devc-react-app

npm install
npm run dev

برنامه شما باید روی یک پورت تصادفی اجرا شود.

3. پورت در حال اجرا را تغییر دهید

باز کن vite.config.ts و صادرات پیش فرض را به این تغییر دهید:

export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000
  }
})

4. نصب برنامه های افزودنی

باید دایرکتوری پروژه را در VS Code باز کنید و پسوند Dev Containers را نصب کنید.

5. Dev Container را ایجاد کنید

پس از نصب، آن را اجرا کنید Create Dev Container... را فرمان داده و انتخاب کنید universal قالب

VS Code فایل پیکربندی کانتینر توسعه دهنده را به پروژه شما اضافه می کند: .devcontainer/devcontainer.json.

هنگامی که فایل اضافه شد، ممکن است توسط VS Code از شما خواسته شود که پوشه را در یک ظرف توسعه دهنده باز کنید.

بیایید فعلا از این موضوع بگذریم و ابتدا روی پیکربندی کانتینر توسعه دهنده تمرکز کنیم.

دستورالعمل های دقیق را می توانید در اینجا بیابید: با توسعه Containers در Visual Studio Code و اینجا شروع کنید:
توسعه در داخل یک کانتینر با استفاده از برنامه توسعه از راه دور کد ویژوال استودیو

6. پیکربندی ظرف توسعه

الان باز است .devcontainer/devcontainer.json و چند چیز را پیکربندی کنید:

• forwardPorts – مانند مرحله 3
• portAttributes – این اختیاری است، اما به شما امکان می دهد یک نام به پورت اختصاص دهید
• updateContentCommand – هنگام ایجاد کانتینر، وابستگی ها را نصب کنید
• postAttachCommand – هنگامی که ظرف آماده است برنامه را اجرا کنید

همچنین می توانید یک فایل را طوری پیکربندی کنید که به صورت خودکار در فضای کد باز شود customizations.codespaces.openFiles یا افزونه‌های VS Code باید در فضاهای کد و محفظه برنامه‌نویس نصب شوند customizations.vscode.extensions.

گزینه های پیکربندی بسیار بیشتری وجود دارد، اما من در اینجا روی آنها تمرکز نمی کنم.

  "forwardPorts": [3000],
  "portsAttributes": {
    "3000": {
      "label": "React App",
      "onAutoForward": "openPreview"
    }
  },
  "updateContentCommand": "npm install",
  "postAttachCommand": "npm run dev",

  // Configure tool-specific properties.
  "customizations": {
    "codespaces": {
      "openFiles": ["src/App.tsx"]
    },
    "vscode": {
      "extensions": [
        "dbaeumer.vscode-eslint",
        "esbenp.prettier-vscode",
      ]
    },
//...

ویژگی های پورت

7. دستور شروع را پیکربندی کنید

به طور پیش‌فرض، Vite در فضاهای کد کار نمی‌کند – حتی اگر برنامه در حال اجرا باشد، نمی‌توانید محتوای صفحه‌ای را در مرورگر ببینید.

برای رفع این مشکل، باید اصلاح کنید package.json و تغییر دهید scripts.dev با اضافه کردن --host پارامتر:

"scripts": {
  "dev": "vite --host"
}

این است فوت و فن جایی پیدا نکردم و زمان زیادی را صرف جستجو کردم.

Remainder: این دستوری است که کانتینر توسعه دهنده به عنوان اجرا می شود "postAttachCommand": "npm run dev" در آغاز.

8. به GitHub فشار دهید

اکنون می توانید مخزن را به GitHub فشار دهید و آن را در Codespaces باز کنید:

متن سبز رنگ ‘codespaces’ را در گوشه سمت چپ پایین مرورگر خود خواهید دید.

موارد اضافی

در Dev Container محلی باز کنید

برای باز کردن یک پروژه در یک ظرف توسعه دهنده محلی، باید:

1. Docker را نصب و اجرا کنید
2. پوشه پروژه را در VS Code باز کنید، سپس از شما پرسیده می شود که آیا می خواهید آن را در کانتینر توسعه دهنده باز کنید. می‌توانید آن را باز کنید یا در ظرف برنامه‌نویس کلون کنید
   • دوباره در ظرف برنامه نویس باز کنید – فایل‌ها در جایی که هستند باقی می‌مانند و شما مستقیماً از حجم پیوند شده Docker روی آنها کار می‌کنید
   • کلون در حجم – برای کاربران ویندوز با WSL2 ترجیح داده می شود. یک کپی از پروژه را در ظرف و حجم داکر شبیه سازی می کند. این گزینه در ویندوز بسیار سریعتر است.

دستورالعمل های دقیق را می توانید در اینجا بیابید: با توسعه Containers در Visual Studio Code و اینجا شروع کنید:
توسعه در داخل یک کانتینر با استفاده از برنامه توسعه از راه دور کد ویژوال استودیو

اگر مخزن خود را به صورت محلی ندارید و می خواهید آن را مستقیماً از GitHub در یک ظرف توسعه دهنده محلی کلون کنید، می توانید این کار را از داخل VS Code انجام دهید:
> Dev containers: Clone repository in Container Volume

اجرای CRA در Codespaces

برای اجرای یک برنامه React ایجاد شده با CRA (create-react-app) باید تغییر دهید start فرمان در package.json:

  "scripts": {
    "start": "BROWSER=none WDS_SOCKET_PORT=0 react-scripts start"
    //...
  },

این برای رفع بارگذاری مجدد داغ پس از هر تغییر لازم است.

می توانید مخزن GitHub برای این مقاله را در اینجا پیدا کنید