Surge VS GitHub Pages: Πώς να αναπτύξετε ένα έργο create-react-app

Ως προγραμματιστής, υπάρχουν διάφοροι τρόποι με τους οποίους μπορείτε να επιδείξετε τις δεξιότητές σας σε συνομηλίκους και υποψήφιους εργοδότες. Οι συνεισφορές ανοιχτού κώδικα είναι εξαιρετικές. Το blogging είναι υπέροχο. Αλλά σε κάποιο σημείο θα θελήσετε να δημιουργήσετε έργα στον Ιστό, όπου οι χρήστες μπορούν πραγματικά να τα χρησιμοποιήσουν.

Πάρα πολλές φορές ξεκίνησα κάτι τοπικά και δεν το έχω ξαναδεί. Μπορεί να έχετε κάνει το ίδιο. Ένας λόγος για τον οποίο αυτό είναι τόσο συνηθισμένο είναι λόγω όλων των επιπλέον εργασιών που τίθενται σε ανάπτυξη.

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

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

Πριν ξεκινήσετε, επιτρέψτε μου να σας πω για το νέο καλύτερο φίλο μου, create-react-app. Εάν σκέφτεστε να μάθετε το React - αλλά αφαιρέστε τον χρόνο που απαιτείται για να ξεκινήσει ένα έργο - αυτό το εργαλείο διεπαφής γραμμής εντολών (CLI) είναι η σωτηρία σας. Θα φροντίσει για το μεγαλύτερο μέρος του βραστήρα που χρειάζεστε για να ξεκινήσετε ένα έργο.

Για να το εγκαταστήσετε και να δημιουργήσετε το πρώτο σας έργο, μεταβείτε στο τερματικό σας και εκτελέστε αυτές τις εντολές:

npm install -g create-react-app 
create-react-app 
cd 

Έξω από το κουτί create-react-appέρχεται με μερικά εύχρηστα σενάρια που σας επιτρέπουν να αναπτύξετε το έργο σας τοπικά και να το αναπτύξετε μετά. Μπορούν να βρεθούν στο package.jsonαρχείο στη ρίζα του καταλόγου έργων σας.

Χρησιμοποιήστε το npm startγια να εκτελέσετε το έργο σας τοπικά ενώ το αναπτύσσετε. Στη συνέχεια χρησιμοποιήστε npm run buildγια να προετοιμάσετε το έργο σας για ανάπτυξη.

Σελίδες Surge.sh και GitHub

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

Υπάρχουν πολλές επιλογές στον χώρο των στατικών πλατφορμών φιλοξενίας ιστότοπων, αλλά οι δύο με τις οποίες θα συνεργαστούμε είναι οι Σελίδες Surge.sh και GitHub.

Και οι δύο αυτές πλατφόρμες είναι από μόνες τους ισχυρές. Ποιο που χρησιμοποιείτε εξαρτάται από την περίπτωσή σας. Στόχος μου είναι να σας δώσω καλύτερη κατανόηση για το γιατί υπάρχουν αυτά τα εργαλεία και τι μπορείτε να κάνετε μαζί τους.

Σημειώστε επίσης ότι παρόλο που αυτή η ανάρτηση αφορά μόνο τη δημοσίευση έργων που έχουν δημιουργηθεί με το create-react-appCLI, οι σελίδες Surge και GitHub θα λειτουργούν ακόμη και με τα πιο βασικά έργα. Ενδέχεται να μπορείτε να παραλείψετε ορισμένα από αυτά τα βήματα εάν δεν χρησιμοποιείτε το ίδιο το React.

Surge.sh

Το Surge είναι ένα πραγματικά φοβερό κομμάτι λογισμικού που ανακάλυψα πρόσφατα από ένα νήμα στο Reddit. Στον πυρήνα του, το Surge είναι ένα CLI που σας επιτρέπει να αναπτύξετε τα έργα σας δωρεάν. Και γρήγορα. Αυτό που κάνει το Surge να ξεχωρίζει είναι η απλότητά του.

Ας δούμε ένα απλό παράδειγμα χρησιμοποιώντας create-react-app.

Αρχικά, εγκαταστήστε το surgeπακέτο παγκοσμίως:

npm install -g surge 

Τώρα που το Surge έχει εγκατασταθεί στο μηχάνημά σας, πρέπει να προετοιμάσετε το έργο σας για ανάπτυξη. Ανέφερα πιο πάνω ότι create-react-appέχει μια δέσμη ενεργειών σε package.jsonονομάζεται build. Αυτό το σενάριο προετοιμάζει ουσιαστικά την εφαρμογή για παραγωγή με ομαδοποίηση και βελτιστοποίηση όλου του κώδικα.

