How-To deploy a Single Page Application and its backend to Google App Engine

Image for post
Image for post

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 (Yes, it's possible !)

Remember, The client application is a single page (static) application, so, following this guide I defined the “handlers” section, for a VueJS application.

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 :

If everything was ok, you should be able to navigate to your application .

The URL of your application (default service) should be something like that : https://[PROJECT_ID].appspot.com

Image for post
Image for post

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 (Yes, it's still possible !) :

As you can see that one is much easier to read :)

And then deploy it

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

Image for post
Image for post

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 …

Wait …

There’s a better solution (in my own opinion), let’s say that from the client application, make api calls using the relative path : , 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 file, and name it ... :

And then deploy it : , and now in your Google Cloud Console > App Engine > Services you should see the dispatch routes applied :

Image for post
Image for post

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.

Image for post
Image for post

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.

Credits

Photo by Raquel Pedrotti on Unsplash

Here are some resources I used for the code :

- https://medium.com/@brian.young.pro/how-to-deploy-vue-js-app-to-google-cloud-with-cloud-build-ad104bb1cf60

- https://samuelabiodun.com/build-a-todo-app-with-node-js-expressjs-mongodb-and-vuejs-part-2/

- https://scotch.io/tutorials/build-a-to-do-app-with-vue-js-2#toc-component-structure

- https://github.com/typicode/json-server

Written by

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store