React en marche (sun) et en action

Upsun est bien adapté pour héberger des applications JavaScript de toutes sortes, y compris des applications React. Ce petit guide vous permettra de vous lancer dans les premières étapes de la création de votre projet React, de le déployer sur Upsun, puis de tirer parti de ses fonctionnalités pour lancer votre développement.

Création de projets React

Pour ce tutoriel, nous pouvons utiliser le quickstart React pour créer notre application.

Exécutez la commande

npx create-react-app upsun-react --template cra-template-kendo-typescript

create-react-app va mettre en place l'échafaudage pour le nouveau dépôt, dans ce cas en s'appuyant sur KendoReact - un projet qui contient une collection de composants React prêts à l'emploi selon le système d'interface utilisateur de KendoReact.

Lorsque le projet a fini de construire et d'installer les dépendances, nous pouvons exécuter une version de développement du site localement avec cd upsun-react && npm run start et visiter le site à l'adresse http://localhost:3000.

Si nous voulons plutôt construire une version de production de l'application, nous pouvons le faire avec la commande

npm run build

qui construira les fichiers HTML, JS et CSS statiques dans le sous-répertoire local de construction. Nous pouvons ensuite exécuter ce site construit rapidement avec un serveur local, comme l'approchebasée sur Python ci-dessous :

python3 -m http.server --directory=build 3000

Déployer des projets React

Avec l'Upsun CLI installé et un compte déjà créé, en exécutant la commande suivante à partir du référentiel React :

upsun create -o YOUR_ORG_NAME --title=React-Upsun --region=ca-1.platform.sh --default-branch=main -y 

Remplacez YOUR_ORG_NAME par l'organisation souhaitée, et n'hésitez pas à remplacer par une autre région si vous le souhaitez. Ensuite, créez un fichier de configuration Upsun minimal pour construire et déployer le projet React.

# .upsun/config.yaml applications : upsun-react : 

        type : "nodejs:20" hooks : build : | set -eux npm install npm run build web : locations : / : root : build index : - index.html

Stage, commit, et push sur Upsun. Dans quelques minutes, vous verrez que votre application React a été construite et déployée avec succès.

git add .upsun/config.yaml git commit -m "Migrer vers Upsun." upsun push -y 

Faire des révisions

Un journal d'activitéaccumulé apparaît localement dans votre terminal et dans l'activité push dans la console de gestion d'Upsun. Vous avez peut-être remarqué - selon le moment où vous avez suivi ce tutoriel - qu'il peut y avoir des dépendances obsolètes et même potentiellement vulnérables présentes dans le référentiel. Nous pouvons dédier un environnement de prévisualisation à la mise à jour et à l'amélioration de cette situation.

Tout d'abord, créons cet environnement :

upsun branch upgrades

Ensuite, mettons de l'ordre dans nos versions et utilisons la dernière version de Node.js à la fois localement et sur Upsun. Nous pouvons utiliser un outil comme nvm pour télécharger la dernière version disponible de Node.js - qui, au moment où j'écris ces lignes, est Node.js 22 (ajustez les commandes ci-dessous à la version actuelle, en fonction de la distance qui vous sépare de l'avenir). Installez nvm, puis utilisez-le pour installer la version la plus récente de Node.js :

$ nvm install 22 $ node -v v22.11.0

Nous pouvons mettre à jour .upsun/config.yaml pour qu'il corresponde à cette version récente.

# .upsun/config.yaml applications : upsun-react : 

        # Mise à jour de cette ligne de 20 --> 22 type : "nodejs:22" hooks : build : | set -eux npm install npm run build web : locations : / : root : build index : - index.html

Ensuite, à l'aide de npm, vérifiez les dépendances vulnérables et modifiez-les manuellement ou avec l'outil CLI lui-même à l'aide des commandes npm upgrade et npm audit fix. Faites un commit (git add . && git commit -m "Make upgrades") et poussez les changements (upsun push -y). Vérifiez que le déploiement a réussi, et qu'il a été fusionné en production !

upsun merge -y

Vous êtes prêts !

Voilà, c'est fait ! Maintenant, non seulement vous avez un projet React déployé sur Upsun, mais vous avez suivi le même flux de travail avec lequel vous développerez pour chaque révision - qu'il s'agisse de mises à jour de dépendances ou d'ajouts de fonctionnalités - que vous ferez, avec un environnement de prévisualisation pour chacune d'entre elles.

Gardez l'œil ouvert pour d'autres articles sur le déploiement de toutes sortes d'applications sur Upsun - suivez-nous sur nos canaux sociaux pour rester à jour : Dev.to, Reddit, et Discord. N'oubliez pas de nous rejoindre sur le tout nouveau Developer Center pour encore plus de ressources.

À bientôt !