Εκτελέστε npm run buildτη ρίζα του έργου σας:

npm run build

Θα πρέπει να παρατηρήσετε ότι έχει δημιουργηθεί ένας νέος φάκελος στη ρίζα του καταλόγου του έργου σας build. Αυτός ο φάκελος περιέχει την εφαρμογή έτοιμη για παραγωγή.

Εξαιρετικά, σχεδόν τελειώσατε. Το μόνο που μένει είναι να εκτελέσετε την surgeεντολή στη ρίζα του έργου σας:

surge

Εάν αυτή είναι η πρώτη φορά που τρέχετε, surgeθα σας ζητηθεί να δημιουργήσετε έναν λογαριασμό. Προσθέστε ένα email και έναν κωδικό πρόσβασης και, στη συνέχεια, πατήστε enter. Στη συνέχεια, θα δείτε έξοδο παρόμοια:

Για να αναπτύξετε το έργο σας, το Surge χρειάζεται μόνο δύο πράγματα από εσάς:

  1. Η πορεία προς το έργο
  2. Ο τομέας στον οποίο θα φιλοξενείται

Διαδρομή έργου

Θα παρατηρήσετε ότι η διαδρομή του έργουπεδίο στο τερματικό προεπιλογή στον ριζικό κατάλογο. Το Surge υποθέτει ότι σε οποιονδήποτε κατάλογο εκτελείτε την surgeεντολή είναι ο κατάλογος που θέλετε να αναπτύξετε. Στην περίπτωσή σας, πρέπει να τοποθετήσετε το Surge στον buildκατάλογο που δημιουργήθηκε όταν εκτελέσατε npm run build.

Εάν η διαδρομή του έργου σας είναι path/to/my-project, επεξεργαστείτε το σε path/to/my-project/build. Μόλις πραγματοποιήσετε αυτήν την αλλαγή, πατήστε Enter για επιβεβαίωση.

Τομέα

Αφού εισαγάγετε τη διαδρομή του έργου, το Surge θα προτείνει έναν τυχαίο τομέα για χρήση. Μπορείτε να τον διαγράψετε και να προσθέσετε τον δικό σας τομέα, εάν το επιθυμείτε. Απλώς πρέπει να έχει την .surge.shεπέκταση στο τέλος. Το εργαλείο επιτρέπει επίσης προσαρμοσμένους τομείς, κάτι που είναι πραγματικά φοβερό.

Αποδεχτείτε τον προτεινόμενο τομέα ή προσθέστε το δικό σας (προσαρμοσμένο ή τυχαίο με σωστή επέκταση αύξησης) και, στη συνέχεια, πατήστε enter.

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

Σημειώστε ότι εάν η εφαρμογή σας χρησιμοποιεί δρομολόγηση πελάτη , η Surge συνιστά να μετονομάσετε το index.htmlαρχείο στον buildκατάλογό σας 200.htmlπριν εκτελέσετε την surgeεντολή. Μπορείτε να βρείτε περισσότερες πληροφορίες στην τεκμηρίωση Surge.

Σελίδες GitHub

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

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

Αν έχετε εκτελέσει ποτέ npm run buildχρήση create-react-app, τότε ίσως έχετε παρατηρήσει έξοδο που μοιάζει με αυτό:

create-react-appσυνοδεύεται από λεπτομερή τεκμηρίωση για να βοηθήσει τους χρήστες να δημοσιεύσουν την εργασία τους χρησιμοποιώντας όλα τα είδη εργαλείων. Εδώ μπορείτε να δείτε την έξοδο τερματικού σε πραγματικό χρόνο που μας δίνει οδηγίες για το πώς να το κάνουμε μέσω των σελίδων GitHub. Ας το δοκιμάσουμε.

Βήμα 1

Επεξεργαστείτε package.jsonπροσθέτοντας ένα νέο πεδίο με το όνομαhomepage:

"homepage": "//.github.io/"

Εάν το όνομα χρήστη GitHub είναι george-lucasκαι το αποθετήριο GitHub του έργου σας είναι SithJS, η τιμή του homepageπεδίου πρέπει να είναι "//george-lucas.github.io/SithJS".

Ας τρέξουμε npm run buildξανά μετά την αλλαγή:

Παρατηρήσατε τη νέα έξοδο παραπάνω; Το create-react-appCLI μας καθοδηγεί σε όλη τη διαδικασία. Πολύ ευχάριστο.

Βήμα 2

