So bringen Sie die create-react-app dazu, mit einer Back-End-API von Node.j zu arbeiten

Foto von Sebastien Gabriel auf Unsplash

Dies ist eine sehr häufige Frage unter neueren React-Entwicklern und eine Frage, die ich hatte, als ich mit React und Node.js angefangen habe. In diesem kurzen Beispiel zeige ich Ihnen, wie Sie mit Node.js und Express Back-end die Funktion "create-react-app" aktivieren.

Erstellen-Reagieren-App

Erstellen Sie ein Projekt mit create-react-app.

npx create-react-app Beispiel-create-react-app-express

Erstellen Sie ein / client-Verzeichnis im Verzeichnis example-create-react-app-express und verschieben Sie den gesamten von create-react-app erstellten React-Code in dieses neue Client-Verzeichnis.

CD-Beispiel-erstellen-reagieren-App-Express
mkdir client

Der Node Express-Server

Erstellen Sie eine package.json-Datei im Stammverzeichnis (example-create-react-app-express) und kopieren Sie den folgenden Inhalt:

{
  "name": "beispiel-erstellen-reagieren-app-express",
  "version": "1.0.0",
  "Skripte": {
    "client": "cd client && yarn start",
    "server": "nodemon server.js",
    dev: gleichzeitig --kill-others-on-fail "Garnserver" "Garnclient"
  },
  "Abhängigkeiten": {
    "body-parser": "^ 1.18.3",
    "express": "^ 4.16.4"
  },
  "devDependencies": {
    "gleichzeitig": "^ 4.0.1"
  }
}

Beachten Sie, dass ich gleichzeitig die React-App und den Server ausführe. Das Flag –kill-others-on-fail beendet andere Prozesse, wenn einer mit einem Statuscode ungleich Null beendet wird.

Installieren Sie Nodemon global und die Server-Abhängigkeiten:

npm i nodemon -g
Garn

Erstellen Sie eine server.js-Datei und kopieren Sie den folgenden Inhalt:

const express = require ('express');
const bodyParser = require ('body-parser');
const app = express ();
const port = process.env.PORT || 5000;
app.use (bodyParser.json ());
app.use (bodyParser.urlencoded ({extended: true}));

app.get ('/ api / hello', (req, res) => {
  res.send ({express: 'Hallo von Express'});
});
app.post ('/ api / world', (req, res) => {
  console.log (req.body);
  res.send (
    `Ich habe Ihre POST-Anfrage erhalten. Das haben Sie mir geschickt: $ {req.body.post} `,
  );
});

app.listen (port, () => console.log (`Lauschen auf Port $ {port}`));

Dies ist ein einfacher Express-Server, der auf Port 5000 ausgeführt wird und über zwei API-Routen verfügt: GET - / api / hello und POST - / api / world.

Zu diesem Zeitpunkt können Sie den Express-Server mit dem folgenden Befehl ausführen (noch im Stammverzeichnis):

Knoten server.js

Navigieren Sie nun zu http: // localhost: 5000 / api / hello, und Sie erhalten Folgendes:

Wir werden die POST-Route testen, sobald wir die React-App erstellt haben.

Die React App

Wechseln Sie nun in das Client-Verzeichnis, in dem sich unsere React-App befindet.

Fügen Sie der package.json-Datei, die von der create-react-app erstellt wurde, die folgende Zeile hinzu.

"Proxy": "http: // localhost: 5000 /"

Der Schlüssel zur Verwendung eines Express-Back-End-Servers mit einem mit create-react-app erstellten Projekt ist die Verwendung eines Proxys. Dadurch wird der Web-Pack-Entwicklungsserver angewiesen, unsere API-Anforderungen an unseren API-Server weiterzuleiten, vorausgesetzt, unser Express-Server wird auf localhost: 5000 ausgeführt.

Ändern Sie nun ./client/src/App.js, um unser Express-API-Backend aufzurufen. Änderungen sind fett gedruckt.

