Δημιουργία νέου Laravel project

  • Time to read less than 1 minute
laravel-new-project

Πάλι εδώ με ένα πολύ βασικό θέμα! Σε αυτό το άρθρο θα ήθελα να δώσω μία αλγοριθμική διαδικασία για το πως να δημιουργήσεις ένα νέο project σε Laravel.

ΤΟ PROJECT ΘΑ ΠΕΡΙΕΧΕΙ ΧΡΗΣΤΕΣ, Vue.js ΓΙΑ ΤΟ FRONTEND ΚΑΙ ΕΙΚΟΝΙΔΙΑ ΑΠΟ ΤΟ FONT AWESOME. 

Το Vue.js είναι ένα πανίσχυρο JavaScript Framework για τη δημιουργία διεπαφών χρήστη και εφαρμογών μίας σελίδας. Σου δίνει τη δυνατότητα να αλληλεπιδράς εύκολα με το χρήστη χωρίς να χρειάζεται να γράφεις πολλές γραμμές κώδικα. Είναι περιζήτητο στην αγορά και όπως κατάλαβες, συνήθως πηγαίνει πακέτο με το Laravel, αν και το ίδιο το Laravel δε σε περιορίζει αποκλειστικά σε Vue.js.

Να πω και ένα τελευταίο πριν μπω στο κυρίως πιάτο! Το Font Awesome είναι μία πολύ κουλ σελίδα για να κατεβάζεις και να χρησιμοποιείς δωρεάν icons. Μπορείς να τα κατεβάσεις και σε μορφή svg! Θα τη βρεις στη διεύθυνση https://fontawesome.com/.

ΑΣ ΦΤΙΑΞΟΥΜΕ ΤΟ ΝΕΟ ΜΑΣ PROJECT ΣΕ LARAVEL!

Πάμε στο κυρίως τώρα! Έχω φτιάξει ένα φάκελο “code” στο δίσκο C του υπολογιστή μου. Μπορείς να κάνεις το ίδιο. Από command line (windows powershell) πηγαίνεις στο φάκελο και δίνεις

laravel new blog

Όπου blog = το όνομα που θέλεις να δώσεις στο project σου.

Tip: Ο πιο εύκολος τρόπος για να δημιουργήσεις ένα νέο project είναι μέσω του Laravel με την παραπάνω εντολή.

Το project σου μόλις γεννήθηκε! Μπες στον φάκελο του project (από command line πάντα) και δώσε

php artisan serve

για να σηκώσεις το server του Laravel. Κάνε copy το url που θα σου βγάλει και paste it στον browser ώστε να δεις το δημιούργημά σου! Τόσο απλό!

Άνοιξε και ένα δεύτερο command line γιατί αν πατήσεις Ctrl C στο ήδη ανοικτό θα κλείσεις τον server. Αυτό που έχει τον server μπορείς να το αφήσεις απλώς να λειτουργεί στην άκρη.

Πρέπει να έχεις κατεβασμένο στο μηχάνημά σου το node.js από https://nodejs.org/en/download/ για να προχωρήσεις και να εγκαταστήσεις το Vue.js. Αν δεν το έχεις ήδη κάνει, κάνε το τώρα πριν προχωρήσεις.

Για να εισάγεις χρήστες στην εφαρμογή σου δίνεις

composer require laravel/ui ή composer require laravel/ui --dev

μετά

php artisan ui vue –auth

και στη συνέχεια

npm install

και τέλος

npm run dev

Πρέπει να κάνεις κάποια απλά, αλλά βασικά configurations στο project σου. Το πρώτο είναι ότι πρέπει να κάνεις copy το αρχείο .env.example σε ένα νέο αρχείο με όνομα σκέτο το .env και εκεί κάποιες αλλαγές.

Το όνομά του προέρχεται από τη λέξη environment και περιέχει configurations της εφαρμογής σου. Το Laravel σου δίνει ένα default example για να το κάνεις copy, να το μετονομάσεις όπως είπαμε και να κάνεις μετά στο καινούργιο τις αλλαγές που θα χρειάζεσαι όσο  προχωράει το χτίσιμο του project σου,  ανάλογα με τις ανάγκες που θα προκύψουν.

Ας ξεκινήσουμε με τα απλά όμως! Στο νέο .env σου άλλαξε το όνομα της εφαρμογής σου και δώσε αυτό που θέλεις στο πεδίο APP_NAME. Το διαβάζει ως string. Γράψε το μέσα σε μονά ΄ ΄ ή σε διπλά ‘’ ‘’ αν περιέχει κενό. Όχι ειδικοί χαρακτήρες. Ναι κεφαλαία γράμματα.

Εξαιρετικά σημαντικά tips για ολόκληρη τη web developer καριέρα που χτίζεις με ιδρώτα και τόνους καφέ:

Στο αρχείο composer.json θα βλέπεις ότι αφορά στα dependencies που αφορούν στο backend κομμάτι, δηλαδή σε PHP και κάθε φορά που θα κάνεις κάποια αλλαγή σε αυτά θα πρέπει να κάνεις composer dump-autoload (ναι από command line) ώστε να τα εγκαθιστά.

Αντίστοιχα, στο αρχείο package.json βλέπεις ότι αφορά στα dependencies που αφορούν στο frontend κομμάτι, δηλαδή σε js και κάθε φορά που κάνεις κάποια αλλαγή σε αυτά θα πρέπει να κάνεις npm install και μετά npm run dev. Αντί για npm run dev μπορείς να κάνεις npm run watch ώστε να μείνει ανοικτός ο watcher σου (άλλο ένα command line να λειτουργεί στην άκρη), να παρακολουθεί ότι καινούριο γράφεις στο frontend και να σου το δείχνει στο browser real time κατόπιν refresh.

Πιθανό πρόβλημα: Δεν παίρνει το νέο όνομα της εφαρμογής. Ανοίγεις την εφαρμογή στο browser αλλά δεν βλέπεις το όνομα που έβαλες.

Λύση: Νομίζεις ότι δεν το παίρνει. Το παίρνει αλλά δεν το βλέπεις γιατί πρέπει να του πεις να το δείξει μέσα στο blade. Μπορείς να κάνεις copypaste το παρακάτω στο welcome blade ή στο layouts που μπορεί να έχεις φτιάξει

<title>{{ config('app.name', 'Laravel') }}</title>

 

Το Laravel θα στείλει στο blade που σερβίρεις στο browser το όνομα της εφαρμογής που έγραψες προηγουμένως στο πεδίο APP_NAME μέσα στο .env αρχείο, μέσω του αρχείου config/app.php. Μέσα στο blade ουσιαστικά του λες να το φέρει μέσω της μεθόδου config() η οποία χρησιμοποιεί τη μέθοδο env(). Στο δεύτερο όρισμα που βλέπεις, το οποίο εδώ είναι ‘Laravel’, γράφεις τι όνομα θέλεις να φαίνεται στην εφαρμογή σου σε περίπτωση που αποτύχει να βρει αυτό που όρισες στο αρχείο .env. Είναι το plan B σου!

Και τελευταία τα icons! Για να μπορείς να εισάγεις icons από το Font Awesome, κάνε copy paste αυτό το script στο welcome blade ή στο layouts που μπορεί να έχεις φτιάξει

<script src="https://kit.fontawesome.com/aeab990815.js" crossorigin="anonymous"></script>

και στη συνέχεια

npm install

και τέλος

npm run dev ή watch

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

 

Add new comment

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.