Hacke den „Deploy to Netlify“-Button mit Umgebungsvariablen, um einen anpassbaren Seitengenerator zu erstellen.

Wenn Sie wie ich sind, mögen Sie faul sein Abkürzungen. Der "Deploy to Netlify"-Button ermöglicht es mir, diese schöne Eigenschaft meiner Persönlichkeit zu nutzen und produktiv zu sein.

Das Klicken auf den obigen Button ermöglicht es mir (oder dir!), mein Next.js Starter-Projekt sofort zu klonen und es automatisch auf Netlify bereitzustellen. Wow! So einfach! Ich bin so glücklich!

Als ich neulich die Dokumentation für den Button durchblätterte, wie man das eben so tut, bemerkte ich, dass man Umgebungsvariablen vorab einfüllen kann für die Seiten, die man mit dem Button bereitstellt. Das brachte mich zum Nachdenken… welche Art von Seiten könnte ich damit anpassen?

Idee: „Link in Bio“-Website

Ah, der berühmte „Link in Bio“, den man überall in den sozialen Medien sieht, wenn Leute möchten, dass man all ihre relevanten Links im Leben sieht. Man kann sich für die verschiedenen Dienste anmelden, die einem eine solche Website erstellen, aber was wäre, wenn man eine selbst erstellen könnte, ohne sich bei einem weiteren Dienst anmelden zu müssen?

Aber wir sind auch faul und mögen Abkürzungen. Es klingt, als könnten wir all diese Probleme mit dem „Deploy to Netlify“ (DTN)-Button und Umgebungsvariablen lösen.

Wie würden wir so etwas bauen?

Damit unser DTN-Button funktioniert, müssen wir zwei Projekte erstellen, die zusammenarbeiten

• Ein Vorlagenprojekt (Dies ist das Repository, das geklont und basierend auf den übergebenen Umgebungsvariablen angepasst wird.)
• Ein Generatorprojekt (Dies ist das Projekt, das die Umgebungsvariablen erstellt, die an den Button übergeben werden sollen.)

Ich habe mich entschieden, bei meinen Beispielen etwas „würzig“ zu sein, und habe daher beide Projekte mit Vite erstellt, aber das Vorlagenprojekt verwendet React und das Generatorprojekt verwendet Vue.

Ich werde einen groben Überblick geben, wie ich diese beiden Projekte erstellt habe, und wenn du einfach den gesamten Code sehen möchtest, kannst du zum Ende dieses Beitrags springen, um die endgültigen Repositories zu sehen!

Das Vorlagenprojekt

Um mein Vorlagenprojekt zu starten, werde ich Vite und React einbinden.

npm init @vitejs/app

Nachdem du diesen Befehl ausgeführt hast, kannst du den Eingabeaufforderungen mit beliebigen Frameworks folgen, die du möchtest!

Nachdem du die ganze npm install Sache erledigt hast, möchtest du eine .local.env Datei hinzufügen und die Umgebungsvariablen einfügen, die du aufnehmen möchtest. Ich möchte einen Namen für die Person haben, der die Seite gehört, ihr Profilbild und dann all ihre relevanten Links.

VITE_NAME=Cassidy Williams
VITE_PROFILE_PIC=https://github.com/cassidoo.png
VITE_GITHUB_LINK=https://github.com/cassidoo
VITE_TWITTER_LINK=https://twitter.com/cassidoo

Du kannst dies einrichten, wie du möchtest, da dies nur Testdaten sind, auf denen wir aufbauen werden! Während du deine eigene Anwendung entwickelst, kannst du deine Umgebungsvariablen jederzeit zum Parsen mit import.meta.env einlesen. Vite lässt dich diese Variablen mit VITE_ vom Client-Code aus zugänglich machen. Achte also darauf, wenn du mit Variablen experimentierst, dass du sie mit diesem Präfix versiehst.

Letztendlich habe ich eine ziemlich große Parsing-Funktion erstellt, die ich meinen Komponenten übergeben habe, um sie in die Vorlage zu rendern.

function getPageContent() {
  // Pull in all variables that start with VITE_ and turn it into an array
  let envVars = Object.entries(import.meta.env).filter((key) => key[0].startsWith('VITE_'))

  // Get the name and profile picture, since those are structured differently from the links
  const name = envVars.find((val) => val[0] === 'VITE_NAME')[1].replace(/_/g, ' ')
  const profilePic = envVars.find((val) => val[0] === 'VITE_PROFILE_PIC')[1]
  
  // ...
  
  // Pull all of the links, and properly format the names to be all lowercase and normalized
  let links = envVars.map((k) => {
    return [deEnvify(k[0]), k[1]]
  })

  // This object is what is ultimately sent to React to be rendered
  return { name, profilePic, links }
}

function deEnvify(str) {
  return str.replace('VITE_', '').replace('_LINK', '').toLowerCase().split('_').join(' ')
}

