Hello, I have a question about domains on the app platform. I have two services: the first is a landing page, and the second is an app. My idea is that the landing page should have the domain xyz.com, and the app should have the domain app.xyz.com. I tried changing the settings in the app, but it doesn’t work. Currently, both services (the landing page and the app) are on the same app.
Could you please tell me how I can do it?
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
Accepted Answer
Hi there,
If you have both services in the same app, consider splitting them into separate apps for better domain control.
Once they are in separate apps, you could follow the stpes here on how to add custom domains to each app:
https://docs.digitalocean.com/products/app-platform/how-to/manage-domains/
Let me know if this works for you!
- Bobby
You need to set up separate domains for your landing page and app by configuring custom domains in the DigitalOcean App Platform. First, go to the App Platform dashboard, select your app, and navigate to the Settings tab.
Under Domains, add xyz.com for your landing page service and app.xyz.com for your app service. Make sure each service is mapped to the correct domain. Next, update your DNS settings by adding an A record for xyz.com pointing to your App Platform’s assigned IP and a CNAME record for app.xyz.com pointing to the main domain.
If you’re using Cloudflare or another DNS provider, check if proxying is enabled, as it can sometimes interfere. After making these changes, deploy the app again and test the domains
I had the exact same use case, and I know the accepted answer recommends splitting the landing page and app into two DO Apps, but I find it much easier to have everything in one app because then I can only have 2 apps in total - staging and production - instead of 4. And there’s actually a way to do this but it requires editing the app’s spec file as it is not possible through the UI alone:
- Add both the domain and the subdomain to the app, exactly the same way as if you were adding them to separate ones. For me, I use Cloudflare to handle the domain stuff, so I just added two CNAME records there, with both xyz.com and app.xyz.com pointing to the DO App domain.
- After adding both components (the website and the app) the ingress rules in the app spec will look like this, according to the HTTP Request Routes you configured for them (you can view and edit the spec in the DO UI under App -> Settings -> App Spec):
- component:
name: website
match:
authority:
exact: ""
path:
prefix: /
- component:
name: app
match:
authority:
exact: ""
path:
prefix: /app
- And now you can simply set your domain and subdomain as the authorities:
- component:
name: website
match:
authority:
exact: xyz.com
path:
prefix: /
- component:
name: app
match:
authority:
exact: app.xyz.com
path:
prefix: /
Bingo bango, works out of the box. DO will redirect to the component according to the domain authority. By the way, this is even documented at DigitalOcean, but there’s not really a step-by-step guide for it (and no specific recommendation from DO anywhere else). So far I haven’t noticed any downsides in network performance compared to using separate DO Apps.
Become a contributor for community
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.
DigitalOcean Documentation
Full documentation for every DigitalOcean product.
Resources for startups and SMBs
The Wave has everything you need to know about building a business, from raising funding to marketing your product.
The developer cloud
Scale up as you grow — whether you're running one virtual machine or ten thousand.
Get started for free
Sign up and get $200 in credit for your first 60 days with DigitalOcean.*
*This promotional offer applies to new accounts only.