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

tillsanders

Till Sanders

Posted on February 3, 2021

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 🚀

💖 💪 🙅 🚩
tillsanders
Till Sanders

Posted on February 3, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related