I will explain how to configure your applications in order to be deployed on Google App Engine (GAE).
Let’s imagine an application, let’s say a Todo List (yes, sorry, it’s always a TodoList). Imagine we have the following components :
- A Client Application, a single page application, built with your favorite frontend framework, we will call this application the client. (I made it with VueJS)
- A Server Application, a simple HTTP(S) endpoint for listing, create, delete or update tasks of our todo list. (In the source example it’s a Node Js Express Application)
The base source code of the example can be found here: Github Source Code Example
The source code directory looks like this :
NOTE : I will assume that you already have a Google Cloud Account, created a project, and installed gcloud console on your laptop.
With GAE, if you deploy an application, the application will be defined as the default service, we will set the default service to our client application.
Create and deploy the default service
In the client directory, create an app.yaml file, but name it
client.yml (Yes, it's possible !)
The “runtime” entry, define the runtime environment for your application, and as you can imagine, the “service” entry will define the name of our service.
So now, from the root of your application you can deploy your default service :
gcloud app deploy client.yaml
If everything was ok, you should be able to navigate to your application
gcloud app browse.
The URL of your application (default service) should be something like that : https://[PROJECT_ID].appspot.com
Try to add a task …
It should not work, because we do not have deployed the api application, let’s do it
Create and deploy the API service
As we made for the client application, we will create an app.yaml file, but name it
api.yml (Yes, it's still possible !) :
As you can see that one is much easier to read :)
And then deploy it
gcloud app deploy api.yaml
Ok, so now, if you visit your Google Cloud Console > App Engine > Services you should have two services listed, the default service, and the API service
And the URL of your API service should be something like that: https://api-[PROJECT_ID].appspot.com
As the API service is now deployed, go back to the client application and try again to add a task …
It should not work, because we need to “connect” the api application, let’s do it
In order to communicate with the API service we can use the API service’s specific URL …
There’s a better solution (in my own opinion), let’s say that from the client application, make api calls using the relative path :
/api, let see how to do it.
Dispatch /api calls to the api service.
We can use the dispatch feature of GAE, to dispatch some routes to a specific service ( this is also how you can do microservices with GAE)
At the root of the TodoList directory, create a
dispatch.yaml file, and name it ...
And then deploy it :
gcloud app deploy dispatch.yaml, and now in your Google Cloud Console > App Engine > Services you should see the dispatch routes applied :
And then go to your application, refresh, and try to add a task,
Now it should work !
NOTE : we DO NOT persist the tasks, so if your api service restarts you may loose every thing.
I hope you enjoyed! Feel free to leave any comments, claps (you can add many by keeping claps button pressed !) or even any issues on the Gitlab Repo.