Warning: Use of undefined constant _COOKIE - assumed '_COOKIE' (this will throw an Error in a future version of PHP) in /home/u108532764/domains/psmakos.com/public_html/blog/wp-content/themes/divi/includes/functions/sanitization.php on line 186

Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /home/u108532764/domains/psmakos.com/public_html/blog/wp-content/themes/divi/includes/builder/functions.php on line 4783
ASP.NET Core + Angular 2 template for Visual Studio - psmakos Blog

ASP.NET Core + Angular 2 template for Visual Studio

by | Apr 29, 2017 | ASP .Net, Visual Studio | 5 comments

Τώρα πλέον που τα ASP.NET Core, Angular 2 και TypeScript 2 βρίσκονται σε τελικές εκδόσεις, θα ήταν πολύ ωραίο να τα συνδυάσουμε όλα σε μία ισχυρή και πλούσια πλατφόρμα εφαρμογών ιστού.

Εκτός από τα βασικά του για να φιλοξενηθεί ένα TypeScript Angular 2 site σε ASP.NET Core το template περιλαμβάνει και τα εξής:

  • Προεγκατάσταση από την πλευρά του διακομιστή, (Server-side prerendering) επομένως το UI σας μπορεί να εμφανιστεί πολύ γρήγορα, ακόμα και πριν το πρόγραμμα περιήγησης κατεβάσει τον κώδικα JavaScript.
  • Ενσωμάτωση ενδιάμεσου λογισμικού Webpack, έτσι ώστε κατά τη διάρκεια της ανάπτυξης να μην χρειαστεί να συνεχίσετε την ανακατασκευή της εφαρμογής σας από την πλευρά του πελάτη ή ακόμα και να εκτελέσετε ένα εργαλείο παρακολούθησης στο παρασκήνιο.
  • Αντικατάσταση του Hot module, έτσι ώστε κατά την ανάπτυξη, κάθε φορά που επεξεργάζεστε ένα αρχείο TypeScript, ένα αρχείο CSS ή άλλο πόρο από την πλευρά του πελάτη, οι αλλαγές σας προωθούνται στο πρόγραμμα περιήγησης αμέσως χωρίς να φορτώσετε ξανά τη σελίδα (ώστε να μην χάσετε την ενεργή συνεδρία σας εντοπισμού σφαλμάτων , και τα λοιπα.)
  • Γρήγορα builds. Κατά την ανάπτυξη, δεν χρειάζεται να περιμένετε να γίνει επανεξέταση του third-party κώδικα από το webpack κάθε φορά που αλλάζετε τον δικό σας κώδικα, επειδή αναλύεται ο third-party κώδικας σε ξεχωριστή δέσμη.

Εγκατάσταση

Πρώτα βεβαιωθείτε ότι έχετε εγκαταστήσει αυτές τις προϋποθέσεις. Τα πράγματα δεν θα λειτουργήσουν χωρίς αυτά!
Visual Studio 2015 Update 3. Σημειώστε ότι το Update 2 δεν αρκεί. Χρειάζεστε το Update 3, επειδή διορθώνει ορισμένα προβλήματα με το NPM, συν το οτι είναι απαραίτητη προϋπόθεση για το TypeScript 2.0.
.NET Core 1.0.1
TypeScript 2.0 for Visual Studio 2015. Εάν το Visual Studio εξακολουθεί να παραπονιέται (Cannot find name ‘require’), είναι επειδή ξεχάσατε να εγκαταστήσετε αυτό.
Node.js version 4 ή νεότερο.

Τώρα αφού έχετε ελέγξει τις προϋποθέσεις που έχουν εγκατασταθεί, απλά κατεβάστε και εγκαταστήστε το ASP.NET Core Template Pack extension.

Δημιουργία και εκτέλεση ενός project.

Όταν έχετε τις προαπαιτήσεις που αναφέρονται παραπάνω και έχετε εγκαταστήσει ASP.NET Core Template Pack extension, μπορείτε να μεταβείτε στο μενού File New Project του Visual Studio, να αναπτύξετε την κατηγορία Web και να διαλέξετε το ASP.NET Core Angular 2 Starter Application (.NET Core):

