Quick recap - App is deployed on Netlify but the assets required are on DigitalOcean Spaces which helped us solve the problem of storage and speed (courtesy of Imagekit.io).
Now it's the moment we have all been waiting for :-
Our app is a React app and luckily when I started exploring App Platform i.e. 4 days before, this got added and made the deployment process easy.
The hooking your github repo's production branch to DigitalOcean's App Platform is as simple as it was for Netlify and after following the stated instructions, the app was alive on a random_domain - some alphanumerics suffixed with our app name i.e. animeccha.
One cool thing maybe DigitalOcean can do is allow a person to have a custom domain suffixed with .digitalocean.app
as netlify does.
But nevertheless, the app was deployed and so I went to the live url and yes everything was loading as expected.
Until I reloaded the page that is ๐
.
As soon as I did that, I got routed to a 404 not found fallback page and this wasn't really a suprise because I knew what still needs to be done.
Basically, the App Platform doesn't yet know that if a user opens the browser at any /*
wildcard, where it should be routed to ?
Since it's a SPA, client side routing works on single index.html
and so all the requests for whatever route it is, should go to this file.
This was explicitly done by me in case of Netlify too by creating a _redirects
file and mentioning the required routing. You can refer this for more details.
So we need to do the same for our App Platform too. But how ?
Here comes App Spec which lets the platform know about configuration values for your app.
And our requirement would be fulfilled by using catchall_document to have the value of index.html
.
So this App Spec
is a YAML manifest that maintains all these records. I am assuming that I can make one for my app explicitly too and push to my remote so that App Platform picks it but I didn't want to go that route.
So we leverage DigitalOcean's API way.
We need to update the App Spec
and this endpoint helps us which needs a Bearer Token
in the Authorization
header and the id
of the app as a path parameter.
To create this token, you can follow this link.
But what about that id
parameter ?
Well I couldn't find it somewhere in the App Platform's GUI. I might have missed something but the other easiest way was to just hit this api - https://api.digitalocean.com/v2/apps
and get the list of apps with all their details. I got id from there.
Then we make a PUT request to this endpoint - https://api.digitalocean.com/v2/apps/{id} along with our updated App Spec
with catchall_document
field as a JSON in Request Body and BAM, you just updated the spec which triggers a re-deploy of your app.
And now the actual, final, oh god please moment we have been waiting for !!
Let's reload the page on a custom route and .........
HELL YEAH!!! It did. We are live ๐ where we wanted to be !!
But I got ambitious. So ambitious that I bought my first ever DOMAIN !!
You can go to Settings of your app and click on Edit
to see the Add Domain
option. DigitalOcean doesn't provide you with domain registration services but it does guide you through the process and it was seamless.
I will be disclosing the domain (lol it's kinda obvious) and relevant submission details in the next post i.e. the FINAL one ๐!!
Top comments (4)
For the catch all document you can go on the components tab, then click on your component then on "custom pages" right above destroy you can set a catchall with the page name of "index.html". Hope to see your application soon, it's really hype!
Oh damn. Thanks for letting me know about this :D. Much simpler
Too much hype ๐คฃ๐คฃ๐คฃ
I want to see your app live ๐คฉ๐ฆ
Hahaha itโs actually a simple app but since itโs anime, I get too excited ๐