If you’re anything like me, you like being lazy shortcuts. The“Deploy to Netlify” buttonallows me to take this lovely feature of my personality and be productive with it.
Clicking the button above lets me (or you!) instantly clone myNext.js starter projectand automatically deploy it to Netlify. Wow! So easy! I’m so happy!
Now, as I was perusing the docs for the button the other night, as one does, I noticed that you canpre-fill environment variablesto the sites you deploy with the button. Which got me thinking… what kind of sites could I customize with that?
Ah, the famed “link in bio” you see all over social media when folks want you to see all of their relevant links in life. You can sign up for the various services that’ll make one of these sites for you, but what if you could make oneyourselfwithout having to sign up for yet another service?
But, we also are lazy and like shortcuts. Sounds like we can solve all of these problems with the “Deploy to Netlify” (DTN) button, and environment variables.
In order to make our DTN button work, we need to make two projects that work together:
I decided to be a little spicy with my examples, and so I made both projects with Vite, but the template project uses React and the generator project uses Vue.
I’ll do a high-level overview of how I built these two projects, and if you’d like to just see all the code, you can skip to the end of this post to see the final repositories!
To start my template project, I’ll pull in Vite and React.
npm init @vitejs/app
After running this command, you can follow the prompts with whatever frameworks you’d like!
Now after doing the wholenpm installthing, you’ll want to add a.local.envfile and add in the environment variables you want to include. I want to have a name for the person who owns the site, their profile picture, and then all of their relevant 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
You can set this up however you’d like, because this is just test data we’ll build off of! As you build out your own application, you can pull in your environment variables at any time for parsing withimport.meta.env. Vite lets you access those variables from the client code withVITE_, so as you play around with variables, make sure you prepend that to your variables.
Ultimately, I made a rather large parsing function that I passed to my components to render into the template:
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(' ')
}I can now pull in these variables into a React function that renders the components I need:
// ...
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>
)
// ...And voilà! With a little CSS, we have a “link in bio” site!
Now let’s turn this into something that doesn’t rely on hard-coded variables. Generator time!
I’m going to start a new Vite site, just like I did before, but I’ll be using Vue for this one, for funzies.
Now in this project, I need to generate the environment variables we talked about above. So we’ll need an input for the name, an input for the profile picture, and then a set of inputs for each link that a person might want to make.
In myApp.vuetemplate, I’ll have these separated out like so:
<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 thatListcomponent, we’ll have dual inputs that gather all of the links our users might want to add:
<template>
<div >
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>So in this component, there’s the two inputs that are adding to an object callednewItem, and then theListItemcomponent lists out all of the links that have been created already, and each one can delete itself.
Now, we can take all of these values we’ve gotten from our users, and populate theGenerateButtoncomponent with them to make our DTN button work!
The template inGenerateButtonis just antag with the link. The power in this one comes from themethodsin the