importiere React, {Component} von 'react';
Logo aus './logo.svg' importieren;
import './App.css';
Klasse App erweitert Komponente {
  state = {
    Antwort: '',
    Beitrag: '',
    responseToPost: '',
  };
  componentDidMount () {
    this.callApi ()
      .then (res => this.setState ({response: res.express}))
      .catch (err => console.log (err));
  }
  callApi = async () => {
    const response = warte auf Abruf ('/ api / hello');
    const body = warte auf Antwort.json ();
    if (response.status! == 200) throw Error (body.message);
    Körper zurückgeben;
  };
  handleSubmit = async e => {
    e.preventDefault ();
    const response = warte auf den Abruf ('/ api / world', {
      Methode: 'POST',
      Überschriften: {
        'Content-Type': 'application / json',
      },
      body: JSON.stringify ({post: this.state.post}),
    });
    const body = warte auf Antwort.text ();
    this.setState ({responseToPost: body});
  };
render () {
    Rückkehr (
      
        
          Logo           

            Bearbeiten Sie die Datei src / App.js und speichern Sie sie zum erneuten Laden.                                   Lernen Sie zu reagieren                             

{this.state.response}         

          

             Auf Server posten:                       this.setState ({post: e.target.value})}           />           

Standard-App exportieren;

Wir erstellen die callApi-Methode für die Interaktion mit unserer GET Express-API-Route, rufen diese Methode in componentDidMount auf und setzen den Status schließlich auf die API-Antwort, die Hello From Express lautet.

Beachten Sie, dass wir keine vollqualifizierte URL http: // localhost: 5000 / api / hello verwendet haben, um unsere API aufzurufen, obwohl unsere React-App auf einem anderen Port (3000) ausgeführt wird. Dies liegt an der Proxy-Zeile, die wir zuvor zur Datei package.json hinzugefügt haben.

Wir haben ein Formular mit einer einzigen Eingabe. Wenn übermittelte Anrufe handleSubmit, das seinerseits unsere POST Express-API-Route aufruft, speichert die Antwort den Status und zeigt dem Benutzer eine Meldung an: Ich habe Ihre POST-Anfrage erhalten. Das haben Sie mir geschickt: [Nachricht von der Eingabe].

Öffnen Sie nun ./client/src/App.css und ändern Sie die .App-Header-Klasse wie folgt (Änderungen in Fettdruck)

.App-Header {
...
  Mindesthöhe: 50%;
...
  Polsterboden: 10px;
}

App ausführen

Wenn der Server noch ausgeführt wird, halten Sie ihn an, indem Sie in Ihrem Terminal die Tastenkombination Strg + C drücken.

Führen Sie im Projektstammverzeichnis Folgendes aus:

Fadenentwickler

Dadurch wird die React-App gestartet und gleichzeitig der Server ausgeführt.

Navigieren Sie nun zu http: // localhost: 3000, und Sie werden die React-App aufrufen, in der die Nachricht angezeigt wird, die von unserer GET Express-Route stammt. Schön !

GET Route anzeigen

Geben Sie nun etwas in das Eingabefeld ein und senden Sie das Formular ab. Die Antwort von der POST Express-Route wird direkt unter dem Eingabefeld angezeigt.

POST-Route aufrufen

Schauen Sie sich zum Schluss Ihr Terminal an, und Sie sehen die Nachricht, die wir vom Client gesendet haben, da wir console.log im Anforderungshauptteil der POST Express-Route aufrufen.

Knoten

Produktionseinsatz bei Heroku

Öffnen Sie server.js und ersetzen Sie es durch den folgenden Inhalt:

const express = require ('express');
const bodyParser = require ('body-parser');
const path = require ('path');
const app = express ();
const port = process.env.PORT || 5000;
app.use (bodyParser.json ());
app.use (bodyParser.urlencoded ({extended: true}));
// API-Aufrufe
app.get ('/ api / hello', (req, res) => {
  res.send ({express: 'Hallo von Express'});
});
app.post ('/ api / world', (req, res) => {
  console.log (req.body);
  res.send (
    `Ich habe Ihre POST-Anfrage erhalten. Das haben Sie mir geschickt: $ {req.body.post} `,
  );
});
if (process.env.NODE_ENV === 'production') {
  // Statische Dateien bereitstellen
  app.use (express.static (path.join (__ dirname, 'client / build')));
  // Handle React Routing, sende alle Anfragen an React App
  app.get ('*', function (req, res) {
    res.sendFile (path.join (__ dirname, 'client / build', 'index.html'));
  });
}
app.listen (port, () => console.log (`Lauschen auf Port $ {port}`));

Öffnen Sie ./package.json und fügen Sie Folgendes zum Skripteintrag hinzu

"start": "node server.js",
"heroku-postbuild": "cd client & npm install & npm install --only = dev --no-shrinkwrap & npm run build"

Heroku wird standardmäßig das Startskript ausführen und dies wird unserer App dienen. Dann möchten wir Heroku anweisen, unsere Client-App zu erstellen, und zwar mit dem Heroku-Postbuild-Skript.

Gehen Sie jetzt zu Heroku und melden Sie sich an (oder eröffnen Sie ein Konto, wenn Sie keines haben).

Erstelle eine neue App und gib ihr einen Namen

Erstelle eine neue App auf Heroku

Klicken Sie auf die Registerkarte Bereitstellen und befolgen Sie die Anweisungen zum Bereitstellen (die meiner Meinung nach ziemlich selbsterklärend sind und hier nicht repliziert werden müssen ).

Stellen Sie eine App für Heroku bereit

Und das ist es, Sie können Ihre App öffnen, indem Sie auf die Schaltfläche App öffnen in der oberen rechten Ecke des Heroku-Dashboards für Ihre App klicken.

Besuchen Sie die bereitgestellte App für dieses Tutorial: https://cra-express.herokuapp.com/

Andere Bereitstellungsoptionen

Ich schreibe hier über andere Bereitstellungsoptionen:

  • Netlify
  • Jetzt
  • Heoku (ausführlichere Erklärung)

Projektstruktur

Dies wird die endgültige Projektstruktur sein.

Holen Sie sich den vollständigen Code im GitHub-Repository.

Danke fürs Lesen und ich hoffe es hat euch gefallen. Fragen, Anregungen lassen Sie mich in den Kommentaren unten wissen!

Sie können mir auf Twitter, GitHub, Medium, LinkedIn oder allen folgen.

Dieser Beitrag wurde ursprünglich auf meiner persönlichen Blog-Website veröffentlicht.

Update 25.08.19: Ich habe eine Web-App für Gebete mit dem Namen „My Quiet Time - A Prayer Journal“ erstellt. Wenn Sie auf dem Laufenden bleiben möchten, melden Sie sich bitte über den folgenden Link an: http://b.link/mqt

Die App wird vor Ende des Jahres veröffentlicht, ich habe große Pläne für diese App. Um einige Screenshots zu sehen, folgen Sie dem folgenden Link: http://pc.cd/Lpy7

Meine DMs auf Twitter sind offen, wenn Sie Fragen zur App haben