GeoGuess GitHub Repo stars

# GeoGuess Deployment Instructions

# 1) Deploy GeoGuess

You can deploy the game with :

Deploy to netlify or Deploy with Vercel

It will be ask to give Environment variables, we will explain how to create and find them.

For hosting in subfolder like Github/Gitlab pages, use environnement variable VUE_APP_PUBLIC_PATH

# 2) Environment variables

# 2.1) Google Map

Environnement variable : VUE_APP_API_KEY

  1. Google Cloud, your 1st project ?
    1. Go to https://cloud.google.com/maps-platform/
    2. Click on "Get started"
    3. Page will open and ask you to activate billing "Google"

    Note : Google offers 200 $ credit per month to use Google Map Apis (Source). For personal usage, you won't use more than the free credit.

    1. Create Billing Account

1.(bis) Google Cloud, I know 💪 then create a project

  1. In the "MarketPlace", activate "Maps JavaScript API"
  2. In "Identifiants", generate on API key. This key will be your VUE_APP_API_KEY

Since GeoGuess is web app front, malicious visitors can stroll your Google API key and use it. You MUST define quotas et restrictions. If you can add access control on your website (.htaccess)

# Quotas & restrictions

# Key restrictions (in "Credentials")

"Credentials"

  1. Under "Application restrictions" set "HTTP referrers (websites)"

  2. Add website restrictions to your game server URL (1): Do not forget to add "*" after "/" to includes all URLs.

  3. Restrict key to "Maps JavaScript API" (2) "Credentials"

# Quotas
  1. In the search box, tape "quotas google maps"
  2. Select "Maps JavaScript API" next to the title "Quotas"
  3. Open Map loads Panel with ">"
  4. Set limits. For the demo, "Map loads per day" is set to 500

"Limits"

More information : https://developers.google.com/maps/gmp-get-started

# 2.2) Firebase (multiplayer)

Environment variables : VUE_APP_FIREBASE_API_KEY, VUE_APP_FIREBASE_PROJECT_ID, VUE_APP_FIREBASE_MESSAGING_SENDER_ID, VUE_APP_FIREBASE_APP_ID et VUE_APP_FIREBASE_MEASUREMENT_ID, VUE_APP_FIREBASE_AUTH_DOMAIN, VUE_APP_FIREBASE_DATABASE_URL, VUE_APP_STORAGE_BUCKET

  1. Create a Firebase project (or use the Google Cloud project create for Google Map Api) on https://console.firebase.google.com/

You can activate Google Analytics to get statistics

  1. Go in the section "Develop" and click on "Realtime Database", create a database

  2. Go in the Rules Section

    1. Replace, 2 variable (.write et .read) false by true in the textarea "Rules"
    2. Publish

  3. Return on the home page with "Project Overview"

  4. Under the title of the project, click on Web icon </> to add an application "Ajout App"

  5. Save the application then get Environment variables reveals under firebaseConfig

Here are the associations:

Parameter Env. Variables
apiKey VUE_APP_FIREBASE_API_KEY
authDomain VUE_APP_FIREBASE_AUTH_DOMAIN
databaseURL VUE_APP_FIREBASE_DATABASE_URL
projectId VUE_APP_FIREBASE_PROJECT_ID
storageBucket VUE_APP_STORAGE_BUCKET
messagingSenderId VUE_APP_FIREBASE_MESSAGING_SENDER_ID
appId VUE_APP_FIREBASE_APP_ID
measurementId VUE_APP_FIREBASE_MEASUREMENT_ID

Note: measurementId was accessible if you have activate Google Analytics

← Update →