
Pour héberger son site internet static, il existe plusieurs solutions parmi lesquelles Amazon s3, Azure Static Web Apps, Netlify, and Vercel et Cloudflare pages qui nous interesse dans le cadre de cet article.

Pour mon site internet, je me suis servi de ce dernier pour heberger mon contenu web développé avec next.js. Je me sers de l'option SSG (static site generator) pour créer mes pages au format html au moment où je construis le site **(yarn export)**.

Ensuite pour héberger, je voulais me servir d'une autre solution et j'ai testé cloudflare pages. Quelques vidéos tutoriels (en anglais) qui pourrait vous aider à débuter:

- [Cloudflare Pages Tutorial - Deploy a Static Next.js Web Apps](https://www.youtube.com/watch?v=NGjBskaix2o&ab_channel=ColbyFayock)
- [Deploying a Next.js site on Cloudflare Pages with webhooks](https://www.sanity.io/blog/deploying-a-next-js-site-on-cloudflare-pages-with-webhooks)

Sa configuration n'est pas aisée et je me suis heurté à plusieurs problèmes que j'ai pus solutionner et que je souhaite partager avec vous.

## Erreur Yarn 2 ou 3

Cloudflare ne prend pas encore en compte yarn 2 ou yarn 3. Pour ceux qui l'utilise, il suffit d'enlever le fichier de configuration (.yarnrc.yml) au moment d'envoyer les fichiers dans github à l'aide de gitignore.

```git:.gitignore

#yarn files
.yarnrc.yml

```

## Type "{}" is not assignable to type "ReactNode"

L'erreur se présente comme suit:

```javascript
Type '{}' is not assignable to type 'ReactNode'
```

Elle apparaît parce que @types/react-dom possède ses propres dépendances et l'une d'elles est @types/react avec une version à '\*', la dernière version (18) qui n'est pas encore stable au moment ou j'écris l'article.

### FIX pour les utilisateurs yarn

Pour resoudre cette erreur, les utilisateurs de yarn peuvent:

```javascript
"resolutions": {
    "@types/react": "17.0.14",
    "@types/react-dom": "17.0.14"
},
```

### FIX pour les utilisateurs npm

comme yarn, changer la version des types de réact.

```javascript
"resolutions": {
    "@types/react": "17.0.14"
},
```

Et rajouter un script

```javascript
"preinstall": "npm install --package-lock-only --ignore-scripts && npx npm-force-resolutions",
```

## err_ssl_version_or_cipher_mismatch

Cette erreur apparaît souvent lorsqu'on souhaite accéder à la page de production du contenu html fournit par cloudflare pages. Dans mon cas, c'est après plusieurs erreur lors du déploiement de mon site internet que cette erreur est apparue. pour corriger cette erreur, rien de plus simple:

**Supprimer son projet et recréer un nouveau projet avec le code qui s'installe sans problème.**

## SyntaxError: Unexpected token "."

Sur cloudflare, il est possible de changer la version de nodejs. la version par défaut est la 12.18.0. Next.js est stable avec des version plus récente 12.22.0. De plus, react utilise des verions de nodejs encore plus récentes. c'est pourquoi cloudflare donne la possibilité de choisir la version de node js que l'on souhaite installer. il suffit de rajouter la version choisie.

```bash
NODE_VERSION=16.16.0
```

## Error: Image Optimization using Next.js

L'erreur complète est la suivante:

```bash
Error: Image Optimization using Next.js default loader is not compatible with "next export".
```

Pour solutionner cette erreur, j'ai modifié le fichier de configuration de Next.js pour lui attribuer une propriété expérimentale et l'empêcher d'utiliser un loader.

```javascript:next.config.js
module.exports = {
    experimental: {
        images: {
            unoptimized: true,
        },
    },
}
```

## Conclusion

EN utilisant, une nouvelle plateforme, il est possible de se heurter à plusieurs problème de configuration. Mon objectif en rédigeant cet article est de répertorier celle qui pourrait vous empêcher de reussir à utiliser cette plateforme.

En corrigeant toutes ses erreurs, j'ai pu déployer ma mini-application sur cloudflare. Je ne pense pas la liste soit exhaustive et s'il existe d'autres problèmes, n'hésitez pas à me laisser un commentaire, je me permettrai de mettre à jour l'article.



Dans cet article, nous verrons pas à pas comment nous servir de la suite GCP pour automatiser l’envoi des données vers un CRM.

Le scénario est le suivant : Nous avons une liste de personnes malades dans un fichier brut csv. Nous voulons sauvegarder ces informations dans notre base de données (BigQuery) et envoyer cette liste dans notre CRM (Hubspot) pour pouvoir les contacter ou leur envoyer un mail. Il faudrait que nous soyons capables à la fois de :

- Ajouter de nouveaux contacts
- Mettre à jour les contacts pour corriger les noms, prénoms etc…

Pour suivre ce tutoriel, vous aurez besoin de:

- [File.csv](https://github.com/yves0003/malade_covid/blob/main/file.csv): données des contacts à insérer,
- [Config.py](https://github.com/yves0003/malade_covid/blob/main/config.py): fichier de configuration pour GCP,
- [Main.py](https://github.com/yves0003/malade_covid/blob/main/main.py): programme python pour récupérer les données, les transformer etc..
- [Requete.sql](https://github.com/yves0003/malade_covid/blob/main/requete.sql)
- [Requirements.txt](https://github.com/yves0003/malade_covid/blob/main/requirements.txt)
- [Select.log](https://github.com/yves0003/malade_covid/blob/main/select_log.txt)

Les étapes pour réaliser ce projet seront les suivantes :

- Importer les données csv (File.csv) dans BigQuery
- Créer la requête SQL
- Créer un récepteur (Google Cloud Logging et Google Cloud Pub/sub)
- Créer une fonction (Google Cloud Function)
- Interagir avec Hubspot

## 1. Importer les données CSV

Se créer un projet dans son espace console google cloud.

!["00_select_project"](https://res.cloudinary.com/lokalistic/image/upload/v1659689986/yveszendja/articles/big_query_vers_crm/00_select_project_bkw0in.gif)

Nommer le projet : “exampleTrigger”, vous pouvez le nommer comme vous le souhaiter. N’oubliez pas de reprendre ce nom dans la requête SQL.

!["01_name_project"](https://res.cloudinary.com/lokalistic/image/upload/v1659690042/yveszendja/articles/big_query_vers_crm/01_name_project_xkbknr.gif)

Se diriger dans la page BigQuery : qui est la base de données que nous utiliserons pour réaliser ce projet.

!["02_goToBigQuery"](https://res.cloudinary.com/lokalistic/image/upload/v1659690112/yveszendja/articles/big_query_vers_crm/02_goToBigQuery_zuhiuj.gif)

Créer un dataset dans BigQuery : “exampleDataset” qui correspond à un répertoire dans lequel des bases de données peuvent être déposées. Ne pas oubliez de valider en bas de la page.

!["03_create_datasetBG"](https://res.cloudinary.com/lokalistic/image/upload/v1659690046/yveszendja/articles/big_query_vers_crm/03_create_datasetBG_s4psca.gif)

Créer la base de données : “exampleData” qui nous servira tout au long de ce tutoriel.

Pour se faire :

- Importer le fichier file.csv depuis sa page
- Laisser la détection automatique des schémas de données
- Ignorer la première ligne L’opération vous permettra d’obtenir une base de données dans le répertoire “exampleDataset”.

!["05_create_and_view_csv_tab"](https://res.cloudinary.com/lokalistic/image/upload/v1659690132/yveszendja/articles/big_query_vers_crm/05_create_and_view_csv_tab_vhlxpq.gif)

## 2. Créer la requête SQL

La requête SQL qui sera créer sera utilisée pour faire nos tests. L’objectif est de pouvoir mettre à jour la table des informations et de mettre à jour les informations dans le CRM (Hubspot) lorsque la requête est terminée.

Pour crée et sauvegarder une requête sous BigQuery, il faut (explication en image) :

- Aller dans éditeur de requête
- Rentrer la requête SQL
- Cliquer sur le bouton « enregistrer une requête »
- Donner un nom à la requête “test” Une fois l’enregistrement terminé, on peut exécuter la requête
- Se diriger vers le bouton “Exécuter” A la fin de l’exécution, un message s’affiche nous spécifiant que cette dernière a été correctement effectuée.

Pour voir la table mise à jour :

- Cliquer sur le bouton “Accéder à la table”
- Cliquer sur “Aperçu” et voilà

!["06_create_sql"](https://res.cloudinary.com/lokalistic/image/upload/v1659690080/yveszendja/articles/big_query_vers_crm/06_create_sql_svdyjb.gif)

Notre travail préparatoire est terminé. Nous pourrons tester que notre workflow fonctionne correctement en réalisant cette requête régulièrement.

## 3. Créer un récepteur

Le récepteur devra être capable d’écouter les actions effectuées sur la base de données (exampleData) et d’effectuée l’action voulue en réponse. Dans notre cas, l’action sera d’envoyer les mise à jour dans le CRM (Hubspot). Pour réaliser la dernière action, nous utiliserons google fonction (prochaine partie).

Pour créer un récepteur (explication en image):

- Se connecteur à Google cloud logging : il s’agit de l’espace dans lequel, toutes les tâches effectuées dans son espace GCP sont répertoriées.
- Se diriger vers le “Routeur de journaux” - menu à gauche de l’écran et qui nous permettra de créer notre récepteur
- Cliquer sur créer un routeur
- Dans détail du récepteur :
- nommer le récepteur “recepteur_update”
- Dans destination du récepteur :
- Dans sélectionner un service de récepteur, choississez Sujet Cloud pub/sub
- Dans choisissez un service pub/sub, créer un sujet pub/sub et nommer le comme vous le souhaitez “recepteur_pubsub”
- Dans Choisissez les journaux à inclure, rentrer les mots clés que vous souhaiter intercepter (code ci-dessous)

```bash
resource.type="bigquery_resource"
protoPayload.methodName = "jobservice.jobcompleted"
protoPayload.serviceData.jobCompletedEvent.job.jobName.projectId = "exampletrigger"
protoPayload.serviceData.jobCompletedEvent.job.jobConfiguration.query.statementType="UPDATE"
```

Créer votre récepteur:

!["07_create_recepteur"](https://res.cloudinary.com/lokalistic/image/upload/v1659690135/yveszendja/articles/big_query_vers_crm/07_create_recepteur_obxb3f.gif)

Une fois le récepteur crée, on peut s’occuper de la fonction qui permettra d’envoyer les données dans Hubspot.

## 4. Création de la fonction google

Pour créer la fonction google, se diriger vers sa plateforme google cloud fonction (lien). Ne pas oublier d’activer l’api cloud Build de google qui vous permettra d’effectuer des tests de votre fonction avant de la déployer. Pour créer votre fonction :

- Cliquer sur « créer une fonction »
- Donner lui un nom
- Dans le déclencheur :
- Définissez le type : Cloud Pub/Sub
- Choisissez le service : celui que vous aurez créé précédemment « recepteur_pubsub »
- Enregistrez
- Cliquez ensuite sur suivant pour accéder à l’éditeur

!["08_create_fonction"](https://res.cloudinary.com/lokalistic/image/upload/v1659690040/yveszendja/articles/big_query_vers_crm/08_create_fonction_sfsgzv.gif)

Dans l’éditeur (explication en image) :
Dans l’environnement d’exécution : choisir python 3.8 : vous avez la possibilité de choisir le langage qui vous correspond le mieux (node, python, etc…)
Point d’entrée : permet de spécifier le programme qui sera lancé. Dans mon cas, ce sera « get_data ». Vous pouvez le renommer comme vous le souhaitez à condition que la fonction existe dans votre fichier.
Dans le code source, créer le fichier main.py , écrire le programme (ci-dessous) et déployer la fonction

```python:main.py
import base64
import json
import config
from google.cloud import bigquery
import requests

def transform_data(ligne,data):
    contact = {
            "email": data.at[ligne,"email"],
            "name": data.at[ligne,"first_name"] + " " + data.at[ligne,"last_name"],
            "properties": [
                    {"property": "firstname", "value": data.at[ligne,"first_name"]},
                    {"property": "lastname", "value": data.at[ligne,"last_name"]},
                    {"property": "company", "value": ""},
                    {"property": "associatedcompanyid", "value": ""}
                    ]
            }
    return contact

def create_contacts_to_hs():
    #global blob
    global contacts

    sql = "SELECT * FROM exampleDataset.exampleData"
    bq_client = bigquery.Client(project=config.config_vars['project_id'])
    rows_df = bq_client.query(sql).to_dataframe()
    rows_df_length = len(rows_df.index)

    print('Create Contacts to HubSpot.')

    for x in range(rows_df_length):
        try:
            contact = transform_data(x, rows_df)
            email = contact['email']
            #get api key
            url = f"https://api.hubapi.com/contacts/v1/contact/createOrUpdate/email/{email}/?hapikey=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"

            r = requests.post(url, json= contact)

            name = contact["name"]
            status_code = r.status_code
            print(str(status_code) + ' - Contact: '+ name)

            if status_code != 200:
                logger.info(r.json())

            contact['vid'] = r.json().get('vid')

        except Exception as e:
            print(e.args)
            pass

def get_data(event, context):
    message = base64.b64decode(event['data']).decode('utf-8')
    pubsub_message = json.loads(message)
    if pubsub_message["protoPayload"]["serviceData"]["jobCompletedEvent"]["job"]["jobConfiguration"]["query"]["statementType"]=="UPDATE":
        print("Update")
        create_contacts_to_hs()
```

!["09_deploy_fonction"](https://res.cloudinary.com/lokalistic/image/upload/v1659690043/yveszendja/articles/big_query_vers_crm/09_deploy_fonction_yhmrmt.gif)

## 5. Interagir avec le CRM (Hubspot)

Pour interagir avec Hubspot, il vous faut un compte développeur. Ce compte vous permettra d’obtenir une clé avec laquelle vous pourrez interagir pour faire vos tests. Au début, vous n’aurez aucune information dans hubspot :

!["10_hubspot_vide"](https://res.cloudinary.com/lokalistic/image/upload/v1659690085/yveszendja/articles/big_query_vers_crm/10_hubspot_vide_ct8vtz.gif)

Ensuite, se diriger dans BigQuery et faire une mise à jour

!["11_update_tables"](https://res.cloudinary.com/lokalistic/image/upload/v1659690074/yveszendja/articles/big_query_vers_crm/11_update_tables_guyyzo.gif)

Enfin retourner dans son compte développeur pour voir le résultat.

!["12_data_in_hubspot"](https://res.cloudinary.com/lokalistic/image/upload/v1659690079/yveszendja/articles/big_query_vers_crm/12_data_in_hubspot_tfts0e.gif)



Mon site internet est pensé pour être mon aide mémoire, mon terrain d'expérimentation qui me permet d'apprendre de nouvelles technologies, de tester de nouveaux outils et de pousser mes limites dans la compréhension du fonctionnement du web et des outils digitaux. C'est aussi un espace pour échanger avec les personnes qui s'intéressent à mon travail. Ce site est le résultat de plusieurs itérations au fil des années et cette version est la troisième.

Je l'ai developpé comme une mini-saas application avec plusieurs composantes intéressantes dont la gestion des comptes, des emails, des commentaires, l'utilisation de l'intégration et déploiement en continue, la gestion des caches etc...

Pendant que c'est encore tout récent dans ma tête, je voulais documenter cette version de mon site pour présenter comment il fonctionne, quels outils, logiciels, et technologies il utilise.

## Objectifs

les versions précédentes de mon site internet étaient principalement des vitrines pour afficher mes compétences, un peu comme un CV. Pour cette nouvelle version, je voulais avoir la possibilité d'être plus présent et alimenter régulièrement mon blog. Pour y parvenir mon site devait respecter plusieurs critères:

### Réduction de la friction pour rédiger les articles

Je n'ai jamais actualisé les anciennes versions de mon site internet. L'une des raison principale était la difficulté de mettre à jour le site internet qui étaient hébergé sur un serveur. Rediger des articles, les mettre à jour ou les supprimer n'étaient pas assez fluide.

En construisant ce nouveau site, j'ai défini une architecture me permettant de faire de l'intégration et du déploiement continue à l'aide de [Github](/stack?stack=github) et d'utiliser des fichiers au format [Markdown](https://www.markdownguide.org/getting-started/) pour rédiger le contenu des articles. Aujourd'hui, rajouter un articles revient à créer un fichier MDx, remplir les informations nécessaires et faire un "pull & push request" et Voilà, le nouveau contenu est présent et publié sur internet.

Cette nouvelle approche me permet de me focaliser uniquement sur la création du contenu.

### Combinaison d'outils pratiques

il existe de nombreux outils que j'ai voulu tester comme twilio / nexmo, next js, AWS, cloudflare etc... En trouvant le moyen de combiner tous ces outils, j'ai pu me créer un système d'alerte de messagerie, un site internet accessible rapidement et une application avec plusieurs API pour rendre l'expérience utilisateur ludique.

### Rapidité

Je voulais un site rapide pour permettre à mes lecteurs de trouver facilement l'information dont ils ont besoin et reduire les frictions qu'ils peuvent rencontrer sur d'autres site internet et/ou blog. Un site internet qui n'est pas rapide, n'est pas agréable à visiter. Pour y arriver, j'ai géré la mise en cache des images et des requêtes.

### Interactif

Je veux que mes lecteurs puissent me donner leur avis sans que je n'ai besoin de passer par un service tiers et les obliger de fournir leur informations pour commenter mes articles. C'est la raison pour laquelle j'ai developpé un système de commentaires accessible uniquement pour les personnes qui sont connectés à mon site. Bien sure, les personnes ont la possibilité de supprimer leur compte à tout moment. En faisant celà, je m'assure que mes lecteurs n'aient pas leur adresse email diffusé et surtout je leur donne la possibilité de me dire ce qu'ils pensent directement, voire de m'aider à m'améliorer s'ils le veulent.

## Mon Stack

### Next.js

[Next.js](/stack?stack=nextjs) est mon framework front-end React de préference. J'apprécie particulièrement son utilisation à cause se son système de gestion des routes à l'aide de système d'organisation des fichiers. C'est un système très intuitif et facile à prendre en main qui permet de bien construire ses routes. Next.js possède également une grande communauté qui a permet de hisser la plateforme à son niveau actuel. Quand je suis bloqué je me réfère à [Next.js discussions](https://github.com/vercel/next.js/discussions) sur github. Presque tout le temps, il y'a déjà une personne qui a réussi à trouver le moyen de resoudre un problème complexe.

### Styled Component

[Styled component](/stack?stack=styled-components) est mon outil Css par défaut lorsque. Il me permet de créer des composants très modulables. Et parce que j'écris toutes mes styles, je peux ainsi maîtriser le le CSS que j'envoie. Il s'agit d'un framework CSS-in-JS qui utilise des templates litérals. Grâce à cet outil, je peux créer des composants react sans avoir besoin d'ouvrir mon fichier css. le style fait désormais parti du composant. De plus, il accepte des propriétés et un tas d'autres astuces qui lui donnent des super pouvoirs.

```tsx:test.tsx
import { FC, HTMLAttributes } from "react"
import styled from "styled-components"

const Div = styled.div`
  background: red;
`

const Test: FC<HTMLAttributes<HTMLDivElement>> = props => {
  return <Div {...props}>Div de couleur rouge</Div>
}

export default Test
```

### MDX

[MDX](https://mdxjs.com/) qui est une combinaison entre Markdown et React (Jsx). Ce format me permet d'incorporer du code react dans mon document sans friction. Il permet d'attribuer de super pouvoir à son document Markdown. Par exemple, il est possible de [rajouter un bloc de code avec un bouton permettant de copier le code](https://arajouter).

Ci-dessous à quoi ressemble un fichier md :

```markdown:test.md
Hello there! This is a paragraph.

This is another paragraph, with some **bold text**.

Here's an unordered list:

- Apple
- Banana
- Carrot

```

Quand il est combiner avec react, son format change et devient mdx. Il nous permet de rajouter des composantes réact:

```markdown:test.mdx
import DivColor from "../component/DivColor"

Ce fichier inclus des composants react

<DivColor color="Rouge"/>

```

### AWS et API

Tellement puissant cette [plateforme](/stack?stack=aws-services). Elle ne cesse de développer des outils et possède une bonne documentation qui est malheuresement en anglais pour la plupart. C'est l'espace de deploiement des api que j'utilise sur mon site.

le système de commentaires des articles par exemple est connecté à une [lambda fonction](/stack?stack=aws-lambda) qui permet d'écrire, de mettre à jour et supprimer les informations dans la base de données dans mes collections. Pour chaque commentaires, correspond un enregistrement au format suivant:

```json:comments.json

{
  //id unique du message
  "_id":"TTYSIbIVvdy105fdsd",
  // nom de l'application
  "appId":"nom_de_lapplication",
  //slug de l'article
  "articleId":"comment-jai-cree-mon-site-internet",
  //corps du message envoyé
  "body":"Super article",
  "linkImageUser":"https://link-vers-la-photo-du-user",
  //id du message parent s'il existe
  "parentId":null,
  //id de la personne qui envoie le message
  "userId":"ShNYf4sM1kCZgUMsNcav1",
  //Nom et prenom si disponible
  "userName":"John Doe",
  //date de création du message
  "createdAt":"2022-07-08",
  //date de la dernière modification
  "updatedAt":"2022-07-08"
}

```

### Mongo DB

J'utilise la base de données pour enregistrer les commentaires, les mentions j'aime pour chaque articles. Je préfère utiliser [mongoDB](/stack?stack=mongo-db) qui une base de données documentaires parce qu'il n'y a pas de relation complexe entre mes données et que leur schema peut très facilement varier en fonction de mes différentes besoins. De plus, il est facile à mettre en place et pour l'utilisation que j'en fait, je peux me servir de la solution cloud qu'il propose [mongodb atlas](https://www.mongodb.com/).

## Les petits plus

### les exemples de codes


Hello, je suis Yves.

Dernières publications

Correction des erreurs pour héberger des applications next.js sur cloudflare.

Cloud - 07 sept. 2022

Déclencher une fonction cloud pour envoyer les données BigQuery vers un CRM (Hubspot)

Crm - 05 janv. 2021

Comment j'ai crée mon site internet?

Aws - 23 juil. 2022

Les mots-clés

Rejoignez ma newsletter