# 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](https://res.cloudinary.com/practicaldev/image/fetch/s--cA4KAMIf--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://i.gifer.com/7GNb.gif)

Our app is a React app and luckily when I started exploring App Platform i.e. 4 days before, [this](https://www.digitalocean.com/community/tutorials/how-to-deploy-a-react-application-to-digitalocean-app-platform) 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?](https://cdn.hashnode.com/res/hashnode/image/upload/v1625067092922/fGBiaRYYm.gif) 

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](https://cdn.hashnode.com/res/hashnode/image/upload/v1625067095094/aV2x5qrlW.gif)

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](https://docs.netlify.com/routing/redirects/#syntax-for-the-redirects-file) for more details. 

So we need to do the same for our App Platform too. But how ?

![think](https://cdn.hashnode.com/res/hashnode/image/upload/v1625067097291/Juv9_gVi_.gif)

Here comes [App Spec](https://www.digitalocean.com/docs/app-platform/concepts/app-spec/) which lets the platform know about configuration values for your app. 

And our requirement would be fulfilled by using [catchall_document](https://www.digitalocean.com/docs/app-platform/references/app-specification-reference/) 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](https://cdn.hashnode.com/res/hashnode/image/upload/v1625067099946/ae9Mg3cQl.gif)

We need to update the `App Spec` and [this](https://developers.digitalocean.com/documentation/v2/#update-an-app) 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](https://www.digitalocean.com/docs/apis-clis/api/create-personal-access-token/#:~:text=To%20generate%20a%20personal%20access,the%20Generate%20New%20Token%20button.) 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](https://cdn.hashnode.com/res/hashnode/image/upload/v1625067102039/v0FRr6weS.gif)

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](https://res.cloudinary.com/practicaldev/image/fetch/s--ToESSBE5--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://i.gifer.com/UhL3.gif)

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](https://cdn.hashnode.com/res/hashnode/image/upload/v1625067106959/6_j5HFEpW.gif)

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