برنامه‌های Vite

ساخت، استقرار و اجرای یک برنامه Vite

در این راهنما نحوه‌ی اجرای یک برنامه Vite را در فینگ یاد خواهیم گرفت.

برنامه hello-vite

می‌توانیم با وارد کردن یکی از دستورهای زیر، یک برنامه‌ی Vite.js ایجاد کنیم تا به‌طور خودکار همه چیز را برای ما تنظیم کند.

$ npm create vite@latest hello-vite
# or
$ yarn create vite hello-vite
# or
$ pnpm create vite hello-vite

• با اجرای هر یک از دستورهای بالا، صفحه زیر برای ما نمایش داده می‌شود که می‌توانیم فریمورک مورد نظر و همچنین زبان (جاوا اسکریپت یا تایپ اسکریپت) آن را انتخاب کنیم:

$ yarn create vite hello-vite
? Select a framework: › - Use arrow-keys. Return to submit.
❯   vanilla
    vue
    react
    preact
    lit
    svelte

• با انجام دادن مراحل بالا، کتابخانه‌ها و تنظیمات پیش فرض نصب و اضافه خواهد شد.

// package.json
{
  "name": "hello-vite",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "devDependencies": {
    ...
  }
}

• همچنین با اجرای دستور بالا و انتخاب فریمورک وانیلا، یک پروژه‌ی vite با تنظیمات پیش فرض ایجاد شده که دارای فایل main.js می‌باشد:

// main.js
import './style.css'

document.querySelector('#app').innerHTML = 
`
  <h1>Hello Vite!</h1>
`

اجرای برنامه

برای اینکه پروژه‌ی ما به درستی اجرا شود ابتدا باید با توجه به پکیج منیجری که برنامه vite را با آن نصب کرده‌ایم، دستور yarn و یا npm install را اجرا کنیم تا وابستگی‌های موجود در yarn.lock و یا package-lock.json نصب شود. سپس دستور زیر را وارد می‌کنیم تا برنامه‌ی ما اجرا شود:

$ yarn dev
yarn run v1.22.17
$ vite

  vite v2.9.9 dev server running at:

  > Local: http://localhost:3000/
  > Network: # use `--host` to expose

  ready in 309ms.

اکنون http://localhost:3000 را در مرورگر خود باز کرده تا مطمئن شویم برنامه vite ما کار می‌کند.

• بعداز اجرای موفقیت آمیز برنامه، اکنون می‌توانیم آن را جهت استقرار بر روی سرویس ابری فینگ آماده کنیم.

استقرار برنامه vite در فینگ

برای استقرار برنامه‌ی خود بر روی سکوی ابری فینگ، باید یک برنامه را ایجاد کنید. برای اطلاع از چگونگی ایجاد آن، به بخش ساخت برنامه در فینگ مراجعه کنید.

ایجاد فایل fing.yaml

در ریشه اصلی پروژه خود، فایلی را با نام fing.yaml ایجاد می‌کنیم و اطلاعات پایه‌ای برنامه‌ی خود را در آن قرار می‌دهیم. که می‌توان نام برنامه، پلتفرمی که از آن استفاده می‌کنیم و همچنین پورتی که برنامه‌ی ما بر روی آن listen می‌کند را مشخص کنیم.

# fing.yaml
app: "hello-vite"
platform: "vite"
port: 80

نصب فینگ cli و ورود به آن

برنامه‌ی vite ما آماده‌ی استقرار بر روی سکوی ابری فینگ می‌باشد و این بدین معناست که ما برای مدیریت برنامه‌های خود به فینگ cli نیاز داریم. اگر هنوز آن را نصب نکرده‌اید به راهنمای نصب ما بروید و بعد از نصب، وارد حساب خود شوید.

دستور استقرار

بعد از ورود به حساب خود در فینگ CLI، در مسیر اصلی پروژه‌ی خود دستور زیر را وارد می‌کنیم تا اولین استقرار انجام شود:

$ fing up

مشاهده خروجی

بعد از انجام مراحل قبلی و اولین استقرار، فینگ برای برنامه‌ی ما زیر دامنه‌ای اختصاص می‌دهد که می‌توانیم از طریق آن از صحت استقرار برنامه خود در سرویس ابری فینگ مطمئن شویم.

زیر دامنه‌ی ما به این صورت خواهد بود: https://hello-vite.onfing.ir