Up(sun) et opérationnel avec React

Upsun est parfaitement adapté pour héberger toutes sortes d'applications JavaScript, y compris les applications React. Ce petit guide te permettra de te lancer dans les premières étapes de la création de ton projet React, de le déployer sur Upsun, puis d'exploiter ses fonctionnalités pour démarrer ton développement. 

Créer des projets React

Pour ce tutoriel, on va utiliser le guide de démarrage rapide de React pour créer notre application. 

Exécute la commande :

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

create-react-app Cela mettra en place la structure de base du nouveau dépôt, en utilisant dans ce cas KendoReact — un projet qui contient une collection de composants React prêts à l'emploi, conformes au système d'interface utilisateur KendoReact. 

Une fois que le projet a fini de se construire et d'installer les dépendances, on peut 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 tu souhaites plutôt créer une version de production de l'application, tu peux le faire avec la commande

npm run build

qui va générer du code HTML, JS et CSS statique dans le sous-répertoire local build. On peut ensuite exécuter rapidement ce site généré avec un serveur local, comme dans l'approche Python ci-dessous :

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

Déploiement de projets React

Une fois la CLI Upsun installée et un compte déjà créé, exécute la commande suivante depuis le dépôt React :

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

Remplace YOUR_ORG_NAME par l'organisation souhaitée, et n'hésite pas à choisir une autre région si tu le souhaites. Ensuite, crée un fichier de configuration Upsun minimal pour compiler puis 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        

Effectue un stage, un commit et un push vers Upsun. En quelques minutes, tu verras que ton application React a été compilée et déployée avec succès.

git add .upsun/config.yaml
git commit -m "Migrate to Upsun."
upsun push -y 

Effectuer des modifications

Un journal d'activité cumulé s'affiche localement dans ton terminal et dans l'activité de push de la console de gestion Upsun. Tu as peut-être remarqué – selon le moment où tu suis ce tutoriel – qu'il peut y avoir des dépendances obsolètes, voire potentiellement vulnérables, présentes dans le dépôt. On peut consacrer un environnement de test à la mise à niveau et à l'amélioration de cette situation.

Commence par créer 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. On peut utiliser un outil comme nvm pour télécharger la dernière version disponible de Node.js – qui, au moment où on écrit ces lignes, est Node.js 22 (adapte les commandes ci-dessous à la version actuelle, selon à quel point tu vis dans le futur). Installe nvm, puis utilise-le pour installer la version la plus récente de Node.js :

$ nvm install 22
$ node -v
v22.11.0

On peut mettre à jour .upsun/config.yaml pour qu’il corresponde à cette version récente.

# .upsun/config.yaml

applications:

    upsun-react: 

        # Updating this line from 20 --> 22
        type: "nodejs:22"

        hooks:
            build: |
                set -eux
                npm install
                npm run build

        web:
            locations:
                /:
                    root: build
                    index:
                        - index.html      

Ensuite, à l’aide d’npm, audite les dépendances vulnérables et modifie-les manuellement ou à l’aide de l’outil CLI lui-même avec les commandes npm upgrade et npm audit fix. Valide (git add . && git commit -m “Make upgrades”) et pousse les modifications (upsun push -y). Vérifie que le déploiement a réussi et qu’il a bien été intégré en production !

upsun merge -y

Tu es prêt !

C'est tout ! Désormais, non seulement tu disposes d'un projet React déployé sur Upsun, mais tu as également suivi le même processus que celui que tu utiliseras pour chaque révision – qu'il s'agisse de mises à jour de dépendances ou d'ajouts de fonctionnalités – que tu effectueras, avec un environnement de test pour chacune d'entre elles. 

Reste à l'affût d'autres articles sur le déploiement de toutes sortes d'applications sur Upsun — suis-nous sur nos réseaux sociaux pour rester informé : Dev.to, Reddit et notre communauté. N'oublie pas de nous rejoindre sur le tout nouveau Centre des développeurs pour encore plus de ressources. 

À bientôt !