Démarrer un projet ReactJS typescript avec ViteJS

Par /

Installation de viteJS avec npm

D’abord installons ViteJS

npm create vite@4.1.0

// alternative pour installer la dernière version

npm create vite@latest

// répondez aux questions
? Project name: » nom_projet

>   Vanilla
    Vue
    React
    Preact
    Lit
    Svelte
    Others


// on sélectionne React puis on a l'écran suivant
>   JavaScript
    TypeScript
    JavaScript + SWC
    TypeScript + SWC

Sélectionnons Typescript simple


√ Project name: ... cloneflicker
√ Select a framework: » React
√ Select a variant: » TypeScript

Scaffolding project in E:\projet\frontend\cloneflicker...

Done. Now run:

  cd cloneflicker
  npm install    
  npm run dev

A la fin de la configuration de votre projet, un petit rappel de ses caractéristiques et une suggestion de commandes.

Au lancement on a l’écran suivant : 

  VITE v4.5.5  ready in 13692 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

Vou spouvez CTRL + Click sur le lien pour lancer le site

Une des choses que vous allez remarquer le plus est la vitesse de lancement. C’est plus rapide qu’avec Webpack, la raison est que Vite optimise le build et ne construit pas tout, comme Webpack.

Structure du projet React Typescript

Le dossier public contient la page index.html qui va servir d’hôte à toute votre application React. Tandis que le dossier src contient tous les fichier de votre application React.

Le fichier tsconfig.json sert à configurer Typescript, le fichier vite.config.ts sert à introduire Vite,et n’oublions pas le fichier package.json.

Création de notre premier composant React en typescript !

Créons un fichier Message.tsx

function Message() {
    return <h1>Hello World</h1>;
}

export default Message;

Maintenant incorporons le dans App.tsx, effaçons le contenu par défaut de App.tsx pour simplifier notre construction.

import Message from './Message';

function App() {
  return <div>
    <Message />
  </div>
}

export default App

Au fur et à mesure que vous mettez à jour vos fichier, regardez la console, il y a le message

22:53:30 [vite] hmr update /src/App.tsx (x2)

Votre page s’est rafraichie.

Installation de Tailwind CSS

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

ça va générer deux fichiers de configuration tailwind.config.js et postcss.config.js. Remarquez que tailwindcss est une devDependency !

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Rajouter dans index.css ces lignes :

Modifier la class pour h1

function Message() {
    const name = 'Yvon';
    return <h1 className="text-4xl font-bold underline">Hello {name}</h1>;
}

export default Message;
@tailwind base;
@tailwind components;
@tailwind utilities;

Installation de Shadcn UI

Si vous préférez ne pas installer Tailwindcss, voici une alternative qui commence à bine être populaire au moment où j’écris ces lignes, c’est ShadCN. Selon la documentation d’installation de Shadcn, il faut installer quand même TailwindCSS, car le styling repose sur TailwindCSS

// installation de TailwindCSS
npm install tailwindcss @tailwindcss/vite


// vous serez amené à sélectionner un style
npm install @shadcn/ui


// pour ajouter un bouton, ceci va créer un fichier component.json, un répertoire
npx shadcn add button

// extrait du fichier component.json

....
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
...


// vous allez sans doute avoir une erreur avec Tailwindcss je ne sais pourquoi mais il doit réutiliser certaines choses, installez ce qui manque

@tailwind base;
@tailwind components;
@tailwind utilities;

Lors de l’installation de TailwindCSS, j’ai eu un soucis avec une version de Vite un peu ancienne, il fallait au moins la version de vite à 5.2 pour utiliser Shadcn. Plus d’information concernant component.json

npm install vite@^5.2.0

// mettre  à jour la peer dependency de react puisque le projet React a été démarré avec ViteJS

npm install @vitejs/plugin-react@latest

// si tout s'est bien passé refaites la commande
npx shadcn add button

Vous aurez potentiellement un message d’erreur du type

No import alias found in your tsconfig.json file.
Visit https://ui.shadcn.com/docs/installation/vite to learn how to set an import alias.

Dans ce cas c’est le fichier tsconfig.json qu’il faut modifier, il faut dire à Typescript où sont les composants Shadcn.

// dans le section compilerOptions ajoutez ça : 

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

// le "." indique que le point de départ de résolution de chemin commence par là où le fichier tsconfig.json se situe (qui est la base du projet)

//en faisant ça vous pourrez avoir de beaux chemin d'import

import { MyComponent } from '@/components/MyComponent'

// au lieu de 

import { MyComponent } from '../../../components/MyComponent'

En refaisant la commande npx shadcn add button vous aurez un dossier component dans /src, et vous trouverez votre composant

Import du bouton généré

Vous ne pouvez sans doute pas encore importer correctement le bouton

// App.tsx
import { useState } from 'react'
import './App.css'
import { Button } from '@/components/ui/button'

function App() {
  const [count, setCount] = useState(0)

  return (
    <div className="App">
      <h1>Synapse Front</h1>
      <Button>Click me</Button>
    </div>
  )
}

export default App

// configuration complémentaire
// vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
})



// tsconfig.json  cette ligne permet le mapping des types Typescript pour node et vite
...
  "compilerOptions": {
    "types": [
      "vite/client",
      "node"
    ],

...

Lancer l’application accessible via votre mobile

> npm run dev -- --host



  VITE v4.5.5  ready in 830 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: http://172.22.80.1:5173/
  ➜  Network: http://172.18.96.1:5173/
  ➜  Network: http://192.168.1.151:5173/
  ➜  press h to show help

Pour pouvoir utilise vite --host, il faut l’installer globalement.

Changer le répertoire de build pour vite

Par défaut vite build dans le répertoire dist. Ce répertoire sert pour la production, en phase de développement, il n’est pas généré. Pour avoir le build dans le répertoire build, il faut modifier vite.config.js

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  build: {
    outDir: 'build', // Spécifie ici le répertoire de sortie
  },
})

L’attribut build n’apparait dans le fichier originel.

Retour en haut