React Js App Deployen auf Webserver?

Ich habe jetzt mit

 npm run build

einen Ordner namens "build", wenn ich den über den FTP Zugang hochlade und die URL aufrufe erscheint nur eine Leere Weiße Seite.

Jedoch wenn ich es über andere Anbieter Deploye die das für mich übernehmen dann funktioniert alles einwandfrei.

Wie genau kriege ich das auch hin ?
Nutze All Inkl.

08.07.2022, 04:18

Habe schon versucht zu recherchieren aber eben nur die Methoden mit den anderen Anbietern gefunden oder kaum verständliche Anleitungen.

Möchte aber nicht irgendeine Subdomain benutzen von Github usw. Ich bezahle sowieso für meinen Server und die Domain.

08.07.2022, 22:56

Ich habe kein Ssh falls das eine rolle spielt.

1 Antwort

Vom Fragesteller als hilfreich ausgezeichnet

tide1109

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer

09.07.2022, 17:57

Der Befehl zum Bauen der App ist richtig. Du musst auch den Inhalt von build auf dein Webserver kopieren.

Ich vermute ein Webserver bzw. Client Problem.

Liegt der build Ordner im richtigen Ordner auf deinem Server?

Ist der Ordner build auch auf dem Server gelandet? Das sollte eher nicht unbedingt. Vermutlich könnte die Webseite auf domain.com/build/index.html liegen.

Wenn du deine Webseite aufrufst, solltest auch mal die Konsole vom Browser anschauen. Werden alle JS und CSS Dateien erfolgreich heruntergeladen?

Gibt es andere Fehlermeldungen in der Browser Konsole?

gfdsgsdgsdg

Fragesteller

09.07.2022, 18:29

Hat sich schon erledigt und jetzt geht alles, hab nur die URL in der Package.json konfigurieren müssen.

Trotzdem Danke, aber es ist traurig das es 3 Tage gedauert hat bis mir jemand eine vernünftige Antwort gibt.

Meine index.js :

const app = require("express")();
const http = require("http").Server(app);
const io = require("socket.io")(http);

http.listen(3000,()=>{
    console.log("working")
})
app.get('/index.html', (req, res) => {
    res.send('<h1>Hello world</h1>');
  });

Lokal funktioniert das, wenn ich localhost:3000/index.html

aufrufe erscheint ein Hello World,

aber wenn ich das ganze über FTP hochlade und url/index.html aufrufe :

Leere Html Seite und Konsole Error :

index.js:1 Uncaught ReferenceError: require is not defined

Also hat der Server garkein Node JS.

SSH hab ich aber garnicht, um dann mit irgendwelchen Ubuntu Commands das zu installieren, sudo apt install nodejs ...

Sry wenn es eine Dumme Frage ist aber ich hab bis jetzt nur Serverseitig Php gemacht und das ist sehr simple.

Man benutzt Fetch oder Ajax und im php skript echo "hello world"; und das wars.

Wollte mich an Node JS Ranwagen, das ganze ist aber viel komplexer.

(Bin bei All inkl)

...zur Frage

Wofür wird Next JS benutzt?

Im Internet steht

„It lets you build server-side rendering and static web applications using React“

Wenn ich also ne Website baue, benutze ich

JavaScript + React + Next Js + Etwas für mein Backend wie PHP?

Ich verstehe nicht ganz, wofür das jetzt benutzt wird. Kann Next JS bereits mein Backend sein?

...zur Frage

Raspberry Pi / HTML: Gibt es eine Möglichkeit, automatisch zur Haupt-URL zurückzukehren?

Hi,

ich habe einen Webserver auf dem Raspberry Pi mit HTML und Python (Jinja und Flask).

Auf dem Webserver kann man den Zustand von einem Relai über einen Impuls ändern und über einen Türkontakt sehen, ob es geklappt hat. Das Problem ist Folgendes:

Wenn ich den Raspberry Pi auf dem Webserver aufrufe, steht da 000.000.000.00 (die IP). Da gibt es einen Button für den Impuls, dann wechselt er aber auf die URL (000.000.000.00/on). Und da es eine Zeitverzögerung gibt, bis der Button auslöst, muss man die Seite neu laden. Wenn ich die Seite aber neu lade, schaltet er wieder, weil er ja immer noch auf der on-URL ist.

Gibt es eine Möglichkeit, automatisch zur Haupt-URL zurückzukehren?

...zur Frage

Nutz ihr Frameworks in JavaScript und warum?

Ich habe 2004 mit Frameworks in JavaScript angefangen und viele, viele Jahre mit unterschiedlichen Framework gearbeitet. Seite ca. 5 Jahren arbeite ich bevorzugt ohne Frameworks oder vermeide diese so gut es möglich ist.

Meine Frage an die Community, nutzt ihr JavaScript-Frameworks und wenn ja, welche Frameworks und in welchen Umfang?

