Content : Add article "Deploy Start-UI on Upsun"#79
Open
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
yoannfleurydev
requested changes
Mar 2, 2026
| @@ -0,0 +1,315 @@ | |||
| --- | |||
| title: 'Déployer Start UI Web v3 sur Upsun v3.3.45' | |||
Member
There was a problem hiding this comment.
I'd suggest to remove the versions in the title but add a disclaimer in the article body
| - 'deploiement' | ||
| - 'PaaS' | ||
| - 'Start UI' | ||
| heroImage: 'images/Format Blog Header (10).png' |
Member
There was a problem hiding this comment.
avoid spaces in filenames
Member
|
please improve the naming of the file names so we know what the content of the image 
For example, |
Comment on lines
+81
to
+84
|  | ||
|  | ||
|  | ||
|  |
Member
There was a problem hiding this comment.
Please provide alt text for accessibility. For example for the first image :
Member
|
please make |
| ## Avant-propos | ||
|
|
||
| Dans le cadre d'une exploration des solutions de déploiement modernes, | ||
| j'ai testé **Upsun**, une plateforme PaaS récente proposée par les |
Member
There was a problem hiding this comment.
add link to Upsun here, people reading the article will want to check as soon as they see the name
| - **Tester un déploiement initial** ("from scratch") **sans connaissance | ||
| préalable d'Upsun ni expérience en devops**. La perspective adoptée est celle d'une développeuse découvrant l'outil. | ||
|
|
||
| Pour ce test, j'ai choisi de déployer notre outil maison [Start UI Web v3](https://start-ui.com/), |
Member
There was a problem hiding this comment.
Suggested change
| Pour ce test, j'ai choisi de déployer notre outil maison [Start UI Web v3](https://start-ui.com/), | |
| Pour ce test, j'ai choisi de déployer notre outil maison [Start UI Web](https://start-ui.com/), |
| préalable d'Upsun ni expérience en devops**. La perspective adoptée est celle d'une développeuse découvrant l'outil. | ||
|
|
||
| Pour ce test, j'ai choisi de déployer notre outil maison [Start UI Web v3](https://start-ui.com/), | ||
| un starter d'application moderne basé sur React, Vite et Node.js, que nous utilisons régulièrement comme base de projets front-end. (Pour en savoir plus, vous pouvez lire dès maintenant notre [article de présentation Start UI](start-ui) !) |
Member
There was a problem hiding this comment.
Suggested change
| un starter d'application moderne basé sur React, Vite et Node.js, que nous utilisons régulièrement comme base de projets front-end. (Pour en savoir plus, vous pouvez lire dès maintenant notre [article de présentation Start UI](start-ui) !) | |
| un starter d'application moderne basé sur React, Vite et Node.js, que nous utilisons régulièrement comme base de projets front-end. (Pour en savoir plus, vous pouvez lire dès maintenant notre [article de présentation Start UI](/fr/blog/articles/start-ui) !) |
Comment on lines
+49
to
+52
| Une période d'essai gratuite de 15 jours est proposée. Elle permet d'accéder à un seul projet pendant cette durée limitée, | ||
| avec les ressources suivantes : 1 organisation, avec 1 projet et 2 running environments; des containers et un nombre de users | ||
| illimités; et jusqu'à 4,5 CPU, 12 Go de mémoire et 20 Go de stockage réseau fonctionnant simultanément. | ||
| À la fin de l'essai, votre projet sera suspendu jusqu'à ce que vous ajoutiez un mode de paiement valide à votre compte. |
Member
There was a problem hiding this comment.
I find this paragraph hard to read for someone not technical.
| Ce fork permet de disposer d’une copie du projet sous son propre compte GitHub. | ||
|
|
||
| Le projet forké doit ensuite être cloné en local afin de vérifier que l’installation fonctionne correctement avant tout déploiement. | ||
| La documentation officielle de Start UI Web précise que le projet nécessite une version récente de Node.js ainsi que l’utilisation de pnpm comme gestionnaire de dépendances. |
Member
There was a problem hiding this comment.
Suggested change
| La documentation officielle de Start UI Web précise que le projet nécessite une version récente de Node.js ainsi que l’utilisation de pnpm comme gestionnaire de dépendances. | |
| La documentation officielle de Start UI Web précise que le projet nécessite une version récente de Node.js ainsi que l’utilisation de [pnpm](https://pnpm.io/) comme gestionnaire de dépendances. |
| La documentation officielle de Start UI Web précise que le projet nécessite une version récente de Node.js ainsi que l’utilisation de pnpm comme gestionnaire de dépendances. | ||
| Un fichier d’environnement local peut être généré à partir du fichier d’exemple fourni afin de permettre un démarrage en local. | ||
|
|
||
| Alternativement, pour initialiser un projet, on peut utiliser ```pnpm create start-ui -t web myApp```. Il est ensuite impératif de pousser le projet sur un dépôt GitHub pour qu'il soit éligible au déploiement (les deux solutions ont été testées et fonctionnent aussi bien l’une que l’autre !). |
Member
There was a problem hiding this comment.
Suggested change
| Alternativement, pour initialiser un projet, on peut utiliser ```pnpm create start-ui -t web myApp```. Il est ensuite impératif de pousser le projet sur un dépôt GitHub pour qu'il soit éligible au déploiement (les deux solutions ont été testées et fonctionnent aussi bien l’une que l’autre !). | |
| Alternativement, pour initialiser un projet, on peut utiliser `pnpm create start-ui -t web myApp`. Il est ensuite impératif de pousser le projet sur un dépôt GitHub pour qu'il soit éligible au déploiement (les deux solutions ont été testées et fonctionnent aussi bien l’une que l’autre !). |
|  | ||
|  | ||
|
|
||
| J’ai tenté d’utiliser l’option de génération assistée par IA pour l’initialisation de la configuration du projet mais ça a été un échec. J'espérais une solution miracle pour un déploiement en un clic. Cependant, ne maîtrisant ni le code, ni sa conception, ni sa raison d'être, j'ai préféré repartir d'une configuration manuelle. J'ai dû la revoir plusieurs fois avant de comprendre les champs absolument nécessaires (les hooks, la commande de start, les variables d’environnements,..). |
Member
There was a problem hiding this comment.
Cependant, ne maîtrisant ni le code, ni sa conception, ni sa raison d'être, j'ai préféré repartir d'une configuration manuelle.
not really selling Start UI with this comment 😛
Contributor
Author
There was a problem hiding this comment.
It's not about Start UI ? I think she means that she didn't understand the code generated by Upsun for the configuration, nothing to do with Start UI 🤔
|
|
||
| Upsun permet de définir des variables par environnement directement depuis l’interface de gestion, mais elles sont à remplir une par une ! | ||
|
|
||
| Le fichier ```.environment```, quant à lui, est utilisé par Upsun pour connecter automatiquement l’application aux services déclarés. |
Member
There was a problem hiding this comment.
Suggested change
| Le fichier ```.environment```, quant à lui, est utilisé par Upsun pour connecter automatiquement l’application aux services déclarés. | |
| Le fichier `.environment`, quant à lui, est utilisé par Upsun pour connecter automatiquement l’application aux services déclarés. |
| Upsun permet de définir des variables par environnement directement depuis l’interface de gestion, mais elles sont à remplir une par une ! | ||
|
|
||
| Le fichier ```.environment```, quant à lui, est utilisé par Upsun pour connecter automatiquement l’application aux services déclarés. | ||
| Il n’a pas vocation à contenir l’ensemble des variables applicatives et ce n’est pas non plus une simple copie du ```.env```. Pour Start UI j’ai laissé les variables d’environnement liées à la base de données qui ont été automatiquement ajoutées. |
Member
There was a problem hiding this comment.
Suggested change
| Il n’a pas vocation à contenir l’ensemble des variables applicatives et ce n’est pas non plus une simple copie du ```.env```. Pour Start UI j’ai laissé les variables d’environnement liées à la base de données qui ont été automatiquement ajoutées. | |
| Il n’a pas vocation à contenir l’ensemble des variables applicatives et ce n’est pas non plus une simple copie du `.env`. Pour Start UI j’ai laissé les variables d’environnement liées à la base de données qui ont été automatiquement ajoutées. |
| Les hooks Upsun doivent être configurés afin d’installer les dépendances, construire l’application et exécuter les scripts nécessaires au bon fonctionnement de Start UI Web. | ||
|
|
||
| Le **hook de build** est utilisé pour installer les dépendances et générer le build de production. | ||
| Le ```–ignore-scripts``` lors de l’installation reste important pour éviter la configuration de husky et des hooks git qui viennent polluer les logs de pleins d’erreurs. |
Member
There was a problem hiding this comment.
Suggested change
| Le ```–ignore-scripts``` lors de l’installation reste important pour éviter la configuration de husky et des hooks git qui viennent polluer les logs de pleins d’erreurs. | |
| Le `–ignore-scripts` lors de l’installation reste important pour éviter la configuration de husky et des hooks git qui viennent polluer les logs de pleins d’erreurs. |
|  | ||
|
|
||
| Le **hook de déploiement** permet d’exécuter les scripts liés à l’initialisation de la base de données. | ||
| Dans notre cas : ```pnpm db:init``` |
Member
There was a problem hiding this comment.
Suggested change
| Dans notre cas : ```pnpm db:init``` | |
| Dans notre cas : `pnpm db:init` |
|
|
||
| ### Lancement de l’application | ||
|
|
||
| Ne pas oublier de modifier la commande de la partie `web > commands > start` : ```pnpm start```. |
Member
There was a problem hiding this comment.
Suggested change
| Ne pas oublier de modifier la commande de la partie `web > commands > start` : ```pnpm start```. | |
| Ne pas oublier de modifier la commande de la partie `web > commands > start` : `pnpm start`. |
|
|
||
| Si une intégration GitHub est utilisée, le simple fait de pousser sur le dépôt distant déclenche automatiquement le déploiement sur Upsun (`git push` déploie sur Upsun, et `upsun push` pousse également sur GitHub). Sans intégration, le push doit être effectué vers la remote Upsun. | ||
|
|
||
| Le premier déploiement complet peut prendre plusieurs dizaines de minutes ⏱️. |
Member
There was a problem hiding this comment.
Is there an explanation about why it is this long?
|
|
||
| L’interface Upsun affiche principalement les logs liés aux phases de build et de déploiement (mais ils mériteraient un scroll automatique pour garder les logs les plus récents à l’écran). | ||
|
|
||
| Pour consulter les logs d’exécution de l’application, il est nécessaire d’utiliser la commande dédiée via l’outil en ligne de commande Upsun : ```upsun log``` (```upsun log app```, ```upsun log deploy```, etc.). |
Member
There was a problem hiding this comment.
Suggested change
| Pour consulter les logs d’exécution de l’application, il est nécessaire d’utiliser la commande dédiée via l’outil en ligne de commande Upsun : ```upsun log``` (```upsun log app```, ```upsun log deploy```, etc.). | |
| Pour consulter les logs d’exécution de l’application, il est nécessaire d’utiliser la commande dédiée via l’outil en ligne de commande Upsun : `upsun log` (`upsun log app`, `upsun log deploy`, etc.). |
|
|
||
| En tant qu’alternative à Clever Cloud, Upsun mérite clairement d’être testé, mais demande aujourd’hui un investissement initial qui m’a semblé assez important. | ||
|
|
||
| Si vous souhaitez aller plus loin, vous pouvez découvrir nos librairies open-source *made-in-BearStudio* : [UI-State](pourquoi-on-a-cree-ui-state) et [Ficus UI](ficus-ui-ui-simple-et-composable-pour-react-native). No newline at end of file |
Member
There was a problem hiding this comment.
Suggested change
| Si vous souhaitez aller plus loin, vous pouvez découvrir nos librairies open-source *made-in-BearStudio* : [UI-State](pourquoi-on-a-cree-ui-state) et [Ficus UI](ficus-ui-ui-simple-et-composable-pour-react-native). | |
| Si vous souhaitez aller plus loin, vous pouvez découvrir nos librairies open-source *made-in-BearStudio* : [UI-State](/fr/blog/articles/pourquoi-on-a-cree-ui-state) et [Ficus UI](/fr/blog/articles/ficus-ui-ui-simple-et-composable-pour-react-native). |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Mise en prod de l'article d'Héloïse "Déployer Start UI Web v3 sur Upsun v3.3.45"