Weihnachtsangebot 2025! 🎄

[Tyantreides]

Hallo zusammen,

ich arbeite mich gerade in die Adapterentwicklung ein und habe Probleme mit der Nutzung des devServers in Verbindung mit den react Funktionalitäten.

Immer dann wenn wenn ich mit mit Hilfe des Adapter Creators (npx @iobroker/create-adapter) einen Adapter erstelle, der entweder in auf der Config Seite oder auf einer Tab Seite react nutzen soll, kann ich den dev Server mit "dev-server run default" oder "dev-server watch default" nicht sauber starten.

Wie es aussieht wird nur ein react build des adapters erstellt und ein nodemon gestartet. Aber wie komme ich jetzt auf die app ohne dass ein ioBroker Admin gestartet wird?

Wenn ich bei der Adaptererstellung kein react nutze wird durch "dev-server watch default" der Adapter ja direkt in eine ioBroker Instanz gepackt und ein Webserver mit dem von mir konfigurierten Port gestartet unter der ich die ioBroker Instanz dann aufrufen kann.

Kann mir dabei jemand helfen?

Beste Grüße
Chris

[AlCalzone]

@tyantreides sagte in Probleme mit devserver bei adapter mit react:

Aber wie komme ich jetzt auf die app ohne dass ein ioBroker Admin gestartet wird?

Du öffnest die Adapterseite im ioBroker Admin, der im Dev-Server gestartet wird. Ganz egal ob mit oder ohne React.

[Tyantreides]

@alcalzone
Wenn das ginge hätte ich keinen Text verfasst :)

die ioBroker instanz steht trotz start über "dev-server watch default" nicht zur verfügung unter dem von mir konfigurierten Port.
Das ist ja das Problem....

Ich gehe dabei genauso vor wie bei einem nicht react adapter und komme leider zu einem anderen Ergebnis. wie beschrieben.

Wenn ich kein react in meinen Adapter konfiguriere kann ich mit "dev-server watch default" meinen dev Server starten und via konfiguriertem Port auf meinen Admin zugreifen, so lange der Watcher läuft.

[AlCalzone]

Zeig mal den Konsolenoutput und am besten noch einen Link zu deinem Projekt, dass ich es im Zweifel kurz selbst ausprobieren kann.

/cc @UncleSam

[Tyantreides]

@alcalzone

ist ein per

npx @iobroker/create-adapter

Frisch erstellter adapter.
dev server in der auswahl hinzugefügt
react für tabseite ausgewählt.
javascript ausgewählt (kein typescript)

Hier mehr kommt nicht. Bleibt stehen dann so:

ioBroker.react dev-server watch default               
Using profile name "default"
Using adapter name "react"
Install local iobroker.react
/Users/christian/iobroker/adapterdev/ioBroker.react> npm run build

> iobroker.react@0.0.1 prebuild
> rimraf admin/build


> iobroker.react@0.0.1 build
> build-adapter react


Compiling React with ESBuild...

  admin/build/tab.js       697.3kb
  admin/build/tab.css        3.8kb
  admin/build/tab.js.map     2.0mb
  admin/build/tab.css.map    6.8kb

⚡ Done in 593ms
/Users/christian/iobroker/adapterdev/ioBroker.react> npm pack
Packed to iobroker.react-0.0.1.tgz
/Users/christian/iobroker/adapterdev/ioBroker.react/.dev-server/default> npm install "/Users/christian/iobroker/adapterdev/ioBroker.react/iobroker.react-0.0.1.tgz"

up to date, audited 407 packages in 3s

21 packages are looking for funding
  run `npm fund` for details

4 high severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.
/Users/christian/iobroker/adapterdev/ioBroker.react/.dev-server/default> node node_modules/iobroker.js-controller/controller.js
Running inside /Users/christian/iobroker/adapterdev/ioBroker.react/.dev-server/default
Starting React build
Waiting for first successful React build...
/Users/christian/iobroker/adapterdev/ioBroker.react> npm run watch:react

> iobroker.react@0.0.1 watch:react
> build-adapter react --watch

