So stellen Sie eine React-App mit einem Express-Server auf Heroku bereit

Hallo Welt! Vor kurzem musste ich eine Website für Heroku für eine meiner freiberuflichen Arbeiten einrichten. Ich denke, dass dieser Prozess etwas schwierig sein kann, und ein detailliertes Tutorial oder ein Artikel darüber, wie das gemacht wird, sollte helfen. Dieser wird also sehr einfach und hoffentlich sehr kurz sein.

Zunächst erstellen wir eine Express-App, die als Server fungiert. Sobald der Server fertig ist, erstellen wir eine einfache Anwendung zum Erstellen und Reagieren von Apps, verbinden den Server mit dem Frontend und stellen das Ganze schließlich auf einer Hosting-Plattform wie Heroku bereit.

Bevor wir weitermachen, möchten wir Sie bitten zu verstehen, dass in der Welt der Webentwicklung fast alles den eigenen Vorlieben entspricht. Einige von Ihnen sind in bestimmten Dingen nicht einverstanden, Sie können so weitermachen, wie Sie es möchten, und das ist völlig in Ordnung. Bis zu dem Zeitpunkt, an dem wir den Antrag brechen, halte ich alles für in Ordnung.

Lass uns anfangen.

Erstellen Sie eine Node / Express-App

Erstellen Sie zunächst einen Ordner für das Gesamtprojekt. Dieser Ordner enthält die clientseitige Anwendung - in diesem Fall unsere React-App. Navigieren Sie zu dem Verzeichnis in Ihrem Terminal und geben Sie die folgenden Befehle ein.

$ touch server.js
$ npm init

Der letzte Befehl aus dem obigen Snippet führt Sie durch einige der Schritte und initialisiert Ihr Projekt mit einer package.json-Datei. Wenn Ihnen dies völlig neu ist, können Sie diese Datei als Hauptbuch betrachten, in dem Sie alle Abhängigkeiten aufzeichnen, die Sie während des Erstellungsprozesses Ihrer Anwendung verwenden.

Nun, da wir die Datei package.json fertig haben, können wir unsere Abhängigkeit für das Projekt hinzufügen.

Express hinzufügen:

$ npm i -g express --save

Dadurch wird Express als Abhängigkeit zu Ihrer package.json hinzugefügt. Jetzt, da wir dies haben, brauchen wir nur noch eine Abhängigkeit, und zwar für das erneute Laden der App im laufenden Betrieb, wenn wir Änderungen am Code vornehmen:

$ npm i -g nodemon --save --dev

Dadurch wird der App ein Nodemon hinzugefügt. Wenn Sie mehr über nodemon erfahren möchten, können Sie diesen Link für weitere Informationen überprüfen.

Nachdem wir diese hinzugefügt haben, können wir unseren einfachsten Server in Express erstellen. Mal sehen, wie das gemacht wird.

const express = require ('express');
const app = express ();
const port = process.env.PORT || 5000;
// Route einrichten
app.get ('/', (req, res) => {
  
  res.send ('root route');
})
// Server starten
app.listen (port, (req, res) => {
console.log (`Server lauscht auf Port: $ {port}`)
 });

Das ist es. Navigieren Sie einfach zum Terminal, vergewissern Sie sich, dass Sie sich im Stammverzeichnis des Projekts befinden, und geben Sie Folgendes ein:

$ nodemon  (index.js / server.js)

In unserem Fall wäre es, da wir es server.js genannt haben, nodemon server.js. Dadurch wird der Server an Port 5000 Ihres Computers lokal gestartet. Wenn Sie den Browser besuchen und https: // localhost: 5000 / öffnen, wird der Text "root route" angezeigt, was bedeutet, dass der Server gestartet wurde. Falls Sie auf Probleme stoßen, können Sie diese in den Kommentaren unten hinzufügen.

Nachdem der Server eingerichtet ist und funktioniert, fahren wir mit dem Einrichten der React-App fort.

App reagieren

$ npm i -g Erstelle-Reagiere-App
$ create-react-app 

In diesem Lernprogramm wird die App "client" genannt, sodass unser Befehl wie dieser "create-react-app client" aussieht.

Sobald dies erledigt ist, wird das Setup einige Zeit in Anspruch nehmen und einen schönen kleinen Ordner in Ihrer Hauptanwendung mit dem Namen "client" erstellen.

Wir werden vorerst keine größeren Änderungen an der gesamten React-Anwendung vornehmen - dies liegt außerhalb des Umfangs dieses Lernprogramms.