Στη συνέχεια πρέπει να εγκαταστήσετε την gh-pagesπροσθήκη. Αυτό θα μας επιτρέψει να δημοσιεύσουμε στον gh-pagesκλάδο στο GitHub απευθείας από το τερματικό:

npm install --save-dev gh-pages

gh-pagesείναι ένας ειδικός κλάδος που χρησιμοποιεί το GitHub Pages για τη δημοσίευση έργων. Το όμορφο πράγμα είναι ότι ο κλάδος ζει στο ίδιο αποθετήριο με τον κώδικα του έργου σας, αλλά δεν επηρεάζει το ίδιο το έργο.

Σημειώστε ότι εάν έχετε ήδη ένα gh-pagesυποκατάστημα στο αποθετήριο του έργου σας, θα ενημερώσει το υποκατάστημα ανάλογα. Εάν το υποκατάστημα δεν υπάρχει, θα το δημιουργήσει εν κινήσει.

Βήμα 3

Προσθέστε ένα νέο σενάριο στο scriptsεσωτερικό πεδίο package.json. Ας καλέσουμε το σενάριο deploy:

"deploy" : "npm run build&&gh-pages -d build"

Και τέλος ας το τρέξουμε:

npm run deploy

npm run deployθα δημιουργήσει πρώτα το έργο σας μέσω npm run build. Στη συνέχεια, θα το δημοσιεύσει σε gh-pagesυποκατάστημα στο GitHub μέσω gh-pages -d build.

Βήμα 4

Έχουμε σχεδόν τελειώσει. Μεταβείτε στις ρυθμίσεις αποθετηρίου του έργου σας στο GitHub. Στην ενότητα Σελίδες GitHub , επιβεβαιώστε ότι το έργο σας έχει ρυθμιστεί να χρησιμοποιεί το gh-pagesυποκατάστημα.

Τώρα μπορείτε να πλοηγηθείτε στη διεύθυνση URL που εισαγάγατε στο homepageπεδίο του package.jsonαρχείου σας , όπου θα δείτε ότι το έργο σας έχει αναπτυχθεί!

Σημειώστε ότι - όπως και με το Surge - οι σελίδες GitHub έχουν επίσης πρόβλημα με τη δρομολόγηση από τον πελάτη. create-react-appπαραθέτει μερικές λύσεις στην τεκμηρίωση για την ενσωμάτωση των σελίδων GitHub.

Ο νικητής

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

Μέγα κύμα

  • Ελάχιστη διαμόρφωση για την ανάπτυξη ενός έργου
  • Δεν κάνει παραδοχές σχετικά με την τεχνολογία που χρησιμοποιείται
  • Απρόσκοπτη ενσωμάτωση με εργαλεία κατασκευής όπως Grunt και Gulp
  • Μπορεί να χρησιμοποιηθεί ως εξάρτηση ανάπτυξης κατά τη δημιουργία των δικών σας εργαλείων

Σελίδες GitHub

  • Διατηρεί τον κώδικα του έργου και τις ιστοσελίδες (ες) σε ένα μοναδικό αποθετήριο
  • Συγκεντρώνει όλα τα έργα κάτω από τον τομέα .gith ub.io
  • Ανάπτυξη από τη γραμμή εντολών ή από τις ρυθμίσεις αποθετηρίου σας στο GitHub
  • Λειτουργεί εξαιρετικά με στατικές γεννήτριες ιστότοπων όπως το Jekyll

Προσωπικά, επέλεξα τις σελίδες GitHub για το πιο πρόσφατο έργο μου γιατί χρησιμοποιώ ήδη το GitHub σε καθημερινή βάση και μου αρέσει να διατηρώ τα πάντα συγκεντρωτικά. Ίσως μιλάει για το OCD, αλλά μου αρέσει να έχω ατομικά αποθετήρια GitHub για έργα που μπορώ να αναπτύξω ως υποτομέας jake-wies.github.io.

Εάν δημιουργείτε απλώς ένα δοκιμαστικό έργο ή θέλετε να δείξετε μια επίδειξη σε έναν πελάτη, η χρήση του εξαιρετικά γρήγορου CLI του Surge για τη δημιουργία μιας ιστοσελίδας είναι δύσκολο να περάσει. Μπορείτε να δημιουργήσετε τον τομέα γρήγορα και να τον καταρρίψετε μετά.

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

Ευχαριστώ για την ανάγνωση! Είμαι αυτοδίδακτος προγραμματιστής και ξοδεύω τον περισσότερο ελεύθερο χρόνο μου καταδύοντας εργαλεία front-end και γράφοντας το δρόμο μου. Επικοινωνήστε μαζί μου στο Twitter αν έχετε απορίες!