Aujourd’hui j’aimerais vous faire découvrir un outil proposé par Amazon via Amazon Web Services : Cloud9.
Cet article vous présente mon cheminement pour en arriver à Cloud9 et mon expérience. J’ai fait le choix de l’écrire dans la langue de Molière pour les gens qui ne sont pas “Friendly” avec la langue de Shakespeare.


Comment j’en suis arrivé à Cloud9 me direz vous et pourquoi j’ai décidé de vous écrire un article sur ce sujet ?
Ma démarche était de trouver un moyen de travailler sur un projet sans avoir le code physiquement d’une façon ou d’une autre sur ma machine.
J’ai donc griffonné plusieurs idées sur un papier :

  • Mettre le code sur une clé USB ?
    Na! Cela implique d’avoir les outils de développement, l’environnement sur ma machine et seulement avoir le code ailleurs. Et puis si j’oublie ma clé USB je fais comment ? ¯\_(ツ)_/¯
  • Installer virtual box (ou équivalent) et un OS pour ensuite installer l’ensemble des outils et y mettre le projet.
    Na x2 !! Tant de choses à faire pour au final avoir la VM (machine virtuelle) sur mon PC/Laptop.
  • Trouver un moyen de coder dans une fenêtre de navigateur.
    EURÊKA ! J’ai donc commencé à chercher. Il existe de petits outils pour faire des exercices comme jsfiddle, Codepen, mais rien qui soit la réplique de mon IDE (Éditeur de code) et qui me permette de gérer un projet au complet.
    Je suis finalement tombé sur Cloud9 proposé par AWS offrant une base gratuite avec des options limitées, mais qui permettent quand même de rouler un environnement complet et donc de s’amuser un peu.

Voilà donc comment je suis arrivé à expérimenter Cloud9. Je vais passer la partie création de compte / vérification / activation du(des) service(s). Il vous suffit de vous rendre sur le site et de suivre les étapes pour avoir un compte “Free Tier Access” de 12 mois.

Vous allez alors me dire, mais à quoi ressemble Cloud9 et comment ça fonctionne ? C’est très simple, une fois votre environnement créé (voir la documentation ici) vous avez accès à un IDE dans votre fenêtre de navigateur (image ci-dessous)

IDE

On va découper un peu ce qui se trouve dans l’image précédente pour vous expliquer rapidement :

Cloud9 arborescence
arborescence

Arborescence des fichiers : rien d’exceptionnel ici, on peut créer des fichiers/dossiers, on peut les supprimer. On peut aussi les télécharger en version local.

Fenêtre de code
template

Éditeur de code : rien de nouveau ici mais quelques restrictions quand même.
Une liste des langages supportés est disponible ici.

Si vous voulez avoir l’auto complétion en fonction du langage que vous utilisez vous devrez sauvegarder votre fichier avec l’extension appropriée avant de l’utiliser.
Par exemple si vous commencez à écrire div dans un document sans extension .html vous n’aurez pas le <div></div> automatiquement.

auto completion

Rendu de votre fichier / application : il existe plusieurs façons d’avoir un rendu, mais dans cet article je vais vous montrer comment avoir une preview de votre page / application dans le navigateur.

Preview 

Quand vous êtes sur le fichier cible cliquez sur :
Preview > Preview Running Application

Vous verrez alors apparaître un onglet de rendu que vous pouvez mettre à côté de votre code en partageant l’espace de travail.

Rendu navigateur

Voilà qui fait le tour rapide de Cloud9 pour mes besoins en développement front-end.

En conclusion :

Pour les besoins qui étaient les miens, cette solution est vraiment intéressante, car elle ne nécessite qu’une connexion internet et un compte AWS.
Elle pourrait par exemple parfaitement être couplée avec l’utilisation d’un chromebook qui ne donne pas forcement accès à tous les outils de développement.
En somme Cloud9 me donne accès à un IDE comme visual studio code avec la possibilité d’installer des librairies ou de configurer des projets avec webpack comme si j’étais sur mon propre laptop. Il me donne accès à un terminal pour exécuter des commandes.
Enfin il me donne accès à un rendu de ma page / application.

Attention toutes fois cette solution n’est pas cohérente pour du travail à plusieurs. Attention également à la configuration de votre environnement, certaines options sont payantes (mais elles sont indiquées lors de la configuration).

À lire aussi :

Installer vue CLI 3 dans Cloud9 (AWS)
Dans notre cas avec Cloud9 nous devons rajouter une ligne dans le fichier de configuration pour que la preview puisse s’effectuer. Dans le fichier `webpack.config.js` dans la section `devServer` Et…

Merci,
Nic