Jetzt besteht die Herausforderung darin, dass wir anrufen und eine Verbindung zu unserem Server herstellen müssen, der auf dem lokalen Host ausgeführt wird. Dazu müssen wir einen API-Aufruf durchführen.

Proxy hinzufügen

Mit React können wir dies tun, indem wir unserer package.json-Datei einen Proxy-Wert hinzufügen. Navigieren Sie zu der Datei package.json in Ihrem Verzeichnis und fügen Sie den folgenden Code hinzu.

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

In unserem Fall läuft der Server an Port 5000, daher der 5000 im Proxy-Wert. Der Wert kann variieren, wenn Sie einen anderen Port verwenden.

Jetzt müssen wir die Express-definierten Endpunkte oder API-Endpunkte aus unseren React-Komponenten aufrufen. Was das wirklich bedeutet ist, dass wir jetzt einfach "api / users / all" von unserer Client-Seite aufrufen können, was dann unsere Anfrage weiterleitet und wie folgt aussieht: "https: // localhost: 5000 / api / users / all" Dies erspart es uns, Cross-Origin-Anfragen zu stellen, die die meisten modernen Browser aus Sicherheitsgründen nicht zulassen.

Als nächstes werden wir einige Änderungen an der Datei src / app.js vornehmen.

importiere React, {Component} von 'react';
import './App.css';
importiere Navbar von './Components/Layout/Navbar';
{BrowserRouter als Router, Route} aus 'react-router-dom' importieren;
Fußzeile aus './Components/Layout/Footer' importieren;
importiere Home von './Components/Layout/Home';
importiere Social von './Components/social/Social';
Klasse App erweitert Komponente {
  Konstruktor (Requisiten) {
    super (Requisiten);
    this.state = {}
    this.connecToServer = this.connecToServer.bind (this);
  }
  connecToServer () {
    holen('/');
  }
  componentDidMount () {
    this.connecToServer ();
  }
  render () {
    Rückkehr (
      
      
                                       
                  );   } }
Standard-App exportieren;

Was wir getan haben, war, einen Konstruktor zu erstellen und den Wert davon in unserer Funktion zu binden, die den Aufruf der Fetch-API veranlasst. Dann rufen wir die Funktion auf, sobald die Komponente gemountet ist. Als nächstes haben wir die Render-Funktion, die das gesamte Markup für die App hat. Das war also die letzte Änderung, die wir in React oder unserer Frontend-Anwendung vornehmen werden.

Ihre package.json-Datei sollte wie das folgende Code-Snippet aussehen.

{
  "name": "Projektname",
  Version: 0.1.0,
  "privat": wahr,
  "Abhängigkeiten": {
    "reagieren": "^ 16.6.3",
    "react-dom": "^ 16.6.3",
    "Reaktion-Skripte": "2.1.1",
    "react-router-dom": "^ 4.3.1"
  },
  "Skripte": {
    "start": "Reaktion-Skripte starten",
    "build": "React-Skripte bauen",
    "test": "React-Scripts-Test",
    "Eject": "React-Scripts Eject"
  },
  "eslintConfig": {
    "erweitert": "reagieren-app"
  },
  "Proxy": "http: // localhost: 5000",
  "Browserliste": [
    > 0,2%
    "nicht tot",
    "nicht dh <= 11",
    "nicht alle op_mini"
  ]
}

Jetzt machen wir eine kurze Pause und überlegen, was wir als nächstes tun müssen. irgendwelche Gedanken?

Einige von Ihnen sind der Meinung, wir müssen sicherstellen, dass unsere React-Dateien von unserem Express-Server bereitgestellt werden. Nehmen Sie einige Änderungen an der Datei server.js vor, um sicherzustellen, dass die React-Dateien vom Express-Server bereitgestellt werden.

Änderung der Serverdatei

const express = require ('express');
const app = express ();
const path = require ('path');
const port = process.env.PORT || 5000;
// Statische Dateideklaration
app.use (express.static (path.join (__ dirname, 'client / build')));
// Produktionsmodus
if (process.env.NODE_ENV === 'production') {
  app.use (express.static (path.join (__ dirname, 'client / build')));
  //
  app.get ('*', (req, res) => {
    res.sendfile (path.join (__ dirname = 'client / build / index.html'));
  })
}
// Erstellungsmodus
app.get ('*', (req, res) => {
  res.sendFile (path.join (__ dirname + '/ client / public / index.html'));
})
// Server starten
app.listen (port, (req, res) => {
  console.log (`Server lauscht am Port: $ {port}`);
})

