In questo articolo vedremo come creare una GitHub Page usando React, il codice sergente sarà ospitato in un repository publico.
Nella documentazione
sono descritti i vari modi in cui possiamo farlo, da CLI oppure tramite GitHub Desktop, in questo esempio lo faremo tramite CLI.
Gli step da segure per creare una GitHub Page con React sono i seguenti:
- Creare un nuovo repository publico;
- Creare un'applicazione React, generare la versione build;
- Caricare il codice della versione build dell'applicazione React sul repository.
#Creare un nuovo repository publico
Per creare un nuovo repository publico, effettuiamo il login al nostro account GitHub e usiamo il bottone in alto a destra per creare un nuovo repository
nella pagina successiva nella sezione Create a new repository sceglire un nome, il nome deve essere del formato "username.github.io", dove username è il nostro username github, nel mio caso nel campo Repository name scriverò MicheleDeF.github.io, impostiamolo su Public, e clicchiamo sul bottone Create repository in basso a destra
infine assicuriamoci che nella sezione Settings > Pages > Build and deployment sia impostato branch main e /root
#Creare un'applicazione React, generare la versione build
In un punto qualunche del nostro pc creiamo una applicazione React col seguente comando
npx create-react-app .avviamo l'applicazione React
npm run startse visualizziamo questo messaggio di errore "Module not found: error: can't resolve 'web-vitals'", nella root lanciamo il seguente comando da CLI
npm i web-vitals --save-devavviamo di nuovo l'applicazione React col comando npm run start.
Quindi adesso abbiamo un progetto React con la seguente struttura
.git
.gitignore
README.md
node_modules
package-lock.json
package.json
public
src
modifichiamo il file .gitignore in modo che la cartella build non sia presente, ad esempio
#.gitignore
/node_modulesa questo punto effettuiamo il clone del repository creato in precedenza usando git submodule in una cartella build, poichè quando creeremo la versione build del progetto React questa cartella verrà generata, quindi da CLI lanciamo il seguente comando
git submodule add <url repository> build<url repository> è l'url del repository creato in precedenza, nel mio caso è
https://github.com/MicheleDeF/MicheleDeF.github.io.git
come possiamo vedere è stata creata una cartella build con all'interno il nostro repository.
Modifichiamo il file package.json aggiungendo i comandi prebuild e postbuild
//package.json
"scripts": {
..........
"prebuild": "mkdir temp_build && cp build/.git temp_build ",
"build": "react-scripts build",
"postbuild": "cp temp_build/.git build && rm -rf temp_build",
..........
},il prebuild crea una cartella temp_build nella root e copia al suo interno la cartella build/.git, mentre il postbuild copia la cartella temp_build/.git nella cartella build ed elimina la cartella temp_build, questo ci servirà per non perdere la versione del nostro repository, poichè quando effettuiamo il build dell'applicazione React questa cartella viene svuotata e ricompilata.
Procediamo adesso ad effettuare il build dell'applicazione React con seguente comando
npm run build
#Caricare il codice della versione build dell'applicazione React sul repository
Se tutto è andato a buon fine e la versione build è stata generata correttamente, lanciamo il comando git status nella cartella build
cd build
git status
On branch main
Your branch is up to date with 'origin/main'.
Changes not staged for commit:
(use "git add/rm <file>..." to update what will be committed)
(use "git restore <file>..." to discard changes in working directory)
deleted: README.md
Untracked files:
(use "git add <file>..." to include in what will be committed)
asset-manifest.json
favicon.ico
index.html
logo192.png
logo512.png
manifest.json
robots.txt
static/
no changes added to commit (use "git add" and/or "git commit -a")come possiamo vedere abbiamo delle modifiche, quindi effettuiamo il commit e il push
git add .
git commit -m "Initial Commit"
git push -u