DEV Community

Cover image for Building Animeccha - Going live on App Platform ๐Ÿš€
Lakshya Thakur
Lakshya Thakur

Posted on

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 :-

excited

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.

worked?

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.

I remember

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 ?

think

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.

API

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.

Smort

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 .........
that worked

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

domain excitement

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)

Collapse
 
yvesnrb profile image
yvesnrb

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!

Collapse
 
lakbychance profile image
Lakshya Thakur

Oh damn. Thanks for letting me know about this :D. Much simpler

Collapse
 
dawntraoz profile image
Alba Silvente Fuentes

Too much hype ๐Ÿคฃ๐Ÿคฃ๐Ÿคฃ
I want to see your app live ๐Ÿคฉ๐Ÿฆ„

Collapse
 
lakbychance profile image
Lakshya Thakur

Hahaha itโ€™s actually a simple app but since itโ€™s anime, I get too excited ๐Ÿ˜‹