Vue3 Nuxt3 #41
Vue3 Nuxt3 #41
Conversation
Not fully working
|
also der pr ist noch nicht lauffähig, deswegen hatte ich ihn auf draft gesetzt |
D.h. die neue Anwendung kann nicht mehr statisch kompiliert werden, oder? |
|
statisch kompiliert kenne ich nur in kontext von ssg, |
|
vuetify wurde mir zu groß von der anwendung, |
|
Da die test zuvor nicht sauber durchgelaufen sind, |
hab in der zwischen zeit versucht zu verstehen was dein frage bedeutet, erzeugt zumindest die html seite wo dann das js eingebettet ist. |
|
Bin ansich nicht mehr weit vom finalen ziel technisch es umzusetzen, |
Wir haben in der Anwendung zwei Calls die durch das Backend geschleust werden:
Das ganze hat auch zwei verschiedene Aspekte:
Wenn man sich die beiden Schnittstellen anschaut muss man beide Aspekte betrachten. Würde man die Schnittstellen direkt aus dem Browser per XHR abrufen sieht es wie folgt aus:
Die OSM-API würde den Zugriff zulassen (dort ist * erlaubt). Man findet auf https://joint-research-centre.ec.europa.eu/photovoltaic-geographical-information-system-pvgis/getting-started-pvgis/api-non-interactive-service_en zu CORS folgende Information:
Auf der Website befindet sich noch ein anderer Hinweis der nun allerdings zum Nachteil wird wenn wir die Requests durch den API-Proxy schleusen:
Aber das ist halt leider unausweichlich für diese API. Wäre noch ein cooles Feature für das PVTool wenn der Response Code vom Rate-Limit auch an die Client-Anwendung durchgereicht und verstanden wird. |
schon klar und auch gar nicht gegenstand der frage, das backend ist ja als solches vorhanden: |
Genau das wollte ich mir heute mal anschauen. Wenn ich das auf deinem Branch probiere funktioniert das aber leider nicht: Setzt man in der nuxt.config.ts dann
|
|
Die error message hab ich bei mir auch, |
|
Wenn die anwendung nicht im root liegt: // https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
ssr: false,
modules: ['nuxt-quasar-ui', '@nuxt/test-utils/module', 'nuxt-gtag'],
app: {
head: {
title: 'PVTool @AkkuDoktor - Berechne die Größe deines Speichers selbst',
htmlAttrs: {
lang: 'de',
},
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: '' },
{ name: 'format-detection', content: 'telephone=no' },
],
link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
},
baseURL: '/test/pv/',
},
gtag: {
id: process.env.GOOGLE_ANALYTICS_ID,
initialConsent: false,
},
devtools: { enabled: true },
}) |
|
@albertlast irgendwas mache ich da noch falsch. Selbst mit deiner Musterkonfiguration und |
|
@mayrstefan // https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
ssr: false,
modules: ['nuxt-quasar-ui', '@nuxt/test-utils/module', 'nuxt-gtag'],
app: {
head: {
title: 'PVTool @AkkuDoktor - Berechne die Größe deines Speichers selbst',
htmlAttrs: {
lang: 'de',
},
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: '' },
{ name: 'format-detection', content: 'telephone=no' },
],
link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
},
baseURL: '/',
},
gtag: {
id: process.env.GOOGLE_ANALYTICS_ID,
initialConsent: false,
},
devtools: { enabled: true },
})dockerfile hab es dann mittels den befehl gebaut: kammen irgendwelche warning hoch und gestartet und dann konnte ich die anwendung unter localhost:8080 erreichen, |
|
Ich musste bei mir noch drei Pakete in der Package.json ergänzen damit es funktioniert hat:
Erst als diese Module installiert waren konnte ich die Anwendung bauen. |
|
wenn du hier in github files rein schaust (/pvtools/package.json), |
|
Welche idee steckt hier hinter eigentlich, |
|
Ich habe die Konversation gelesen und hoffentlich alles wichtige verstanden. Probiere mal Wenn dich die Logs interessieren, feuerst du hinterher ein |
|
Joa danke, |
|
@albertlast Entschuldigung. Jetzt sehe ich erst meinen Fehler. Das Verzeichnis in dem ich es ausprobiert habe war ein clone von https://github.com/nick81nrw/PVTools/tree/vue3/ anstatt https://github.com/albertlast/PVTools/tree/vue3syntax - das ist leider nur ein Zwischenstand von deinem Branch. Aus deinem Branch kann ich den Docker-Container dann bauen. Was aber nicht sauber funktioniert ist die Anwendung wie vorher als statisches HTML zu bauen. Da ist irgendwie das Styling kaputt. Außerdem werden die Backend-Calls gegen /api/osm bzw. /api/pvgis gemacht und es gibt einen 404 not found. D.h. die Vue3-Anwendung muss in dieser Form zwangsweise in einem Node-Prozess laufen. Das bringt uns wieder zu der Frage der Anwendungsarchitektur zurück: soll die Trennung zwischen Backend und Frontend aufrecht erhalten bleiben oder nicht. |
Beim Thema Frontend und Backend scheint es auf dem ersten Blick so zu sein, da beide Container node:21.4.0-alpine3.19 nutzen. Wer weiß, eventuell wird das Backend mal durch eine fastapi getauscht. Das geht mit der jetzigen dockercompose.yml recht einfach, da man sieht welcher Bereich welche Abhängigkeiten hat. Anders herum gefragt, warum ist es dir so wichtig? Ob du nun Das Ziel der Backendcalls wird aktuell in der index.vue eingestellt. Besten Gruß, |
|
Das die backend calls gegen api gehen ist wie gesagt gewollt, zur zeit hab ich ein stand erreicht, man beachte das alle drei sachen (frontend, backend und composer) im pvtools ordner sind und |
|
@albertlast Was ist denn die aktuelle Fehlermeldung im beim Bauen vom Frontend? |
In meiner persöhnliche Warnehmung ist Docker bereits ein zu komplexe lösung für das Problem, |
wenn ich den docker direkt baue läuft er durch |
|
In deinem Branch gibt es noch ein Schaue ich mir |
|
klar gibt es eine package.json in pvtools bei mir: https://github.com/nick81nrw/PVTools/pull/41/files#diff-5858518939b6f4929654e2a6fe4ffc812a0424c4e4d108369b9407080995c647 |
|
so habs wieder zum laufen bekommen,
ungetestet aber edge side rendering sollte gehen: https://nuxt.com/docs/guide/concepts/rendering#edge-side-rendering |
|
@albertlast Schön, dass du alles zum Laufen bekommen hast. Um mich zu erklären (warum ich die
Besten Gruß, |
|
die frage die halt noch offen ist, |
|
@nick81nrw ich warte hier noch auf eine antwort von dir. |
|
technisch ist wie gesagt migrierung fertig, styling könnte noch notwendig sein, |
|
@albertlast schade, dass @nick81nrw gerade wenig Zeit hat (ihm sei es gegönnt und er wird Gründe haben). Leider musst du dich so wohl noch in Geduld üben. |
|
Ich muss mich entschuldigen für die späte Rückmeldung. Krankheit und viel Arbeit kamen dazwischen. Ich gehe die PRs jetzt durch. |
|
hab pr noch mal auf aktuellen stand gebracht |
Vue2 ist eol
daher mein versuch das projekt auf vue3 hochzuheben.
vue2 -> vue3
nuxt2 -> nuxt3
bootstrap -> quasar
axios -> $fetch (ofetch)
jest -> vitest
function code csj nach esm überführt
backend (relay) wird von nuxt3 übernommen -> backend fällt weg
sind jetzt zwei getrennte endpunkte (damit auf ui seite ich weiß welches format zurück kommt)
+typescript an einigen stellen zwecks vereinfacherung der programmierung