Ich freue mich auf euren Antworten und bin gespannt wieviel von euch Frameworks in welchen Umfang ihr nutzt.

...zur Frage

Wie schwer ist React?

...zur Frage

Welche Sprache soll ich danach lernen?

Also ich kann JavaScript jetzt gut. Bin dabei Node.js zu lernen. Danach React/React Native.

Ihr entscheidet. Welche Sprache soll ich danach lernen? Python oder C#?

...zur Frage

Was kommt nach HTML > CSS >?

1.Html

2.Css

Wie sollte man weiter machen?

...zur Frage

Ist es noch sinnvoll, NextJS zu lernen?

SEO ist kein Punkt, wenn ich ehrlich bin. Heutzutage können auch Crawler normales React crawlen.

Als Zweites kommt das Server Side Rendering doch nur beim ersten Aufruf der Seite wirklich etwas bringt.

Danach ist es stinknormales React, das nicht mehr im Server für mich ausgeführt wurde und als HTML geschickt wird.

Natürlich sind 0.5-1 Sekunden wichtig, um den Nutzer ein gutes Gefühl zu geben und alles.

Aber warum sollte man sich den Stress mit NextJS antun? So wichtig wie mir diese 0.5 Sekunden auch sind. Man kann auch an anderen Ecken leichter optimieren und komprimieren.

React ist eine leichtgewichtige Bibliothek für ein bisschen Rendering und Next ein richtiges Framework.

Vielleicht ist da noch der Vorteil, das Leute ohne JavaScript wenigstens irgendwas sehen, aber wenn ich ehrlich bin, können einem Menschen mit JavaScript aus egal sein. Das sind fast alle Aluhutträger und die will man nicht in irgendeiner Art ansprechen als Kunde.

Auch keine Menschen die noch Internet Explorer und veraltete Smartphones nutzen. Da nehme ich lieber Rücksicht auf Sehbehinderte.

Was sagt ihr? Macht es noch Sinn, NextJS zu lernen? Warum nutzt ihr das?

...zur Frage

Floating Window in React Native?

Hallo,

villeicht nicht der beste ord um das zu fragen, aber wie könnte man ein

Foating Window(Fenster das über alle anwendungen ist, auch wen sie minimiert ist)
machen?

...zur Frage

Frontend: was nach JS/welches Framework?

ist jetzt weit hergeholt aber, ich wollte neben Java (was ich in der Schule Lerne und auch weiter Lernen will) mich was mit HTML, CSS und JS beschäftigen, da ich es überall sehe bspl Youtube, instagram etc und ich Interesse bekommen habe. Jedoch gibt es einige Frameworks aber welche soll ich denn Lernen? Gibt halt react etc aber kenn mich da nicht so aus..

wie gesagt, es ist weit hergeholt weil ich noch die basics lernen muss aber das ist jetzt grob meine Interesse :)

...zur Frage

Nächste Schritte für Full Stack dev?

Hallo,

Ich bin auf der Suche nach einem genauen Weg oder Schritte die ich gehen kann nachdem ich mein ersten Full Stack Projekt mit Python Flask ( Backend) und Frontend ( plain HTML, CSS und JS) und Database mit MySQL fertig gecodet habe.

Was genau kann ich jetzt machen um weiter zu kommen. Mein Ziel ist es fähig zu sein komplette professionelle Websiten erstellen zu können die Industrie fähig sind, d.h. Für Firmen, restaurants etc. Oder halt einen job als Full Stack dev zu bekommen.

sollte ich anfangen ein CSS framework lernen, wie bootstrap oder tailwind, oder ist das nur für designer , pur Frontend devs wichtig.
Oder lieber Backend frameworks wie Node.js, oder frontend JS frameworks wir zb react.

Ich weiß einfach nicht genau wo ich weiter machen soll nachdem ich alle Grundlagen berherrsche.

...zur Frage

React Fullstack mit welchem Backend?

Ich wollte NextJS lernen Fullstack React Framework aber ich stelle mir die Frage, mit was genau man das Ganze verwendet. In fast jedem YouTube-Video wird "Prisma" (davor noch nie gehört) mit einer anderen Datenbank genutzt, was das alles noch schwieriger macht.

Es gibt PostgreSQL, MongoDB, SQLite, usw..

Ich kenne normales SQL in Kombination mit PHP, aber die neuen modernen Sachen kenne ich nicht.

React und PHP harmonieren nicht so gut, es gibt auch wenig Online-Ressourcen und ich sehe da keine Zukunft für Stellenausschreibungen, weshalb ich diese Kombination gar nicht mehr nutzen will und backendseitig lieber von neu anfangen möchte. NextJS wäre bequem, da ich keine Router brauche, SSR habe, TS + Tailwind-Support.

Kann mir ein Fullstack-Entwickler von euch eine Roadmap empfehlen?

NextJS mit was als Datenbank, MERN-Stack vielleicht oder irgendwas anderes?

