Step 3 - Deploy To Digitalocean App Platform
Tags: dohackathon
Published: 2021-01-03 03:44:28

First of all we need to deploy the backend first, you can deploy the backend using this `Deploy to DO` button :

<center><a href="https://cloud.digitalocean.com/apps/new?repo=https://github.com/spiritbro1/opensource-marketplace-backend/tree/main">
 <img src="https://mp-assets1.sfo2.digitaloceanspaces.com/deploy-to-do/do-btn-blue.svg" alt="Deploy to DO">
</a></center>

After you click that button you will see this screen :

![first screen](https://rino.world/api/convertimage?url=https://imgur.com/download/SvXHB99)

Click next and you will see this screen :

![second screen](https://rino.world/api/convertimage?url=https://imgur.com/download/kSEPFgV)

Well, what deploy to Digitalocean button actually does is actually create a service automatically for you so you just need to fill in the necessary environment variable like github_client_id, github_client_secret etc. after you fill in and click next and you will need to choose one of the plans click on basic for now because we just need it for the demo and use the 512 MB RAM :

![third screen](https://rino.world/api/convertimage?url=https://imgur.com/download/8lYL5Ms)

Click "Launch Basic App" then, wait for it to automatically deploy, after successfully deploy the app you will get your app deployed to `<APP_URL>/api` we use http routes `/api` because we don't want our backend routes to collide with our frontend routes because next we wanted to deploy our frontend to the same application now go to `Components` tab and click `Create Component` and choose `Static Site` select the repository and click next:

![fourth screen](https://rino.world/api/convertimage?url=https://imgur.com/download/ect98Bu)

You can also create the frontend using `deploy to Digitalocean` and fill out the necessary environment variable just like before, because basically our frontend app is actually a static website so it don't need any backend to run it just use the underlying digitalocean Spaces and serve it from there go ahead and use this button if you want to deploy frontend easily:

<center><a href="https://cloud.digitalocean.com/apps/new?repo=https://github.com/spiritbro1/opensource-marketplace-frontend/tree/main">
 <img src="https://mp-assets1.sfo2.digitaloceanspaces.com/deploy-to-do/do-btn-blue.svg" alt="Deploy to DO">
</a></center>

It's basically the same as before but use static website instead of web service, now go ahead and fill in the necessary environment variable:

![fifth screen](https://rino.world/api/convertimage?url=https://imgur.com/download/pfX7IWz)

Here as you can see there are `url` variable if you separate the backend and frontend you need to fill in your other application url to that `url` and for the backend you should fill in `frontend_url` with your static website url so if all of this done you're successfully deploy your app into digitalocean app platform also don't forget to add authorization url in both github and paypal respectively :

![sixth screen](https://rino.world/api/convertimage?url=https://imgur.com/download/FHmFiMu)

This is for github you should change the `<APP_URL>` into your backend url

![seventh screen](https://rino.world/api/convertimage?url=https://imgur.com/download/VgOkY3u)

Then for your `https://developer.paypal.com/developer/applications/` paypal application add this url the same you should change `<APP_URL>` into your backend URL, if everything deployed successfully you will see this screen :

![eight screen](https://rino.world/api/convertimage?url=https://imgur.com/download/C1yTMlz)

And finally your app is done!!