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