Come distribuire un'applicazione frontend su Netlify?

La distribuzione di applicazioni frontend non è una cosa importante oggi. Possiamo implementare un sito in pochi minuti con tecnologie moderne e piattaforme di hosting. Ci sono molte piattaforme di hosting là fuori. Ma siamo interessati a Netlify per questo articolo.

Distribuiamo la nostra applicazione frontend su Netlify .

Applicazioni frontend

Esistono diversi tipi di librerie e framework frontend come React, Vue, Angular, ecc. E la buona notizia è che tutti usano lo stesso packager di pacchetti. La distribuzione per tutte le applicazioni frontend create con diverse librerie e framework è simile. Quindi, siamo a posto con una qualsiasi di queste librerie e framework.

Possiamo anche creare applicazioni frontend senza librerie o framework. Questo è il modo tradizionale di creare applicazioni frontend una volta. Ma adesso cambia molto. Quindi, possiamo creare applicazioni frontend in diversi modi. Tuttavia, il processo di distribuzione è lo stesso per tutti quei diversi tipi di applicazioni frontend.

Vedremo la distribuzione di un'applicazione front-end costruita con una libreria e un'altra senza alcuna libreria o framework. Creiamo applicazioni frontend minime per la distribuzione utilizzando React e Plain JavaScript .

Impostare

Creeremo semplici applicazioni React e JavaScript per la dimostrazione di distribuzione. Li crei anche per seguirli. Oppure, se hai già avuto applicazioni frontend, passa alla sezione relativa alla distribuzione.

Dobbiamo ricordare che il punto di ingresso di qualsiasi applicazione frontend dovrebbe essere index.html durante la distribuzione su Netlify .

Se abbiamo creato applicazioni utilizzando una libreria o un framework, non dobbiamo preoccuparcene. Per impostazione predefinita, le librerie e i framework creano per noi il file index.html nel processo di compilazione . Ma, quando abbiamo semplici applicazioni JavaScript, dobbiamo creare un file index.html come voce per la nostra applicazione.

Reagire all'applicazione

Esegui il comando seguente per creare un'app React.

 npx create-react-app demo

Puoi aggiornare l'app come desideri prima di distribuirla. Ho appena aggiornato una riga di testo nella Home page. Non importa, però :).

Semplice applicazione JavaScript

Segui i passaggi seguenti per creare una semplice applicazione JavaScript.

• Crea una cartella chiamata demo .
• Crea tre file chiamati index.html , styles.css e script. js .
• In questo caso index.html è il punto di ingresso per la nostra applicazione.

Tira fuori la tua creatività e aggiorna l'app. Sto solo aggiungendo cose semplici all'applicazione.

distribuzione

Venendo alla distribuzione di applicazioni frontend su Netlify, abbiamo due opzioni. Possiamo distribuire direttamente applicazioni da GitHub, GitLab, BitBucket, ecc., a Netlify. Oppure possiamo eseguire il deployment utilizzando la Netlify CLI (interfaccia a riga di comando) . Non è obbligatorio conoscere tutti per distribuire le nostre applicazioni. Ma è positivo per le diverse opzioni che abbiamo per la distribuzione.

Esploriamo ciascuno di essi uno per uno.

GitHub

Stiamo usando GitHub per ospitare il nostro codice. Non è necessario utilizzarlo in quanto non è obbligatorio. Puoi usare altre piattaforme come preferisci.

Ci sono due tipi di applicazioni che possiamo distribuire. Ma il processo sembra simile per entrambi. Anche se te li mostrerò entrambi. Ci sono principalmente due passaggi in esso. Sono

• Invia il codice a GitHub.
• Distribuisci l'applicazione da GitHub utilizzando Netlify.

La prima parte è comune sia per le applicazioni React che per quelle JavaScript . Iniziamo il processo di distribuzione con il primo passaggio.

Supponiamo che tu non abbia avuto il tuo codice su GitHub. Se hai il tuo codice su GitHub, puoi saltare la parte del codice push. Hai bisogno dello strumento git . Se non hai git installato sul tuo computer, dovresti installarlo prima di continuare.

#1. Invio di codice a GitHub

• Vai al tuo account GitHub e crea un repository chiamato demo .

• Puoi vedere il repository come segue dopo che è stato creato.

Ora, dobbiamo inviare il nostro codice al repository che abbiamo creato sopra. Per inviare il codice, puoi seguire i comandi forniti nel repository o sotto i comandi.

