[TUTO] Générateur de Landing Pages depuis spreadsheet

Tuto
1

Salut l’équipe !

J’espère que vous allez bien.

Je vous propose un tuto pour générer des landing pages grâce à Nuxt et Sheety.
Ces pages vont par la suite être hébergées gratuitement sur Netlify.

Vous trouverez mon code sur ce repo.
Merci d’utiliser les issues de Github pour toutes vos questions techniques.

Liens :

Pour aller plus loin :

17 « J'aime »
2

Canon Vivian !

Ca ouvre plein de possibilités en growth, en générant/updatant des landing pages avec du contenu poussé dans spreadsheet depuis des sources diverses. Avec importfromweb/json de @Mapi ça ferait un bon combo.

3 « J'aime »
3

Ca change des tutos sur Jarvee :joy: Merci @VivianSolide !

J’ai jamais essayé nuxt ou netlify, mais ca donne un bon use case :+1:

1 « J'aime »
4

Ca tue bravo :balloon: !

1 « J'aime »
5

Ca tue c’est clair ! ca laisse l’opportunité de faire de belles choses. Merci pour ce tuto

6

Bonjour et bravo pour ce générateur ! Et le choix de nuxt.js :slight_smile:
Ça doit être mon 1er message sur le forum (que je suis de loin).
Je fais du nuxtjs depuis presque 2 ans.
Le code n’est pas très optimisé pour limiter le nombre de requêtes.
Il vaudrait mieux charger sheety dans le store Vuex, puis générer les pages avec…
Je viens de mettre une issue sur de dépôt.

Une idée au passage, en chargeant sheety avec nuxt/content, il serait possible d’intégrer des composants nuxt directement dans le texte.

1 « J'aime »
7

Merci pour ton retour.
En effet, le code n’est pas parfaitement optimisé pour économiser des requêtes.

Je suis d’accord avec toi pour l’utilisation du store pour remédier à cela.
Toutefois j’ai essayé de faire un tuto plutôt simple à suivre mais surtout à reproduire.

Je pensais faire une branche distincte qui reprendrait ce type d’optimisations.
Branche qui pourrait reprendre notamment la récente fonctionnalité content

Qu’en penses-tu ?

8

Top ! Merci pour ce tuto très bien expliqué :).

9

Oui, dans tous les cas c’est mieux de travailler sur des branches git.

J’avais même pas regarder ton tuto en fait. Juste le code.
En fait tu génères un site statique. Mais avec nuxt tu peux faire du SSR, et donc ajouter une ligne dans ton spreadsheet pour créer une nouvelle page sans même re-déployer le site (mais pas avec netlify, plutôt vercel (anciennement now.sh) par ex).
Ou alors tu restes en statique, et tu créés un webhook vers netlify pour déployer quand une nouvelle ligne est ajoutée, avec zappier par ex : Connect Google Sheets to Netlify (easy integration) | Zapier

1 « J'aime »
10

C’est pour ça que j’avais partagé le tuto de @cebri sur Google Spreadsheet.
Tu peux effectivement faire un bouton « Deploy to Netlify » très rapidement depuis ta Spreadsheet ! :wink:

Mais Zapier c’est très bien aussi !
Surtout si tu as un workflow qui va générer des pages supplémentaires.

11

Salut à tous,

Très bon tuto, après quelques modifications, j’arrive presque à le faire fonctionner.

Je pense que la fiche générée par Sheety depuis le document Google Sheet fait qu’il faille faire deux adaptations minimum sur le fonctionnement javascript afin de pouvoir générer le site web sans erreur. Je présume qu’entre l’élaboration du tuto et aujourd’hui, il y a eu des mises à jours changeant le fonctionnement de l’API.

Les fichiers nuxt config et idvue sont dès lors inutilisable en état (en changeant bien entendu le lien sheety du google document).

Aussi, il est également nécessaire de remplacer toutes les mentions « feuilles1 » par « sheet1 » si vous avez la version anglaise de google document, sans quoi le site ne se génère pas (fatal error).

Malgré cela, il reste une erreur qui s’affiche constamment:

Citation
10:43:45 PM: $ npm run generate
10:43:45 PM: > [email protected] generate /opt/build/repo
10:43:45 PM: > nuxt generate
10:44:05 PM: [error] /bonjour
10:44:05 PM:
10:44:05 PM: TypeError: Cannot read property ‹ ide › of undefined
10:44:05 PM: at a. (3fb3273f8f69c71f6abd.js:1:1424)
10:44:05 PM: at a.t._render (/opt/build/repo/node_modules/vue/dist/vue.runtime.common.prod.js:6:35273)
10:44:05 PM: at /opt/build/repo/node_modules/vue-server-renderer/build.prod.js:1:70665
10:44:05 PM: at Yi (/opt/build/repo/node_modules/vue-server-renderer/build.prod.js:1:67229)
10:44:05 PM: at io (/opt/build/repo/node_modules/vue-server-renderer/build.prod.js:1:70641)
10:44:05 PM: at ro (/opt/build/repo/node_modules/vue-server-renderer/build.prod.js:1:70272)
10:44:05 PM: at eo (/opt/build/repo/node_modules/vue-server-renderer/build.prod.js:1:67519)
10:44:05 PM: at /opt/build/repo/node_modules/vue-server-renderer/build.prod.js:1:70739
10:44:05 PM: at Yi (/opt/build/repo/node_modules/vue-server-renderer/build.prod.js:1:67229)
10:44:05 PM: at io (/opt/build/repo/node_modules/vue-server-renderer/build.prod.js:1:70641)
10:44:05 PM: at ro (/opt/build/repo/node_modules/vue-server-renderer/build.prod.js:1:70272)
10:44:05 PM: at eo (/opt/build/repo/node_modules/vue-server-renderer/build.prod.js:1:67519)
10:44:05 PM: at /opt/build/repo/node_modules/vue-server-renderer/build.prod.js:1:70739
10:44:05 PM: at Yi (/opt/build/repo/node_modules/vue-server-renderer/build.prod.js:1:67229)
10:44:05 PM: at io (/opt/build/repo/node_modules/vue-server-renderer/build.prod.js:1:70641)
10:44:05 PM: at ro (/opt/build/repo/node_modules/vue-server-renderer/build.prod.js:1:70272)

Je pense que l’erreur vient du Script dans _idvue ici mais je n’arrive pas à savoir où et quoi changer exactement (peut être « data.filter(el => el.id === id) »?):

Citation
export default {
async asyncData ({ $axios, route }) {
const id = route.params.id
const data = await $axios
.$get(
‹ https://api.sheety.co/612035a23ef10236acde20367e8a78e8/ghfr/feuille1 ›
)
.then(data => data.feuille1)
.catch(err => err)
const content = data.filter(el => el.id === id)[0]
return { content }
},
head () {
return {
htmlAttrs: {
lang: this.content.lang
}
}
}
}

Je poste ici car je pense que cela aura beaucoup plus de visibilité pour les usagers du forum.

Amicalement,

Ddz

12

Les considérations techniques se déroulent uniquement sur le repo GitHub :slight_smile: