tutorial

How to deploy NuxtJS

This tutorial show you how to deploy NuxtJS in a few seconds
type: tutorialframework: nuxtjs

In this tutorial, you'll see how to initialize a NuxtJS application in the environment setup by Qovery.

Nuxt.js is a free and open source web application framework based on Vue.js, Node.js, Webpack and Babel.js. Nuxt is inspired by Next.js, which is a framework of similar purpose, based on React.js - Wikipedia

Before start you have to choose between Static Hosting or Server Hosting:

  • Static Hosting: Statically render your Nuxt.js application and get all of the benefits of a universal app without a server. It will generate a static site.
  • Server Hosting: Good choice when you need an hosting that requires a server and is intended for SSR applications.

Check the nuxtjs documentation for more informations

Initialize a NuxtJS project

  1. Go to this NuxtJS repository and select Use this template.
  2. Initialize your cloned NuxtJS project by running:
yarn create nuxt-app nuxt-app

or

npx create-nuxt-app nuxt-app
  1. Choose all the features you want to have in your NuxtJS app.
  1. Try to run your project in local:
yarn develop

or

npm run develop

Now, you are ready to deploy it 💪

Deploy your NuxtJS app

Add a Dockerfile (optional)

To deploy your app with Qovery, you can provide your own Dockerfile. However, for NodeJS app, the Dockerfile is optional. It's up to you to decide if you want to provide one or not. Here is a working Dockerfile example.

FROM node:14-alpine


RUN mkdir -p /usr/src/nuxt-app
WORKDIR /usr/src/nuxt-app


RUN apk update && apk upgrade


COPY ./nuxt-app /usr/src/nuxt-app/
RUN yarn install --silent


RUN yarn build


EXPOSE 3000


ENV NUXT_HOST=0.0.0.0
ENV NUXT_PORT=3000


# start the app
CMD [ "yarn", "start" ]

Deploy with Qovery

Sign up

  1. To Deploy with Qovery you need to create an account.

  • Sign in to the Qovery web interface.

    Qovery Sign-up page

    1. Create a project.
    2. Select your Git repository.
    3. Click on deploy

    Tada, your NuxtJS app is deployed and fully operational.

    Conclusion

    You can now use your NuxtJS app online and configure your custom domain.

    Happy coding.

    Tutorial