This content originally appeared on Twilio Blog and was authored by Phil Nash
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:
- node-env-run - Dominiks Modul zum Laden von Umgebungsvariablen aus einer Konfigurationsdatei in die Entwicklung
- nodemon - für automatische Neustarts des Servers nach Änderungen
- npm-run-all - zum gleichzeitigen Ausführen mehrerer npm-Skripte
- express-pino-logger und pino-colada - für eine optimale Serveranmeldung
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.
This content originally appeared on Twilio Blog and was authored by Phil Nash
![](https://www.radiofree.org/wp-content/plugins/print-app/icon.jpg)
Phil Nash | Sciencx (2021-05-28T14:08:23+00:00) Einrichten einer React-App mit einem Node.js-Server-Proxy. Retrieved from https://www.scien.cx/2021/05/28/einrichten-einer-react-app-mit-einem-node-js-server-proxy/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.