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 0.0.0.0
• 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 0.0.0.0 --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 🚀

Comments

[Ludwig]

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

[Till Sanders]

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.

[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.

[Till Sanders]

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.

[Paulo Márcio]

That saved me, I found this post through a stackoverflow answer, the only bad thing about this, is that they should configure this command automatically, I mean, if digital ocean knows the app is a Nuxt app, and we ALWAYS have to configure the same thing, then why isn't it in the default script?

[Soso Gvritishvili]

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

[Arif Tunahan Deniz]

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

[ANIEFIOK AKPAN]

thanks so much for this article

[Max Druzhinin]

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

[Ebenezer Williams]

Thank You!!

[riddvanjs]

awesome!!

[Meisam Mulla]

For those wondering both sets of -- need to be there otherwise it won't work. So "npm start -- --hostname 0.0.0.0"