La configuration `vite.config.ts` et les plugins

La configuration Vite.JS

4 min read
Déverrouillez votre potentiel

avec React Router 7

Vous en avez marre de...

❌ perdre du temps à chercher des informations éparpillées
❌ ne pas avoir de retour sur votre progression
Assistant IA spécialisé

Posez vos questions 24/7 à notre IA experte en React Router 7

Quiz interactifs

Validez vos acquis avec des quiz personnalisés et un feedback instantané

🎁 Accès gratuit à cette leçon

Entrez votre email pour débloquer cette leçon gratuite

Depuis la version 7, React Router s'intègre directement comme un plugin de Vite, ce qui simplifie la configuration de notre projet.

Fichier vite.config.ts

Voici la configuration par défaut :

vite.config.ts
1
import { reactRouter } from "@react-router/dev/vite";

2
import tailwindcss from "@tailwindcss/vite";

3
import { defineConfig } from "vite";

4
import tsconfigPaths from "vite-tsconfig-paths";

5


6
export default defineConfig({

7
  plugins: [tailwindcss(), reactRouter(), tsconfigPaths()],

8
});

Trois plugins sont utilisés dans cette configuration :

  • TailwindCSS v4, pour appliquer le style CSS à notre application.
  • React Router 7, notre framework full-stack s'occupant du routing de notre application
  • vite-tsconfig-paths, un plugin rendant compatible les alias définis dans la configuration tsconfig.json.

Avec cette configuration, il nous reste plus qu'à créer nos composants React. Mais d'abord, jetons un coup d'oeil au point d'entrée de notre application.

Fichier root.tsx

Le fichier root.tsx est le point d'entrée de notre application. Ce fichier est obligatoire, et son contenu sera affiché sur toutes les pages.

Il contient par exemple la structure de notre app, comme les balises HTML et les meta tags essentiels pour le SEO.

app/root.tsx
1
import {

2
	Links,

3
	Meta,

4
	Outlet,

5
	Scripts,

6
	ScrollRestoration,

7
	isRouteErrorResponse,

8
} from "react-router";

9


10
import type { Route } from "./+types/root";

11
import "./app.css";

12


13
export const links: Route.LinksFunction = () => [

14
	{ rel: "preconnect", href: "https://fonts.googleapis.com" },

15
	{

16
		rel: "preconnect",

17
		href: "https://fonts.gstatic.com",

18
		crossOrigin: "anonymous",

19
	},

20
	{

21
		rel: "stylesheet",

22
		href: "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap",

23
	},

24
];

25


26
export function Layout({ children }: { children: React.ReactNode }) {

27
	return (

28
		<html lang="en">

29
			<head>

30
				<meta charSet="utf-8" />

31
				<meta name="viewport" content="width=device-width, initial-scale=1" />

32
				<Meta />

33
				<Links />

34
			</head>

35
			<body>

36
				{children}

37
				<ScrollRestoration />

38
				<Scripts />

39
			</body>

40
		</html>

41
	);

42
}

43


44
export default function App() {

45
	return <Outlet />;

46
}

47


48
export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {

49
	let message = "Oops!";

50
	let details = "An unexpected error occurred.";

51
	let stack: string | undefined;

52


53
	if (isRouteErrorResponse(error)) {

54
		message = error.status === 404 ? "404" : "Error";

55
		details =

56
			error.status === 404

57
				? "The requested page could not be found."

58
				: error.statusText || details;

59
	} else if (import.meta.env.DEV && error && error instanceof Error) {

60
		details = error.message;

61
		stack = error.stack;

62
	}

63


64
	return (

65
		<main className="pt-16 p-4 container mx-auto">

66
			<h1>{message}</h1>

67
			<p>{details}</p>

68
			{stack && (

69
				<pre className="w-full p-4 overflow-x-auto">

70
					<code>{stack}</code>

71
				</pre>

72
			)}

73
		</main>

74
	);

75
}

Analysons chaque élément de cette page, un par un.

La méthode links

La méthode links permet de déclarer les feuilles de styles (CSS), les typographies de notre application et le favicon.

