AppEngine dispatch.yaml for SPA and client-side routing - google-app-engine

Question

I have a Go server where I have an API and a static client build folder with a SPA (Single Page Application). Since the SPA should have client-side routing, I must make sure that all paths map to the frontend. For example, http://myapp.com/djaksfjal should not show a 404 in the browser, it should always route to the routes in my SPA.
Now I also want to have a backend API, so all requests to /api should go to the Go backend.
Question: how do I set this up with AppEngine? I tried with two app.yaml files and one dispatch.yaml file but can't get it to work.
client-app.yaml
runtime: go
api_version: go1
service: default
handlers:
- url: /
static_files: build/index.html
upload: build/index.html
- url: /*
static_dir: build
server-app.yaml
runtime: go
api_version: go1
service: test-backend
handlers:
- url: /api/*
script: _go_app
dispatch.yaml
dispatch:
- url: "*/api/*"
service: test-backend
hello.go
package main
import (
"fmt"
"net/http"
"google.golang.org/appengine"
)
func main() {
http.HandleFunc("/api/hello", handle)
appengine.Main()
}
func handle(w http.ResponseWriter, r *http.Request) {
fmt.Fprintln(w, "Hello, world!")
}
Then running dev_appserver.py server-app.yaml client-app.yaml dispatch.yaml and going to localhost:8080 where the dispatch server is. However, this doesn't work. The client-side routing takes over everything, ignoring the /api/hello route.
Tested: localhost:8080/api/hello. Expecting: api route reply. Got: static client reply
If I change the client-app.yaml to not use a * then the /api/hello route works, but of course the client-side routing does not work because I need all routes to go to the client so that it can handle the routing itself (except for the /api routes).

Answer 1

The rules order in the dispatch.yaml file matters - the first pattern match wins. So you want the */api one first.
Also - if none of the rules pattern matches the request will be routers to the default service, no need to add a rule for that.
I also see that you mentioned an /api/hello request path - for that to work you may need to expand the */api pattern into */api/*
So I'd use this dispatch.yaml file:
dispatch:
- url: "*/api/*"
service: test-backend
You also need to expand the /api pattern in the server-app.yaml file, otherwise /api/hello will give a 404:
handlers:
- url: /api/*
script: _go_app
Side note: you shouldn't (need to) go to localhost:8080 - that'll just send you to the default service. Instead note the individual ports that the development server listens to for each module/service, displayed when the server starts.