carlodaniele / astro-htmx

To-do list con Astro DB e htmx

Questa applicazione è basata sul framework Astro. Per la gestione dei dati si fa ricorso ad Astro DB, mentre le funzionalità di htmx permettono di eseguire operazioni CRUD sui dati.

Prima di procedere allo sviluppo dell'app, è necessario creare un account su Astro Studio, leggere la documentazione e familiarizzare con la piattaforma.

👉 L'applicazione può essere testata a questo link.

👉 La guida completa allo sviluppo di questa applicazione è disponibile su HTML.it.

👉 Per il deploy è stato utilizzato il servizio di hosting di applicazioni di Kinsta.

🛠️ Configurazione

Astro DB richiede l'abilitazione del Server Side Rendering (SSR). Per questa applicazione, si fa ricorso al node adapter.

Nel file astro.config.mjs andrà aggiunto il seguente codice:

export default defineConfig({
	integrations: [db()],
	site: 'https://astro-htmx-r063g.kinsta.app/',
	output: "server",
	adapter: node({
		mode: "standalone"
	}),
	server: {
		host: true
	}
});

Nel file package.json andrà aggiunto il flag --remote allo script di build:

"scripts": {
	"dev": "astro dev",
	"start": "node ./dist/server/entry.mjs",
	"build": "astro build --remote",
	"preview": "astro preview",
	"astro": "astro"
},

Il resto della configurazione di questa app è specifico dell'hosting Kinsta. È necessario creare un file sandbox.config.json:

{
	"infiniteLoopProtection": true,
	"hardReloadOnChange": false,
	"view": "browser",
	"template": "node",
	"container": {
		"port": 8080,
		"startScript": "start",
		"node": "14"
	}
}

Quindi un file .stackblitzrc:

{
	"startCommand": "npm start",
	"env": {
		"ENABLE_CJS_IMPORTS": true
	}
}

Infine, un file .npmrc:

shamefully-hoist=true

Per configurazioni diverse, si consulti la documentazione di Astro.

🌎 Distribuzione su Kinsta

In MyKinsta, fare clic su Applicazioni > Aggiungi applicazione > seleziona repository Git > Public repository, quindi procedere come segue:

1. Repository URL: https://github.com/tuo-account/tuo-repository
2. Branch: main

Immettere il nome dell'applicazione e scegliere la posizione del data center. Lasciare tutte le altre impostazioni come predefinite e fare clic su Continua ad ogni passaggio.

Nel passaggio Riepilogo, fare clic su Distribuisci ora.

Maggiori informazioni sul deploy di applicazioni Astro SSR su Kinsta.