Vite ਕੀ ਹੈ? ਐਪ ਬਣਾਉਣ ਵਾਲਿਆਂ ਲਈ ਸਰਲ ਗਾਈਡ

Vite (ਉਚਾਰਨ "ਵੀਟ", ਫ਼ਰਾਂਸੀਸੀ ਵਿੱਚ "quick" ਦਾ ਮਤਲਬ) ਵੈੱਬਸਾਈਟਾਂ ਅਤੇ ਵੈੱਬ ਐਪਾਂ ਲਈ ਇੱਕ ਬਿਲਡ ਟੂਲ ਹੈ। ਤੁਸੀਂ ਕੰਮ ਕਰਦੇ ਸਮੇਂ ਇਹ ਇੱਕ ਡਿਵੈਲਪਮੈਂਟ ਸਰਵਰ ਚਲਾਉਂਦਾ ਹੈ ਜੋ ਤੁਹਾਡੇ ਬਦਲਾਅ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਲਗਭਗ ਤੁਰੰਤ ਦਿਖਾਉਂਦਾ ਹੈ। ਲਾਂਚ ਲਈ ਤਿਆਰ ਹੋਣ ਤੇ ਇਹ ਤੁਹਾਡੇ ਕੋਡ ਨੂੰ ਛੋਟੀਆਂ, ਅਨੁਕੂਲਿਤ ਫ਼ਾਈਲਾਂ ਵਿੱਚ ਪੈਕ ਕਰਦਾ ਹੈ ਜੋ ਕੋਈ ਵੀ ਵੈੱਬ ਹੋਸਟ ਪਰੋਸ ਸਕਦਾ ਹੈ। ਇਹ ਮੁਫ਼ਤ ਅਤੇ ਓਪਨ ਸੋਰਸ ਹੈ, ਅਤੇ ਬਹੁਤ ਸਾਰੇ React, Vue ਅਤੇ Svelte ਪ੍ਰੋਜੈਕਟਾਂ ਦੇ ਪਿੱਛੇ ਡਿਫ਼ਾਲਟ ਟੂਲ ਹੈ।

AI ਨਾਲ ਬਣਾਉਂਦੇ ਸਮੇਂ Vite ਕਿਉਂ ਅਹਿਮ ਹੈ

ਤੁਸੀਂ ਸ਼ਾਇਦ ਕਦੇ Vite ਦੀ ਕਮਾਂਡ ਨਾ ਲਿਖੋ, ਪਰ ਜੇ ਤੁਹਾਡੀ ਐਪ ਕਿਸੇ AI ਐਪ ਬਿਲਡਰ ਨਾਲ ਬਣੀ ਹੈ, ਤਾਂ ਸੰਭਾਵਨਾ ਹੈ ਕਿ Vite ਹੀ ਉਸਨੂੰ ਚਲਾ ਰਿਹਾ ਹੈ। Mythex ਨਵੇਂ ਪ੍ਰੋਜੈਕਟ Vite + React + TypeScript + Tailwind ਉੱਤੇ ਸ਼ੁਰੂ ਕਰਦਾ ਹੈ, ਜਦ ਤੱਕ ਤੁਸੀਂ ਕੁਝ ਹੋਰ ਨਾ ਮੰਗੋ (ਤਕਨੀਕ ਕਿਵੇਂ ਚੁਣੀ ਜਾਂਦੀ ਹੈ)।

Vite ਨੂੰ ਸਮਝਣਾ ਤੁਹਾਡੀ ਇਹ ਗੱਲਾਂ ਵਿੱਚ ਮਦਦ ਕਰਦਾ ਹੈ:

• Preview ਨੂੰ ਸਮਝਣਾ। ਲਾਈਵ ਪ੍ਰੀਵਿਊ ਜੋ AI ਵੱਲੋਂ ਫ਼ਾਈਲਾਂ ਬਦਲਣ ਨਾਲ ਅੱਪਡੇਟ ਹੁੰਦਾ ਹੈ, ਆਮ ਤੌਰ 'ਤੇ ਇੱਕ Vite ਡਿਵੈਲਪਮੈਂਟ ਸਰਵਰ ਹੁੰਦਾ ਹੈ।
• ਡਿਪਲੌਇਮੈਂਟ ਨੂੰ ਸਮਝਣਾ। Vite ਐਪ ਸਟੈਟਿਕ ਫ਼ਾਈਲਾਂ ਦਾ ਇੱਕ ਫ਼ੋਲਡਰ ਬਣ ਜਾਂਦੀ ਹੈ — HTML, JavaScript, CSS ਅਤੇ ਤਸਵੀਰਾਂ — ਜੋ ਹੋਸਟ ਕਰਨਾ ਸਸਤਾ ਅਤੇ ਸਾਦਾ ਹੈ।
• ਗਲਤੀ ਸੁਨੇਹੇ ਪੜ੍ਹਨਾ। ਜਦੋਂ ਪ੍ਰੀਵਿਊ ਲਾਲ ਐਰਰ ਓਵਰਲੇ ਜਾਂ ਖਾਲੀ ਪੰਨਾ ਦਿਖਾਵੇ, ਤਾਂ ਅਕਸਰ ਇਹ Vite ਦੀ ਰਿਪੋਰਟ ਹੁੰਦੀ ਹੈ ਕਿ ਕੋਈ ਫ਼ਾਈਲ ਕੰਪਾਈਲ ਨਹੀਂ ਹੋਈ।
• ਇਸਦੀਆਂ ਹੱਦਾਂ ਜਾਣਨਾ। Vite ਫ਼ਰੰਟਐਂਡ ਬਣਾਉਂਦਾ ਹੈ। ਜੇ ਤੁਹਾਡੀ ਐਪ ਨੂੰ ਬੈਕਐਂਡ ਚਾਹੀਦਾ ਹੈ — ਡੇਟਾਬੇਸ, ਗੁਪਤ API ਕੁੰਜੀਆਂ, ਭੁਗਤਾਨ — ਤਾਂ ਉਹ ਕਿਤੇ ਹੋਰ ਚੱਲਦਾ ਹੈ। ਵੇਖੋ ਫ਼ਰੰਟਐਂਡ ਬਨਾਮ ਬੈਕਐਂਡ।

ਰੋਜ਼ਾਨਾ ਦੀ ਇੱਕ ਮਿਸਾਲ

ਇੱਕ ਰਸੋਈ ਬਾਰੇ ਸੋਚੋ।

• ਸੇਵਾ ਤੋਂ ਪਹਿਲਾਂ ਦੀ ਤਿਆਰੀ (ਡਿਵੈਲਪਮੈਂਟ)। ਸ਼ੈੱਫ ਹਰ ਪਕਵਾਨ ਨੂੰ ਚੱਖਦਾ ਅਤੇ ਅਨੁਕੂਲ ਕਰਦਾ ਹੈ। ਮਸਾਲਾ ਬਦਲੋ, ਇੱਕ ਸਕਿੰਟ ਬਾਅਦ ਦੁਬਾਰਾ ਚੱਖੋ। ਇਹ Vite ਦਾ ਡਿਵੈਲਪਮੈਂਟ ਸਰਵਰ ਹੈ: ਤੁਸੀਂ ਫ਼ਾਈਲ ਬਦਲਦੇ ਹੋ, ਪੰਨਾ ਤੁਰੰਤ ਅੱਪਡੇਟ ਹੁੰਦਾ ਹੈ, ਅਕਸਰ ਬਿਨਾਂ ਉਹ ਕੁਝ ਗੁਆਏ ਜੋ ਤੁਸੀਂ ਫ਼ਾਰਮ ਵਿੱਚ ਟਾਈਪ ਕੀਤਾ ਸੀ।
• ਕੈਟਰਿੰਗ ਆਰਡਰ (ਪ੍ਰੋਡਕਸ਼ਨ)। ਸਭ ਕੁਝ ਪਕਾਇਆ, ਹਿੱਸਿਆਂ ਵਿੱਚ ਵੰਡਿਆ, ਪੈਕ ਅਤੇ ਲੇਬਲ ਕੀਤਾ ਜਾਂਦਾ ਹੈ ਤਾਂ ਜੋ ਇਹ ਚੰਗੀ ਤਰ੍ਹਾਂ ਸਫ਼ਰ ਕਰੇ ਅਤੇ ਕਿਤੇ ਵੀ ਪਰੋਸਿਆ ਜਾ ਸਕੇ। ਇਹ vite build ਹੈ: ਤੁਹਾਡਾ ਕੋਡ ਬੰਡਲ, ਛੋਟਾ ਅਤੇ ਫ਼ਿੰਗਰਪ੍ਰਿੰਟ ਕੀਤੀਆਂ ਫ਼ਾਈਲਾਂ ਵਿੱਚ ਬਦਲਦਾ ਹੈ ਜੋ ਕਿਸੇ ਵੀ ਹੋਸਟ ਲਈ ਤਿਆਰ ਹਨ।