Compiling React with ESBuild in watch mode...
[watch] build finished, watching for changes...
2022-04-08 11:46:15.116  - info: host.dev-react-iMac1 iobroker.js-controller version 4.0.21 js-controller starting
2022-04-08 11:46:15.118  - info: host.dev-react-iMac1 Copyright (c) 2014-2022 bluefox, 2014 hobbyquaker
2022-04-08 11:46:15.119  - info: host.dev-react-iMac1 hostname: dev-react-iMac1, node: v16.13.2
2022-04-08 11:46:15.119  - info: host.dev-react-iMac1 ip addresses: fe80::de:7cf1:3990:21bd 2a01:5241:24a:1100:1c35:10:6f7f:a507 2a01:5241:24a:1100:4df6:d8e5:d5e8:1c25 192.168.178.47 fe80::8477:d6ff:fea6:7287 fe80::8477:d6ff:fea6:7287 fe80::e578:7018:8ed9:3215 fe80::e816:3147:59cc:965a
2022-04-08 11:46:15.125  - debug: host.dev-react-iMac1-Server Data File: /Users/christian/iobroker/adapterdev/ioBroker.react/.dev-server/default/iobroker-data/objects.jsonl
2022-04-08 11:46:15.204  - debug: host.dev-react-iMac1-Server  Redis inMem-objects listening on port 9001
2022-04-08 11:46:15.206  - debug: host.dev-react-iMac1 Redis Objects: Use Redis connection: 127.0.0.1:26434
2022-04-08 11:46:15.214  - debug: host.dev-react-iMac1 Objects client ready ... initialize now
2022-04-08 11:46:15.215  - debug: host.dev-react-iMac1 Objects create System PubSub Client
2022-04-08 11:46:15.224  - debug: host.dev-react-iMac1 Objects client initialize lua scripts
2022-04-08 11:46:15.262  - debug: host.dev-react-iMac1 Objects connected to redis: 127.0.0.1:26434
2022-04-08 11:46:15.268  - debug: host.dev-react-iMac1-Server Data File: /Users/christian/iobroker/adapterdev/ioBroker.react/.dev-server/default/iobroker-data/states.jsonl
2022-04-08 11:46:15.364  - debug: host.dev-react-iMac1-Server  Redis inMem-states listening on port 9000
2022-04-08 11:46:15.365  - debug: host.dev-react-iMac1 Redis States: Use Redis connection: 127.0.0.1:24434
2022-04-08 11:46:15.371  - debug: host.dev-react-iMac1 States create System PubSub Client
2022-04-08 11:46:15.392  - debug: host.dev-react-iMac1 States connected to redis: 127.0.0.1:24434
2022-04-08 11:46:15.465  - info: host.dev-react-iMac1 connected to Objects and States
2022-04-08 11:46:15.477  - info: host.dev-react-iMac1 added notifications configuration of host
2022-04-08 11:46:15.502  - debug: host.dev-react-iMac1 Plugin sentry Initialize Plugin (enabled=true)
2022-04-08 11:46:15.504  - info: host.dev-react-iMac1 Plugin sentry Sentry Plugin disabled for this process because sending of statistic data is disabled for the system
2022-04-08 11:46:15.516  - info: host.dev-react-iMac1 2 instances found
2022-04-08 11:46:15.516  - debug: host.dev-react-iMac1 check instance "system.adapter.admin.0" for host "dev-react-iMac1"
host.dev-react-iMac1 check instance "system.adapter.admin.0" for host "dev-react-iMac1"
2022-04-08 11:46:15.517  - debug: host.dev-react-iMac1 check instance "system.adapter.react.0" for host "dev-react-iMac1"
host.dev-react-iMac1 check instance "system.adapter.react.0" for host "dev-react-iMac1"
2022-04-08 11:46:15.517  - info: host.dev-react-iMac1 starting 1 instance
2022-04-08 11:46:15.566  - debug: host.dev-react-iMac1 added notifications configuration of system.adapter.admin.0
2022-04-08 11:46:15.566  - debug: host.dev-react-iMac1 startInstance admin.0 loglevel=info, compact=false
2022-04-08 11:46:15.580  - info: host.dev-react-iMac1 instance system.adapter.admin.0 started with pid 56697

[Tyantreides]

@alcalzone

io-package.json wie folgt nach Erstellung unmodifiziert. Auf github ist noch nichts. wollte zuerst lokal testen bevor ich mir eine repoleiche anlege.
Hab in dem Fall nur für den tab react konfiguriert. Der config Bereich ist normal.

