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)
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
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.
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 };
};
Client-side code
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>
);
});
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
You can configure the project
and then you are ready to rock! ๐ธ
Vercel Edge Config
In the Vercel dashboard you can create an Edge Config
Then you can define the key/value configs
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
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.
๐ 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)
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!