ਇੱਕੋ ਜਿਹੀਆਂ ਰੈਸਿਪੀਆਂ, ਦੋ ਬਹੁਤ ਵੱਖਰੇ ਢੰਗ — ਅਤੇ Vite ਦੋਵੇਂ ਕਰਦਾ ਹੈ।

Vite ਅਸਲ ਵਿੱਚ ਕੀ ਕਰਦਾ ਹੈ

ਇੱਕ ਆਧੁਨਿਕ ਵੈੱਬ ਐਪ ਬਹੁਤ ਸਾਰੀਆਂ ਫ਼ਾਈਲਾਂ ਤੋਂ ਬਣਦੀ ਹੈ: ਕੰਪੋਨੈਂਟ, ਸਟਾਈਲ, ਤਸਵੀਰਾਂ ਅਤੇ ਤੀਜੀ-ਧਿਰ ਲਾਇਬ੍ਰੇਰੀਆਂ। ਬ੍ਰਾਊਜ਼ਰ ਇਹ ਸਭ ਉਵੇਂ ਨਹੀਂ ਵਰਤ ਸਕਦੇ ਜਿਵੇਂ ਲਿਖਿਆ ਹੈ। TypeScript ਨੂੰ JavaScript ਬਣਨਾ ਪੈਂਦਾ ਹੈ, React ਦਾ JSX ਬਦਲਣਾ ਪੈਂਦਾ ਹੈ, ਅਤੇ Tailwind ਦੀਆਂ ਕਲਾਸਾਂ CSS ਵਿੱਚ ਬਦਲਣੀਆਂ ਪੈਂਦੀਆਂ ਹਨ।

Vite ਇਹ ਦੋ ਢੰਗਾਂ ਵਿੱਚ ਸੰਭਾਲਦਾ ਹੈ:

ਪੁਰਾਣੇ ਟੂਲ ਕੁਝ ਦਿਖਾਉਣ ਤੋਂ ਪਹਿਲਾਂ ਪੂਰੀ ਐਪ ਬੰਡਲ ਕਰਦੇ ਸਨ, ਇਸ ਲਈ ਵੱਡਾ ਪ੍ਰੋਜੈਕਟ ਸ਼ੁਰੂ ਜਾਂ ਅੱਪਡੇਟ ਕਰਨ ਵਿੱਚ ਲੰਮਾ ਸਮਾਂ ਲੱਗ ਸਕਦਾ ਸੀ। Vite ਦੀ ਚਾਲ ਇਹ ਹੈ ਕਿ ਡਿਵੈਲਪਮੈਂਟ ਦੌਰਾਨ ਇਹ ਕਦਮ ਛੱਡ ਦਿੰਦਾ ਹੈ ਅਤੇ ਬ੍ਰਾਊਜ਼ਰ ਨੂੰ ਲੋੜ ਅਨੁਸਾਰ ਫ਼ਾਈਲਾਂ ਲੋਡ ਕਰਨ ਦਿੰਦਾ ਹੈ। ਪ੍ਰੋਡਕਸ਼ਨ ਲਈ ਇਹ ਅਜੇ ਵੀ ਬੰਡਲ ਕਰਦਾ ਹੈ — Vite 8 ਤੋਂ ਇੱਕ ਬੰਡਲਰ Rolldown ਨਾਲ — ਕਿਉਂਕਿ ਵਿਜ਼ਿਟਰਾਂ ਲਈ ਕਈ ਛੋਟੀਆਂ ਫ਼ਾਈਲਾਂ ਕੁਝ ਅਨੁਕੂਲਿਤ ਫ਼ਾਈਲਾਂ ਨਾਲੋਂ ਹੌਲੀ ਹੁੰਦੀਆਂ ਹਨ।

ਇੱਕ ਕੰਮ ਕੀਤੀ ਮਿਸਾਲ: ਇੱਕ Vite ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਕੀ ਹੈ

ਇੱਕ ਛੋਟੀ Vite + React ਐਪ ਲਗਭਗ ਇਸ ਤਰ੍ਹਾਂ ਦਿਸਦੀ ਹੈ:

my-app/
  index.html          ← the one HTML page the app starts from
  package.json        ← list of libraries and scripts (dev, build)
  vite.config.ts      ← Vite settings and plugins
  src/
    main.tsx          ← starts React and mounts it into index.html
    App.tsx           ← your app's top-level component
    index.css         ← styles, e.g. @import "tailwindcss";
  public/             ← files copied as-is (favicon, robots.txt)

ਅਤੇ package.json ਵਿੱਚ ਸਕ੍ਰਿਪਟਾਂ:

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}

ਹੁਣ ਇੱਕ ਬਦਲਾਅ ਦਾ ਪਿੱਛਾ ਕਰੋ:

1. ਤੁਸੀਂ AI ਨੂੰ ਕਹਿੰਦੇ ਹੋ "heading ਨੂੰ ਨੀਲਾ ਕਰੋ"।
2. ਇਹ App.tsx ਵਿੱਚ ਇੱਕ ਕਲਾਸ ਬਦਲਦਾ ਹੈ।
3. Vite ਵੇਖਦਾ ਹੈ ਕਿ ਫ਼ਾਈਲ ਬਦਲੀ ਹੈ, ਸਿਰਫ਼ ਉਹ ਫ਼ਾਈਲ ਬਦਲਦਾ ਹੈ ਅਤੇ ਬ੍ਰਾਊਜ਼ਰ ਨੂੰ ਅੱਪਡੇਟ ਭੇਜਦਾ ਹੈ।
4. ਪ੍ਰੀਵਿਊ ਵਿੱਚ heading ਨੀਲਾ ਹੋ ਜਾਂਦਾ ਹੈ, ਆਮ ਤੌਰ 'ਤੇ ਇੱਕ ਸਕਿੰਟ ਦੇ ਅੰਦਰ।

ਜਦੋਂ ਤੁਸੀਂ ਪ੍ਰਕਾਸ਼ਿਤ ਕਰਦੇ ਹੋ, vite build ਕੁਝ ਇਸ ਤਰ੍ਹਾਂ ਦਾ ਬਣਾਉਂਦਾ ਹੈ: dist/index.html ਅਤੇ dist/assets/index-a1b2c3.js। ਫ਼ਾਈਲ ਨਾਮ ਦਾ ਬੇਤਰਤੀਬ ਲੱਗਦਾ ਹਿੱਸਾ ਉਦੋਂ ਬਦਲਦਾ ਹੈ ਜਦੋਂ ਸਮੱਗਰੀ ਬਦਲਦੀ ਹੈ, ਤਾਂ ਜੋ ਬ੍ਰਾਊਜ਼ਰ ਅਤੇ CDNs ਫ਼ਾਈਲਾਂ ਨੂੰ ਲੰਮੇ ਸਮੇਂ ਲਈ ਕੈਸ਼ ਕਰ ਸਕਣ ਬਿਨਾਂ ਪੁਰਾਣਾ ਕੋਡ ਪਰੋਸੇ।

Vite ਵਿੱਚ ਵਾਤਾਵਰਣ ਵੇਰੀਏਬਲ

