Differences

This shows you the differences between two versions of the page.

--- doc:appunti:prog:nodejs [2025/03/24 15:53] – [Preparazione per il deploy] niccolo
+++ doc:appunti:prog:nodejs [2025/03/27 11:58] (current) – [Automatizzare il deploy] niccolo
@@ Line 35: / Line 35: @@
 </code>
-===== Il registry =====
+===== Il registry (repository) =====
 Per sapere quale //registry// si sta utilizzando:
@@ Line 108: / Line 108: @@
 ==== Produrre HREF relativi ====
-FIXME
+Il build di ol-app viene eseguito con il tool Vite. Il codice **JavaScript** e i **CSS** vengono assemblati in due file contenuti nella sottodirectory **assets/** e inclusi con link assoluti:
+<code xml>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>My OpenLayers App</title>
+    <script type="module" crossorigin src="/assets/index-Ch4sRF4c.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-A7cyoH51.css">
+  </head>
+</code>
+Questo impedisce di fare il deploy in una sottodirectory a scelta. È possibile configurare l'opzione **%%--base%%** da passare al build di Vite modificando il file **package.json**, nella sezione **scripts** => **build**:
+<code>
+{
+  "scripts": {
+    "build": "vite build --base=./"
+  }
+}
+</code>
 ==== Aggiungere directory al deploy ====
-FIXME
+Se ci sono dei file statici o intere directory da aggiungere al deploy, è possibile creare la cartella **public/**, nell'ambiente di sviluppo. Tutto il suo contenuto verrà incluso nella directory radice durante il **vite build** (cioè in **dist/**).
+Durante il test e lo sviluppo (ambiente attivato da **npm start**), i file contenuti in **public/** devono essere linkati senza il prefisso ''public'', ma con il percorso che avranno nel build. Ad esempio per creare un VectorLayer dal file ''public/aeroporto/sesto_fiorentino.kml'':
+<code javascript>
+const sesto_fiorentino = new VectorLayer({
+    source: new VectorSource({url: 'aeroporto/sesto_fiorentino.kml',
+    format: new KML({extractStyles: false})})
+});
+</code>
+==== Rinominare il file index.html ====
+Potrebbe capitare il caso in cui il progetto in questione deve essere inserito in un sito già esistente, eventualmente in una sottodirectory e con un nome della pagina iniziale diverso da **index.html**.
+Nei paragrafi sopra si è già visto come generare link relativi. Per modificare il nome del file index.html si deve anzitutto modificare **vite.config.js** definendo //build// => //rollupOptions// => //input// => //main// necessario per eseguire il corretto build e //server// => //open// per eseguire correttamente il server in fase di sviluppo:
+<code>
+export default {
+  build: {
+    sourcemap: true,
+    rollupOptions: {
+      input: {
+        main: 'my-index.html' // The entry file.
+      }
+    }
+  },
+  server: {
+    open: '/my-index.html' // Entry file for the dev server.
+  }
+}
+</code>
+Anche il file **package.json** va modificando nella sezione //scripts// => //dev// aggiungendo l'opzione **%%--open%%** al comando ''vite'':
+<code>
+{
+  "name": "openlayers-test",
+  "version": "1.0.4",
+  "scripts": {
+    "dev": "vite --open my-index.html",
+    ...
+</code>
+==== Dipendenze del progetto ====
+Nel nostro file **package.json** si trova:
+<code>
+"dependencies": {
+  "ol": "latest"
+}
+</code>
+Cioè il progetto dipende dalla versione più recente di **create-ol**. Si tratta di un initializer che //Scaffolds an OpenLoader plugin with massive customization//. Durante il **create** iniziale è stata installata la versione **create-ol@1.0.1**
+In generale non avviene un aggiornamento automatico, a meno che non venga eseguito uno dei seguenti comandi:
+<code>
+npm update <package-name>
+npm install <package-name>@latest
+npm update
+</code>
+Volendo è possibile modificare il file **package.json** e indicare una versione specifica:
+<code>
+"dependencies": {
+  "ol": "1.0.1"
+}
+</code>
+Il numero di versione può essere preceduto da caratteri speciali,ad esempio **%%^X.Y.Z%%** oppure **%%~X.Y.Z%%**. Nel primo caso sono consentiti aggiornamenti mantenendo ferma la //major version// X (eccezione se X vale 0: allora sono consentiti aggiornamenti solo di //patch version//). Nel secondo caso sono consentiti solo aggiornamenti di //patch version// Z, mentre //major// e //minor version// devono restare uguali.
+==== Il file package-lock.json ====
+Nella directory del progetto si trova il file **package-lock.json** che viene creato e aggiornato ogni volta che si installa o si aggiorna un pacchetto (''npm install'', ''npm update''). Nel nostro caso l'install è stata diretta conseguenza del ''npm create''. Il file **non deve essere modificato** a mano, eventualmente lo si può eliminare insieme alla directory ''node_modules/'' ed eseguendo di nuovo ''npm install'' viene creato ex-novo, così come il download dei pacchetti.
+Nel file **package-lock.json** si vede la dipendenza dai vari packages, tra cui la libreria OpenLayers:
+<code>
+{
+  "name": "ol-vite",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    ...
+        },
+    "node_modules/ol": {
+      "version": "10.4.0",
+      "resolved": "https://registry.npmjs.org/ol/-/ol-10.4.0.tgz",
+      ...
+}
+</code>
+Il tutto è stato scaricato nella directory di lavoro **node_modules/**, per cui è importante mantenere copia di questa directory di lavoro che in pratica contiene il codice sorgente delle varie componenti scaricato al momento del //create//.
+===== Automatizzare il deploy =====
+È possibile definire il comando per effettuare il deploy del progetto aggiungendo a **package.json** uno //scripts// => //deploy//:
+<code>
+"scripts": {
+  "deploy": "rsync -avz ./dist/ ./ user@yourserver:/path/to/project"
+}
+</code>
+Il deploy quindi si esegue con
+<code>
+npm run deploy
+</code>
 ===== Web References =====