External‐Providers ‐ Setup‐Vercel

On this page, we will learn what an external Vercel account is used for, how to set it up, and configure it.

Purpose

Vercel is a cloud platform that allows developers to deploy and host their applications. You can link your GitHub repositories, trigger automatic deploys and configure custom URLs.

You'll need Vercel to deploy these two repositories:

• Frontend
• Backend API

Set up

1. Go to vercel.com and create an account. This can either be done by using your GitHub account or by e-mail sign-up. In Overview click on Add New Project
2. Import the project from an the existing GitHub repository. In order to connect the GitHub repository, you have to install the Vercel App within the repository.
3. Choose the right framework preset. For the fronted choose NextJS, for the backend choose Other.
4. Set the environment variables.

For the backend you'll need to set:

• SUPABASE_URL - e.g. https://123abc.supabase.co
• SUPABASE_ANON_KEY – e.g. eyJhbG...
• SUPABASE_SERVICE_ROLE_KEY – e.g. eyKlBg...
• SUPABASE_MAX_ROWS – e.g. 10000

💡 You get these environment variables for the backend once you have setup you Supabase instance.

For the Frontend you'll need to set:

• NEXT_PUBLIC_MAPBOX_API_KEY – e.g pk.eyAF......
• NEXT_PUBLIC_MAPBOX_TREES_TILESET_URL – e.g. mapbox://youraccount.123abc
• NEXT_PUBLIC_MAPBOX_TREES_TILESET_LAYER – e.g. original
• NEXT_PUBLIC_SUPABASE_ANON_KEY – e.g. eyJhbG...
• NEXT_PUBLIC_SUPABASE_URL– e.g. https://123abc.supabase.co
• NEXT_PUBLIC_FROM_EMAIL– e.g. [email protected]
• NEXT_PUBLIC_PUMPS_DATA_URL– e.g. https://123abc.supabase.co/storage/v1/object/public/data_assets/pumps.geojson
• NEXT_PUBLIC_RAIN_DATA_URL– e.g. https://123abc.supabase.co/storage/v1/object/public/data_assets/weather_light.geojson
• NEXT_PUBLIC_MAP_INITIAL_ZOOM_MOBILE– e.g. 12
• NEXT_PUBLIC_MAP_INITIAL_ZOOM – e.g. 11
• NEXT_PUBLIC_API_ENDPOINT – e.g. https://your-api.water-your-city.org
• NEXT_PUBLIC_MAP_BOUNDING_BOX – e.g. 13.6,52.979435,13.458,52.165
• NEXT_PUBLIC_MAP_INITIAL_LONGITUDE – e.g. 13.5
• NEXT_PUBLIC_MAP_INITIAL_LATITUDE – e.g. 52.5

1. Click on Deploy.

You've deployed your project on Vercel! You can now use the Vercel URLs o to link them to your personal dns records.