Πώς να αναπτύξετε μια εφαρμογή React + Node στο Heroku σε 3 λεπτά χωρίς τη γραμμή εντολών

Σε αυτό το σεμινάριο θα κάνουμε μια βασική εφαρμογή React + Node που θα αναπτυχθεί στο Heroku.

Υπάρχουν πολλά σεμινάρια που το κάνουν μόνο χρησιμοποιώντας τη γραμμή εντολών, οπότε για να αλλάξω τα πράγματα λίγο, θα το κάνω εντελώς χωρίς τη γραμμή εντολών.

Για πράγματα όπως η δημιουργία εφαρμογών React και Express, δεν έχουμε άλλη επιλογή από το να χρησιμοποιήσουμε τη γραμμή εντολών. Για οτιδήποτε άλλο θα χρησιμοποιήσουμε ένα GUI.

Υποθέτω επίσης ότι έχετε λογαριασμό Github και Heroku. Και οι δύο είναι δωρεάν, οπότε δεν ανησυχείτε για την εγγραφή σας.

δείγμα έργου:

//github.com/iqbal125/react-express-sample

Αντιδράστε και Express Express

Αρχικά, ας ξεκινήσουμε δημιουργώντας δύο καταλόγους με όνομα Server και Client.

Ο κατάλογος πελάτη θα διατηρεί τα περιεχόμενα της create-react-appεντολής και ο διακομιστής θα διατηρεί τα περιεχόμενα της expressεντολής. Αυτή η βιβλιοθήκη δημιουργεί μια απλή εφαρμογή Express για εμάς αυτόματα, παρόμοια με αυτήν create-react-app. Πρέπει να εγκατασταθεί παγκοσμίως, το οποίο μπορείτε να το κάνετε με την εντολή:

npm install -g express-generator

Μετά από αυτό, απλώς εκτελέστε αυτές τις εντολές σε κάθε έναν από τους αντίστοιχους καταλόγους για να εγκαταστήσετε τα έργα εκκίνησης:

npx create-react-app app1στον κατάλογο Πελάτη

expressστον κατάλογο διακομιστή

Αλλαγή στον κατάλογο app1 που δημιουργήθηκε από create-react-appκαι εκτελέστε:

npm run build

Αυτό θα δημιουργήσει μια έκδοση κατασκευής του έργου που είναι βελτιστοποιημένη για ανάπτυξη παραγωγής, με πράγματα όπως ο κώδικας χειρισμού σφαλμάτων και ο ελεύθερος χώρος.  

Σημείωση: Σε μια έκδοση ανάπτυξης θα χρησιμοποιούσατε έναν διακομιστή μεσολάβησης στο // localhost: 5000 για να επικοινωνήσετε από την εφαρμογή React στον διακομιστή Express, αλλά εδώ η εφαρμογή React και ο διακομιστής Express είναι μόνο ένα έργο. Ο διακομιστής Express εξυπηρετεί τα αρχεία React.

Στη συνέχεια, κόψτε και επικολλήστε ολόκληρο τον κατάλογο build στον κατάλογο Server . Η δομή του έργου σας θα πρέπει να έχει την εξής μορφή:

Μπορούμε τώρα να προσθέσουμε κώδικα για να ενημερώσουμε τον διακομιστή Express για την εξυπηρέτηση του έργου React:

.... app.use(express.static(path.join(__dirname, 'build'))); app.get('/*', (req, res) => { res.sendFile(path.join(__dirname, 'build', 'index.html')); }); .... 

Η πρώτη γραμμή κώδικα εξυπηρετεί όλα τα στατικά αρχεία μας από τον κατάλογο build .

Το δεύτερο κομμάτι του κώδικα είναι να διατηρήσουμε τη δρομολόγηση της πλευράς πελατών μας λειτουργική. Αυτός ο κώδικας ουσιαστικά εξυπηρετεί το index.htmlαρχείο σε άγνωστες διαδρομές. Διαφορετικά, θα χρειαζόταν να ξαναγράψουμε ολόκληρη τη δρομολόγηση για να δουλέψουμε με αυτήν τη ρύθμιση διακομιστή Express.

Για να δοκιμάσετε την εφαρμογή σας, απλώς εκτελέστε npm startτον κατάλογο διακομιστή και μεταβείτε στη διεύθυνση // localhost 3000 στο πρόγραμμα περιήγησης. Τότε θα πρέπει να βλέπετε την εφαρμογή React που εκτελείται.

Τώρα είμαστε έτοιμοι να ανεβάσετε αυτό το έργο στο GitHub.

GitHub

Αντί να χρησιμοποιήσουμε τη γραμμή εντολών για να ανεβάσετε στο GitHub, θα το κάνουμε με το GUI. Αρχικά, μεταβείτε στην αρχική σελίδα του GitHub και δημιουργήστε ένα νέο αποθετήριο. Ονομάστε το ό, τι θέλετε, αλλά βεβαιωθείτε ότι έχει ενεργοποιηθεί η επιλογή Initialize this Repository με μια επιλογή README :

Στη συνέχεια ανεβάστε όλα τα αρχεία έργου χωρίς τον κατάλογο node_modules .

Κάντε κλικ στη δέσμευση και τελειώσαμε. Τα μεταφορτωμένα αρχεία έργου σας θα εμφανίζονται στο GitHub ως εξής:

Τώρα μπορούμε να προχωρήσουμε στη δημιουργία του Heroku.

Ηρόκου

Μεταβείτε στον πίνακα ελέγχου Heroku, δημιουργήστε μια νέα εφαρμογή και ονομάστε την ό, τι θέλετε.

Στη συνέχεια, μεταβείτε στην καρτέλα Ανάπτυξη και επιλέξτε GitHub κάτω από τη μέθοδο ανάπτυξης:

Εάν δεν έχετε συνδέσει ακόμα τον λογαριασμό σας GitHub με τον λογαριασμό σας στο Heroku, θα σας ζητηθεί μέσω της ροής του GitHub Auth.

Μετά από αυτό, αναζητήστε το έργο σας στο GitHub και συνδεθείτε σε αυτό:

Τέλος, μπορούμε απλώς να αναπτύξουμε την εφαρμογή μας κάνοντας κλικ στο κουμπί Ανάπτυξη υποκαταστήματος:

Το Heroku θα εγκαταστήσει αυτόματα όλες τις ενότητες Node για εσάς. Μπορείτε να δείτε το έργο σας κάνοντας κλικ στο κουμπί Προβολή.

Και αυτό είναι, τελειώσαμε! Ευχαριστώ για την ανάγνωση.

Συνδεθείτε μαζί μου στο Twitter για περισσότερες ενημερώσεις σχετικά με μελλοντικά σεμινάρια: //twitter.com/iqbal125sf