Πώς να κάνετε το create-react-app να λειτουργεί με ένα Node Back-end API

Αυτή είναι μια πολύ κοινή ερώτηση μεταξύ των νεότερων προγραμματιστών του React και μία ερώτηση που είχα όταν ξεκίνησα με το React και το Node.js. Σε αυτό το σύντομο παράδειγμα θα σας δείξω πώς να create-react-appδουλέψετε με το Node.js και το Express Back-end.

δημιουργία-αντίδραση-εφαρμογή

Δημιουργήστε ένα έργο χρησιμοποιώντας create-react-app.

npx create-react-app example-create-react-app-express

Δημιουργήστε έναν /clientκατάλογο κάτω από τον example-create-react-app-expressκατάλογο και μετακινήστε όλο τον κώδικα της λέξης Boact της React που δημιουργήθηκε από create-react-appαυτόν τον νέο κατάλογο πελατών.

cd example-create-react-app-expressmkdir client

Ο διακομιστής Node Express

Δημιουργήστε ένα package.jsonαρχείο μέσα στον ριζικό κατάλογο ( example-create-react-app-express) και αντιγράψτε τα ακόλουθα περιεχόμενα:

{ "name": "example-create-react-app-express", "version": "1.0.0", "scripts": { "client": "cd client && yarn start", "server": "nodemon server.js", "dev": "concurrently --kill-others-on-fail \"yarn server\" \"yarn client\"" }, "dependencies": { "body-parser": "^1.18.3", "express": "^4.16.4" }, "devDependencies": { "concurrently": "^4.0.1" } }

Παρατηρήστε ότι χρησιμοποιώ concurrently για την εκτέλεση της εφαρμογής React και του διακομιστή ταυτόχρονα. Η –kill-others-on-failσημαία θα σκοτώσει άλλες διεργασίες αν κάποιος τερματίσει με μη μηδενικό κωδικό κατάστασης.

Εγκαταστήστε nodemon παγκοσμίως και τις εξαρτήσεις διακομιστή:

npm i nodemon -g yarn

Δημιουργήστε ένα server.jsαρχείο και αντιγράψτε τα ακόλουθα περιεχόμενα:

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: 'Hello From Express' }); }); app.post('/api/world', (req, res) => { console.log(req.body); res.send( `I received your POST request. This is what you sent me: ${req.body.post}`, ); }); app.listen(port, () => console.log(`Listening on port ${port}`));

Αυτός είναι ένας απλός διακομιστής Express που θα εκτελείται στη θύρα 5000 και έχει δύο διαδρομές API: GET- /api/hello, και POST- /api/world.

Σε αυτό το σημείο μπορείτε να εκτελέσετε τον διακομιστή Express με την ακόλουθη εντολή (ακόμα μέσα στον ριζικό κατάλογο):

node server.js

Τώρα πλοηγηθείτε στο //localhost:5000/api/helloκαι θα λάβετε τα εξής:

Θα δοκιμάσουμε τη POSTδιαδρομή μόλις δημιουργήσουμε την εφαρμογή React.

Η εφαρμογή React

Τώρα μεταβείτε στον clientκατάλογο στον οποίο ζει η εφαρμογή React.

Προσθέστε την ακόλουθη γραμμή στο package.jsonαρχείο που δημιουργήθηκε από το create-react-app.

"proxy": "//localhost:5000/"

Το κλειδί για τη χρήση ενός διακομιστή Express back-end με ένα έργο που έχει δημιουργηθεί create-react-appείναι η χρήση ενός διακομιστή μεσολάβησης. Αυτό λέει στον διακομιστή ανάπτυξης πακέτων Web να κάνει μεσολάβηση των αιτημάτων API στον διακομιστή API, δεδομένου ότι ο διακομιστής Express είναι σε λειτουργία localhost:5000.

Τώρα τροποποιήστε ./client/src/App.jsγια να καλέσετε το Express API Back-end, οι αλλαγές είναι με έντονα γράμματα.

import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css'; class App extends Component { state = { response: '', post: '', responseToPost: '', }; componentDidMount() { this.callApi() .then(res => this.setState({ response: res.express })) .catch(err => console.log(err)); } callApi = async () => { const response = await fetch('/api/hello'); const body = await response.json(); if (response.status !== 200) throw Error(body.message); return body; }; handleSubmit = async e => { e.preventDefault(); const response = await fetch('/api/world', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ post: this.state.post }), }); const body = await response.text(); this.setState({ responseToPost: body }); }; render() { return ( 

Edit src/App.js and save to reload.

Learn React

{this.state.response}

Post to Server:

this.setState({ post: e.target.value })} /> Submit

{this.state.responseToPost}

); } } export default App;

Δημιουργούμε μια callApiμέθοδο για να αλληλεπιδράσουμε με τη GETδιαδρομή Express API, στη συνέχεια ονομάζουμε αυτήν τη μέθοδο componentDidMountκαι τελικά ορίζουμε την κατάσταση στην απόκριση API, η οποία θα είναι Hello From Express .