Ich bin bereit in Zukunft mehr zu lernen, aber erstmal einen Allrounder, in dem ich mein Wissen vertiefen kann.

...zur Frage

Wieso funktioniert meine "Browser Extension" nicht auf dieser Seite?

Mir ist unter Linux aufgefallen das ich gar nicht den Auto-Scroll von Windows habe in zb. Google Chrome wenn man auf das Mauspad klickt, nutze ich gerne und dachte mir als Challenge ohne Chat Gpt dass ich mal schnell probieren könnte ein eigenes zu programmieren.

Ich weiß da gibt es fertige Software und Extension's, die laufen ohne Probleme und Ressourcen sparender wahrscheinlich.

Hab das erst in einer Html Datei (Extension in "") gemacht zum testen dann in anderen Websites den JS Code in eine Konsole eingefügt und es funktioniert eigentlich ganz gut.

Das Problem ist das ich nicht verstehe wieso er nicht hier funktioniert https://www.tennon.io/ , mir fällt beim inspizieren nichts auf und es scheint mit Next JS umgesetzt zu sein.

<!DOCTYPE html>
<html lang="de">


<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Auto Scroll Extension</title>
    <style>
        html {
            min-width: 100%;
        }
    </style>
</head>


<body>
    <script>
        /* Render Dummy Content, cursor change wont work with min-height */
        for (let i = 0; i < 1000; i++) {
            document.body.innerHTML += "Lorem Ipsum ";
        }
        const scrollSpeed_Up = -1;
        const scrollSpeed_Down = 1;
        const middlehalf = window.innerHeight / 2;
        let AutoScroll_Interval; /* Global acess */
        let isScrolling = false;
        let isScrollingUp = false; /* Default Scrolling Down, Prevent Errors */


        const ToggleScrolling = Enable => {
            if (Enable) {
                console.log("Auto Scroll Active");
                document.body.style.cursor = "all-scroll";
                AutoScroll_Interval = setInterval(AutoScroll, 1);
                isScrolling = true; /* Prevent Multiple Interval's */
            } else if (!Enable && isScrolling) {
                /* Stop Interval , Reset Cursor and Variables */
                console.log("Auto Scroll Stopped");
                document.body.style.cursor = "auto";
                clearInterval(AutoScroll_Interval);
                isScrolling = false;
            }
        }


        const AutoScroll = () => {
            /* Get Current Vertical Scroll Position : console.log(window.scrollY); */
            isScrollingUp ? window.scrollBy(0, scrollSpeed_Up) : window.scrollBy(0, scrollSpeed_Down);
        }


        window.addEventListener("mousemove", e => {
            e.clientY > middlehalf ? isScrollingUp = false : isScrollingUp = true;
        });


        /* Check if Scroll Button is Pressed */
        window.addEventListener("mousedown", e => {
            e.button === 1 && !isScrolling ? ToggleScrolling(true) : ToggleScrolling(false);
        });


        /* ############## IGNORE ##############
        Check if Client has reached Bottom
        const scrollableHeight = document.documentElement.scrollHeight - window.innerHeight;
        if (window.scrollY >= scrollableHeight) { 
            // Reached Bottom Code ... 
        } else {
            // Code ...
        }
        */
    </script>
</body>


</html>

...zur Frage

Docker Image: warum Seite nicht erreichbar?

Hallo zusammen,

ich habe in den letzten Tagen ein kleines Programm geschrieben, nur eine kleine API mit Fastify und ein paar NPM Paketen.

Ich habe mir dann gedacht: mach doch mal ein Docker Image draus. Nach ein paar Tutorials und "Online-Recherchen" bin ich dann zu folgendem Dockerfile gekommen:

FROM node:current-alpine3.19
WORKDIR /usr/src/app
RUN chown -R node:node /usr/src/app
COPY src/package.json ./
COPY src/package-lock.json ./
RUN npm install
USER node
COPY --chown=node:node ./src .
CMD [ "npm", "start" ]

Der Build hat geklappt und ich habe den Container mit "docker run -p 3000:3000 [mein-projekt]" gestartet.

Im Container sieht alles gut aus. Die Dateistruktur scheint zu stimmen und ich bekomme bei einem "wget 127.0.0.1:3000" die erwartete Antwort.

Leider kann ich die Seite aber nicht von meinem PC aus mit localhost:3000 oder 127.0.0.1:3000 öffnen. Firefox gibt mir die Meldung "Die Verbindung zum Server wurde zurückgesetzt, während die Seite geladen wurde." Also gibt es eine Art kurze Verbindung?

Ich weiß gerade einfach nicht weiter. Fastify läuft unter Port 3000, Port 3000 wird auch im "docker run" Befehl genutzt und ich mache die Seite mit Port 3000 auf. In Foren habe ich nichts gefunden und ChatGPT hilft nicht wirklich weiter.

Was mache ich falsch?

Vielen Dank für eure Antworten und noch einen schönen Abend!

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen