Come creare un App con Gatsby Expo e React Native

Introduzione

In questo tutorial vediamo come configurare la tua App universale Expo e utilizzare Gatsby quando si sceglie come target il Web.

Gatsby è un framework per siti Web moderno e open source che integra le prestazioni in ogni sito sfruttando le più recenti tecnologie Web come React e GraphQL.

GraphQL è una tecnologia popolare e molto potente. Serve a gestire i dati in tutta l'applicazione e sebbene sia possibile utilizzare Gatsby senza GraphQL, rende davvero lo sviluppo di applicazioni più dichiarativo e intuitivo.

Con Gatsby inoltre puoi effettuare il pre-rendering della parte Web dell'app.

In questo tutorial vedremo:

Come creare un App universale per Web, Android e iOS.
Come creare una build per Android e iOS.
Come creare un progetto solo per il Web.

Come creare un App universale per Web Android e iOS

Vediamo come creare un App base con Gatsby, React ed Expo con pochi e semplici passaggi.

Installa o aggiorna l'interfaccia della riga di comando di Expo expo-cli:

npm i -g expo-cli

Crea un nuovo progetto Expo:

expo init

Installa il plug-in Gatsby con il comando yarn oppure con npm:

yarn add gatsby gatsby-plugin-react-native-web

npm install --save gatsby gatsby-plugin-react-native-web

Crea un file nominato gatsby-config.js all'interno del progetto appena creato:

   module.exports = {
     plugins: [
       `gatsby-plugin-react-native-web`,
       /* ... */
     ],
   }

Apri il file .gitignore all'interno del progetto e aggiungi le seguenti directory alla fine del file:

# Gatsby
/.cache
/public

Ora crea la seguente directory nel tuo progetto Gatsby con il comando mkdir:

mkdir -p src/pages

Crea la prima pagina del tuo progetto eseguendo questo comando:

cp App.js src/pages/index.js

Adesso puoi eseguire l'applicazione e testarla:

yarn gatsby develop

Apri il browser e collegati al tuo indirizzo IP: http://INDIRIZZO_IP:8000/ per vedere il tuo progetto.

Dovresti visualizzare una schermata come la seguente:

Per aprire l'interfaccia Web di Expo, digita il seguente comando:

expo start

Creare una build Android e iOS

Abbiamo visto come creare una semplice app universale di esempio. Vediamo adesso pochi semplici passaggi su come creare una build per Android e iOS con le impostazioni di default.

Accedere alla cartella del progetto appena creato e aprire il file app.json.

Aggiungi le seguenti righe di codice per Android e iOS:

...
    "ios": {
      "bundleIdentifier": "com.yourcompany.yourappname",
      "buildNumber": "1.0.0"
    },
    "android": {
      "package": "com.yourcompany.yourappname",
      "versionCode": 1
    }
...

Quindi il risultato finale del nostro file app.json sarà il seguente:

{
  "expo": {
    "name": "new-gatsby-app",
    "slug": "new-gatsby-app",
    "platforms": [
      "ios",
      "android",
      "web"
    ],
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
      "supportsTablet": true
    },
    "android": {
      "package": "com.yourcompany.yourappname",
      "versionCode": 1
    }
  }
}

Per creare una build per Android, da terminale digitare il seguente comando:

expo build:android

Per creare una build per iOS, da terminale digitare il seguente comando:

expo build:ios

Risoluzione dei problemi

Se hai avviato il tuo progetto senza l'interfaccia della riga di comando di Expo, potresti anche dover leggere questi passaggi:

Installa React Native per Web: yarn add react-native-web.
Installa il preset babel per React Native web con yarn oppure con npm:

yarn add --dev babel-preset-expo

npm install --save-dev babel-preset-expo

Crea un babel.config.js e usa il Babel present:

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
  };
};

Come creare un progetto solo per il Web

Vediamo come creare un progetto con Gatsby ed Expo solo per il web.

Assicurati di aver installato gatsby-cli:

npm install -g gatsby-cli

Crea un nuovo progetto Gatsby con il seguente comando:

gatsby new gatsby-site

Installa il plugin gatsby-plugin-react-native-web utilizzando yarn (consigliato) oppure npm:

yarn add react-native-web gatsby-plugin-react-native-web

npm install --save react-native-web gatsby-plugin-react-native-web

Apri il file gatsby-config.js e aggiungi la seguente riga gatsby-plugin-react.native-web in plugins:[..]:

module.exports = {
  plugins: [
    `gatsby-plugin-react-native-web`,
    /* ... */
  ],
};

Salva e chiudi il file.

Installa il preset babel utilizzando yarn (consigliato) oppure npm::

yarn add -D babel-preset-expo

npm install --save-dev babel-preset-expo

Crea il file babel.config.js e aggiungi le seguente righe di codice:

module.exports = {
  presets: ['babel-preset-expo'],
};

Salva e chiudi il file.

Apri il file .gitignore e aggiungi alla fine del file /.expo e /web-build in questo modo:

/.expo
/web-build

Adesso puoi avviare il progetto con il seguente comando:

yarn gatsby develop

(Opzionale) Puoi installare altri moduli Expo:

Pacchetti core: yarn add expo
Gesture: yarn add react-native-gesture-handler
Hooks: yarn add react-native-web-hooks

Struttura dei file

Ecco la struttura dei file consigliata per un progetto Expo con il supporto di Gatsby:

Expo Gatsby
├── src
│   └── pages -> Routes
│       └── index.tsx -> Entry Point for Gatsby
├── .cache -> Generated Gatsby files (should be ignored)
├── public -> Generated Gatsby files (should be ignored)
├── assets -> All static assets for your project
├── App.tsx -> Entry Point for Mobile apps
├── app.json -> Expo config file
├── gatsby-config.js -> Gatsby config file
└── babel.config.js -> Babel config (should be using `babel-preset-expo`)

Conclusione

Per la guida più aggiornata è necessario fare riferimento all'esempio sul repository Github di Expo: Gatsby.

Per altri tutorial riguardanti Expo, vedere la seguente sezione: