DEV Community

loading...
Cover image for Deploy Potatizer to DigitalOcean

Deploy Potatizer to DigitalOcean

dawntraoz profile image Alba Silvente 💃🏼 ・2 min read

In this post, I tell you the last steps to be able to see our little potatizer online 😍

Deployment in DigitalOcean App platform

With App platform, uploading our project has been a piece of cake.
After registering with GitHub and then linking it to App Platform, in two clicks I had the web live!

DigitalOcean log in screen

The only things we have to take into account are:

  • Choose the service that suits your website, how to render it. In my case: static sites.
  • Choose the branch that we want to run the autodeploy when we make changes (CD: Continuous Deployment).
  • Choose the command that will build our project: yarn generate.
  • If you have any environment variable, add them manually in the key-value pair inputs.

Once you pass the process, you hit deploy and you can forget about it 💜

You can see the live result here - 🎇Potatizer live demo deployed🎇

Deploy Button (extended)

One thing that has driven me crazy about DigitalOcean 🤯, has been the idea of implementing a button that allows another person to deploy my project in their environment!

Deploy to DigitalOcean button

A fantasy, just adding a deploy.template.yaml file in a folder called .do in the root of my project with the following 'spec':

spec:
  name: cd
  # Service type: Static sites
  static_sites:
    - environment_slug: html
      # Nuxt generate to build our project
      build_command: yarn generate
      git:
        # CD branch and url to the code
        branch: main
        repo_clone_url: https://github.com/Dawntraoz/potatizer.git
      name: potatizer
Enter fullscreen mode Exit fullscreen mode

And to make it run, we simply use the code DigitalOcean provide to add it to the web (in html) or to the readme (in markdown):

[![Deploy to DigitalOcean](https://mp-assets1.sfo2.digitaloceanspaces.com/deploy-to-do/do-btn-blue.svg)](https://cloud.digitalocean.com/apps/new?repo=<repo_url>/tree/<branch>)
Enter fullscreen mode Exit fullscreen mode

being repo_url the github repo link, in my case https://github.com/Dawntraoz/potatizer, and the branch you've chosen (main).

Repository

If you want to take a look at the code, here is the repository.

GitHub logo Dawntraoz / potatizer

Generate your potato mood randomly with this without sense app 🥔


I hope you liked the journey and that we have a few potaters laughs together 🥔

Thanks for sharing these stupid ideas with me, happy to have you 🤗

Discussion

pic
Editor guide