How we got our webapp hosted on a separate server to show up as a subdirectory
We get it, marketing wants easy control of the website on the root domain. And because it’s so easy to setup a CMS there to publish marketing content, that is why most web apps are setup on subdomains instead of the root domain. This is alright if all of the app content is under a login. If that’s not the case — it’s so much better to get users to share the domain.com/xxxx url instead of the app.domain.com/xxx domain. Easy to remember and share.
Most SEO professionals agree that subdirectories are better than subdomains for ranking on search engines.
Search engines keep different metrics for domains than they do for subdomains, so even though Google itself has stated that — from a ranking perspective — content in subdomains and subdirectories is treated roughly equally, it’s still recommended that webmasters place link-worthy content like blogs in subfolders rather than subdomains (i.e. www.example.com/blog/ rather than blog.example.com).
— Moz SEO Experts, Domain Setup Guide
Sadly, it’s not easy to setup a redirect from a subdomain to a subfolder. While this is possible to do by setting up a reverse proxy. The maintenance of this complex engineering would have been a nightmare — attached to a client’s frontend. Something that should never go down.
We’ve been telling our clients that this cannot be done, until I found this very pretty article by fly.io http://onehostname.com/
Fly describes itself as a global JavaScript platform that gives you the power to build your own CDN.
We started by using fly sites. The fly site did not play well with the hosting that we were using — to server side render our angular app. Had a major issue with fly sites that we were not able to decode. While fly “sites” has a great UI to setup redirects, we found through support that they’re not actively supporting this functionality.
We then decided to build a Fly Edge Application using the github repo https://github.com/superfly/onehostname which was easy enough.
This is what we ended up doing.
https://getpepped.com — the root domain , redirects to our squarespace site with marketing controls directly.
getpepped.com/app — our angular app, shows the server side rendered angular application from roast.io
An added benefit by involving fly.io is they give free automatic SSL.
The one more layer in the stack to handle part of this exercise, does increase debugging efforts and needs a lot of technical know how — but I’m sticking to fly.io till we get similar results for such a small investment of time.
pro-tip —Get on the slack channel for quick support
Also read their articles to get more value out of fly.io. They do a lot more than just let you manage hostnames.