Παρατηρήστε ότι δεν χρησιμοποιήσαμε μια πλήρως κατάλληλη διεύθυνση URL //localhost:5000/api/helloγια να καλέσουμε το API μας, παρόλο που η εφαρμογή React λειτουργεί σε διαφορετική θύρα (3000). Αυτό οφείλεται στοproxyγραμμή που προσθέσαμε στο package.jsonαρχείο νωρίτερα.

Έχουμε μια φόρμα με μία μόνο είσοδο. Όταν υποβάλλονται κλήσεις handleSubmit, το οποίο με τη σειρά του καλεί τη POSTδιαδρομή Express API αποθηκεύει στη συνέχεια την απάντηση στην κατάσταση και εμφανίζει ένα μήνυμα στον χρήστη: Έλαβα το αίτημά σας POST. Αυτό είναι που μου στείλατε: [μήνυμα από εισαγωγή] .

Τώρα ανοίξτε ./client/src/App.cssκαι τροποποιήστε την .App-headerτάξη ως εξής (αλλαγές με έντονη γραφή)

.App-header { ... min-height: 50%; ... padding-bottom: 10px; }

Εκτέλεση της εφαρμογής

Εάν εξακολουθείτε να εκτελείτε τον διακομιστή, προχωρήστε και σταματήστε τον πατώντας Ctrl + C στο τερματικό σας.

Από τον ριζικό κατάλογο του έργου εκτελέστε τα εξής:

yarn dev

Αυτό θα ξεκινήσει την εφαρμογή React και θα εκτελέσει τον διακομιστή ταυτόχρονα.

Τώρα πλοηγηθείτε στο //localhost:3000και θα πατήσετε την εφαρμογή React εμφανίζοντας το μήνυμα που προέρχεται από τη GETδιαδρομή μας Express. Ωραία ;!

Τώρα, πληκτρολογήστε κάτι στο πεδίο εισαγωγής και υποβάλετε τη φόρμα, θα δείτε την απάντηση από τη POSTδιαδρομή Express να εμφανίζεται ακριβώς κάτω από το πεδίο εισαγωγής.

Τέλος, ρίξτε μια ματιά στο τερματικό σας, θα δείτε το μήνυμα που στείλαμε από τον πελάτη, διότι καλούμε console.logτο σώμα αιτήματος στη POSTδιαδρομή Express.

Ανάπτυξη παραγωγής στο Heroku

Ανοίξτε server.jsκαι αντικαταστήστε με τα ακόλουθα περιεχόμενα:

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 calls app.get('/api/hello', (req, res) => { res.send({ express: 'Hello From Express' }); }); app.post('/api/world', (req, res) => { console.log(req.body); res.send( `I received your POST request. This is what you sent me: ${req.body.post}`, ); }); if (process.env.NODE_ENV === 'production') { // Serve any static files app.use(express.static(path.join(__dirname, 'client/build'))); // Handle React routing, return all requests to React app app.get('*', function(req, res) { res.sendFile(path.join(__dirname, 'client/build', 'index.html')); }); } app.listen(port, () => console.log(`Listening on port ${port}`));

Ανοίξτε ./package.jsonκαι προσθέστε τα ακόλουθα στην scriptsκαταχώριση

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

Ο Heroku θα εκτελέσει το startσενάριο από προεπιλογή και αυτό θα εξυπηρετήσει την εφαρμογή μας. Τότε θέλουμε να δώσουμε οδηγίες στον Heroku να δημιουργήσει την εφαρμογή πελάτη μας, το κάνουμε με heroku-postbuildσενάριο.

Τώρα, κατευθυνθείτε προς το Heroku και συνδεθείτε (ή ανοίξτε έναν λογαριασμό εάν δεν έχετε).

Δημιουργήστε μια νέα εφαρμογή και δώστε της ένα όνομα

Click on the Deploy tab and follow the deploy instructions (which I think they are pretty self-explanatory, no point on replicating them here ?)

And that is it, you can open your app by clicking on the Open app button at the top right corner within the Heroku dashboard for your app.

Visit the deployed app for this tutorial: //cra-express.herokuapp.com/

Other Deployment Options

I write about other deployments options here:

  • Netlify
  • Now
  • Heoku (more in-depth explanation)

Project Structure

This will be the final project structure.

Get the full code on the GitHub repository.

Thank you for reading and I hope you enjoyed it. Any question, suggestions let me know in the comments below!

You can follow me on Twitter, GitHub, Medium, LinkedIn or all of them.

Αυτή η ανάρτηση δημοσιεύτηκε αρχικά στον προσωπικό μου ιστότοπο ιστολογίου.

Ενημέρωση 8/25/19: Έχω δημιουργήσει μια εφαρμογή ιστού προσευχής που ονομάζεται " Ο ήσυχος χρόνος μου - ένα περιοδικό προσευχής " Εάν θέλετε να μείνετε ενημερωμένοι, εγγραφείτε μέσω του παρακάτω συνδέσμου: //b.link/mqt  

Η εφαρμογή θα κυκλοφορήσει πριν από το τέλος του έτους, έχω μεγάλα σχέδια για αυτήν την εφαρμογή. Για να δείτε μερικά εικονίδια οθόνης ακολουθήστε τον παρακάτω σύνδεσμο: //pc.cd/Lpy7

Τα DM μου στο Twitter είναι ανοιχτά εάν έχετε απορίες σχετικά με την εφαρμογή;