Ben ritrovato. Ecco la parte teorica del tuo nuovo progettino che ti aprirà una nuova visione sulle mobile app client-serve con l’utilizzo dell’API. In questo articolo ti spiegheroò come puoi collegare il tuo front-end React creato con Vite al tuo backend Node.js o Express. Senza ulteriori indugi, cominciamo.

Per prima cosa, ho aperto VS Code in una directory chiamata vite-express-video, qui ho aperto il terminale e inizieremo creando prima il nostro front-end React. Poi ti guiderò nella configurazione del backend.

Crei la directory vite-express-video e con il prompt terminal puoi utilizzare il comando

Code . nella directory e si aprirà direttamente vs code

> code . nella directory e si aprirà direttamente vs code


Quindi, possiamo iniziare con npm create vite@latest (oppure npm create vite) e ci verrà chiesta una serie di domande riguardo alla nostra app. Prima dobbiamo installare il pacchetto create-vite, quindi premo invio.

Per le informazioni su questo posso fare inferimento al sito

https://vite.dev/guide/ nella sezione scaffolding

Ci chiederà il nome del progetto, e per questo scriverò semplicemente client.

Poi ci chiederà di selezionare un framework: come si intuisce dal titolo del video, selezioneremo React.
Alla voce variant seleziono JavaScript. (attenzione questo progetto posso testare questà modalità)


Ora che il progetto è stato creato, entriamo nella directory client con cd client e poi eseguiamo

npm install

per installare tutte le dipendenze necessarie. Dopo qualche secondo, una volta che tutte le dipendenze sono state installate, possiamo procedere alla configurazione del backend.

PARTE SERVER

Perciò, una volta creato il frontend, ti mostro ora come creare il server.

Creo una directory server andando nella sezione Explorer e cliccando sull’icona di “crea cartella”.
Poi, pulisco il terminale ed entro nella directory server con cd .. per uscire da client, e poi /server per entrare in server. (Navigazione di base nella cartella!)


Qui eseguo npm init -y per generare un file package.json con le impostazioni predefinite.

Se espandi la cartella server, vedrai che il file è stato creato. Ora apriamo package.json per configurarlo.

Cambiamo il punto di ingresso del server da index.js (valore predefinito) a server.js. Questo è solo per preferenza personale: se vuoi puoi lasciare index.js o usare un altro nome.
Creo quindi il file con touch server.js, che ora appare nel progetto.

Ora installiamo le dipendenze necessarie per il backend.
Prima pulisco il terminale e installo Express con npm i express. Poi installiamo nodemon con npm i nodemon -D per far sì che il server si riavvii automaticamente quando modifichiamo il codice.

Dopo l’installazione, aggiorniamo gli script nel package.json.

Aggiungiamo:

“start”: “node server”,
“dev”: “nodemon server”

Assicurati che dopo node o nodemon ci sia il nome corretto del tuo file di avvio (in questo caso, server.js).

Ora possiamo iniziare a creare la nostra API backend. Apriamo server.js e scriviamo:

const express = require(‘express’);
const app = express();

app.get(‘/api’, (req, res) => {
res.json({ fruits: [‘apple’, ‘orange’, ‘banana’] });
});

app.listen(8080, () => {
console.log(‘Server started on port 8080’);
});

Il server ascolta sulla porta 8080. Se vai su http://localhost:8080/api nel browser, vedrai un oggetto con un array chiamato fruits.

Ora dobbiamo configurare CORS affinché il backend accetti richieste dal frontend. Apriamo un nuovo terminale nella cartella server ed eseguiamo npm i cors.
Poi nel codice importiamo e configuriamo CORS:

const cors = require(‘cors’);
const corsOptions = { origin: ‘http://localhost:5173’ };
app.use(cors(corsOptions));

Perfetto. Ora possiamo passare al frontend. Entro nella cartella client con cd ../client, pulisco il terminale, e installo Axios con npm i axios.

Apriamo src/App.jsx, avviamo il server frontend con npm run dev, e visitiamo http://localhost:5173.
Per testare il fetching dei dati, facciamo così:

import { useEffect, useState } from ‘react’;
import axios from ‘axios’;

function App() {
const [array, setArray] = useState([]);

useEffect(() => {
const fetchApi = async () => {
const response = await axios.get(‘http://localhost:8080/api’);
console.log(response.data.fruits);
setArray(response.data.fruits);
};
fetchApi();
}, []);

return (

{array.map((fruit, index) => (

{fruit}

))}

);
}

export default App;

Ora, se aggiorni la pagina, vedrai apple, orange, e banana visualizzati.
Se cambi i dati nel backend (ad esempio da orange a strawberry), salvando e aggiornando il frontend vedrai il cambiamento applicato automaticamente, grazie a nodemon.

Riepilogo:

  • Abbiamo creato un frontend con Vite + React
  • Creato un backend con Node.js + Express
  • Configurato l’API backend
  • Gestito CORS
  • Installato Axios nel frontend
  • Effettuato fetch e visualizzazione dei dati con React

Ecco il codice per app.js

import { useState, useEffect } from “react”;

import reactLogo from “./assets/react.svg”;

import viteLogo from “/vite.svg”;

import “./App.css”;

import axios from “axios”;

function App() {

  const [count, setCount] = useState(0);

  const [array, setArray] = useState([]);

  const fetchAPI = async () => {

    const response = await axios.get(“http://localhost:8080/api”);

    setArray(response.data.fruits);

    console.log(response.data.fruits);

  };

  useEffect(() => {

    fetchAPI();

  }, []);

  return (

    <>

      <div>

        <a href=”https://vitejs.dev” target=”_blank”>

          <img src={viteLogo} className=”logo” alt=”Vite logo” />

        </a>

        <a href=”https://react.dev” target=”_blank”>

          <img src={reactLogo} className=”logo react” alt=”React logo” />

        </a>

      </div>

      <h1>Vite + React</h1>

      <div className=”card”>

        <button onClick={() => setCount((count) => count + 1)}>

          count is {count}

        </button>

        <p>

          Edit <code>src/App.jsx</code> and save to test HMR

        </p>

        {array.map((fruit, index) => (

          <div key={index}>

            <p>{fruit}</p>

            <br></br>

          </div>

        ))}

      </div>

      <p className=”read-the-docs”>

        Click on the Vite and React logos to learn more

      </p>

    </>

  );

}

export default App;

Ecco il codice per il server.js

const express = require(“express”);

const app = express();

const cors = require(“cors”);

const corsOptions = {

  origin: [“http://localhost:5173”],

};

app.use(cors(corsOptions));

app.get(“/api”, (req, res) => {

  res.json({ fruits: [“apple”, “strawberry”, “pineapple”] });

});

app.listen(8080, () => {

  console.log(“Server started on port 8080”);

});

Approfondimenti suggeriti per applicazioni professionali.

Sicurezza & Autenticazione

  • Implementazione di JWT: per gestire login, logout e rotazione dei token.
  • Rate limiting / protezione API: con pacchetti tipo express-rate-limit, helmet, ecc.
  • CORS avanzato: configurazioni dinamiche in base all’ambiente (sviluppo, staging, produzione).

Comunicazione Client–Server

  • Gestione degli errori e loading state nel frontend (con Spinner, messaggi di errore, retry).
  • Hook personalizzati: es. useFruits() per incapsulare la logica del fetch.
  • Debounce o throttle per richieste frequenti (es. su input utente).
  • WebSocket / real-time: passare da polling a socket per dati in tempo reale.

Struttura e Manutenzione del Progetto

  • Organizzazione avanzata delle cartelle: es. separare routes, controllers, services, utils nel backend.
  • Separazione ambienti (dev/staging/prod) con file .env e pacchetti tipo dotenv.
  • Type-checking con TypeScript: sia nel client che nel server.

Testing

  • Unit test / Integration test: con Jest, Vitest, Supertest per testare le API.
  • Mock delle API nel frontend: con msw (Mock Service Worker).
  • Test E2E: con Playwright o Cypress per test full stack.

Dev Experience & Performance

  • Hot reload / Live reload del backend: con nodemon, ma anche con ts-node-dev se usi TS.
  • Code linting & formatting: ESLint, Prettier, Husky per ganci Git.
  • Monitoraggio performance API: log, response time, analytics.

Persistenza dei Dati

  • Aggiunta di un database (MongoDB, PostgreSQL, SQLite…).
  • ORM/ODM: usare Prisma, Sequelize, Mongoose per gestire i dati facilmente.
  • CRUD completo: creare rotte POST/PUT/DELETE, non solo GET.

Deployment

  • Deploy su Vercel/Netlify + Render/Heroku: con frontend e backend su piattaforme separate.
  • Monorepo con Vite + Express: tutto in un unico progetto con struttura coerente.
  • Dockerizzazione: container per frontend e backend con docker-compose.

Bonus: 🔄 API avanzate e UI dinamica

  • API paginata o filtrata (es. /api/fruits?page=1&filter=citrus)
  • Form di inserimento: possibilità di aggiungere frutti dal frontend.
  • Animazioni UI con Framer Motion o librerie simili.
  • State management globale: Zustand, Redux, React Query.