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
- Go to this NuxtJS repository and select
Use this template.
- Initialize your cloned NuxtJS project by running:
yarn create nuxt-app nuxt-app
npx create-nuxt-app nuxt-app
- Choose all the features you want to have in your NuxtJS app.
- Try to run your project in local:
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-alpineRUN mkdir -p /usr/src/nuxt-appWORKDIR /usr/src/nuxt-appRUN apk update && apk upgradeCOPY ./nuxt-app /usr/src/nuxt-app/RUN yarn install --silentRUN yarn buildEXPOSE 3000ENV NUXT_HOST=0.0.0.0ENV NUXT_PORT=3000# start the appCMD [ "yarn", "start" ]
Deploy with Qovery
- To Deploy with Qovery you need to create an account.
Sign in to the Qovery web interface.
- Create a project.
- Select your Git repository.
- Click on deploy
Tada, your NuxtJS app is deployed and fully operational.
You can now use your NuxtJS app online and configure your custom domain.