Einrichten einer React-App mit einem Node.js-Server-Proxy

Lesezeit: 3 Minuten

October 09, 2018
Autor:in:
Phil Nash
Twilion

Einrichten einer React-App mit einem Node.js-Server-Proxy

Hallo und Danke fürs Lesen! Dieser Blogpost ist eine Übersetzung von Set up a React app with a Node.js server proxy. Während wir unsere Übersetzungsprozesse verbessern, würden wir uns über Dein Feedback an help@twilio.com freuen, solltest Du etwas bemerken, was falsch übersetzt wurde. Wir bedanken uns für hilfreiche Beiträge mit Twilio Swag :)

Create React App ist ein hervorragendes Tool zur Einrichtung einer reibungslos funktionierenden React-Anwendung. Beim Entwickeln oder Erstellen eines Prototyps für eine Anwendung, die eine serverseitige Komponente erfordert, z. B. die Generierung von Zugriffstokens für Twilio Video oder Chat, ist der Vorteil nicht sofort offensichtlich. Ich empfand es am einfachsten, mit einem Server innerhalb desselben Projekts zu arbeiten, um alles über nur einen Befehl zu starten.

In diesem Artikel erfährst du, wie du einen Express-Server einrichtest, der zusammen mit der React-App ausgeführt wird. Falls du nicht so lange warten möchtest, kannst du direkt zum Startprojekt auf GitHub navigieren.

So funktioniert‘s

In package.json der Create React App gibt es eine Option zur Erstellung von Proxys für Nicht-text/html-Anfragen mithilfe eines alternativen Backends. Mit dieser Funktion erstellen wir Proxys für Anwendungen, die an anderer Stelle ausgeführt werden. Für uns ist sie jedoch interessant, weil wir einen Server direkt innerhalb des React-Projekts ausführen wollen.

Wir werden ein paar npm-Module zusammenstellen, die uns ermöglichen, die React-App und einen Express-Server mit nur einem einzigen Befehl auszuführen, um Proxy zu ermöglichen.

Los geht's

Um dem Artikel zu folgen, musst du Node.js und npm installiert haben.

Beginnen wir mit der Erstellung einer neuen React-App mit Create React App. Wusstest du, dass du das create-react-app-Paket dafür nicht global installieren musst? Führe stattdessen Folgendes aus:

npm init react-app my-new-app
cd my-new-app

Bei näherer Betrachtung nimmt npm init einen Initialisierungsnamen, stellt diesem  voran und nutzt npx zum Installieren und Ausführen des Befehls..

Führe die neue React-Anwendung aus, um sicherzustellen, dass sie ordnungsgemäß generiert wurde.

npm start

Dreht sich das React-Logo, hat alles geklappt.

Hinzufügen eines Servers

Wir fügen die Server-Abhängigkeiten zu devDependencies der React-App hinzu, da diese nicht Teil der Frontend-Entwicklung sind.

Stoppe den Server mit Cmd/Ctrl + C und verwende npm, um Express und Body Parser zu installieren:

npm install express body-parser --save-dev

Füge die folgenden Abhängigkeiten als Unterstützung bei der gemeinsamen Ausführung von Frontend und Server hinzu:

npm install node-env-run nodemon npm-run-all express-pino-logger pino-colada --save-dev

Erstelle im Projektverzeichnis eine Datei namens .env als Speicherort der Umgebungsvariablen. Zum jetzigen Zeitpunkt müssen wir nichts weiter in diesem Verzeichnis ablegen. Später ist es sehr hilfreich, um für den Server nötige Anmeldeinformationen darin abzulegen, zum Beispiel API-Schlüssel.

Erstelle im nächsten Schritt im Projektverzeichnis ein neues Verzeichnis namens server sowie eine server/index.js-Datei. Zu Testzwecken erstellen wir eine kleine Anwendung. Füge den folgenden Code in server/index.js hinzu:

const express = require('express');
const bodyParser = require('body-parser');
const pino = require('express-pino-logger')();

const app = express();
app.use(bodyParser.urlencoded({ extended: false }));
app.use(pino);

app.get('/api/greeting', (req, res) => {
  const name = req.query.name || 'World';
  res.setHeader('Content-Type', 'application/json');
  res.send(JSON.stringify({ greeting: `Hello ${name}!` }));
});

app.listen(3001, () =>
  console.log('Express server is running on localhost:3001')
);

Öffne nun package.json und füge dem "scripts"-Objekt ein neues Skript hinzu, um den Server mithilfe von node-env-run und nodemon auszuführen:

"scripts": {
    // other scripts
    "server": "node-env-run server --exec nodemon | pino-colada"
  },

