New React Gas

Creazione del progetto

Premessa sulla connessione tramite ssh

Possiamo collegarci ad un server tramite ssh in 2 modi, tramite password oppure fornendo al server la chiave pubblica ssh del nostro computer (client).

La connessione tramite password potrebbe essere inibita dal server aggiornando la seguente configurazione all’interno del file /etc/ssh/sshd_config:

  PasswordAuthentication no

Pertanto, se la connessione tramite password è inibita, dobbiamo abilitarla e fornire la nostra chiave pubblica ssh al server:

  ssh-keygen
  ssh-copy-id (user)@(server)

Poi inibiamo nuovamente la connessione tramite password.

Creazione repository su max73.it

  ssh root@max73.it
  su -l git
  git init --bare reactgas.git
  git init --bare reactgas-website.git

Modifica file description per aggiungere la descrizione del progetto.

Creazione progetto in locale

  mkdir ~/mygit/reactgas
  cd ~/mygit/reactgas
  npm create vite@latest .

Scelte effettuate:

Select a framework React
Select a variant Javascript
Use rolldown-vite (Experimental)? No
Install with npm and start now? Yes

Premere C-c per uscire dal live server.

  cd ~/mygit/reactgas
  git init
  git remote add origin git@max73.it:reactgas.git
  git add .
  git commit -m "First commit"
  git push origin main

Creaiamo i file statici (questi vengono creati nella directory dist) e li carichiamo nel repository:

  cd ~/mygit/reactgas
  npm run build
  cd ~/mygit/reactgas/dist
  git init
  git remote add origin git@max73.it:reactgas-website.git
  git add .
  git commit -m "First commit"
  git push origin main

Caricamento sul server max73.net

  ssh root@max73.net
  mkdir -p /var/www/reactgas/public
  cd /var/www/reactgas/public
  git clone git@max73.it:reactgas-website.git .

Creazione del sotto dominio /etc/nginx/sites-available/react:

  server {
    listen 80;
    listen [::]:80;
    root /var/www/reactgas/public;
    index index.html;
    server_name reactgas.max73.net;
    location / {
      try_files $uri $uri/ =404;
    }
  }

Attiviamo il sotto dominio con la connesisone sicura:

  ln -s /etc/nginx/sites-available/reactgas /etc/nginx/sites-enabled/
  certbot --nginx -d reactgas.max73.net
  systemctl reload nginx.service

Svuoto il template Vite+React

Dopo avere cancellato il template iniziale di Vite+React, eseguo un nuovo commit:

  cd ~/mygit/reactgas
  git add .
  git commit -m "Empty Vite+React deleted"
  git push origin main

Per poterlo vedere sul server eseguo anche il build:

  cd ~/mygit/reactgas
  npm run build
  cd ~/mygit/reactgas/dist
  git add .
  git commit -m "Template Vite+React deleted + build"
  git push origin main

Per aggiornare il sito sul server max73.net:

  ssh root@max73.net
  cd /var/www/reactgas/public
  git pull

Aggiungo Pico css

  cd ~/mygit/reactgas
  npm install @picocss/pico
  npm install sass

Aggiungo il (progetto)/src/style.scss contenente:

// src/style.scss
@use "@picocss/pico/scss/pico" with (
  $theme-color: "pink" // Scegli tra i 20 colori disponibili
);

// (Opzionale) Aggiungi qui le tue personalizzazioni extra

Ed importa il file all’interno di main.jsx:

import "./style.scss";