Blank app after deploying own game server

[psknayak]

I followed the instructions as provided in the repo readme to build and deploy my own game server. When I try to deploy the app from netlify after building, the site loads a blank screen. Am I missing something? I'm new to the GCP related stuff. So any pointers to resolve the issue would be helpful. Thanks.

[spider-hand]

Hello can you check what your console says on your browser? If you use Chrome, right click → choose inspect → select console from the tab on the right side and you can see an error message.

[jzlandis]

I had this issue and it was resolved when I added a VUE_APP_FIREBASE_APP_ID variable to Netflify, the instructions in the readme don't include this variable for the Netlify setup, but it does show this variable as necessary for the .env files if running locally

[sandros94]

Hello can you check what your console says on your browser? If you use Chrome, right click → choose inspect → select console from the tab on the right side and you can see an error message.

Uncaught FirebaseError: Installations: Missing App configuration value: "appId"

I had this issue and it was resolved when I added a VUE_APP_FIREBASE_APP_ID variable to Netflify, the instructions in the readme don't include this variable for the Netlify setup, but it does show this variable as necessary for the .env files if running locally

This solved the first problem.

Now I'm getting this error Google Maps JavaScript API error: ApiNotActivatedMapError

[sandros94]

Ok after a quick stackoverflow search I've found that I have to enable Maps JavaScript API under my Google Cloud project, but now it asks for You must enable Billing on the Google Cloud Project. Is it possible to do without it?

[spider-hand]

@jzlandis Thanks I didn't notice that I will update the guide soon.

[spider-hand]

@Sandros94 I think you must enable the billing but it doesn't matter as long as you play this game individually. If you are worried you could set a quota like this project does. Go to your Google Cloud Project top page → Select IAM & Admin from the left side bar → Select Quotas from the left side bar → Select Maps JavaScript API → Click Map loads and you can edit the limit.

For this project, I set the limit 450 loads per day and I can run this game without paying.

[sandros94]

@spider-hand It might be a dumb question, but this is one of the things that I want to learn about google's api and how it works (and this project is perfect for it): What do you mean by "loads per day"? When you start the game? Or when it places you somewhere or when you move around? On their pricing tab they have a small calculator, should I count both street view and dynamic maps? Or only the first one?

[spider-hand]

@Sandros94 You should calculate both Dynamic Street View and Static Maps. Official doc says

A dynamic Street View panorama is charged for each instantiation of a panorama object in a Maps JavaScript API, Maps SDK for Android, Maps SDK for iOS application. An instantiation of a panorama object occurs when doing the following: In JavaScript, with the google.maps.StreetViewPanorama() class or Map.getStreetView() method. Usage of the StreetViewService() class is not charged.

For this project, the street view loads per a round so it means only about 90 games (450 / 5) can be played in a day. About a thousand people see this project a day so the count reaches the limit instantly but if you clone this project and play this game individually, you don't have to set a limit.

[psknayak]

I had this issue and it was resolved when I added a VUE_APP_FIREBASE_APP_ID variable to Netflify, the instructions in the readme don't include this variable for the Netlify setup, but it does show this variable as necessary for the .env files if running locally

Thanks. This works. Apologies for the late response. Closing this issue now.