Dans cet article nous allons voir comment en pratique déployer rapidement une app React dans un environnement serverless Netlify "from-scratch"

Pour se familiariser avec le concept d'architecture "serverless", voici une vidéo d'introduction :

Parmi les différentes offres du marché, nous nous concentrons ici sur Netlify qui n'est pas le service le plus connu, mais qui présente l'intérêt d'être facile, simple et rapide comme premier contact.

Etape 1

Code source

Préparation du projet

Créons d'abord le projet avec l'aide des scripts React :

$ npx create-react-app demo-hello-words --use-npm
$ cd demo-hello-words

Pour interagir avec Netlify, nous avons besoin de la CLI :

$ npm i -D netlify-cli

Nous allons aussi avoir besoin des dépendances suivantes :

• axios : une librairie client HTTP
• random-words : un générateur de mots aléatoires

$ npm i axios random-words

Etape 2

Code source

Le back

Nous pouvons maintenant créer notre fonction serverless ./functions/hello.js :

const randomWords = require('random-words')

const handler = async (event, context) => {
    const { length } = event.queryStringParameters
    return {
        statusCode: 200,
        body: JSON.stringify({
            message: randomWords({ exactly: Number(length), join: ' ' }),
        }),
    }
}

module.exports = { handler }

On ajoute un script NPM dans package.json pour lancer le serveur de dev :

{
    …
    "scripts": {
        …
        "dev": "netlify dev"
    }
    …
}

Manifeste Netlify

Il faut aussi créer le manifeste Netlify netlify.toml :

[build]
command = 'npm run build'
functions = 'functions'
publish = 'build'

[dev]
autoLaunch = false

Premiers tests

A ce stade on peut commencer à tester notre serveur pour vérifier que tout est en place :

$ npm run dev

Vous devriez constater que le serveur écoute sur le port 8888 et que l'app React est opérationnelle :

Mais qu'en est-il de notre fonction serverless ?…

Pour vérifier interrogeons le web service :

$ http :8888/.netlify/functions/hello length==5
HTTP/1.1 200 OK
…

{"message":"characteristic accident ruler tool shadow"}

On obtient bien une réponse JSON avec un message contenant 5 mots 😄

Maintenant il serait intéressant de "connecter" la partie front et la partie back…

Etape 3

Code source

Le front

Modifions un peu notre app front src/App.js, en ajoutant :

…
import { useState } from 'react'
import axios from 'axios'
…
function App() {
  const [message, setMessage] = useState()
  const [input, setInput] = useState()

  const fetchData = async () => {
        const length = input ? Number(input) : 1
        const params = new URLSearchParams([['length', length]])
        const results = await axios.get('/.netlify/functions/hello', { params })
        setMessage(results.data.message)
  }

On utilise axios pour consommer la ressource serveur hello, et les states React pour le reste.

Il s'agit maintenant d'invoquer fetchData sur un clic de bouton :

…
function App() {
    …
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <h2>Word generator</h2>
        <p>
          <input value={input} onChange={(e) => setInput(e.target.value)} />
        </p>
        <p>
          <button onClick={fetchData}>Click to generate words</button>
        </p>
        <p>{message}</p>
      </header>
    </div>
  )
}

Le rechargement se faisant à chaud, il suffit juste de consulter la page avec un navigateur pour découvrir la nouvelle UI, saisir un nombre N et cliquer sur le bouton pour voir N mots aléatoires s'afficher.

Etape 4

Déploiement avec Netlify

Prérequis

Il faut être connecté à Netlify :

$ npx netlify login

Étapes pour déployer :

1. Créer un nouveau site

    $ npx netlify sites:create --name demo-hello-words
   

2. Lier le projet au site

    $ npx netlify link
   

3. Construire la web app

    $ npm run build
   

4. Déployer

    $ npx netlify deploy
   

5. Tester l'URL draft avec votre navigateur
6. Déployer sur l'URL principale

    $ npx netlify deploy --prod
   

7. Naviguer sur l'URL principale : demo-hello-words.netlify.app

Et voilà !

Retrouvez l'ensemble des sources sur github.com/NijiDigital