Installazione di msw per lavorare con la parte server in Redux

Nelle lezioni precedenti abbiamo apportato diverse modifiche aggiuntive alla nostra applicazione. Ora dobbiamo occuparci del server con cui la nostra applicazione scambierà dati.

Non avremo un server reale, quindi simuleremo semplicemente il lavoro con esso, utilizzando uno strumento fantastico Mock Service Worker. Mock Service Worker (MSW) è uno strumento per imitare le API che utilizza un'API standardizzata Service Worker, progettata per intercettare le richieste a livello di rete. MSW genererà risposte fittizie (responses) alle nostre richieste (requests). Inoltre, come affermano gli sviluppatori, lo strumento è così efficace e flessibile che dopo il debug con i mock (per i quali nell'applicazione non è necessario creare nulla di speciale), l'applicazione può essere messa in funzione con un server esterno reale. La documentazione è piuttosto ampia e, se sei interessato a MSW, puoi leggerla sul sito ufficiale.

Passiamo all'installazione di msw. Per fare questo, apriamo il nostro progetto sui prodotti e nel terminale inseriamo:

npm install msw --save-dev

Per far funzionare msw dobbiamo anche creare e copiare mockServiceWorker.js in una directory pubblica. Spesso è la cartella public. Noi abbiamo una cartella vuota public, copiamolo lì. Per fare questo, esegui nel terminale il comando e poi accetta l'uso di public:

npx msw init public

Ora diamo un'occhiata in public, lì dovrebbe apparire lo script generato mockServiceWorker.js. Ora avviamo la nostra applicazione sui prodotti e nella barra degli indirizzi del browser inseriamo http://localhost:5173/mockServiceWorker.js (visto che la nostra applicazione è in esecuzione sulla porta 5173). Vedi nel browser che viene visualizzato il contenuto del file mockServiceWorker.js? Ottimo, proseguiamo.

Successivamente, creiamo nella cartella src una cartella api, e al suo interno un file server.js, in cui scriveremo il codice del server. Ora apriamo server.js e importiamo in esso la funzione setupWorker dalla libreria msw installata:

import { setupWorker } from 'msw/browser'

Sotto nel file creiamo una variabile worker e esportiamola:

export const worker = setupWorker()

E ora apriamo il file main.jsx e importiamo il nostro worker:

import { worker } from './api/server'

Ora colleghiamolo alla nostra applicazione. Per fare questo, il codice con cui creiamo la radice della nostra applicazione React, lo wrapperemo in una funzione, chiamiamola main e come prima riga aggiungiamo ad essa la funzione di avvio per il worker. Naturalmente non dimentichiamo di chiamare la main stessa. Il codice completo dopo tutte le righe di import sarà ora così:

async function main() {
	await worker.start({ onUnhandledRequest: 'bypass' })

	ReactDOM.createRoot(document.getElementById('root')).render(
		<React.StrictMode>
			<Provider store={store}>
				<App />
			</Provider>
		</React.StrictMode>
	)
}

main()

Ora siamo sicuri che la nostra applicazione non inizierà a funzionare prima (e a inviare richieste ;) ), che il worker sia avviato.

Avviamo la nostra applicazione e apriamo nel browser la console per sviluppatori. Se vedi in essa il testo '[MSW] Mocking enabled.', allora sei bravo e hai installato tutto correttamente!!!

Apri la tua applicazione con gli studenti. Dopo aver familiarizzato con il materiale di questa lezione, installa Mock Service Worker per la tua applicazione.

Crea un file server.js, e in esso crea un worker. Collega il worker all'applicazione in main.js, come mostrato nella lezione. Assicurati che tutto funzioni.