How to deploy a Nuxt app to Render

Tim Hanlon

We've been using Nuxt since 2017 and have used a variety of cloud platforms to host projects over the years, including, Vercel (fka Zeit), Heroku and Google Cloud Platform.

Render is the new kid on the block, launching just last year. We're using it for our current project Yield Report, and in our experience, it's as easy to use as Heroku – while both cheaper and faster.

Here's how to get your Nuxt application running on Render.

Deploying to Render works via Git, so start by pushing your repo to GitHub or GitLab.

  1. From the Render dashboard, click the New button in the top right and select Web Service.

  2. If you haven't already, follow the steps to link your GitHub or GitLab account.

  3. Select your repo.

    Render will automatically detect you're using Nuxt, but the default settings it suggests won't work with a universal/server-side rendered app.

  4. Change the build and start commands:

    Build command: yarn --production=false; yarn build

    Start command: yarn start

    We add --production=false to override the NODE_ENV=production we set in the next step, to work around this build error from @nuxtjs/tailwindcss:

    WARN Module @nuxtjs/tailwindcss not found. Please ensure @nuxtjs/tailwindcss is in devDependencies and installed. HINT: During build step, for npm/yarn, NODE_ENV=production or --production should NOT be used.

  5. Scroll down until you see the Advanced button and unfold it, then add two environment variables:

    • Add HOST with the value
    • Add NODE_ENV with the value production
  6. Click the Create Web Service button, and your app will (hopefully) deploy without any issues.

© twofutures Pty Ltd 2020