• Apri terminale o cmd.
• Vai alla directory del tuo progetto.
• Inizializza git con git init
• Aggiungi le modifiche a git git add . locale git add .
• Conferma le modifiche con un messaggio git commit -m 'Completed application'
• Connetti il ​​repository remoto con il nostro repository locale git remote add origin 'your_repo_path' . Sostituisci your_repo_path con il tuo repository remoto. Puoi trovarlo nel repository in modo simile al mio [email protected]:hafeezulkareem/demo.git
• Ora premi il codice git push -u origin main
• Questo è tutto; abbiamo inviato il nostro codice a GitHub.

Puoi vedere il codice come segue nel tuo repository.

Abbiamo finito con il primo passaggio per inviare il nostro codice a GitHub. Se stai distribuendo una semplice applicazione JavaScript , il tuo codice potrebbe avere il seguente aspetto.

Passiamo al passaggio successivo e distribuiamo la nostra applicazione su Netlify.

#2. Distribuire il codice GitHub su Netlify

Se non hai un account su Netlify, creane uno.

• Vai al sito Netlify.
• Accedi al tuo account.
• Puoi vedere un pulsante chiamato Nuovo sito da Git, come mostrato di seguito.

• Fare clic sul pulsante per avviare la distribuzione.
• Passerai alla pagina di distribuzione che appare come segue.

• Puoi codificare diverse piattaforme di hosting sulla pagina. Stiamo usando GitHub. Quindi, fai clic su di esso.
• Si aprirà una nuova finestra per accedere al nostro account GitHub come segue.

• Accedi al tuo account GitHub per l'autorizzazione a Netlify.
• Una volta effettuato l'accesso al tuo account GitHub, la finestra si chiuderà dicendo Authorized .
• Ora, cerca il nome del tuo repository dalla barra di ricerca indicata.

• Quando cerchi il repository, non apparirà perché non abbiamo dato al nostro repository l'accesso a Netlify. Vedrai un pulsante chiamato Configura Netlify su GitHub .

• Fai clic sul pulsante e inserisci la password del tuo account GitHub per confermare l'accesso.

• Passerai a una pagina di accesso che ha il seguente aspetto.

• Scorri verso il basso e vedrai una sezione chiamata Accesso al repository .

• Ci sono due opzioni. Possiamo dare accesso a tutti i nostri repository o ad alcuni di essi che lo richiedono. È meglio dare accesso ai repository che stiamo distribuendo e non a tutti.
• Seleziona l'opzione Seleziona solo repository come segue.

• Fare clic sul menu a discesa sottostante e cercare il repository che si desidera distribuire. Selezionalo.

• Fare clic sul pulsante Salva .
• Reindirizzerà alla pagina di distribuzione di Netlify . E puoi vedere il nuovo repository.

• Fare clic sull'archivio.
• Mostrerà diversi dettagli come un ramo da distribuire, il comando per installare i pacchetti, ecc.,

• Se hai il codice completo su un ramo diverso da master , aggiornalo selezionando il ramo dal menu a discesa.
• Infine, fai clic sul pulsante Distribuisci sito . Ti reindirizzerà alla dashboard.
• Ci vorrà del tempo per distribuire il sito.

• Vedrai il sito pubblicato una volta distribuito.

Questo è tutto.

Abbiamo implementato con successo il nostro sito su Netlify. Puoi fare clic sull'URL del sito per vederlo dal vivo.

Possiamo aggiornare le impostazioni del sito e del dominio come vogliamo. Ma non lo tratteremo qui in quanto costituisce un altro argomento completo di cui parlare. Di seguito è riportata la semplice applicazione JavaScript dopo la distribuzione.

Non c'è differenza nel processo di distribuzione. Ma ricorda di non dimenticare il punto di ingresso dell'applicazione, ad esempio index.html .

Ora è il momento di conoscere un altro metodo per distribuire la nostra applicazione frontend.

#3. Distribuzione del codice utilizzando Netlify CLI

Netlify CLI è un'interfaccia della riga di comando per distribuire applicazioni frontend dal terminale o dalla riga di comando. È utile quando non si desidera eseguire alcuni passaggi aggiuntivi (metodo sopra). Come il metodo sopra, possiamo distribuire React (qualsiasi libreria o framework) o applicazioni JavaScript .

