Nuxt lets you build user-focused applications by making flexibility and performance easy. Deploy your Nuxt app on Koyeb to get seamless scaling, git-driven deployment workflows, and global edge availability.
Nuxt
This guide explains how to deploy a Nuxt application to Koyeb using:
To successfully follow this documentation, you will need to have a Koyeb account
You can deploy and preview the Nuxt application from this guide using the Deploy to Koyeb button below.
You can consult the repository on GitHub
Get started by creating a minimalistic Nuxt application that we will deploy to Koyeb. You will need Node.js
To generate a new Nuxt application, run the npx nuxi init
command. Include the name you want to use for the new project as its final argument. For this guide, we'll use the name example-nuxt
:
npx nuxi init example-nuxt
Nuxt will initialize a new project directory that matches the name you selected. Move into the new directory to view the project files:
cd example-nuxt
If you run tree -a
, du -a
, or similar directory tree commands, a directory structure similar to this should be present:
. βββ app.vue βββ .gitignore βββ .npmrc βββ nuxt.config.ts βββ package.json βββ public β βββ favicon.ico βββ README.md βββ tsconfig.json 1 directory, 8 files
Next, install the project's dependencies by typing:
npm install
You may be prompted to select whether you wish to provide telemetry information. Type either y or n and press Enter to proceed.
Now that the dependencies are installed, start the development server by typing:
npm run dev
Nuxt generates files.nuxt
directory during development. In your web browser, navigate to http://127.0.0.1:3000
to see the default landing page generated by Nuxt. This shows that the development server is able to serve your project successfully.
Press CTRL-C to stop the development server after verifying.
Back at the command line, open the project's package.json
file in your editor. By default, Nuxt doesn't include a script to start the project using a non-developer server, so we will add the appropriate command to make it easier to deploy.
{ "name": "nuxt-app", "private": true, "scripts": { "build": "nuxt build", "dev": "nuxt dev", "generate": "nuxt generate", "preview": "nuxt preview", - "postinstall": "nuxt prepare" + "postinstall": "nuxt prepare", + "start": "node .output/server/index.mjs" }, "devDependencies": { "@types/node": "^18", "nuxt": "^3.4.3" } }
Save and close the file when you are finished.
Once you've verified that the project runs locally, create a new Git repository to save your work.
Run the following commands to create a new Git repository within the project's root directory, commit the project files, and push changes to GitHub. Remember to replace the values of <YOUR_GITHUB_USERNAME>
and <YOUR_REPOSITORY_NAME>
with your own information:
git init git add . git commit -m "Initial commit" git remote add origin git@github.com:<YOUR_GITHUB_USERNAME>/<YOUR_REPOSITORY_NAME>.git git push -u origin main
To deploy the Nuxt app on Koyeb, using the control panel
nuxt-service
.example-nuxt
.A Koyeb App and Service will be created. Your application will be built and deployed to Koyeb. Once the build has finished, you will be able to access your application running on Koyeb by clicking the URL ending with .koyeb.app
.
To deploy the Nuxt app on Koyeb using the Koyeb CLI, run the following command in your terminal:
koyeb app init example-nuxt \ --git github.com/<YOUR_GITHUB_USERNAME>/<YOUR_REPOSITORY_NAME> \ --git-branch main \ --ports 3000:http \ --routes /:3000 \ --env PORT=3000
Make sure to replace <YOUR_GITHUB_USERNAME>/<YOUR_REPOSITORY_NAME>
with your GitHub username and repository name.
To track the app deployment and visualize build logs, execute the following command:
koyeb service logs example-nuxt/example-nuxt -t build
Once the deployment of your application has finished, you can retrieve the public domain to access your application by running the following command:
$ koyeb app get example-nuxt ID NAME DOMAINS CREATED AT 55d75993 example-nuxt ["example-nuxt-myorg.koyeb.app"] 20 Apr 23 09:55 UTC
With your app running, you can track the runtime logs by running the following command:
koyeb service logs example-nuxt/example-nuxt -t runtime
As an alternative to using git-driven deployment, you can deploy a pre-built container from any public or private registry. This can be useful if your application needs specific system dependencies or you need more control over how the build is performed.
To dockerize the Nuxt application, start by adding a file called .dockerignore
to the project's root directory. Paste the following contents to limit the files copied to the Docker image:
Dockerfile .dockerignore node_modules npm-debug.log .nuxt .output .git dist README.md
Afterwards, create a Dockerfile
in your project root directory and copy the content below:
FROM node:18-alpine AS base FROM base AS deps RUN apk add --no-cache libc6-compat WORKDIR /app COPY package.json package-lock.json ./ RUN npm ci FROM base AS builder WORKDIR /app COPY /app/node_modules ./node_modules COPY . . RUN npm run build && npm cache clean --force FROM base AS runner WORKDIR /app RUN addgroup --system --gid 1001 nodejs RUN adduser --system --uid 1001 nuxt COPY /app . USER nuxt EXPOSE 3000 ENV PORT 3000 CMD ["npm", "run", "start"]
The Dockerfile above provides the minimum requirements to run the Nuxt application. You can easily extend it depending on your needs.
To build and push the Docker image to a registry and deploy it on Koyeb, refer to the Deploy an app from a Docker image documentation.