# Déployer une app React en mode serverless

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 :

%[https://youtu.be/zbH8DkD5YF4]

Parmi les différentes offres du marché, nous nous concentrons ici sur [Netlify](https://www.netlify.com/) 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](https://github.com/NijiDigital/serverless-hello-words/tree/step1)

## Préparation du projet

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

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

Pour interagir avec Netlify, nous avons besoin de la [CLI](https://fr.wikipedia.org/wiki/Interface_en_ligne_de_commande) :

```shell
$ 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

```shell
$ npm i axios random-words
```

# Etape 2

> [Code source](https://github.com/NijiDigital/serverless-hello-words/tree/step2)

## Le back

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

```javascript
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 :

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

## Manifeste Netlify

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

```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 :

```shell
$ npm run dev
```

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


![Capture d’écran de 2022-03-28 07-43-36.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1648446249643/GN2D-2MRa.png)

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

Pour vérifier interrogeons le web service :

```shell
$ 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](https://github.com/NijiDigital/serverless-hello-words/tree/step3)

## Le front

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

```javascript
…
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 :

```javascript
…
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](https://fr.wikipedia.org/wiki/Interface_utilisateur), saisir un nombre N et cliquer sur le bouton pour voir N mots aléatoires s'afficher.


![Capture d’écran de 2022-03-28 08-06-32.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1648447640267/WhgW6z_pP.png)

# Etape 4

## Déploiement avec Netlify

### Prérequis

Il faut être connecté à Netlify :

```shell
$ npx netlify login
```

Étapes pour déployer :

1. Créer un nouveau site
	```shell
	$ npx netlify sites:create --name demo-hello-words
	```
2. Lier le projet au site
	```shell
	$ npx netlify link
	```
3. Construire la web app
	```shell
	$ npm run build
	```
4. Déployer
	```shell
	$ npx netlify deploy
	```
5. Tester l'URL draft avec votre navigateur
6. Déployer sur l'URL principale
	```shell
	$ npx netlify deploy --prod
	```
7. Naviguer sur l'URL principale : https://demo-hello-words.netlify.app

Et voilà !

> Retrouvez l'ensemble des sources sur [github.com/NijiDigital](https://github.com/NijiDigital/serverless-hello-words)