Vite ਸਿਰਫ਼ ਉਹ ਵੇਰੀਏਬਲ ਬ੍ਰਾਊਜ਼ਰ ਕੋਡ ਨੂੰ ਦਿੰਦਾ ਹੈ ਜਿਨ੍ਹਾਂ ਦੇ ਨਾਮ VITE_ ਨਾਲ ਸ਼ੁਰੂ ਹੁੰਦੇ ਹਨ, ਉਦਾਹਰਣ ਲਈ VITE_PUBLIC_MAP_ID। ਇਹ ਸੁਰੱਖਿਆ ਉਪਾਅ ਹੈ: ਬ੍ਰਾਊਜ਼ਰ ਕੋਡ ਵਿੱਚ ਜੋ ਵੀ ਹੈ ਉਹ ਵਿਜ਼ਿਟਰ ਵੇਖ ਸਕਦੇ ਹਨ, ਇਸ ਲਈ ਗੁਪਤ ਕੁੰਜੀਆਂ ਦਾ ਇਹ ਪ੍ਰੀਫ਼ਿਕਸ ਕਦੇ ਨਹੀਂ ਹੋਣਾ ਚਾਹੀਦਾ ਅਤੇ ਬੈਕਐਂਡ ਉੱਤੇ ਰਹਿਣੀਆਂ ਚਾਹੀਦੀਆਂ ਹਨ। ਵੇਖੋ ਵਾਤਾਵਰਣ ਵੇਰੀਏਬਲ ਅਤੇ ਸੀਕਰੇਟ।

ਮੁੱਖ ਸ਼ਬਦ

ਆਮ ਗ਼ਲਤਫ਼ਹਿਮੀਆਂ

• "Vite ਇੱਕ ਫ਼ਰੇਮਵਰਕ ਹੈ।" ਇਹ ਬਿਲਡ ਟੂਲ ਹੈ। React, Vue ਜਾਂ Svelte ਫ਼ਰੇਮਵਰਕ ਹੈ; Vite ਉਸਨੂੰ ਚਲਾਉਂਦਾ ਅਤੇ ਪੈਕ ਕਰਦਾ ਹੈ।
• "Vite ਐਪ ਵਿੱਚ ਬੈਕਐਂਡ ਹੁੰਦਾ ਹੈ।" ਇੱਕ ਆਮ Vite ਐਪ ਸਿਰਫ਼ ਫ਼ਰੰਟਐਂਡ ਹੈ। ਡੇਟਾਬੇਸ, ਲੌਗਇਨ ਅਤੇ ਗੁਪਤ ਕੁੰਜੀਆਂ ਲਈ ਨਾਲ ਇੱਕ ਸਰਵਰ ਜਾਂ API ਚਾਹੀਦਾ ਹੈ।
• "ਡਿਵ ਸਰਵਰ ਨੂੰ ਇੰਟਰਨੈੱਟ ਉੱਤੇ ਪਾਉਣਾ ਠੀਕ ਹੈ।" ਇਹ ਅਸਲ ਟ੍ਰੈਫ਼ਿਕ ਲਈ ਨਹੀਂ ਬਣਿਆ। ਹਮੇਸ਼ਾ ਪ੍ਰੋਡਕਸ਼ਨ ਬਿਲਡ ਦਾ ਆਉਟਪੁੱਟ ਡਿਪਲੌਏ ਕਰੋ।
• ".env ਵਿੱਚ ਕੁਝ ਵੀ ਗੁਪਤ ਹੈ।" Vite ਐਪ ਵਿੱਚ VITE_ ਵੇਰੀਏਬਲ ਹਰ ਵਿਜ਼ਿਟਰ ਦੀਆਂ ਡਾਊਨਲੋਡ ਹੋਈਆਂ ਫ਼ਾਈਲਾਂ ਵਿੱਚ ਪੱਕੇ ਹੋ ਜਾਂਦੇ ਹਨ।
• "ਕਿਸੇ ਪੰਨੇ ਦਾ 404 ਆਉਣਾ ਮਤਲਬ ਐਪ ਟੁੱਟੀ ਹੈ।" ਸਿੰਗਲ-ਪੇਜ ਐਪ ਵਿੱਚ ਹੋਸਟ ਨੂੰ ਹਰ ਰੂਟ ਨੂੰ index.html ਵੱਲ ਭੇਜਣਾ ਪੈਂਦਾ ਹੈ। ਇਹ ਹੋਸਟਿੰਗ ਸੈਟਿੰਗ ਹੈ — ਵੇਖੋ ਡਿਪਲੌਇ ਕਰਨ ਤੋਂ ਬਾਅਦ 404 ਗਲਤੀਆਂ ਕਿਵੇਂ ਠੀਕ ਕਰੀਏ।

ਆਪਣੇ AI ਬਿਲਡਰ ਤੋਂ ਕੀ ਮੰਗਣਾ ਹੈ

