Google Cloud App Engine Blank Page

[AlphaCol]

Good morning.
I'm new to google cloud and I'm having a problem.
I am working on an angular node.js project. On the local side, everything is fine.
But in production, it gets stuck.
I have an environment.prod file on angular which contained this:

export const environment = {   
   production: true,
   host: 'http://localhost:3000',
   apiUrl: 'http://localhost:3000/api'
};

doing 'gcloud app deploy' everything worked and the site page showed up.
But when I replaced the urls with those of google in the environment.prod file

export const environment = {
   production: true,
   host: 'https://mytestwebsite.nn.r.appspot.com',
   apiUrl: 'https://mytestwebsite.nn.r.appspot.com',
};

and I deploy the update on app engine, I only have a blank page.

However, when locally I try to send requests to the google server, the requests work. Has anyone faced this issue before and can help me out?

[anjelisa]

Hi @AlphaCol,

Welcome to Google Cloud Community!

I'd suggest for you to try the App Engine Logs first and see the information logged there in order for you to narrow down the cause of the blank page.

If your Angular application is using HTTPS, ensure that your Google App Engine deployment is properly configured to handle HTTPS requests. Verify that the SSL certificate is correctly installed and the HTTPS settings are properly configured.

You can also reach out to Google Support for this as Engineers have better visibility on your logs/project. You can use this link to reach out: https://cloud.google.com/support

[devenes]

Hello @AlphaCol 

Since App Engine uses containers as instances, there is no problem with using "localhost" as the host. However, for better practice, I would recommend deploying your frontend and backend as separate services on Google App Engine and routing the traffic accordingly. Managing frontend and backend services within the same App Engine service can be challenging in terms of service management.

After separating your two services into different folders, you can write ui.yaml and api.yaml to deploy each of them under their respective folders to App Engine. Then, you can use the dispatch feature of Google App Engine to route specific routes to a specific service. (https://cloud.google.com/appengine/docs/standard/reference/dispatch-yaml?tab=node.js)

To learn more about managing multiple web services, you can refer to the official documentation on Structuring web services in App Engine: https://cloud.google.com/appengine/docs/standard/configuration-files

For the usage of sample YAML files, you can refer to this article: https://medium.com/@rgoyard/how-to-deploy-a-single-page-application-and-its-backend-to-google-app-en...