Accueil > blog > ngrok-test-site-internet-differents-appareils

Tester son site sur différents appareils avec NGROK

Comment tester son site web sans déployer de serveur ? Comment valider la compatibilité mobile et le SEO ? - formation Node.js et TypeScript

Le 28 janvier 2024

3 mins

Le développement d’un site ou d’une application web nécessite souvent une pile technologique front et back, parfois basée sur des technologies telles que React, Node.js et PostgreSQL.

Habituellement, vous accédez à votre travail via localhost:3000 (ou un autre port) pour effectuer ses tests. Cependant, il peut être nécessaire de tester votre site web sur différents appareils, comme des mobiles ou des tablettes, ou sur d'autres systèmes d’exploitation, où l'utilisation de localhost s'avère limitée.

Tester son site web sur d’autres appareils sans le déployer

Il est possible de simuler un déploiement sans avoir à configurer un serveur, grâce à des solutions de reverse proxy.

Ngrok, en particulier, offre une méthode simple pour exposer un serveur local à Internet en créant un tunnel sécurisé.

Cela permet d'accéder à votre application de l'extérieur, facilitant le partage avec des collègues ou des clients et permettant des tests sur différents navigateurs et appareils sans un déploiement formel.

Comment utiliser Ngrok pour tester votre application en ligne

L'utilisation est simple. Voici les cinq étapes :

Téléchargez l'utilitaire : Visitez le site officiel et créez un compte gratuit. Téléchargez ensuite Ngrok pour votre système.
Lancez votre serveur local : Pour un projet Node.js, cela se fait généralement avec npm start .
Exécutez l'utilitaire : Ouvrez un terminal dans le répertoire de Ngrok et lancez ./ngrok http 3000 , en remplaçant "3000" par le numéro de port de votre serveur local.
Accédez à votre site : Ngrok vous fourni une URL accessible de partout. Cette URL, générée aléatoirement à chaque session, permet l'accès à votre application depuis n'importe quel appareil.
Surveillez le trafic : les requêtes entrantes sont enregistrées dans le terminal, permettant de suivre l'accès à votre application.

Aller plus loin ?

La version payante de Ngrok offre des fonctionnalités supplémentaires, comme un sous-domaine personnalisé. Il peut être utilisé pour des déploiements locaux, à condition que le serveur local reste accessible.

Dans mes formations professionnelles, je couvre en détail l'utilisation de Ngrok pour les tests, offrant une méthode efficace pour collaborer avec des collègues, des clients ou des bêta-testeurs, notamment pour valider un design responsive.

Ou, directement

En résumé

Ngrok crée un tunnel sécurisé pour accéder à des applications locales depuis n'importe quel appareil, facilitant les tests de compatibilité.
Son utilisation est simple et ne nécessite pas de configuration serveur complexe, permettant des tests rapides et efficaces.
La plateforme enregistre les requêtes entrantes, offrant une vision claire de l'accès à l'application pour un débogage facilité.

Qui suis-je ?

Je suis Thomas Dupont, développeur spécialisé en JavaScript et TypeScript depuis 10 ans.

J'ai eu l'occasion de résoudre la dette technique sur des applications utilisées par des centaines de milliers de personnes.

Je m'intéresse à la sécurité, au SEO et j'apporte beaucoup d'attention à la qualité du code.

Tous mes clients bénéficient d'une garantie d'un an sur le code que je livre.

Vous avez besoin d'un développeur qui place la qualité du code et l'intérêt des clients au centre de son travail ?