State sviluppando un’applicazione con VUE.JS e l’applicazione ha anche un backend API scritto in PHP.

Avviamo l’applicazione in modalità di debug con:

npm run dev

e solitamente questo attiva un servizio web sulla porta 5173 che possiamo aprire nel browser. Ma per le API PHP che ho in locale? Devo avviare un server web? devo scrivere un altro comando?

La soluzione più semplice è usare il pacchetto npm concurrently da installare con:

npm install --save-dev concurrently

poi modificare il file package.json da qualcosa tipo:

"scripts": {
"dev": "vite",
"build": "run-p type-check \"build-only {@}\" --",

in:

"scripts": {
"dev": "vite",
"dev:php": "php -S127.0.0.1:8765 -t ./",
"dev:all": "concurrently --kill-others \"npm run dev\" \"npm run dev:php\"",
"build": "run-p type-check \"build-only {@}\" --",

ora potremo avviare entrambe i servizi con:

npm run dev:all

ma nessun ci vieta di inserire nel package.json la riga che vedete in dev:all direttamente in dev e quindi lasnciare il classico npm run dev per avviarli entrambe.

Nota:

Ora ci sarà una nuova esigenza da gestire, ovvero come dire all’applicazione di usare due url differenti come base per il puntamento verso il corretto endpoint in modalità sviluppo o produzione.

La soluzione è quella di creare due file di environment, uno chiamato .env.development in cui inseriamo:

NODE_ENV=dev 
VITE_API_BASE_URL=http://127.0.0.1:8765/api/

l’altro chiamato .env.production in cui inseriamo:

NODE_ENV=production 
VITE_API_BASE_URL=/api/

ed infine inseriamo nel file main.ts, prima di fare il createApp() , questo codice:

export const API_BASE_URL = import.meta.env.VITE_API_BASE_URL as string
if (!API_BASE_URL) {
  throw new Error('VITE_API_BASE_URL is not defined')
}

cosa che renderà disponibile nell’app la costante API_BASE_URL da poter utilizzare come prefisso per le nostre chiamate API.

Chiaramente il tutto potete personalizzarlo secondo le vostre esigenze, questo è solo da prendere come spunto.

enjoy!