Ändra en sida — end-to-end

Vad du bygger

Ditt eget Lovable-projekt öppnat lokalt på din dator i kodverktyget Cursor. Du har hela din app redo för att göra avancerade ändringar med hjälp av AI, säkert sammankopplat med ditt eget GitHub-konto.

Innan du börjar

• Ett konto på Lovable med ett projekt du vill jobba vidare på.
• Ett gratis konto på GitHub för att spara koden i molnet.
• Det AI-baserade kodverktyget Cursor installerat på din dator.

Steg för steg

1. Koppla Lovable till GitHub – Klicka på GitHub-ikonen uppe i det högra hörnet inuti ditt Lovable-projekt. Om du inte har kopplat ditt GitHub-konto tidigare följer du instruktionerna på skärmen för att godkänna kopplingen.
2. Skapa ditt kodarkiv – Klicka på knappen Sync eller Create repository i Lovable för att skicka över din app till GitHub.
3. Kopiera länken till ditt projekt – Klicka på GitHub-länken som skapats i Lovable för att öppna ditt nya kodarkiv (repository) på GitHub. Kopiera hela webbadressen (URL:en) från webbläsarens adressfält.
4. Klona projektet i Cursor – Öppna programmet Cursor på din dator. Klicka på File i toppmenyn och välj sedan Clone Repository.
5. Klistra in länken – Klistra in GitHub-URL:en du nyss kopierade i sökfältet som dyker upp högst upp i Cursor och tryck på Enter. Välj en mapp på din dator där du vill spara projektet och klicka på OK.
6. Vänta på nedladdningen – Ge Cursor runt 15 sekunder att hämta alla filer från GitHub och installera det som behövs i bakgrunden.
7. Öppna din startsida – Leta reda på filträdet till vänster i Cursor. Klicka dig in i mappen src, sedan mappen pages och öppna filen Index.tsx. Det här är källkoden till din startsida.

Byggloftets tips

• Vår maskot Bygge påminner alltid om att ta ett djupt andetag när man ser mycket kod för första gången. Det kan se överväldigande ut, men kom ihåg att du inte behöver förstå allt själv — Cursor hjälper dig att navigera och ändra precis det du pekar på.
• Aktivera automatisk synkning i Lovable om du vill kunna hoppa fritt mellan att bygga med Lovables enkla chatt och Cursors mer avancerade verktyg.
• Spara ofta. Använd snabbkommandot Cmd + S (Mac) eller Ctrl + S (Windows) för att spara dina ändringar i Cursor innan du testar dem.

Vanliga fel

• "Repository is private eller behörighetsfel": Du behöver ge Lovable rätt att skriva till din GitHub. Gå till inställningarna i Lovable och gör om kopplingen till GitHub, och se till att godkänna alla behörigheter.
• "Beroenden misslyckas eller rödmarkerade fel i koden": Öppna den inbyggda terminalen i Cursor via toppmenyn (Terminal -> New Terminal) och skriv npm install (eller bun install om det är det ditt projekt använder) och tryck Enter.
• "Cursor hittar inte din kod": Om sidopanelen är helt tom, klicka på File och sedan Open Folder i Cursor, och välj mappen där du sparade det klonade projektet.

Du är klar när…

Du ser källkoden för din startsida i filen Index.tsx på skärmen i Cursor och har projektets alla filer synliga i den vänstra sidomenyn.