Δώστε στο project σας ένα όνομα και κάντε κλικ στο κουμπί OK.

Τώρα περιμένετε υπομονετικά, καθώς το Visual Studio αποκαθιστά όλες τις εξαρτήσεις του Node.js (NPM)! Αυτό μπορεί να διαρκέσει αρκετά λεπτά, ανάλογα την ταχύτητα σύνδεσή σας στο διαδίκτυο.

Σε αυτό το σημείο, είναι πιθανό να συναντήσετε κάτι που μοιάζει με πρόβλημα, αλλά στην πραγματικότητα δεν είναι. Όταν το Visual Studio ολοκληρώσει την αποκατάσταση των εξαρτήσεων του NPM, θα εμφανίσει το μήνυμα “Dependencies – not installed”:

Ωστόσο, το VS κάνει λάθος! Το γεγονός ότι βλέπετε τα πακέτα που αναφέρονται με τους αριθμούς έκδοσης τους σημαίνει ότι είναι εγκατεστημένα. Μπορείτε απλός να αγνοείστε το μήνυμα “not installed” στην προκείμενη περίπτωση, αλλά αν αυτό δεν σας καλύπτει μπορείτε να ακολουθήσετε τα βήματα του Hanselman για να το φτιάξετε.

Τώρα μπορείτε να εκτελέσετε το project σας. Πατήστε Ctrl + F5 για να ξεκινήσετε χωρίς σφάλμα (όπως οποιοδήποτε άλλο έργο VS) ή πατήστε το εικονίδιο “Play” στη γραμμή εργαλείων (με την επωνυμία IIS Express), εάν δεν βρίσκεστε σε συντομεύσεις πληκτρολογίου. Θα εμφανιστεί:

Προεγκατάσταση από την πλευρά του διακομιστή
(Server-side prerendering)

Κάντε κλικ γύρω από τον ιστότοπο εκκίνησης. Θα βρείτε μερικά παραδείγματα απλών στοιχείων που έχουν κατασκευαστεί με την Angular 2. Δεν φαίνεται να συμβαίνει κάτι το τρομερό, αλλά υπάρχουν μερικά δροσερά πράγματα που συμβαίνουν πίσω από τα «σκηνικά».

Το πρώτο πράγμα είναι ότι, παρόλο που πρόκειται για μια εφαρμογή Angular 2 που συνήθως τρέχει στο πρόγραμμα περιήγησης, το ASP.NET Core μπορεί να το εκτελέσει και στον διακομιστή (Server), οπότε απλώς στέλνει απλή HTML στο πρόγραμμα περιήγησης που δεν χρειάζεται ακόμη JavaScript για εμφάνιση.

Για να το αποδείξετε στον εαυτό σας, δοκιμάστε να απενεργοποιήσετε εντελώς το JavaScript στο πρόγραμμα περιήγησής σας (για χρήστες Chrome, ανοίξτε τα εργαλεια για προραμματιστες “Developer Tools”, πατήστε F1, ελέγξτε το πλαίσιο Απενεργοποίηση JavaScript και, στη συνέχεια, επαναλάβετε τη φόρτωση της σελίδας αφήνοντας ανοιχτά τα εργαλεία προγραμματιστών):

Θα διαπιστώσετε ότι η εφαρμογή σας εμφανίζεται ακριβώς όπως και πριν, παρόλο που το πρόγραμμα περιήγησής σας δεν μπορεί να εκτελέσει κανέναν κωδικό πελάτη. Μπορείτε ακόμα να περιηγηθείτε κάνοντας κλικ στους συνδέσμους της πλαϊνής γραμμής. Αλλά σημειώστε πως: η πλοήγηση είναι το μόνο πράγμα που θα λειτουργήσει, επειδή αυτό είναι ένα βασικό χαρακτηριστικό HTML. Στην οθόνη “counter”, θα συνειδητοποιήσετε πως το counter button δεν κάνει τίποτα αν το πατήσετε, επειδή αυτό είναι ενσύρματο σε χειριστή συμβάντων JavaScript (JavaScript event handler) και δεν έχετε JavaScript πλέον αφού τα απενεργοποιήσατε.

Λοιπόν, ποιο είναι το ζητούμενο της “προεπεξεργασίας του διακομιστή”;

Το ζητούμενο δεν είναι να υποστηρίζουμε προγράμματα περιήγησης που δεν έχουν ενεργοποιημένη τη JavaScript. Αυτό θα λειτουργούσε μόνο στην ακραία περίπτωση όπου η εφαρμογή δεν έχει λειτουργικότητα εκτός από την πλοήγηση (και σε αυτή την περίπτωση, γιατί την κατασκευάζετε ως SPA;).

Τα πραγματικά οφέλη είναι:

  1. Δίνει μια δραματική βελτίωση στην αντιληπτή απόδοση για τους χρήστες σας. Ακόμα κι αν βρίσκονται σε αργή συσκευή και αργή σύνδεση στο διαδίκτυο, μπορούν να δουν το UI της εφαρμογής σας σε ένα κλάσμα του δευτερολέπτου και ίσως να διαβάσουν οποιεσδήποτε από τις πληροφορίες που τους δείχνετε. Στο παρασκήνιο, η δυνητικά μεγάλη δέσμη JavaScript κατεβαίνει, αναλύετε και εκτελείτε στο παρασκήνιο και στη συνέχεια αναλαμβάνει αυτόματα την δημιουργία της εφαρμογής σας ώστε να φτάσει πλήρως λειτουργική στον πελάτη (client). Αυτό είναι πολύ καλύτερο από την απλή εμφάνιση κενής οθόνης κατά την φόρτωση της εφαρμογής.
  2. Υποστηρίζει ανιχνευτές ιστού (web crawlers) που ενδέχεται να μην εκτελέσουν JavaScript. Όσον αφορά δηλαδή οποιαδήποτε μηχανή αναζήτησης, απλά επιστρέφετε απλό παλιό HTML, οπότε ο ιστότοπός σας μπορεί να ανιχνευθεί και να ευρετηριωθεί με τον συνήθη τρόπο.

Υπάρχουν περιορισμοί στην απόδοση του διακομιστή. Συγκεκριμένα, ο κώδικας εφαρμογής σας δεν μπορεί απλά να υποθέσει ότι εκτελείται πάντα σε ένα πρόγραμμα περιήγησης. Αν προσπαθήσετε να αναφέρετε απευθείας το DOM (Document Object Model) του προγράμματος περιήγησης, θα λάβετε ένα σφάλμα όπως το

window is undefined

όταν εκτελείται από την πλευρά του διακομιστή (server-side). Ευτυχώς αυτό είναι σπάνια πρόβλημα, επειδή σε μια καλά σχεδιασμένη Angular εφαρμογή (ή React, κλπ.), το framework δεν θέλει στην πραγματικότητα να ασχοληθείτε με DOM απευθείας ούτως ή άλλως, οπότε δεν πρέπει να υποθέτετε τα στοιχεία του προγράμματος περιήγησης ανεξάρτητα από την απόδοση του διακομιστή.

Εάν δεν θέλετε να χρησιμοποιήσετε την προ-αποστολή σελίδας διακομιστή για κάποιο λόγο, απενεργοποιήστε την καταργώντας το “asp-prerender-module” χαρακτηριστικό από το <app> element στο “Views/Home/Index.cshtml.”

Ενσωμάτωση του Webpack.

Ο κώδικας σε αυτήν την εφαρμογή είναι γραμμένος σε TypeScript. Αυτό σημαίνει ότι χρειάζεστε ένα build step για να μπορέσετε να το εκτελέσετε. Το ίδιο θα ήταν ίσχυε και αν χρησιμοποιούσατε το SASS (μεταγλωττίζεται στο CSS) ή θέλετε να καινατε bundled και minified τον library code σας.

Το κυρίαρχο σύστημα δημιουργίας σύγχρονων εφαρμογών JavaScript είναι το Webpack. Είναι σαν το Grunt ή το Gulp, αλλά για το 2017. Εξασφαλίζει τη σύνταξη του TypeScript, τη συσχέτιση και την εξομάλυνση, και περίπου ένα εκατομμύριο άλλα πράγματα που οι άνθρωποι έχουν συνεισφέρει με τα plugins. Εμείς το χρησιμοποιούμε στο συγκεκριμένο template και μας επιτρέπει μερικά όμορφα χαρακτηριστικά οπός:

To Webpack dev middleware

Κανονικά, κάθε φορά που αλλάζετε ένα από τα αρχεία TypeScript, θα πρέπει να εκτελέσετε “webpack” στη γραμμή εντολών για να αναγεννηθούν τα αρχεία JavaScript που έχουν μεταγλωττιστεί στο “wwwroot/dist”. Αλλά με το χαρακτηριστικό του “webpack dev middleware” σας απαλλάσσει από το να κάνετε κάτι τέτοιο.

Εάν η εφαρμογή σας εκτελείται σε κατάσταση ανάπτυξης (development mode), η οποία είναι προεπιλεγμένη κατά την εκκίνηση από το Visual Studio, τότε το Webpack εκτελείται στο παρασκήνιο και παρακολουθεί τυχόν αιτήματα σε αρχεία στο “http://yoursite/dist”. Αντιμετωπίζει κάθε τέτοιο αίτημα επιστρέφοντας το αρχείο που θα συγκεντρωθεί σε εκείνη την τοποθεσία, λαμβάνοντας υπόψη τυχόν αλλαγές που έχετε κάνει στα αρχεία προέλευσης.

Επειδή ο μεταγλωττιστής Webpack (Webpack compiler) παραμένει ενεργός στη μνήμη, είναι σε θέση να παράγει σταδιακά μεταγλωττισμένες ενημερώσεις σε ένα μικρό κλάσμα του συνηθισμένου χρόνου κατασκευής (συνήθως στη σειρά μερικών δεκάδων δευτερολέπτων), έτσι ώστε η αναπτυξιακή σας εμπειρία να μην διακόπτεται οπός αντίθετα θα γινότανε σε κάθε άλλη περίπτωση.

Hot module replacement (HMR)

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

Το HMR λιπών το λύνει αυτό. Είναι ενεργοποιημένο από προεπιλογή όταν τρέχετε σε κατάσταση ανάπτυξης (development mode) και προσέχει για τυχόν αλλαγές στα Angular application source files (TypeScript, HTML, CSS κ.λπ.). Όταν αλλάξει κάτι, κάνει μια γρήγορη βαθμιαία μεταγλώττιση, χρησιμοποιώντας την συνιστώσα του μεταγλωττιστή Webpack μέσα στην μνήμη και ωθεί τις αλλαγές σε όλα τα ενεργά παράθυρα του προγράμματος περιήγησης. Η εφαρμογή σας θα ενημερωθεί εκ περιτροπής, χωρίς να φορτώνεται ξανά η σελίδα.

Για να δείτε αυτό το έργο, ανοίξτε την κονσόλα εντοπισμού σφαλμάτων του προγράμματος περιήγησης ενώ βρίσκεστε σε κατάσταση ανάπτυξης (π.χ. ξεκίνησε από το Visual Studio). Θα δείτε αυτό το μήνυμα:

Ειδατε το “[HMR] connected”; Αυτό σημαίνει ότι είναι έτοιμο να λάβει αλλαγές. Δοκιμάστε να επεξεργαστείτε ένα από τα αρχεία προέλευσης. Για παράδειγμα, επεξεργαστείτε το “ClientApp/app/components/home/home.component.html” όπως σε αυτό το όμορφο κινούμενο GIF:

Ομοίως δουλεύει εάν επεξεργαστείτε το CSS ή ακόμα και εικόνες που έχουν φορτωθεί μέσω των δηλώσεων του Webpack “require”.

Διαμόρφωση του webpack

Θα βρείτε τα αρχεία διαμόρφωσης του Webpack στο project root, που ονομάζεται “webpack.config.js” και “webpack.config.vendor.js”.

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

Το μόνο αξιοσημείωτο πράγμα που έχει διαμορφωθεί σε αυτό το project είναι ότι οι δημιουργεί του tamplete έχουν διαιρέσει τον κώδικα εξάρτησης thirty-party (δηλ. Το “vendor” code) σε ξεχωριστή δέσμη, που ελέγχεται από το αρχείο “webpack.config.vendor.js”. Αυτό κάνει τα rebuilds πολύ πιο γρήγορα, επειδή το Webpack δεν χρειάζεται να αναλύσει τις μεγάλες βιβλιοθήκες όπως το Angular 2 σε κάθε build.

Μπορείτε να προσθέσετε επιπλέον εξαρτήσεις third-party στο “webpack.config.vendor.js” σας, όπως στο παρακάτω παράδειγμα. Όποτε το κάνετε, εκτελέστε το “webpack –config webpack.config.vendor.js” στη γραμμή εντολών για να ενημερώσετε το vendor bundle. Αν χρειαστεί, εγκαταστήστε πρώτα το εργαλείο γραμμής εντολών Webpack, εκτελώντας το “npm install -g webpack”.

Προσθήκη third-party βιβλιοθήκες (libraries).

Οι περισσότερες βιβλιοθήκες JavaScript στης μέρες μας διανέμονται στο NPM. Τέτοιες βιβλιοθήκες είναι αρκετά εύκολο να συμπεριληφθούν στο Project σας (υποθέτοντας ότι συνεργάζονται με τις άλλες τεχνολογίες που έχετε επιλέξει, όπως το Angular 2).

Για παράδειγμα, ας υποθέσουμε ότι θέλετε να χρησιμοποιήσετε τη Font Awesome, the “iconic font and CSS toolkit”. Στο Visual Studio, ανοίξτε το αρχείο package.json και προσθέστε “font-awesome”: “^4.6.3” στη λίστα. Το Visual Studio θα ολοκληρώσει αυτόματα το όνομα του πακέτου και θα σας προτείνει τον τρέχοντα αριθμό έκδοσης. Τώρα αποθηκεύστε το επεξεργασμένο αρχείο “package.json” και το VS θα ανακτήσει και θα εγκαταστήσει τη νέα σας εξάρτηση NPM. Εναλλακτικά, μπορείτε να εκτελέσετε “npm install –save font-awesome” στη γραμμή εντολών.

Τώρα ας το προσθέσουμε στο  vendor bundle. Ανοίξτε το αρχείο “webpack.config.vendor.js” και στο εσωτερικό του πίνακα που ονομάζεται “vendor” (αυτός που περιλαμβάνει ‘@angular/common’, ‘ ‘@angular/compiler’ κλπ.), Προσθέστε “font-awesome/css/font-awesome.css”. Η σειρά δεν έχει σημασία, αλλά η αλφαβητική θα ηταν πολυ ωραία:

Πώς γνωρίζαμε να αναφέρουμε το “font-awesome/css/font-awesome.css”; Λοιπόν, αν ήταν βιβλιοθήκη JavaScript, θα αναφέρατε μόνο το όνομα του πακέτου (π.χ., “moment” για το Moment.js). Αλλά από την στιγμή που αυτό που θέλουμε από το “font-awesome” είναι ένα αρχείο CSS (και άλλα πράγματα που αναφέρονται από αυτό το αρχείο CSS, όπως γραμματοσειρές ή εικόνες), δίνουμε τη διαδρομή προς το αρχείο CSS που θέλουμε, όπως καθορίζεται από το έγγραφο Font Awesome docs.

Στην συνέχεια, είναι σημαντικό να κάνουμε rebuild bundle “wwwroot/dist/vendor.js” μας. Δεν το κάνουμε rebuild κάθε φορά αυτόματα, διότι παίρνει αρκετό χρόνο (συνήθως 10 δευτερόλεπτα) και θα ήταν άχρηστο εφόσον δεν το έχουμε επεξεργαστεί. Οπότε, σε μια γραμμή εντολών (command prompt), στο root φάκελο του Project ομοίως με παραπάνω, εκτελέστε το “webpack –config webpack.config.vendor.js”. Εάν δεν έχετε ήδη από πριν το “webpack” tool εγκατεστημένο, θα πρέπει να εκτελέσετε την εντολή “npm install -g webpack” πρώτα.

Τώρα το αρχείο CSS του Font Awesome (και οι άλλες εξαρτήσεις του, όπως οι γραμματοσειρές ή τα αρχεία SVG) βρίσκεται στο vendor bundle σας, οπότε μπορείτε τώρα να το χρησιμοποιήσετε. Για παράδειγμα, στο “ClientApp/app/components/navmenu/navmenu.component.html”, μπορείτε να χρησιμοποιήσετε το εικονίδιο ” calculator ” του Font Awesome:

