Sådan får du create-react-app til at fungere med en Node Back-end API

Dette er et meget almindeligt spørgsmål blandt nyere React-udviklere, og et spørgsmål, jeg havde, da jeg startede med React og Node.js. I dette korte eksempel vil jeg vise dig, hvordan du får create-react-apparbejde med Node.js og Express Back-end.

Opret-reager-app

Opret et projekt ved hjælp af create-react-app.

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

Opret en /clientmappe under example-create-react-app-expressbiblioteket, og flyt al den React-kedelpladekode, der er oprettet af, create-react-apptil denne nye klientmappe.

cd example-create-react-app-expressmkdir client

Node Express Server

Opret en package.jsonfil inde i rodmappen ( example-create-react-app-express) og kopier følgende indhold:

{ "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" } }

Bemærk, at jeg bruger concurrently til at køre React-appen og Serveren på samme tid. Den –kill-others-on-failflaget vil dræbe andre processer, hvis én udgange med en ikke nul statuskode.

Installer nodemon globalt og serverafhængighederne:

npm i nodemon -g yarn

Opret en server.jsfil, og kopier følgende indhold:

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}`));

Dette er en simpel Express-server, der kører på port 5000 og har to API-ruter: GET- /api/hello, og POST- /api/world.

På dette tidspunkt kan du køre Express-serveren med følgende kommando (stadig inde i rodmappen):

node server.js

Naviger nu til //localhost:5000/api/hello, og du får følgende:

Vi tester POSTruten, når vi har bygget React-appen.

React-appen

Skift nu til det clientbibliotek, hvor vores React-app bor.

Føj følgende linje til package.jsonfilen oprettet af create-react-app.

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

Nøglen til at bruge en Express back-end server med et projekt oprettet med create-react-apper at bruge en proxy. Dette fortæller web-pack-udviklingsserveren at proxy vores API-anmodninger til vores API-server, forudsat at vores Express-server kører på localhost:5000.

Rediger nu for ./client/src/App.jsat kalde vores Express API Back-end, ændringer er i fed skrift.

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;

Vi opretter callApimetode til at interagere med vores GETExpress API-rute, så kalder vi denne metode ind componentDidMountog indstiller endelig tilstanden til API-svaret, som vil være Hello From Express .

Bemærk, at vi ikke brugte en fuldt kvalificeret URL //localhost:5000/api/hellotil at ringe til vores API, selvom vores React-app kører på en anden port (3000). Dette er på grund afproxylinje, vi tilføjede til package.jsonfilen tidligere.

Vi har en formular med et enkelt input. Når der sendes opkald handleSubmit, som igen kalder vores POSTExpress API-rute, gemmer svaret til tilstand og viser en besked til brugeren: Jeg modtog din POST-anmodning. Dette er hvad du sendte mig: [besked fra input] .

Åbn ./client/src/App.cssog rediger nu .App-headerklassen som følger (ændringer med fed skrift)

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

Kører appen

Hvis du stadig har serveren kørende, skal du stoppe den ved at trykke på Ctrl + C i din terminal.

Kør følgende fra projektets rodmappe:

yarn dev

Dette starter React-appen og kører serveren på samme tid.

Naviger nu til, //localhost:3000og du vil ramme React-appen, der viser beskeden, der kommer fra vores GETExpress-rute. Dejligt?!

Skriv nu noget i indtastningsfeltet og send formularen, du vil se svaret fra POSTExpress-ruten vist lige under inputfeltet.

Endelig kig på din terminal, du vil se den besked, vi sendte fra klienten, det er fordi vi kalder console.logpå anmodningsorganet i POSTExpress-ruten.

Produktionsinstallation til Heroku

Åbn server.jsog udskift med følgende indhold:

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}`));

Åbn ./package.jsonog tilføj følgende til scriptsposten

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

Heroku kører startscriptet som standard, og dette tjener vores app. Så vil vi instruere Heroku om at opbygge vores klientapp, vi gør det med heroku-postbuildscript.

Gå nu over til Heroku og log ind (eller åbn en konto, hvis du ikke har en).

Opret en ny app, og giv den et navn

Klik på fanen Implementér og følg installationsinstruktionerne (som jeg synes de er ret selvforklarende, ingen mening med at replikere dem her?)

Og det er det, du kan åbne din app ved at klikke på knappen Åbn app øverst til højre i Heroku-dashboardet til din app.

Besøg den implementerede app til denne vejledning: //cra-express.herokuapp.com/

Andre implementeringsmuligheder

Jeg skriver om andre implementeringsmuligheder her:

  • Netlify
  • Nu
  • Heoku (mere detaljeret forklaring)

Projektstruktur

Dette vil være den endelige projektstruktur.

Få den fulde kode på GitHub-arkivet.

Tak for læsningen, og jeg håber, du har haft det. Ethvert spørgsmål, forslag, lad mig det vide i kommentarerne nedenfor!

Du kan følge mig på Twitter, GitHub, Medium, LinkedIn eller dem alle.

Dette indlæg blev oprindeligt sendt på min personlige blogwebsted.

Opdatering 25.8.19: Jeg har bygget en bøn-webapp kaldet " My Quiet Time - A Prayer Journal ". Hvis du gerne vil være i løkken, skal du tilmelde dig via følgende link: //b.link/mqt  

Appen frigives inden årets udgang, jeg har store planer for denne app. For at se nogle mockup-skærmbilleder skal du følge følgende link: //pc.cd/Lpy7

Mine DM'er på Twitter er åbne, hvis du har spørgsmål vedrørende appen?