{
	"common": {
		"name": "react",
		"version": "0.0.1",
		"news": {
			"0.0.1": {
				"en": "initial release",
				"de": "Erstveröffentlichung",
				"ru": "Начальная версия",
				"pt": "lançamento inicial",
				"nl": "Eerste uitgave",
				"fr": "Première version",
				"it": "Versione iniziale",
				"es": "Versión inicial",
				"pl": "Pierwsze wydanie",
				"zh-cn": "首次出版"
			}
		},
		"title": "React",
		"titleLang": {
			"en": "React",
			"de": "Reagieren",
			"ru": "Реагировать",
			"pt": "Reagir",
			"nl": "Reageer",
			"fr": "Réagir",
			"it": "Reagire",
			"es": "Reaccionar",
			"pl": "Reagować",
			"zh-cn": "反应"
		},
		"desc": {
			"en": "react",
			"de": "reagieren",
			"ru": "реагировать",
			"pt": "reagir",
			"nl": "Reageer",
			"fr": "réagir",
			"it": "reagire",
			"es": "reaccionar",
			"pl": "reagować",
			"zh-cn": "反应"
		},
		"authors": [
			"Tyantreides <tyantreides@pocketpromotion.de>"
		],
		"keywords": [
			"ioBroker",
			"template",
			"Smart Home",
			"home automation"
		],
		"license": "MIT",
		"platform": "Javascript/Node.js",
		"main": "main.js",
		"icon": "react.png",
		"enabled": true,
		"extIcon": "https://raw.githubusercontent.com/Tyantreides/ioBroker.react/main/admin/react.png",
		"readme": "https://github.com/Tyantreides/ioBroker.react/blob/main/README.md",
		"loglevel": "info",
		"mode": "daemon",
		"type": "communication",
		"compact": true,
		"connectionType": "local",
		"dataSource": "poll",
		"materialize": true,
		"materializeTab": true,
		"adminTab": {
			"singleton": true,
			"name": {
				"en": "React",
				"de": "Reagieren",
				"ru": "Реагировать",
				"pt": "Reagir",
				"nl": "Reageer",
				"fr": "Réagir",
				"it": "Reagire",
				"es": "Reaccionar",
				"pl": "Reagować",
				"zh-cn": "反应"
			},
			"link": "",
			"fa-icon": "info"
		},
		"eraseOnUpload": true,
		"dependencies": [
			{
				"js-controller": ">=2.0.0"
			}
		]
	},
	"native": {
		"option1": true,
		"option2": "42"
	},
	"objects": [],
	"instanceObjects": []
}

[AlCalzone]

@tyantreides Dann schick mir mal deine .create-adapter.json, damit kann ich das einfach lokal nachbauen.

Das oben sieht aber aus als startet zumindest der Admin wie geplant.

[Tyantreides]

@alcalzone
Ja das hab ich gesehen. Aber irgendwas geht da schief :)
Denn wenn ich den Adapter wie beschrieben ohne "react" erstelle, verhält sich der devserver beim Start anders.

Hier die .create-adapter.json

{
	"cli": true,
	"target": "directory",
	"adapterName": "react",
	"title": "React",
	"expert": "yes",
	"features": [
		"adapter"
	],
	"adminFeatures": [
		"tab"
	],
	"type": "communication",
	"startMode": "daemon",
	"connectionType": "local",
	"dataSource": "poll",
	"connectionIndicator": "no",
	"language": "JavaScript",
	"adminReact": "no",
	"tabReact": "yes",
	"tools": [
		"ESLint",
		"type checking",
		"devcontainer"
	],
	"i18n": "JSON",
	"releaseScript": "yes",
	"devServer": "yes",
	"devServerPort": 8089,
	"indentation": "Tab",
	"quotes": "double",
	"es6class": "yes",
	"authorName": "Tyantreides",
	"authorGithub": "Tyantreides",
	"authorEmail": "tyantreides@pocketpromotion.de",
	"gitRemoteProtocol": "HTTPS",
	"gitCommit": "no",
	"defaultBranch": "main",
	"license": "MIT License",
	"dependabot": "no",
	"creatorVersion": "2.1.1"
}

[AlCalzone]

@Tyantreides ok ich kann es nachvollziehen. Der dev-server macht aus irgendeinem Grund ein watch-Build und wartet dass das beendet wird.

Hab hier mal ein Issue erstellt: https://github.com/ioBroker/dev-server/issues/218

Ich versuche später mal rauszufinden, warum es bei mir geht 😅

[Tyantreides]

@alcalzone :+1:
habe noch etwas rumprobiert und verschiedene node versionen ausprobiert.
das ändert leider bei mir nichts.

[AlCalzone]

@tyantreides Liegt an der Kombination von dev-server und dem build script. Ich denke ich weiß auch was es ist.

[AlCalzone]

@Tyantreides ich habe hier einen PR mit einem Fix: https://github.com/ioBroker/dev-server/pull/219

Du kannst den dev-server testweise in dieser Version installieren mittels

npm i -g AlCalzone/dev-server#watch-stderr