• "ਕੀ ਇਹ ਐਪ ਸਿਰਫ਼ Vite (ਫ਼ਰੰਟਐਂਡ) ਹੈ, ਜਾਂ ਇਸਦਾ ਬੈਕਐਂਡ ਵੀ ਹੈ? ਹਰ ਹਿੱਸਾ ਕਿੱਥੇ ਚੱਲਦਾ ਹੈ?"
• "ਪ੍ਰੋਡਕਸ਼ਨ ਬਿਲਡ ਚਲਾਓ ਅਤੇ ਪ੍ਰਕਾਸ਼ਿਤ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ ਹਰ ਗਲਤੀ ਤੇ ਚੇਤਾਵਨੀ ਠੀਕ ਕਰੋ।"
• "ਜਾਂਚੋ ਕਿ ਕੋਈ ਗੁਪਤ ਕੁੰਜੀ VITE_ ਵੇਰੀਏਬਲਾਂ ਵਿੱਚ ਜਾਂ ਫ਼ਰੰਟਐਂਡ ਕੋਡ ਵਿੱਚ ਕਿਤੇ ਵੀ ਨਹੀਂ ਹੈ।"
• "ਪ੍ਰੀਵਿਊ ਖਾਲੀ ਪੰਨਾ ਦਿਖਾਉਂਦਾ ਹੈ — Vite ਅਤੇ ਬ੍ਰਾਊਜ਼ਰ ਕੰਸੋਲ ਗਲਤੀਆਂ ਵੇਖ ਕੇ ਕਾਰਨ ਠੀਕ ਕਰੋ।" ਵੇਖੋ ਖਾਲੀ ਚਿੱਟਾ ਪੰਨਾ ਕਿਵੇਂ ਠੀਕ ਕਰੀਏ।
• "ਪ੍ਰਕਾਸ਼ਿਤ ਕਰਨ ਤੋਂ ਬਾਅਦ ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਕਿਸੇ ਵੀ ਪੰਨੇ ਦੇ URL ਨੂੰ ਰੀਫ਼ਰੈਸ਼ ਕਰਨਾ ਕੰਮ ਕਰਦਾ ਹੈ, ਸਿਰਫ਼ ਹੋਮ ਪੰਨੇ ਦਾ ਨਹੀਂ।"

Mythex ਵਿੱਚ Vite

ਹਰ ਨਵਾਂ Mythex ਪ੍ਰੋਜੈਕਟ Vite ਉੱਤੇ ਸ਼ੁਰੂ ਹੁੰਦਾ ਹੈ, ਜਦ ਤੱਕ ਤੁਸੀਂ Next.js, ਸਟੈਟਿਕ HTML ਜਾਂ ਕੋਈ ਹੋਰ ਬੈਕਐਂਡ ਨਾ ਮੰਗੋ। ਤੁਹਾਡੀ ਨਿੱਜੀ ਸੈਂਡਬਾਕਸ ਵਿੱਚ ਲਾਈਵ Preview ਏਜੰਟ ਵੱਲੋਂ ਫ਼ਾਈਲਾਂ ਬਦਲਣ ਨਾਲ ਅੱਪਡੇਟ ਹੁੰਦਾ ਹੈ, ਅਤੇ Publish ਐਪ ਨੂੰ ਬਣਾ ਕੇ ਡਿਪਲੌਏ ਕਰਦਾ ਹੈ — ਤੁਹਾਨੂੰ ਆਪ ਹੋਸਟਿੰਗ ਸੈੱਟ ਨਹੀਂ ਕਰਨੀ ਪੈਂਦੀ। ਜੇ ਬਾਅਦ ਵਿੱਚ ਤੁਹਾਨੂੰ API ਜਾਂ ਡੇਟਾਬੇਸ ਚਾਹੀਦਾ ਹੈ, ਤਾਂ ਚੈਟ ਵਿੱਚ ਮੰਗੋ ਅਤੇ Mythex Vite ਫ਼ਰੰਟ ਐਂਡ ਨਾਲ ਬੈਕਐਂਡ ਸੇਵਾ ਜੋੜ ਸਕਦਾ ਹੈ (ਮਲਟੀ-ਸਰਵਿਸ ਐਪਾਂ)।

ਸਵਾਲ