Chez certains des développeurs (dont j'en fais parti), dès lors que je rencontre un pattern qui se répète, j'ai une irrésistible envie de l'automatiser.
Dernièrement, je me suis rendu compte qu'il n'existait pas de template expo à jour avec ReScript me permettant de rapidement démarrer un sideproject ou un POC. C'est pour cela que je me suis intéressé à la création d'un template expo.
Voyons ensemble les étapes à suivre afin de réaliser le même template que celui que j'ai crée !
Comment ça fonctionne
Un template Expo n'est rien d'autre qu'une application expo hébergée sur npm ! Il nous suffit donc de créer une nouvelle application expo avec nos critères et publier notre package.
Création de notre application de base
Si ce n'est pas déjà le cas, installer expo-cli :
yarn global add expo-cli
# or
npm i -g expo-cli
Nous pouvons alors créer notre application :
expo init TemplateApp
Nous choisirons le template blank
pour une configuration minimale.
Configuration du projet
Il est important de bien configurer notre package.json
afin de pouvoir publier notre template sur npm.
Il faut s'assurer de plusieurs choses :
- Supprimer le champ
private: true
- Mettre un nom de package disponible
- Ajouter une licence
- Remplir les informations tel que l'auteur, la description et quelques keywords
Configurons dès à présent ReScript.
Configuration de ReScript
Installons les packages essentiels à une application ReScript. Nous avons besoin des bindings React Native et React
yarn add rescript @rescript/react rescript-react-native
# or
npm i -S rescript @rescript/react rescript-react-native
Ajoutons à notre package.json
, quelques commandes bien pratiques :
{
"scripts": {
"start": "expo start",
"rescript:watch": "rescript build -with-deps -w",
"rescript:build": "rescript build -with-deps",
"rescript:clean": "rescript clean",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
}
}
Les commandes ReScript devront être exécutées dans un autre terminal (en complément du serveur expo).
Enchainons ensuite sur le fichier de configuration bsconfig.json
que chaque projet ReScript possède :
{
"name": "expo-rescript-template",
"reason": {
"react-jsx": 3
},
"bs-dependencies": ["@rescript/react", "rescript-react-native"],
"bs-dev-dependencies": [],
"package-specs": [
{
"module": "es6-global",
"in-source": true
}
],
"sources": [
{
"dir": "src",
"subdirs": true
}
],
"suffix": ".bs.js",
"namespace": true,
"bsc-flags": ["-bs-super-errors", "-bs-no-version-header", "-open Belt"],
"ppx-flags": [],
"warnings": {
"number": "-44-30",
"error": "+5"
}
}
Comme je l'ai précisé dans le fichier bsconfig.json
, la source principale sera le dossier src
que nous devons créer. À cela nous pouvons y ajouter notre point d'entrée, le fichier App.res
:
open ReactNative
module StatusBar = {
@module("expo-status-bar") @react.component
external make: (~style: string) => React.element = "StatusBar"
}
let styles = {
open Style
StyleSheet.create({
"container": viewStyle(
~flex=1.,
~backgroundColor="#fff",
~alignItems=#center,
~justifyContent=#center,
(),
),
})
}
@react.component
let make = () => {
<View style={styles["container"]}>
<Text> {"Open up App.res to start working on your app!"->React.string} </Text>
<StatusBar style="auto" />
</View>
}
let default = make
Il ne reste plus qu'à modifier le fichier App.js
pour le faire exposer notre code ReScript compilé :
export { default } from "./src/App.bs.js";
Nettoyage et publication
Notre template est prêt ! Mais avant de le publier, nous allons créer un fichier .npmignore
afin de ne pas publier d'éléments inutiles dans notre template :
.merlin
lib/
.expo/
.expo-shared/
Passons enfin à la publication ! Si c'est la 1ère fois que vous publiez un module, il vous faudra d'abord se connecter :
npm login
Et ensuite vous pourrez publier votre projet
npm publish
Et voilà le travail ! Vous pouvez dès maintenant utiliser ce template lors de la création d'une app expo :
expo init MyApp --template expo-rescript-template