Führe folgendes Skript aus, um zu überprüfen, ob der Server funktioniert:

npm run server

Öffne für einen Test http://localhost:3001/api/greeting. Wenn du die JSON-Reaktion in Form der „Hello World!“-Begrüßung siehst, funktioniert alles. Versuche nun, einen Anfrageparameter namens name zur URL hinzuzufügen.

Ausführen von Server und React-App

Für die gleichzeitige Ausführung von Server und React-Anwendung müssen wir package.json einiges hinzufügen.

Zunächst kümmern wir uns um die Proxy-Einrichtung des Servers. Füge den Schlüssel "proxy" zu package.json hinzu. Wir haben den Server bereits so eingerichtet, dass er auf Port 3001 ausgeführt wird, für die Proxy-Einrichtung verwenden wir also localhost:3001.

  "proxy": "http://localhost:3001"

Zum gleichzeitigen Ausführen des Servers und des Frontends ist ein Skript notwendig. Wir verwenden npm-run-all dafür. Da wir zwei Skripte gleichzeitig ausführen werden, verwenden wir den Parallelmodus. npm-run-all ist dafür mit dem Befehl run-p praktisch und schnell anwendbar.

Füge Folgendes dem Abschnitt "scripts" in package.json hinzu:

"scripts": {
    // other scripts
    "server": "node-env-run server --exec nodemon",
    "dev": "run-p server start"
  },

Führe npm run dev aus, um die React-Anwendung und den Server gleichzeitig zu starten. localhost:3000/api/greeting lässt sich jedoch nicht im Browser laden, da der Create React App-Proxy nur mit Base-HTML-Code antwortet.

Stattdessen können wir innerhalb einer Komponente in der React-App einen Test durchführen.

Verwenden des Servers mit Proxy von React

Wir werden der App-Komponente ein Formular hinzufügen, um die /api/greeting-Komponente zur Formulierung einer auf der Seite angezeigten Begrüßung zu nutzen. Füge den folgenden Constructor und die folgenden Funktionen zur App-Komponente in src/App.js hinzu:

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: '',
      greeting: ''
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({ name: event.target.value });
  }

  handleSubmit(event) {
    event.preventDefault();
    fetch(`/api/greeting?name=${encodeURIComponent(this.state.name)}`)
      .then(response => response.json())
      .then(state => this.setState(state));
  }

Füge dieses Formular zum JSX in der render-Funktion hinzu:

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <form onSubmit={this.handleSubmit}>
            <label htmlFor="name">Enter your name: </label>
            <input
              id="name"
              type="text"
              value={this.state.name}
              onChange={this.handleChange}
            />
            <button type="submit">Submit</button>
          </form>
          <p>{this.state.greeting}</p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
    );
  }

Öffne die React-App im Browser, gib deinen Namen ein und sende ihn ab. Die Begrüßung zeigt an, dass die React-App nun mit dem Server mit eingerichtetem Proxy kommuniziert.

Das war nur der Anfang

Create React App ist ideal, um eine React-Anwendung zum Laufen zu bringen, bei einer serverseitigen Komponente wird es jedoch kniffelig. In diesem Post hast du erfahren, wie du die proxy-Option nutzt und einen Express-Server mithilfe von Tools wie npm-run-all ausführst.

Den gesamten Code dieses Posts findest du in diesem GitHub-Repository. Nutze diesen als Ausgangspunkt zur Entwicklung einer React-App mit einer Express-API. Wenn du eine Twilio Video- oder Twilio Chat-Anwendung mit React erstellen möchtest, hält der Twilio-Zweig für beide Anwendungen Zugriffstokens parat. Folge einfach den Anweisungen der README-Datei.

Mit dieser Vorlage entwickeln wir schneller und einfacher von einem Express-Server gestützte React-Anwendungen. Ich hoffe, diese Plattform unterstützt dich bei deinen kreativen Ideen, auf die ich schon sehr gespannt bin.

Verwandte Posts

Ähnliche Ressourcen

A newspaper article

Twilio Docs

Von APIs über SDKs bis hin zu Beispiel-Apps

API-Referenzdokumentation, SDKs, Hilfsbibliotheken, Schnellstarts und Tutorials für Ihre Sprache und Plattform.
An Open book

Ressourcen-Center

Die neuesten E-Books, Branchenberichte und Webinare

Lernen Sie von Customer-Engagement-Experten, um Ihre eigene Kommunikation zu verbessern.
User group reactions

Ahoy

Twilios Entwickler-Community-Hub

Best Practices, Codebeispiele und Inspiration zum Aufbau von Kommunikations- und digitalen Interaktionserlebnissen.