The team is now working on the WordPress Interactivity API. This unblocks the same UX Frontity framework enabled but directly in WordPress Core, fully compatible with the new Site Editor.
We need the help of somebody with more experience with Google Functions.
The Frontity server is a default export of a req-res function. As far as I know Google Functions accept req-res functions, although Iām not sure if they need a named export or can work with the default. Exporting a named function wouldnāt be a problem though.
@Pablo maybe we could ask for help at Google Campus Madrid?
Pablo3
Iāve asked Letās see if we can use some help from Google here!
1 Like
luisherranz4
@andrew Iāve just uploaded Frontity to GCP Functions and it works.
Things you have to do to make it work as Frontity is right now:
Rename /build/server.js to /build/index.js.
Compress index.js to a zip file.
Upload that zip to a Google Function.
Set āFunction to executeā to default.
I havenāt used Google Cloud in the past so I donāt know how to assign a real domain to that Function, serve the other static files or use the Google CDN on top of all that. But the server works
luisherranz5
If someone with experience with GCP wants to help us out we could create a guide with instructions on:
How to deploy the Frontity server to Google Function.
How to serve the Frontity static assets using Google Cloud (Storage?).
How to add Google CDN on top of that.
How to access all that stuff on your own domain.
andrew17
@luisherranz I mirrored the progress you made with a slight tweak. I have the repo on GiHub and am using GCP cloud build to build and deploy the GCP cloud function.
It is pulling content from scalewp.io, which is hosted on Pantheon.
As you noted it is still missing some things:
The static directory is not hosted
There is no custom domain
I havenāt themed anything yet
No CDN support on the Google side
The images in the content are pulling from Pantheon and use our CDN, so those are okay.
luisherranz10
Oh, I see. Much better obviously
I add trouble using server.js so I renamed it to index.js. Thatās fixed in your configuration, right?
One problem is that GC strips the folder in the server, like this:
/frontity-server/xxx becomes /xxx.
But in the client, well that url is obviously /frontity-server/xxx so it doesnāt match.
It cannot be fixed by adding the setting:
subfolder: "/frontity-server"
because then the client urls become /frontity-server/frontity-server/xxx.
I saw you changed your menu to fix that and it works fine with SSR, but that wonāt work once the client is rehydrated.
Anyway, itās not that important as this should not be a problem once you add a custom domain.
For what Iām reading it looks like you cannot connect a custom domain to a Function. Have you taken a look into that? People say you need to somehow use Firebase for thatā¦
Iām also afraid itās going to be difficult to serve the /static/ folder with the same domain than the Function, but that can be solved using a custom publicPath in Frontity:
"publicPath": "https://static.mydomain.com"
And then just upload the /static/ folder to a bucket which uses that domain.
luisherranz11
A customer engineering manager of Google Cloud confirmed me that there is now way to map a Google Function with a custom domain or add SSL certificate. A CNAME works, but you could not get rid of the folder (like /frontity-server/) or add SSL.
Cache dynamic content ā You can configure caching of your dynamic content on a global CDN. For example, if a function generates new content only periodically, you can speed up your app by caching the generated content for at least a short period of time. You can also potentially reduce execution costs because the content is served from the CDN rather than via a triggered function or containerized app.
In general, it looks like a much simpler solution to setup than GCP.
@andrew1 are you familiar with Firebase? Is there any reason why you need to use GCP?
andrew13
are you familiar with Firebase? Is there any reason why you need to use GCP?
I am not familiar with Firebase - Iāll have to do some reading. The main reason I wanted to do this with GCP is that Pantheon runs on GCP so integrating Frontity into our product would require the use of GCP. Requiring folks to create their own Firebase account and do set up is not ideal.
luisherranz14
Ok, I see, thanks.
We have another approach planned that would work in this scenario. We call it the āPHP theme bridgeā internally. It wonāt be a theme actually, but a feature of our PHP plugin that overrides the real theme with a HTTP call to a Frontity server that retrieves the final HTML. Something like this:
It has some advantages and some disadvantages, of course, but it works and would allow you to use Google Functions from GCP. Actually, I think this setup would be much simpler in your case, because you can keep both SSL and the CDN of WordPress. Oh, and it doesnāt need two different domains either.
andrew15
That looks really great! Email me when the PHP them bridge is ready to test and Iāll happily provide some feedback. For now I think we can close this thread as the exploration into GCP ended in use Firebase.
luisherranz16
Sure, weāll let you know. It shouldnāt be difficult to do, but I donāt know yet when weāll be able to do it. Right now weāre still working on the long-term roadmap so Iāll probably know more in 1-2 months.
1 Like
luisherranz18
Google Cloud Run looks really promising. Itās serverless but based on docker. It supports custom domains with HTTPS provided by Letās Encrypt
Iām going to ask them if they have plans to add CDN support in the near future.
@andrew, It looks like Pantheon CDN is based on Fastly (not Google) and you have a pretty powerful invalidation plugin for WP, right? So I guess that for Pantheon use case it doesnāt make sense to make this work with Google CDN anyway.
1 Like
andrew19
@luisherranz that is interesting. I am traveling this week but will take a look at it when I can. You are right that Pantheon has a global CDN based on Fastly. However, that only works when DNS is pointed at Pantheon. Iām not sure if we will be able to do that with Google Cloud Run custom domains.
Our cache invalidation works when WordPress is serving the front-end. It works for REST API routes too but wonāt clear cache in Frontity (or other decoupled front-ends), though it could be modified to call an API to do just that when a post is edited.
2 Likes
luisherranz20
Ok. Looks like the āPHP Theme Bridgeā is going to be the ideal option for your case because everything youāve already built is going to work out of the box. Good to know!
Have fun in WordCamp NYC!
luisherranz21
Just for the record: Yes, they plan to do so before the end of the year.
stevepersch22
Hi @luisherranz and @Pablo, Iām another developer at Pantheon and Iām doing some follow up work on what Andrew had started last summer.
Iām curious how the development of the Theme Bridge is going. Over the weekend I was able to connect my personal blog to a Frontity instance running on a Cloud Function. Iām using some proxy code in PHP thatās conceptually like the Theme Bridge idea.
We are still gathering requirements, so no code yet. But itās one of our top priorities right now and my guess is that we will be able to start the work at the end of March.
Absolutely! What about a call to meet each other?
Pablo25
Hey Steve!
Welcome to Frontity and glad the read that you are taking over Andrewās research. It would be great to have a quick call to see how we can collaborate, your PoCs look great.