Frontend — Deploying with Vercel

On this page, we are looking at how to deploy Gieß den Kiez on Netlify. For this, you will need a GitHub account and a Netlify account.

1. Log into GitHub and fork the Gieß den Kiez repo.
2. Log into Netlify and click on "New site from git"
3. Click on GitHub and select your Gieß den Kiez fork. The netlify.toml should prefill the build command field for you.
4. Click on advanced and on new variable
5. Add the environment variables required to run Gieß den Kiez (see the .env.example for details)
6. Click on Deploy site

You successfully deployed your own Gieß den Kiez! Now, we will link the deployment to a better netlify domain name.

1. Go to your Netlify Team overview, and click on Sites.
2. Select your Gieß den Kiez site and click on Domain settings
3. In the Custom domains area, next to the site's url, click on Options and then Edit site name
4. In the name modal, choose a new name. This will appear as https://<MY_NEW_NAME>.netlify.com
5. Save. You can also add your custom domain name. Follow these docs to learn how.

Great! You can now access your new site with a cleaner URL. We still need to tell Mapbox to allow out new site to load our Mapbox basemap.

7. Log into your Mapbox Account and click on your Gieß den Kiez project.
8. Copy the fresh URL of your Netlify site, and add it to the whitelist of allowed URLs. Otherwise, Mapbox won't load the tiles.
9. Save. You should now see the map loading when reloading the page.

Perfect. Everything should now work just fine.