Come distribuire un'app React gratuitamente con le pagine GitHub

Se hai un progetto e vuoi ospitarlo gratuitamente senza acquistare un dominio, utilizzare GitHub Pages è un'ottima scelta. GitHub Pages converte i tuoi repository in siti Web e ti consente di ospitare un numero illimitato di siti di progetto.

La distribuzione di un sito React con la navigazione richiede una configurazione aggiuntiva rispetto alla distribuzione di un sito statico. Questo tutorial ti guida attraverso l'intero processo dalla creazione di un repository GitHub all'avere un sito ospitato.

Crea un'app Reagire

A scopo dimostrativo, è necessario creare un progetto React con il routing che distribuirai in seguito. Tuttavia, se hai un esistente Reagire progetto, sentiti libero di saltare questo passaggio.

Nel terminale, esegui il creare-reagire-app comando per impalcare rapidamente un progetto React:

npx create-react-app react-gh

Passare alla cartella creata e avviare l'applicazione.

npm avvio della corsa

Quindi, apri la cartella del progetto con il tuo preferito editor di codice. Nel src

cartella, elimina tutto tranne App.js e index.js. Sostituisci i contenuti in App.js con quanto segue:

funzione App() {
 Restituzione (


Pagine Github

Distribuzione di React su Github




 );
}
esporta l'app predefinita;

Aggiungi percorso

Per aggiungere il routing alla tua applicazione, innanzitutto installa reagire-router-dom:

npm install react-router-dom

In App.js, aggiungi il link alla pagina delle informazioni:

import { Link } da "react-router-dom";
funzione App() {
 Restituzione (


Di
Pagine Github

Distribuzione di React su Github




 );
}
esporta l'app predefinita;

Poiché App.js fungerà da home page, devi solo creare il file Di componente:

const Informazioni = () => {
 Restituzione ( 


Casa
Informazioni sulla pagina




 );
}
esportazione predefinita Informazioni su;

Ora devi creare i percorsi e configurare un router React.

Modifica index.js per far corrispondere l'URL ai rispettivi componenti:

import React da "react";
importa ReactDOM da "react-dom";
importa App da "./App";
import {HashRouter, Routes, Route } da "react-router-dom";
importa Informazioni da "./Informazioni";
ReactDOM.render(



} />
}/>


,
 document.getElementById("root")
);

Nota come hai usato HashRouter invece di BrowserRouter. Usando BrowserRouter genererebbe un errore 404. Questo perché il routing funziona in modo diverso nelle pagine GitHub. Hashrouter non genera un errore perché utilizza la parte hash dell'URL per sincronizzare l'interfaccia utente con l'URL.

Il passaggio finale è il commit di tutte le nuove modifiche su Git:

git aggiungi .
git commit -m "Crea app React"

Crea repository GitHub

Da Pagine GitHub ospiterà la tua applicazione convertendo il repository in un sito Web, devi creare un repository GitHub. Vai al tuo account GitHub e crea un nuovo repository con lo stesso nome del tuo progetto.

Quindi, aggiungi il repository GitHub al tuo repository locale come remoto:

git remote aggiungi origine /.idiota

Infine, esegui il push del repository locale su GitHub:

git branch -M main
git push --set-upstream origin main

Distribuisci l'app React sulle pagine di GitHub

Per utilizzare GitHub Pages, dovrai prima installarlo:

npm installa gh-pages

gh-pagine ti permetterà di creare il gh-pagine branch dove distribuirai il tuo codice.

Quindi, vai al tuo pacchetto.json file e aggiungi la home page che sarà l'URL home dell'app:

"homepage": "https://.github.io//",
"script": {
 "predeploy": "npm esegui build",
 "deploy": "gh-pages -d build", 
 "start": "iniziano gli script di reazione",
 "build": "react-scripts build",
 "test": "test degli script di reazione",
 "eject": "react-scripts eject"
 }

Eseguire il comando seguente per completare il processo di distribuzione:

npm eseguire distribuzione

La tua applicazione è ora distribuita su GitHub e puoi visitarla all'indirizzo https://.github.io/.

Fai di più con le pagine GitHub

GitHub Pages fornisce un modo semplice per distribuire gratuitamente siti Web su Internet. Anche se hai visto solo come distribuire un semplice progetto React, GitHub Pages ti consente di fare molto di più. Ad esempio, puoi creare un blog completo utilizzando Jekyll e persino ospitarlo utilizzando un dominio personalizzato.

Come ospitare un sito Web gratuitamente utilizzando le pagine GitHub

Leggi Avanti

Circa l'autore