app/root.tsx
1
export const links: Route.LinksFunction = () => [

2
	{ rel: "preconnect", href: "https://fonts.googleapis.com" },

3
	{

4
		rel: "preconnect",

5
		href: "https://fonts.gstatic.com",

6
		crossOrigin: "anonymous",

7
	},

8
	{

9
		rel: "stylesheet",

10
		href: "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap",

11
	},

12
];

La méthode meta

La méthode meta n'est pas définie dans le fichier root.tsx, mais elle est indispensable pour le SEO de ton application. Elle permet de définir les balises meta, qui seront référencées sur les moteurs de recherches comme Google.

app/root.tsx
1
export const meta: MetaFunction = () => {

2
  return [

3
    { title: "Very cool app | Remix" },

4
    {

5
      property: "og:title",

6
      content: "Very cool app",

7
    },

8
    {

9
      name: "description",

10
      content: "This app is the best",

11
    },

12
  ];

13
};

Ces balises seront ensuite placées à l'intérieur de l'élément head, à la place du composant Meta (qui lui, est présent dans le fichier root.tsx.

Nous évoquerons davantage ce concept dans le module SEO de ce cours.

Dans une application typique, nous allons charger le style par défaut de notre application (comme la configuration TailwindCSS) dans la méthode links du fichier root.tsx.

Ce méthode va de pair avec le composant Links, qu'on retrouve dans le composant Layout de ce même fichier. Il est recommandé de le laisser dans la balise head, pour que les liens soient pré-chargés en premier.

Le composant Layout.tsx

Le composant Layout a été introduit l'année dernière, pour résoudre un problème d'hydratation. Il permet également de ne pas avoir à redéclarer les éléments html et head en cas de déclenchement d'une erreur.

Le composant clé à retenir est l'Outlet, qui permet d'afficher dynamiquement le contenu de la page active, facilitant ainsi la création de routes imbriquées. Pour que nos composants soient visibles sur l'interface, ils doivent être exportés par défaut. On importe également notre feuille de style Tailwind dans ce fichier, et on peut gérer dynamiquement d'autres styles CSS grâce à la méthode links.

Le composant ErrorBoundary

Le composant ErrorBoundary permet d'offrir une meilleure expérience à nos utilisateurs en cas d'erreur critique de notre application.

Il permet également d'isoler l'erreur dans les routes imbriquées, conservant une partie de l'interface utilisateur et ne le bloquant pas dans sa navigation.

Le composant Outlet

Finalement, le composant Outlet va afficher la vue de notre application.

Dans la prochaine leçon, nous mettons tous ces concepts en pratique en déclarant notre première route.

Premium
Quiz interactif
Testez vos connaissances et validez votre compréhension du module avec notre quiz interactif.
1

Comprendre les concepts fondamentaux

Quelle est la principale différence entre les composants client et serveur dans React ?

Les composants client s'exécutent uniquement dans le navigateur
Les composants serveur peuvent utiliser useState
Les composants client sont plus rapides
Il n'y a aucune différence significative
2

Optimisation des performances

Quelle technique est recommandée pour éviter les rendus inutiles dans React ?

Utiliser React.memo pour les composants fonctionnels
Ajouter plus d'états locaux
Éviter d'utiliser les props
Toujours utiliser les class components
3

Architecture des données

Quel hook permet de gérer les effets de bord dans un composant React ?

useEffect
useState
useMemo
useContext
4

Gestion des erreurs

Comment implémenter la gestion des erreurs pour les requêtes API dans React ?

Utiliser try/catch avec async/await
Ignorer les erreurs
Toujours afficher un message d'erreur
Rediriger l'utilisateur
5

Déploiement et CI/CD

Quelle est la meilleure pratique pour déployer une application React en production ?

Utiliser un service CI/CD comme GitHub Actions
Copier les fichiers manuellement via FTP
Envoyer le code source complet
Ne jamais mettre à jour l'application

Débloquez ce quiz et tous les autres contenus premium en achetant ce cours

Dans cette leçon