Ich kann diese Variablen jetzt in eine React-Funktion einlesen, die die benötigten Komponenten rendert.

// ...
  return (
    <div>
      <img alt={vars.name} src={vars.profilePic} />
      <p>{vars.name}</p>
      {vars.links.map((l, index) => {
        return <Link key={`link${index}`} name={l[0]} href={l[1]} />
      })}
    </div>
  )

// ...

Und voilà! Mit ein bisschen CSS haben wir eine „Link in Bio“-Seite!

Jetzt wollen wir das in etwas verwandeln, das nicht auf hartcodierten Variablen basiert. Generator-Zeit!

Das Generatorprojekt

Ich beginne eine neue Vite-Website, genau wie zuvor, aber diesmal verwende ich Vue, nur zum Spaß.

In diesem Projekt muss ich nun die oben genannten Umgebungsvariablen generieren. Wir benötigen also ein Eingabefeld für den Namen, ein Eingabefeld für das Profilbild und dann eine Reihe von Eingabefeldern für jeden Link, den eine Person hinzufügen möchte.

In meiner App.vue Vorlage werde ich diese wie folgt getrennt halten:

<template>
  <div>
    <p>
      <span>Your name:</span>
      <input type="text" v-model="name" />
	</p>
    <p>
      <span>Your profile picture:</span>	
      <input type="text" v-model="propic" />
    </p>
  </div>

  <List v-model:list="list" />

  <GenerateButton :name="name" :propic="propic" :list="list" />
</template>

In der List Komponente haben wir doppelte Eingabefelder, die alle Links sammeln, die unsere Benutzer hinzufügen möchten.

<template>
  <div class="list">
    Add a link: <br />
    <input type="text" v-model="newItem.name" />
    <input type="text" v-model="newItem.url" @keyup.enter="addItem" />
    <button @click="addItem">+</button>

    <ListItem
      v-for="(item, index) in list"
      :key="index"
      :item="item"
      @delete="removeItem(index)"
    />
  </div>
</template>

In dieser Komponente gibt es also die beiden Eingabefelder, die zu einem Objekt namens newItem hinzufügen, und dann listet die ListItem Komponente alle bereits erstellten Links auf, und jeder kann sich selbst löschen.

Nun können wir all diese Werte, die wir von unseren Benutzern erhalten haben, nehmen und die GenerateButton Komponente damit bestücken, um unseren DTN-Button zum Laufen zu bringen!

Die Vorlage in GenerateButton ist nur ein <a> Tag mit dem Link. Die Stärke liegt hier in den methods im <script>.

// ...
methods: {
  convertLink(str) {
    // Convert each string passed in to use the VITE_WHATEVER_LINK syntax that our template expects
    return `VITE_${str.replace(/ /g, '_').toUpperCase()}_LINK`
  },
  convertListOfLinks() {
    let linkString = ''
    
    // Pass each link given by the user to our helper function
    this.list.forEach((l) => {
      linkString += `${this.convertLink(l.name)}=${l.url}&`
    })

    return linkString
  },
  // This function pushes all of our strings together into one giant link that will be put into our button that will deploy everything!
  siteLink() {
    return (
      // This is the base URL we need of our template repo, and the Netlify deploy trigger
      'https://app.netlify.com/start/deploy?repository=https://github.com/cassidoo/link-in-bio-template#' +
      'VITE_NAME=' +
      // Replacing spaces with underscores in the name so that the URL doesn't turn that into %20
      this.name.replace(/ /g, '_') +
      '&' +
      'VITE_PROFILE_PIC=' +
      this.propic +
      '&' +
      // Pulls all the links from our helper function above
      this.convertListOfLinks()
    )
  },
}, 

Glauben Sie es oder nicht, das ist alles. Sie können beliebige Stile hinzufügen oder ändern, welche Variablen übergeben werden (z. B. Themen, Schalter usw.), um dies wirklich anpassbar zu machen!

Alles zusammenfügen

Sobald diese Projekte bereitgestellt sind, können sie in schöner Harmonie zusammenarbeiten!

• Hier ist mein Vorlagen-Repository, das mit den Umgebungsvariablen gefüllt wird, und eine Beispielseite, die damit erstellt wurde!
• Hier ist mein Generator-Repository, das die Umgebungsvariablen generiert, und die damit erstellte Seite!

Dies ist die Art von Projekt, die die Macht der Anpassung wirklich veranschaulichen kann, wenn man Zugriff auf benutzergenerierte Umgebungsvariablen hat. Es mag ein kleines Projekt sein, aber wenn man an die Generierung von z. B. Lebenslauf-Websites, E-Commerce-Themes, „/uses“-Websites, Marketing-Websites denkt… sind die Möglichkeiten endlos, dies in eine wirklich coole Boilerplate-Methode zu verwandeln.