… και θα εμφανιστεί στη σελίδα σας:

Σημείωση: Εάν λάβετε ένα μήνυμα όπως το “Uncaught ReferenceError: vendor_1e69f8aba84bb345782b is not defined”, οφείλεται στο γεγονός ότι (1) ξεχάσατε να εκτελέσετε “webpack –config webpack.config.vendor.js” ή (2) το κάνατε, αλλά δεν έχετε ακόμη Επανεκκίνησε την αίτησή σας. Επειδή οι αλλαγές των vendor file είναι σπάνιες και χρειάζονται κάποιο χρόνο επεξεργασίας, δεν τις κάνουμε rebuild αυτόματα ή δεν τις ενσωματώνουμε με το HMR, οπότε στις σπάνιες περιπτώσεις όπου τροποποιείτε τα περιεχόμενα του vendor σας, θα χρειαστεί να τον κάνουμε rebuild και να επανεκκινήσετε το ASP.NET application.ke σας.

Δημοσίευση στο Azure.

Προτού μπορέσετε να κάνετε deploy, θα πρέπει να διορθώσετε ένα bug που υπάρχει στο tamplate. Οι δημιουργοί του ξεχάσανε να συμπεριλάβουν το “webpack-dev-externals” στην λίστα με τα NPM κάτι που χρειάζεστε κατά τη δημοσίευση.

Πηγαίντε στο “package.json”, και στην λίστα με τα dependencis, προσθεστε το “webpack-node-externals”: “^1.4.3”.

Τώρα ας το κάνουμε deploy!

Μπορείτε να δημοσιεύσετε μια εφαρμογή που δημιουργήθηκε με αυτό το tamplate σε οποιονδήποτε ASP.NET Core host χρησιμοποιώντας οποιοδήποτε φυσιολογικό μηχανισμό ανάπτυξης. Για όσους θέλουν να κανουν deploy ειδικά στο Azure, ορίστε ένας τρόπος να το κάνετε….

Αρχικά από το Azure portal, δημιουργήστε ένα νέο Web App.

Σημαντικό! Καθορίστε μια έκδοση του Node.js γιατί αν δεν το κάνετε, θα χρησιμοποιήσει μια παλιά έκδοση και το deploy θα αποτύχει. Μεταβείτε στο παράθυρο ρυθμίσεων εφαρμογής (Application settings pane) για το νέο σας Web App και θα δείτε μια καταχώρηση ρυθμίσεων με όνομα “WEBSITE_NODE_DEFAULT_VERSION”. Επεξεργαστείτε αυτήν την τιμή, και εισάγετε μια πρόσφατη έκδοση οπός η “6.7.0”:

Αφού αποθηκεύσετε αυτήν την αλλαγή, μεταβείτε στο παράθυρο διαμόρφωσης των διαπιστευτηρίων ανάπτυξης (Deployment Credentials config pane) και εισαγάγετε ορισμένα νέα διαπιστευτήρια.

Στη συνέχεια, κάτω από τις επιλογές ανάπτυξης (Deployment options), ρυθμίστε το Local Git repository.

Μετά από αυτό, όταν μεταβείτε στην Επισκόπηση (Overview), θα μπορείτε να αντιγράψετε το νέο Git clone url.

Πίσω σε μια γραμμή εντολών στο root κατάλογο της εφαρμογής σας Angular 2 (ο κατάλογος που περιέχει ClientApp, Startup.cs κ.λπ.), αρχικοποιήστε ένα Git repo:

git init
git add .
git commit -m "My first commit"

 

Τώρα μπορείτε να προσθέσετε το Azure ως remote για το Git repo σας, χρησιμοποιώντας το “Git clone url” που πήρατε από την portal του Azure νωρίτερα:

git remote add azure https://your-user-name@my-angular2-site.scm.azurewebsites.net:443/my-angular2-site.git

 

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

Τώρα μπορείτε να κανετε push την τρέχουσα έκδοση της εφαρμογής σας στο Azure:

git push --set-upstream azure master

 

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