Puoi ottenere la documentazione completa di Netlify CLI qui. Ma non è necessario distribuire un'applicazione. Puoi fare riferimento ad esso quando stai andando al livello avanzato.

Vediamo come eseguire il deployment utilizzando Netlify CLI.

Prima di tutto, dobbiamo installarlo sulla nostra macchina. È disponibile come pacchetto nodo. Quindi, possiamo installarlo usando npm . Installiamolo usando il seguente comando.

 npm install netlify-cli -g

Il flag -g serve per installare il pacchetto globalmente in modo che possiamo accedervi ovunque. Vedrai qualcosa di simile alla seguente immagine.

Vediamo i passaggi per distribuire React e semplici applicazioni JavaScript utilizzando Netlify CLI.

• Esegui il comando build di React (o qualsiasi altra libreria o framework). Non è necessario eseguire alcun comando nel caso di una semplice applicazione JavaScript.

 npm run build

• Il comando di compilazione può variare in base alla libreria o al framework che stai utilizzando.
• Vedrai una cartella di build come segue.

• Cambia la tua directory in cartella build in caso di applicazione React o cartella progetto in caso di applicazione JavaScript.

• Prima di passare ai passaggi successivi, dobbiamo creare un account Netlify . Vai su Netlify e crea un account e passa ai passaggi successivi.
• Ora, dobbiamo accedere utilizzando la CLI. Eseguiamo il seguente comando per accedere.

 netlify login

• Il comando precedente aprirà una nuova scheda nel browser predefinito per accedere all'account Netlify. Ti porterà al sito Netlify.
• Inserisci le tue credenziali e accedi. Dopo aver effettuato l'accesso, ti verrà chiesto di autorizzare la CLI.

• Clicca su Autorizza per autenticarti. Vedrai un messaggio di successo dopo di esso.

• Ora è il momento di distribuire la nostra applicazione. Esegui il seguente comando deploy.

 netlify deploy

• Ti chiederà di scegliere il sito esistente o di crearne uno nuovo. Scegli (usa le frecce su e giù) Crea e configura un nuovo sito e premi Invio .

• Quindi mostrerà Teams da scegliere, usa le frecce per selezionare e premi Invio .

• Ora puoi inserire il sottodominio per il tuo sito. Non è obbligatorio, però. Netlify ne sceglierà uno casuale per noi se lo lasciamo. Possiamo cambiarlo in seguito, se lo desideriamo. Lo lascio vuoto per ora.

• Ci chiederà di inserire la directory che vogliamo distribuire. Abbiamo già navigato nella directory di destinazione. Premiamo Invio . Puoi anche accedere ad altre directory. Ma non è semplice. Quindi, è meglio navigare prima nella directory di destinazione e poi distribuire.

• Distribuirà il nostro sito per una bozza di URL come segue.

• Puoi controllare il tuo sito sulla bozza dell'URL e assicurarti che tutto sia corretto.
• Dopo aver controllato il sito, possiamo distribuirlo in produzione utilizzando il seguente comando.

 netlify deploy --prod

• Richiederà solo la directory. Entra nella rubrica. Se siamo nella stessa directory, premi Invio .
• Questo è tutto. La nostra distribuzione del sito è completa. Puoi visitare il sito per verificarlo.

• E questo è il risultato.

Abbiamo finito di distribuire il nostro sito su Netlify utilizzando Netlify CLI . Puoi aggiornare le impostazioni del sito nella dashboard di Netlify.

Conclusione

uff! È lungo. Non hai bisogno di nessun'altra guida per distribuire la tua applicazione frontend su Netlify dopo aver letto completamente questo.

Esistono due metodi per distribuire la nostra applicazione su Netlify. Quale seguire? C'è un leggero vantaggio nell'usare il primo metodo. Netlify aggiornerà la build ogni volta che inseriamo nuovo codice nel nostro repository del sito. Ma, nel caso del metodo CLI, dobbiamo farlo manualmente.

Adottiamo sempre un metodo rispetto agli altri in base alle situazioni in cui ci troviamo. Comunque, conosci entrambi i metodi di distribuzione. Quindi, non dobbiamo preoccuparci del metodo. Scegli quello più adatto a te.

Nota: i siti demo mostrati nell'articolo potrebbero non essere disponibili pubblicamente dopo un po' di tempo.

Hai bisogno di un'alternativa a Netlify? Dai un'occhiata a queste migliori piattaforme di hosting di siti statici.

Buona distribuzione