DEV Community

Cover image for Deploy Nuxt.js on DigitalOcean App Platform in 5 minutes or less
Till Sanders
Till Sanders

Posted on

Deploy Nuxt.js on DigitalOcean App Platform in 5 minutes or less

I recently find myself deploying more and more projects using the DigitalOcean App Platform because it is so damn quick. I love writing Dockerfiles and deploy my containers to a Kubernetes cluster, but with a Platform-as-a-Service solution such as AWS Elastic Beanstalk or the aforementioned solution by DigitalOcean which is even easier to use, I feel like I really don't need to. I've used Elastic Beanstalk in the past, but the pricing always was a bit too high for small projects. With the great usability and pricing of the DigitalOcean App Platform, I started deploying side-projects there. Today I tried deploying a Nuxt installation to App Platform for the first time and found a small hurdle, that somehow wasn't really documented in any tutorial. So here we go!

I assume, that you have basic devop knowledge, including DNS servers, environment variables, and stuff.

1. The container

That's easily the best part. You don't need one, because you can use the default Node container provided to you by DigitalOcean 👍

2. The repository

DigitalOcean App Platform deploys your apps right from their respective git repositories. So, assuming you already have a Nuxt.js project in a GitHub or GitLab repository, you can jump right in: Go to your DigitalOcean Admin Panel

3. Set up your DigitalOcean App

  • Hit the big green 'Create' button and start creating a new 'app'.
  • Connect your GitHub or GitLab account if you haven't already. Select the repository containing your Nuxt.js project below and click 'next'.
  • Choose a name and region and proceed to the next step. Here, we have a few settings to make. DigitalOcean should have detected the Node environment.
  • We want to deploy it as a Web Service.
  • You can set the environment variables if you need any.

4. Getting health checks right

This is the only problem I stumbled upon. To get health checks working, we need to change the default run command:

  • The build command should be npm run build – fine!
  • The run command should be npm start by default, but we need to change it to npm start -- --hostname
  • The default Nuxt.js port is 3000 so we need to either change the port in the app platform setting, or set the run command to npm start -- --hostname --port 8080. Chose what you like better. I went with 3000.

5. Set up your domain

Finish the setup and wait for the deployment to complete. With the health checks set up properly, there shouldn't be any issues. Once that is done, you can make more adjustments to your app settings, like connecting your domain.

I hope this was helpful 🚀

Discussion (9)

astrowq profile image

thanks a lot. I got stuck at the health check part for several hours!

tillsanders profile image
Till Sanders Author

Yeah, that was basically the whole point why I wrote this article. Good to know, it was worth it! Took me a while to figure that out, too.

briancaffey profile image
Brian Caffey

Thanks for the article! I’m curious if you are using another backend with Nuxt. I recently got into Nuxt and I use Django as a backend REST API. I didn’t want to use App Platform because I would need to pay for both a Django “app” and a Nuxt “app”, in addition to any other apps/components I need (redis, Postgres, async workers). Maybe I’m thinking about DOAP the wrong way but for now I’m still deploying my apps on droplets using the docker Droplet machine image with docker swarm.

tillsanders profile image
Till Sanders Author

Yeah, I'm using Nuxt for the frontend and it communicates with a Laravel API that is also deployed using App Platform. As far as I know, the only way to do this is to pay for both deployments separately. So it is more expensive than a droplet. But when I think about the time this solution saves me, it weighs out the extra costs for me. With a droplet, I would need to set up the environment, continuous deployment, and maintain those. It's not hard, but I feel like my time is better spent on the project itself.

qwe12e profile image
Arif Tunahan Deniz

Thank youu! I was stuck with health checks for hours. Finally fixed it.

sosog profile image
Soso Gvritishvili

Thanks for help, i had problem with npm start :))

spirico profile image
Max Druzhinin

Thanks a lot Till!
This article helped me with health stage as well.
Have a great day!

zanio profile image

thanks so much for this article

riddvanjs profile image