Dans ce tutoriel, je vais vous apprendre comment déployer manuellement un projet React et TypeScript avec Vite sur Netlify. Je vais vous montrer quelques étapes rapides et simples pour mettre en ligne des versions de vos projets.
Pour suivre ce tutoriel, voici quelques prérequis :
- Un projet React et TypeScript existant avec Vite que vous souhaitez déployer.
- L'éditeur Visual Studio Code (VSCode) ou tout autre éditeur de code tel que Sublime.
- Optionnellement, vous pouvez simplement utiliser une ligne de commande/terminal au lieu du terminal intégré de votre éditeur de code.
- Un compte Netlify existant auquel vous êtes déjà connecté.
Passons maintenant au déploiement !
À quoi s'attendre
Vous allez déployer votre projet manuellement sur Netlify, renommer votre site sur la plateforme et pouvoir avoir une version en ligne de votre projet.
Comment déployer votre projet React et TypeScript
1. Ouvrez votre projet existant sur VSCode
Ouvrez votre projet dans l'éditeur de code de votre choix.
2. Construisez le projet
Ouvrez le terminal dans VSCode et utilisez le code ci-dessous pour construire votre projet :
npm run build
Cela devrait générer un dossier dist dans votre répertoire racine où la version minifiée de votre projet est créée et stockée.
Figure 2.0 Exécution du projet dans le terminal qui crée le dossier dist dans la structure du projet.
3. Glissez-déposez votre dossier Dist dans Netlify
Sur Netlify, sous l'onglet Team Overview, cliquez sur le bouton Add New Site. Il devrait y avoir trois options :
- Importer un projet existant
- Commencer à partir d'un modèle
- Déployer manuellement
Sélectionnez la troisième option pour déployer manuellement.
Figure 3.0 Cliquer sur le bouton Add new site montre les trois options parmi lesquelles choisir. Sélectionnez "Deploy Manually".
Cela devrait vous mener à la page comme illustré dans l'image ci-dessous :
Figure 3.1 Vue de glisser-déposer lors du choix de déployer manuellement.
Cliquez sur la page et naviguez dans le chemin de fichier de votre projet.
Téléchargez le dossier dist qui a été précédemment généré dans votre projet sur Netlify.
Figure 3.2 Navigation dans le dossier du projet et téléchargement du dossier dist sur Netlify.
Cela prendra quelques secondes ou minutes pour déployer votre projet.
Une fois le déploiement réussi, vous verrez une page similaire à celle ci-dessous. Par défaut, elle donne un nom de sous-domaine généré aléatoirement à l'URL de votre site. Par exemple, dans mon cas, c'est delightful-pie-bba293.
Figure 3.3 Le déploiement est réussi.
Le nom de votre site est le sous-domaine du domaine de Netlify.
https://<nom-de-votre-site>.netlify.app
4. Renommez votre site
Cliquez sur la configuration du site qui se trouve dans la barre latérale de gauche.
Dans les informations du site sous les détails du site, cliquez sur le bouton Change Site Name.
Figure 4.0 Vue des détails du site sous la configuration du site.
Cela devrait vous donner une fenêtre contextuelle pour changer le nom de votre site.
Changez le nom de votre site comme vous le souhaitez :
Figure 4.1 Changement du nom de votre site.
Retournez à l'aperçu du site où vous pouvez trouver l'URL de votre site. L'URL de votre site se trouve juste sous le nom de votre projet.
Figure 4.2 Aperçu du site où vous pouvez trouver l'URL de votre site.
Cliquez sur l'URL pour voir votre site !
Figure 4.3 Visualisation de mon site depuis la nouvelle URL créée.
Conclusion
Maintenant, vous avez des versions en ligne de vos projets et vous êtes capable de les déployer manuellement sur Netlify.
Il y a des étapes supplémentaires à suivre pour ajouter un domaine personnalisé, mais nous n'aborderons pas cela dans ce tutoriel.
Cela facilite également la référence à vos projets en attendant sur vos CV, site portfolio ou ailleurs.
Merci d'avoir suivi cet article et bon codage ! 🧙🏻
📝 Ressources supplémentaires :
- Cet article est une version résumée de cette vidéo. Si vous préférez regarder et suivre, alors c'est la vidéo à regarder.
- Il existe de nombreuses autres plateformes telles que Cloudflare, Heroku, ou Vercel pour déployer vos projets. Cette vidéo, par exemple, vous montre comment déployer vos projets sur Vercel.
🔍 Connectez-vous avec moi !
Suivez-moi sur X et LinkedIn si vous aimez mon travail et souhaitez rester informé pour plus de contenu.