DEV Community

Cover image for Who is the GOAT? ๐Ÿ”ฎ Vercel Edge Config stores my answer
Giorgio Boa for This is Learning

Posted on

Who is the GOAT? ๐Ÿ”ฎ Vercel Edge Config stores my answer

A few weeks ago Vercel released Edge Config, a new feature available to everyone so I tried it because I'm curious.


I developed an app with Qwik the new framework that has been catching my attention for months.

Getting started

To spin up a Qwik application you can use the Qwik CLI.
You can type npm create qwik@latest in your terminal and the CLI will guide you through an interactive menu to set the project name and select one of the starters.
Then, from the Qwik project folder, you can easily add a Vercel integration with this command: npm run qwik add

You can choose from many integrations, but for this article, we will use the Vercel one.

๐Ÿฆ‹  Add Integration 

? What integration would you like to add? โ€บ (use โ†“โ†‘ arrows, hit enter)
    Adaptor: Cloudflare Pages
    Adaptor: Netlify Edge
โฏ   Adaptor: Vercel Edge
    Adaptor: Nodejs Express Server
    Adaptor: Static site (.html files)
    Framework: React
    Integration: Playwright (E2E Test)
    Integration: Styled-Vanilla-Extract (styling)
    Integration: Tailwind (styling)
    Integration: Partytown (3rd-party scripts)
Enter fullscreen mode Exit fullscreen mode

The next step illustrates the integration:

๐Ÿ‘ป  Ready?  Add vercel-edge to your app?

๐Ÿฌ Modify
   - package.json

๐Ÿ‘ป  Ready?  Add vercel-edge to your app?

๐Ÿฌ Modify
   - README.md
   - .gitignore
   - package.json

๐ŸŒŸ Create
   - vercel.json
   - src/entry.vercel-edge.tsx
   - adaptors/vercel-edge/vite.config.ts

๐Ÿ’พ Install npm dependency:
   - vercel ^28.4.17

โœ” Ready to apply the vercel-edge updates to your app? โ€บ Yes looks good, finish update!

โœ” Updating app and installing dependencies...
๐Ÿฆ„  Success!  Added vercel-edge to your app

๐Ÿ“š Relevant docs:
   https://qwik.builder.io/qwikcity/adaptors/vercel-edge/
   https://vercel.com/docs/concepts/functions/edge-functions
   https://vercel.com/docs

๐Ÿ’ฌ Questions? Start the conversation at:
   https://qwik.builder.io/chat
   https://twitter.com/QwikDev
Enter fullscreen mode Exit fullscreen mode

Qwik code

Server-side code

I exposed a GET endpoint /api/give-me-the-goat to create a communication server to server. I installed the npm library @vercel/edge-config then I created the Edge Config client with the VITE_EDGE_CONFIG env variable as a param and finally I retrieved the value for the key GOAT.

api

import type { RequestHandler } from '@builder.io/qwik-city';
import { createClient } from '@vercel/edge-config';

export const edgeConfigClient = createClient(import.meta.env.VITE_EDGE_CONFIG);

export const onGet: RequestHandler<{ name: string }> = async () => {
  const name = await edgeConfigClient.get('GOAT');
  return { name };
};
Enter fullscreen mode Exit fullscreen mode

Client-side code

UI

import { $, component$, useSignal } from '@builder.io/qwik';

export default component$(() => {
  const state = useSignal('');
  const onClick = $(async () => {
    const name = await fetch('/api/give-me-the-goat');
    state.value = (await name.json()).name;
  });

  return (
    <div class='...'>
      [...]
      {state.value} <- Messi or Ronaldo ๐Ÿ˜†
      [...]
      <div class='...'>
        <button onClick$={onClick} class='...0'>
          Who is the GOAT?
    </button>
      </div>
    </div>
  );
});
Enter fullscreen mode Exit fullscreen mode

Every time we press the button our API will be invoked. It will read data from Vercel and our UI will change.

We can modify the configuration in the Vercel dashboard or we can invoke a PATCH to a special URL (you can find an example here) to change the key value configuration programmatically.

GitHub

I host my project on GitHub but you can use also other git providers

project

You can configure the project

Configure

and then you are ready to rock! ๐ŸŽธ

Deploy

Vercel Edge Config

In the Vercel dashboard you can create an Edge Config

EdgeConfig

EdgeCreated

Then you can define the key/value configs

KeyValue

Inside the token section, you can copy the connection string needed to communicate with the service Edge Config

Vercel env variables

You need to define VITE_EDGE_CONFIG env variable to allow communication with Vercel Services

envvar

And that's all! Now we are ready to see who is the GOAT!

App in action

As mentioned before, every time I click on the button, the application is reading the configuration from Vercel and as you can see I can change my frontend application at runtime.

Messi

messi_final

Ronaldo

ronaldo_final


๐ŸŽ‰ This is a trivial use case but I think is a good example to show how our frontend application can change with an external configuration.
For example, let's think we want to show a certain section of our application (e.g. Order History), through this approach we can show/hide it easily. ๐Ÿ˜„

You canย follow me on Twitter, where I'm posting or retweeting interesting articles.

I hope you enjoyed this article, don't forget to give โค๏ธ.
Bye ๐Ÿ‘‹

Top comments (1)

Collapse
 
catalystbyzoho profile image
Catalyst • Edited

Hey, @gioboa.
Catalyst by Zoho is an application development platform that can be used to build, test, host, deploy, and monitor applications. Using Catalyst, you can build web apps, mobile apps, and microservices. Check out Catalyst and feel free to share your reviews!