Building Animeccha - Going live on App Platform 🚀

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 😊!!