ਆਪਣੇ Lovable ਪ੍ਰੋਜੈਕਟ ਨੂੰ ਐਕਸਪੋਰਟ ਕਿਵੇਂ ਕਰੀਏ ਅਤੇ ਡਿਵੈਲਪਮੈਂਟ ਦੀ ਰਫ਼ਤਾਰ ਕਿਵੇਂ ਵਧਾਈਏ
ਤੁਸੀਂ Lovable ਨਾਲ ਕੁਝ ਸ਼ਾਨਦਾਰ ਬਣਾਇਆ ਹੈ। ਤੁਸੀਂ ਇਸਨੂੰ ਬੀਟਾ ਯੂਜ਼ਰਸ ਨੂੰ ਦਿਖਾਇਆ ਹੈ। ਹੁਣ ਤੁਸੀਂ ਇੱਕ ਅੜਚਨ ਦਾ ਸਾਹਮਣਾ ਕਰ ਰਹੇ ਹੋ। ਤੁਹਾਨੂੰ ਉਹ ਫੀਚਰ ਚਾਹੀਦੇ ਹਨ ਜੋ Lovable ਵਿੱਚ ਅਜੇ ਤੱਕ ਨਹੀਂ ਹਨ। ਤੁਹਾਨੂੰ ਬਿਹਤਰ ਹੋਸਟਿੰਗ ਜਾਂ ਕਸਟਮ ਪ੍ਰਾਈਸਿੰਗ ਮਾਡਲਾਂ ਦੀ ਲੋੜ ਹੈ।
ਤੁਹਾਨੂੰ ਦੁਬਾਰਾ ਸ਼ੁਰੂ ਕਰਨ ਦੀ ਲੋੜ ਨਹੀਂ ਹੈ। Lovable ਤੁਹਾਨੂੰ ਸਾਫ਼, ਪ੍ਰੋਡਕਸ਼ਨ-ਰੈਡੀ ਕੋਡ ਦਿੰਦਾ ਹੈ। ਤੁਸੀਂ ਇਸਦੇ ਮਾਲਕ ਬਣ ਸਕਦੇ ਹੋ, ਇਸਨੂੰ ਕਿਤੇ ਵੀ ਹੋਸਟ ਕਰ ਸਕਦੇ ਹੋ, ਅਤੇ ਇਸਨੂੰ ਵਧਾਉਣ ਲਈ AI ਕੋਡਿੰਗ ਏਜੰਟਾਂ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ।
ਇੱਥੇ ਦੱਸਿਆ ਗਿਆ ਹੈ ਕਿ ਤੁਸੀਂ ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਨੂੰ ਐਕਸਪੋਰਟ ਕਿਵੇਂ ਕਰ ਸਕਦੇ ਹੋ ਅਤੇ ਤੇਜ਼ੀ ਨਾਲ ਅੱਗੇ ਕਿਵੇਂ ਵਧ ਸਕਦੇ ਹੋ।
𝗧𝗵𝗲 𝗘𝘅𝗽𝗼𝗿𝘁 𝗣𝗿𝗼𝗰𝗲𝘀𝘀
ਤੁਹਾਨੂੰ ਇੱਕ Vite-ਅਧਾਰਤ React ਐਪ ਮਿਲਦੀ ਹੈ। ਤੁਹਾਡਾ UI, ਕੰਪੋਨੈਂਟਸ ਅਤੇ ਲੌਜਿਕ ਬਰਕਰਾਰ ਰਹਿੰਦੇ ਹਨ। ਤੁਹਾਡਾ ਡਿਜ਼ਾਈਨ ਕੰਮ ਸੁਰੱਖਿਅਤ ਰਹਿੰਦਾ ਹੈ।
ਦੋ ਗੱਲਾਂ ਦਾ ਨੋਟ ਕਰੋ:
- Stripe ਜਾਂ Auth ਵਰਗੀਆਂ ਮੈਨੇਜਡ ਸੇਵਾਵਾਂ ਸਟੈਂਡਅਲੋਨ ਕੋਡ ਵਜੋਂ ਐਕਸਪੋਰਟ ਨਹੀਂ ਹੁੰਦੀਆਂ।
- ਤੁਹਾਨੂੰ ਪਹਿਲਾਂ ਆਪਣੇ ਇੰਟੀਗ੍ਰੇਸ਼ਨਾਂ ਦਾ ਦਸਤਾਵੇਜ਼ ਬਣਾਉਣਾ ਚਾਹੀਦਾ ਹੈ। ਆਪਣੀਆਂ ਸੈਟਿੰਗਾਂ ਅਤੇ API keys ਦੇ ਸਕ੍ਰੀਨਸ਼ੌਟ ਲੈ ਲਓ।
𝗧𝗵𝗲 𝗕𝗲𝘀𝘁 𝗪𝗮𝘆: 𝗚𝗶𝘁𝗛𝘂𝗯 𝗜𝗻𝘁𝗲𝗴𝗿𝗮𝘁𝗶𝗼𝗻
ਲੰਬੇ ਸਮੇਂ ਦੇ ਕੰਮ ਲਈ ਮੈਨੂਅਲ ZIP ਡਾਊਨਲੋਡਸ ਦੀ ਵਰਤੋਂ ਨਾ ਕਰੋ। GitHub ਇੰਟੀਗ੍ਰੇਸ਼ਨ ਦੀ ਵਰਤੋਂ ਕਰੋ। ਇਹ ਆਪਣੇ ਆਪ ਸਿੰਕ ਹੋ ਜਾਂਦਾ ਹੈ ਅਤੇ Vercel ਜਾਂ Netlify 'ਤੇ ਇੱਕ-ਕਲਿੱਕ ਡਿਪਲੋਏ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ।
ਇਹ ਕਿਵੇਂ ਕਰਨਾ ਹੈ:
- ਆਪਣਾ Lovable ਐਡੀਟਰ ਖੋਲ੍ਹੋ।
- ਉੱਪਰ ਸੱਜੇ ਪਾਸੇ GitHub ਆਈਕਨ 'ਤੇ ਕਲਿੱਕ ਕਰੋ।
- "Connect to GitHub" ਚੁਣੋ ਅਤੇ ਇਸਨੂੰ ਅਥੋਰਾਈਜ਼ ਕਰੋ।
- ਆਪਣੇ ਰਿਪੋਜ਼ੀਟਰੀ (repository) ਦਾ ਨਾਮ ਅਤੇ ਪ੍ਰਾਈਵੇਸੀ ਸੈਟਿੰਗਾਂ ਚੁਣੋ।
- "Create Repository" 'ਤੇ ਕਲਿੱਕ ਕਰੋ।
git clone [url]ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਰੈਪੋ ਨੂੰ ਆਪਣੇ ਕੰਪਿਊਟਰ 'ਤੇ ਕਲੋਨ ਕਰੋ।
𝗧𝗵𝗿𝗲𝗲 𝗖𝗼𝗺𝗺𝗼𝗻 𝗣𝗶𝘁𝗳𝗮𝗹𝗹𝘀
- Missing Environment Variables ਸੁਰੱਖਿਆ ਲਈ Lovable ਤੁਹਾਡੀਆਂ ਸੀਕਰੇਟ API keys ਨੂੰ ਐਕਸਪੋਰਟ ਨਹੀਂ ਕਰਦਾ। ਜੇਕਰ ਤੁਸੀਂ ਇਸਨੂੰ ਛੱਡ ਦਿੰਦੇ ਹੋ, ਤਾਂ ਤੁਹਾਡੀ ਐਪ ਚੱਲਣ ਵਿੱਚ ਅਸਫਲ ਰਹੇਗੀ।
- ਸੁਧਾਰ: ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਰੂਟ ਵਿੱਚ
.env.localਨਾਮ ਦੀ ਇੱਕ ਫਾਈਲ ਬਣਾਓ। ਉੱਥੇ ਆਪਣੀਆਂ Supabase ਅਤੇ Stripe keys ਜੋੜੋ।
- Outdated Dependencies ਕਦੇ-ਕਦੇ ਬੰਡਲ ਕੀਤੇ ਪੈਕੇਜਾਂ ਨੂੰ ਅੱਪਡੇਟ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ।
- ਸੁਧਾਰ: ਆਪਣੇ ਟਰਮੀਨਲ ਵਿੱਚ ਇਹ ਕਮਾਂਡਾਂ ਚਲਾਓ:
•
npm install•npm audit fix
- Breaking the Logic Helper functions ਜਾਂ API wrappers ਨੂੰ ਡਿਲੀਟ ਨਾ ਕਰੋ। ਇਹ ਤੁਹਾਡੇ ਫਰੰਟਐਂਡ ਨੂੰ ਬੈਕਐਂਡ ਨਾਲ ਜੋੜਦੇ ਹਨ।
- ਸੁਧਾਰ: ਕੋਈ ਵੀ ਕੋਡ ਬਦਲਣ ਤੋਂ ਪਹਿਲਾਂ
npm run devਚਲਾਓ ਅਤੇ ਹਰ ਯੂਜ਼ਰ ਫਲੋਅ (user flow) ਦੀ ਜਾਂਚ ਕਰੋ।
𝗡𝗲𝘅𝘁 𝗦𝘁𝗲𝗽𝘀 𝘄𝗶𝘁𝗵 𝗔𝗜
ਇੱਕ ਵਾਰ ਜਦੋਂ ਤੁਹਾਡਾ ਕੋਡ ਲੋਕਲ ਹੋ ਜਾਂਦਾ ਹੈ, ਤਾਂ Cursor ਜਾਂ Claude Code ਵਰਗੇ AI ਏਜੰਟ ਦੀ ਵਰਤੋਂ ਕਰੋ। ਇਹ ਟੂਲ ਤੁਹਾਨੂੰ Lovable ਐਡੀਟਰ ਨਾਲੋਂ ਤੇਜ਼ੀ ਨਾਲ ਫੀਚਰ ਬਣਾਉਣ ਵਿੱਚ ਮਦਦ ਕਰਦੇ ਹਨ।
ਸ਼ੁਰੂਆਤ ਕਿਵੇਂ ਕਰੀਏ:
- AI ਐਡੀਟਰ ਵਿੱਚ ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਫੋਲਡਰ ਨੂੰ ਖੋਲ੍ਹੋ।
- ਏਜੰਟ ਨੂੰ codebase ਅਤੇ ਫਾਈਲ ਸਟ੍ਰਕਚਰ ਦੀ ਸਮੀਖਿਆ ਕਰਨ ਲਈ ਕਹੋ।
- ਆਪਣੇ ਅਗਲੇ ਦਸ ਫੀਚਰ ਬਣਾਉਣਾ ਸ਼ੁਰੂ ਕਰੋ।
ਸਿਰਫ਼ "ਸਾਫ਼" ਕੋਡ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ ਆਪਣਾ ਸਾਰਾ ਸਿਸਟਮ ਦੁਬਾਰਾ ਨਾ ਲਿਖੋ। ਜੇਕਰ ਤੁਹਾਡਾ ਲੌਗਇਨ ਅਤੇ ਬਿਲਿੰਗ ਕੰਮ ਕਰ ਰਿਹਾ ਹੈ, ਤਾਂ ਉਸਨੂੰ ਉਵੇਂ ਹੀ ਰਹਿਣ ਦਿਓ। ਉਹਨਾਂ ਫੀਚਰਾਂ 'ਤੇ ਧਿਆਨ ਕੇਂਦਰਿਤ ਕਰੋ ਜਿਨ੍ਹਾਂ ਦੀ ਤੁਹਾਡੇ ਯੂਜ਼ਰਸ ਮੰਗ ਕਰ ਰਹੇ ਹਨ।
ਐਕਸਪੋਰਟ ਕਰਨਾ ਇੱਕ ਅੱਗੇ ਵਧਣ ਵਾਲਾ ਕਦਮ ਹੈ। ਤੁਸੀਂ ਆਪਣੇ ਰੋਡਮੈਪ 'ਤੇ ਪੂਰਾ ਕੰਟਰੋਲ ਪ੍ਰਾਪਤ ਕਰਦੇ ਹੋ।
Source: https://dev.to/braingrid/how-to-export-your-lovable-project-and-accelerate-development-5hlp
Optional learning community: https://t.me/GyaanSetuAi