Terminal og editor — første prosjektoppsett i dempet lys

Jeg late ikke som jeg er utvikler på heltid. Jeg åpnet Cursor, ba om neste konkrete steg, og stoppet når hello-world lå i nettleseren. Oppsett er arbeidshest, ikke identitet.

Sti-notatet ditt

Du har brief og valgt stakk. Denne delen legger til: prosjektmappe kjører lokalt, og du har gjort første commit.

Mangler stakkvalget? Skriv «Vite + React + Cloudflare» (eller ditt varige alternativ) før du starter. Catch-up er én linje.

Historie

Første gang jeg skulle «sette opp et prosjekt», leste jeg tre guides samtidig og gjorde ingen av dem ferdig. Terminalen så ut som den dømte meg.

Så byttet jeg strategi. Én chat i Cursor. Én oppgave: lag prosjektet, få det til å kjøre, lagre første commit. Jeg kopierte kommandoer jeg forsto nok til å kjøre. Når noe feilet, limte jeg hele feilmeldingen inn og ba om ett neste steg. Ikke et kurs. Et par.

Da teksten «Vite» dukket opp i nettleseren lokalt, pustet jeg. Det var nok for den dagen. Resten kunne vente.

Prinsipp

Cursor er pair, ikke orakel. Du godkjenner hvert steg.

Du trenger ikke forstå hver fil. Du trenger å se siden lokalt, vite hvilken mappe som er «hjemmet», og ha et øyeblikksbilde (commit) før du eksperimenterer. AI foreslår. Du trykker Enter.

Hvordan

Hold det smalt. Målet er hello-world, ikke ferdig merkevare. Anbefalt sti i denne serien: Vite + React.

  1. Installer det du mangler — Node.js (så node og npm finnes i terminalen), Cursor, og Git. I Cursor: be den kjøre node -v og npm -v med deg. Mangler Node: installer LTS fra nodejs.org, lukk og åpne terminalen på nytt.
  2. Opprett prosjektet — i terminalen, i mappen der du vil ha prosjektet: npm create vite@latest . -- --template react (eller la Cursor kjøre tilsvarende). Velg JavaScript eller TypeScript én gang og bli der.
  3. Åpne hele mappen i Cursor — File → Open Folder på prosjektroten, ikke bare én .jsx-fil.
  4. Kjør lokalt — npm install, deretter npm run dev. Åpne adressen den skriver (ofte http://localhost:5173). Du skal se Vite/React-startsiden.
  5. Første commit — git init hvis nødvendig, så git add . og git commit -m "første oppsett".

Lim briefen inn i chatten når Cursor spør «hva bygger vi?». Da starter den ikke fra tom luft.

Hvis noe stopper deg

  • npm finnes ikke / «command not found»: Node er ikke installert, eller terminalen ble ikke startet på nytt etter install. Sjekk node -v.
  • Port 5173 er opptatt: Vite foreslår ofte en annen port (5174 …). Bruk den, eller stopp den andre prosessen. Noter URL-en du faktisk åpner.
  • Feil mappe: Du kjører kommandoer utenfor prosjektroten. I Cursor: sjekk at terminalen står i mappen med package.json.
  • Rød vegg av tekst: Ikke googler ti ting. Lim hele feilmeldingen inn i Cursor og be om ett neste steg.
Forklar mer Repo, lokal dev, commit

Repo = mappen med prosjektet, gjerne med Git så historikken lagres.

Lokal dev = siden kjører på din maskin mens du jobber. Ingen må se den ennå.

Commit = et lagret øyeblikksbilde: «dette virket». Greit å ha før du eksperimenterer videre.

Cursor = editor med AI som leser filene dine. Du chatter i kontekst av prosjektet. Du limer ikke blindt inn store endringer uten å se hva som skjedde i forhåndsvisningen.

Se forskjellen i praksis:

Vagt

«Jeg skal lære å kode først.»

Skarpt

«Mappen kjører lokalt. Jeg ser startsiden i nettleseren. Første commit er lagret.»

Vanlig felle

Å jage det perfekte oppsettet: lint, tester, CI, design system, før noe synlig finnes. Eller å late som du må forstå hver fil før du får lov til å kjøre. Stopp ved hello-world. Design kommer etterpå.

Slik så det ut hos meg

  1. Cursor opprettet Vite + React i en tom mappe.
  2. npm install og npm run dev. Nettleseren viste standard-siden på localhost:5173.
  3. Første commit: «første oppsett». Først deretter tok vi briefen inn mot layout.

Ingen teater om at jeg «kunne dette fra før». Når noe feilet, limte jeg feilen inn og tok ett steg.

Resultatet hos meg: en mappe jeg eide, med en lokal adresse jeg kunne peke på, og et commit å falle tilbake til.

Med AI

Jobb i prosjektmappen. Lim inn:

Tekst du kan lime inn i AI

Jeg har valgt stakk: Vite + React + Cloudflare (eller: [mitt valg]).
Brief (kort): [lim inn mål, tone, CTA, anti-mål]

Jeg er ikke utvikler på heltid. Vær pair, ikke foreleser.

Gi meg EN sjekkliste for i dag:
1) Opprette Vite+React-prosjekt
2) Åpne hele mappen i Cursor
3) Kjøre lokalt til jeg ser siden i nettleseren
4) Første git-commit

Én kommando om gangen. Hvis noe feiler, be meg lime inn HELE feilmeldingen.
Ikke legg til ekstra verktøy «for senere» i dag.

Tone: rolig, ærlig, ingen guru-språk.

Kjør stegene. Stopp når nettleseren viser prosjektet.

I dag (under 20 min)

Få prosjektet til å kjøre lokalt og gjør første commit. Skriv i sti-notatet: lokal URL (f.eks. http://localhost:5173) + «første commit: ja».

Kjører det ikke rent i dag? Noter hvor du stoppet (feilmelding i én linje) og ta resten i morgen. Det er greit.

Sjekk før du går videre

  • Nå: hello-world lokalt + første commit
  • Neste (Del 5): tokens og hero som føles som kart, ikke SaaS

Du har en levende mappe. Neste steg er å la den se ut som deg: farger, typografi og en hero uten dashboard-følelse. Briefen din blir synlig i første viewport.

Neste steg, når du er klar: Del 5 — Design uten dashboard-følelse →