Expo pour le web 🕸

5 min readMay 9, 2020

Cet article est également disponible sur mon site

Expo est un outil merveilleux qui, en plus de vous permettre de créer des applications mobiles ANDROID et IOS, vous donne également la possibilité de créer des applications web et progressive web app(pwa) très facilement à partir de la même base de code Javascript et React 😍.

Dans cet article nous allons voir ensemble les bases pour créer et déployer rapidement une application web et une pwa en quelques minutes avec Expo.

Comment ça marche ? 🤔

C’est exactement comme si vous développiez avec Expo et react native pour du mobile, il y a presque rien qui change coté développement. Vous utilisez les mêmes composants pour créer vos vues : View , Text , Button. Vous avez aussi accès à quasi toutes les fonctionnalités du Expo SDK.

Notre app web 💊

Nous allons créer et déployer une application web très simple qui va permettre à l’utilisateur d’uploader une photo (grace au expo-image-picker), puis il pourra effectuer une rotation de l’image (grace au expo-image-manipulator).

Let’s go

Création du projet

Pour créer un projet expo il nous faut le expo-cli. Installons le globalement.

npm install -g expo-cli

On peut maintenant créer un projet expo avec la commande expo init

Si on regarde dans le app.json on voit que les plateformes supportées sont : android , ios et web.

Exécution du projet

On se place au niveau du projet et on lance la commande expo start -w ou expo start -web ou juste yarn web

expo start -web ou expo start -wou yarn start

Votre application sera directement lancée dans votre navigateur après cette commande.

Nous venons de lancer notre première application web avec expo 🎉🎉🎉🎊

Développement de notre app

Comme on a dit plus haut on va créer une app web dans laquelle l’utilisateur va uploader une image et il pourra faire une rotation de l’image pour la voir à l’envers. très simple.

Installation des librairies Expo (EXPO SDK)

Pour l’upload d’image nous avons le expo-image-picker

expo install expo-image-picker

Pour la manipulation d’une image, expo nous fournit le expo-image-manipulator

expo install expo-image-manipulator

Intégration

Import des librairies dans notre fichier App.js

import * as ImagePicker from 'expo-image-picker';import * as ImageManipulator from 'expo-image-manipulator';

Déclarons notre state qui va contenir le chemin de l’image uploadé

const [selectedImage, setSelectedImage] = React.useState(“”);

Créons notre fonction pour uploader :

Créons notre fonction pour faire la rotation de l’image:

Voici notre vue:

DEMO

Application web

🎊🎊🎊🎊🎊🎊🎊🎊🎊🎊🎊🎊 Voici le rendu sur le navigateur

Application mobile

🎊🎊🎊🎊🎊🎊🎊🎊🎊🎊🎊🎊 Voici le rendu sur un Iphone

Write once, run everywhere

Déploiement du projet

Notre application fonctionne très bien sur le web, nous allons donc procéder au déploiement et le rendre accessible à tout le monde.

BUILD

Avant de déployer une application web il faut d’abord la builder et la préparer pour la production. Pour ce faire expo nous fournit une commande

expo build:web

Cette commande va bundler notre projet pour la production et nous créer un dossier de build web-build dans la racine , c’est ce dossier que nous allons déployer.

Pour tester notre build en local on peut juste faire :

npx serve web-build

et l’ouvrir sur : http://localhost:5000

DEPLOIEMENT

Nous avons builder notre app elle est maintenant prête pour la production. Pour déployer une app web, vous avez plusieurs choix de nos jours :

Pour chaque solution vous pouvez voir comment déployer dans la doc de expo.

Nous allons utiliser netlify aujourd’hui.

Installons le cli netlify

npm install netlify-cli -g

Déployons notre app

netlify deploy

Notre app est maintenant en ligne 🎉🎉🎉🎉

Vous pouvez également faire du continus delivery avec netlify, de ce fait chaque fois que vous allez push sur Github , netlify va automatiquement builder et déployer votre app:

Créer un projet Sur netlify
Sélectionner votre provider Git puis votre repo
Appuyer sur Build your site

Vous pouvez tester l’application web ici.

Progressive Web App:

Quand vous créez une application web avec expo, par défaut elle est une progressive web app. Ce qui veut dire que l’application que nous venons de créer est une pwa 🥰.

On a effectivement un bouton + qui nous propose d’installer l’application:

Quand on clique sur installer , notre application devient comme une application native de l’appareil.

Quand on accède sur le site via un smartphone on peut aussi l’installer et du coup l’app est visible dans le homeScreen du téléphone comme une application native.

✨✅🎉

C’est sympa ! Mais ceci n’est pas une pwa complète, si vous voulez aller plus loin vous pouvez vous même personnaliser votre pwa. Rendez vous dans la doc de expo pour les configurations pwa.

Le code source est dispo sur GitHub.

Thanks Evan Bacon for this amazing work.

Merci d’avoir lu et n’oubliez pas de partager si vous trouvez cet article intéressant. 😀🚀