Snel starten

Dit hoofdstuk leidt je door de installatie en het opstarten van comp-hub, wat niet meer dan 5 minuten kost.

Snelste manier — niets installeren

Voer dit uit in je projectmap en comp-hub start direct; npx haalt de CLI op wanneer dat nodig is:

npx comp-hub

Liever een permanente installatie? Zie Methode 1.

Vereisten

• Node.js >= 16.0.0
• npm >= 8.0.0

Ondersteunde frameworks

Framework	Versie	Status
Vue	2.x	✅ Ondersteund
Vue	3.x	✅ Ondersteund
React	18.x	✅ Ondersteund
React	17.x	✅ Ondersteund

Installatie

Methode 1: Globale installatie (aanbevolen)

Installeer de comp-hub CLI globaal. Na de installatie kun je het commando comphub direct gebruiken:

npm install comp-hub@latest -g

Methode 2: Installatie als lokale dev-dependency

Installeer alleen in het huidige project, geschikt voor samenwerking in een team:

npm install comp-hub@latest -D

Methode 3: Zonder installatie (npx)

Probeer comp-hub uit zonder iets te installeren — npx haalt de CLI op wanneer dat nodig is:

npx comp-hub

comp-hub is een van de binaire aliassen van de CLI (naast comphub en ch). Omdat de alias gelijk is aan de pakketnaam, lost npx comp-hub de CLI direct op en start hij.

Service starten

Starten na globale installatie

Voer dit uit in de projectmap:

comphub

Starten na lokale installatie

Als je lokaal met -D hebt geïnstalleerd, moet je via npx uitvoeren:

npx comphub

Starten zonder installatie

Sla het installeren helemaal over en draai de CLI via npx:

npx comp-hub

Na een geslaagde start toont de terminal uitvoer die lijkt op het volgende:

✓ comp-hub v0.44.11

   ██████╗  ██████╗  ███╗   ███╗ ██████╗       ██╗  ██╗ ██╗   ██╗ ██████╗
  ██╔════╝ ██╔═══██╗ ████╗ ████║ ██╔══██╗      ██║  ██║ ██║   ██║ ██╔══██╗
  ██║      ██║   ██║ ██╔████╔██║ ██████╔╝      ███████║ ██║   ██║ ██████╔╝
  ██║      ██║   ██║ ██║╚██╔╝██║ ██╔═══╝       ██╔══██║ ██║   ██║ ██╔══██╗
  ╚██████╗ ╚██████╔╝ ██║ ╚═╝ ██║ ██║           ██║  ██║ ╚██████╔╝ ██████╔╝
   ╚═════╝  ╚═════╝  ╚═╝     ╚═╝ ╚═╝           ╚═╝  ╚═╝  ╚═════╝  ╚═════╝

  Version  0.44.11
  Project  /home/user/projects/housing/vue2
  Hash     9de6965c
  Port     5478

  URL      http://localhost:5478/9de6965c/main/

  ─────────────────────────────────────────────

  comphub status                View all projects
  comphub stop    9de6965c      Stop current project
  comphub stop    --all         Stop all projects
  comphub kill                  Shutdown master

Open de weergegeven URL in je browser om naar het comp-hub-platform te gaan.

ch is een korte alias voor comphub. Na de banner streamt de CLI de MidwayJS-logs van het project; druk op Ctrl+C om te stoppen. Zie de CLI-referentie.

CLI-commandoregelparameters

Je kunt de startopties ook instellen via parameters op de commandoregel:

comphub [options]

Beschrijving van de parameters:

Parameter	Kort	Type	Standaard	Beschrijving
--port	-p	number	5478	Servicepoort
--dir	-d	path	"./"	Relatief pad naar de resourcemap
--log-level	-l	string	"error"	Logniveau: debug, info, warn, error

| --version | -v | - | - | Versienummer tonen | | --help | -h | - | - | Helptekst tonen |

Gebruiksvoorbeelden:

# Starten met een opgegeven poort
comphub -p 8080

# Map voor bronbestanden opgeven
comphub -d ./src

# Logniveau aanpassen
comphub -l debug

# Versienummer bekijken
comphub -v

# Helpinformatie bekijken
comphub -h

Configuratie

Om de componentmap op te geven of aangepaste proxyregels te configureren, maak je een .comphub.json- of .comphub.js-bestand aan in de hoofdmap van het project:

Indeling van het configuratiebestand

JSON-indeling (.comphub.json):

{
  "dir": "./src",
  "allowDebug": false
}

JS-indeling (.comphub.js):

NOTE

Let op het modulesysteem van je project — gebruik de exportsyntaxis die bij je project past.

• CommonJS (wanneer package.json geen "type": "module" of "type": "commonjs" heeft):

module.exports = {
  dir: './src',
  allowDebug: false
}

• ESM (wanneer package.json wel "type": "module" heeft):

export default {
  dir: './src',
  allowDebug: false
}

Configuratie-items

Configuratie-item	Type	Standaard	Beschrijving
dir	string	"./"	Relatief pad naar de hoofdmap van de componentcode. Tijdens uploaden/downloaden kunnen alleen deze map en de submappen daarvan worden gebruikt
allowDebug	boolean	false	Of de debugmodus is toegestaan
proxy	object	-	Aangepaste proxyregels, in dezelfde indeling als de opties van http-proxy-middleware

Prioriteit bij het laden van configuratiebestanden

1. Probeer eerst .comphub.json te laden
2. Als het JSON-bestand niet bestaat, probeer dan .comphub.js te laden
3. Als geen van beide bestaat, gebruik dan de standaardconfiguratie

Prioriteit van configuratie

Prioriteit van configuratiewaarden van hoog naar laag:

1. Parameters op de commandoregel (bijvoorbeeld -d ./src)
2. Configuratiebestand (.comphub.json of .comphub.js)
3. Standaardconfiguratie

Volgende stappen

Zodra de service draait, kun je:

• Component uploaden — Publiceer je componenten op het platform
• Preview & downloaden — Bekijk en gebruik componenten van anderen