Im obigen Code-Snippet müssen Sie zuerst das eingebaute Pfadmodul in node verwenden und den statischen Ordner deklarieren, den Sie auf diesem Express-Server verwenden möchten.

Anschließend prüfen Sie, ob der Prozess produktiv ist. Dies ist der Fall, wenn die App für Heroku bereitgestellt wird. Unter dieser Bedingung möchten Sie die Datei index.html aus dem Erstellungsordner und nicht aus dem öffentlichen Ordner bereitstellen.

Wenn dies nicht der Produktionsmodus ist und Sie eine Funktion testen und Ihr Server auf dem lokalen Host ausgeführt wird, möchten Sie, dass die index.html aus dem öffentlichen Ordner bereitgestellt wird.

Jetzt müssen wir sicherstellen, dass wir zuerst unseren Express-Server starten und dann unseren React-Server starten. Jetzt gibt es viele Möglichkeiten, dies zu tun, und zur Vereinfachung dieses Tutorials werden wir ein Modul verwenden, das gleichzeitig aufgerufen wird, um beide Server mit einem Befehl auszuführen.

Stellen Sie sicher, dass Sie sich im Stammverzeichnis befinden, und führen Sie den folgenden Befehl von Ihrem Terminal aus.

npm ich gleichzeitig --save

Nehmen Sie anschließend einige Änderungen an den Skripten in unseren Express-Server-package.json-Dateien vor.

"Skripte": {
    "client-install": "npm install --prefix client",
    "start": "node index.js",
    "server": "nodemon index.js",
    "client": "npm start --prefix client",
    "dev": "npm run server" "npm run client",
}
  • npm run client-install installiert alle Abhängigkeiten für die React-Anwendung
  • npm start startet den Server und lädt nicht neu, nachdem Änderungen festgestellt wurden
  • npm run server startet den Server, wartet auf Änderungen im Code und lädt die Seite im Browser im laufenden Betrieb neu, um die Änderungen zu berücksichtigen.
  • npm run client führt die React-Anwendung aus, ohne den Server zu starten
  • npm run dev führt gleichzeitig den Server und dann den Client in Ihrem Browser aus

Heroku-Setup

Stelle sicher, dass du einen Account bei Heroku hast. Wenn Sie dies nicht tun, können Sie mit Ihren GitHub-Anmeldeinformationen sehr schnell eine erstellen.

Als Nächstes installieren wir die Heroku-CLI, mit deren Hilfe wir die Anwendung direkt von unserem Terminal aus bereitstellen können. Klicken Sie hier, um Installationsanweisungen für MacOS und Windows zu erhalten.

$ heroku login

Geben Sie die Anmeldedaten für Herkou ein und dann:

$ heroku erstellen

Dadurch wird eine Anwendung für Sie erstellt. Wenn Sie jetzt das Heroku-Dashboard besuchen, wird die Anwendung dort angezeigt.

Jetzt müssen wir sicherstellen, dass wir einen Build-Ordner in unserem Projekt haben, bevor wir das Projekt in das Heroku-Repository verschieben. Fügen Sie das folgende Skript in Ihre package.json-Datei ein.

"Skripte": {
    "client-install": "npm install --prefix client",
    "start": "node server.js",
    "server": "nodemon server.js",
    "client": "npm start --prefix client",
    "dev": "npm run server" "npm run client",
    "heroku-postbuild":
      "NPM_CONFIG_PRODUCTION = false npm install --prefix client
       && npm run build --prefix client "
  },

Speichern Sie anschließend die Datei und verschieben Sie das gesamte Projekt-Repository in Ihren Heroku-Anwendungszweig.

// füge remote hinzu
$ heroku git: remote -a Anwendungsname
$ git add.
$ git commit -am 'Bereitstellungsvorbereitung'
$ git push heroku master

Und das sollte es sein.

Sobald dies erledigt ist, erhalten Sie eine URL für Ihr live gehostetes Projekt. Teilen und präsentieren Sie, was Sie mit diesen Technologien erstellen können.

Wenn Sie Fragen oder Kommentare haben, können Sie diese gerne hinzufügen oder direkt eine Verbindung herstellen.

Github: https://github.com/ashishcodes4

Twitter: https://twitter.com/ashishnandansin

LinkedIn: https://www.linkedin.com/in/ashish-nandan-singh-490987130/