Encodera

Thanks for reading!

Donate to the site — we work hard for you.

Contents

Building and deploying

The npm run dev server is convenient, but it is slow and not meant for visitors. Before publishing, the app is built: Nuxt minifies the code, lays out the files and prepares a Nitro server that starts with one command. Where the site will run is decided by a preset, a set of build settings for a particular hosting platform.

Building

npm run build

The command runs nuxt build and after a few seconds prints the file sizes and a hint on how to run the result. Everything built is in the .output/ folder:

.output/
├── public/        files for the browser: scripts, styles, images
├── server/
│   └── index.mjs  the Nitro server
└── nitro.json

The folder is self-contained: it does not need node_modules to run.

Checking before publishing

npm run preview

The command runs the built version at http://localhost:3000. Check the pages, forms and login: this is how the site will work on the server.

Running on your own server

Copy the .output/ folder to a server with Node.js 20 or newer and run:

NUXT_ADMIN_PASSWORD=secret123 NUXT_SESSION_PASSWORD=a-key-at-least-32-characters-long PORT=3000 node .output/server/index.mjs

The server starts accepting requests on the port from the PORT variable. The .env file is not read here, so all settings are passed as environment variables. To restart the server after a crash, it is usually run through a process manager such as PM2, or in a Docker container.

Nitro presets

By default the build prepares a server for Node.js (the node-server preset). Cloud platforms need another format, which is set with a preset:

// nuxt.config.ts
export default defineNuxtConfig({
  nitro: {
    preset: 'netlify'
  }
})
PresetWhere to
node-serverYour own server or a VPS with Node.js
vercelVercel
netlifyNetlify
cloudflare-pagesCloudflare Pages
staticAny static hosting

On Vercel and Netlify the preset is usually detected automatically: connect the repository and the platform runs npm run build. A preset can also be set with an environment variable at build time: NITRO_PRESET=vercel.

A static site

npm run generate

The command builds the HTML of all pages in advance into .output/public/. You can upload this folder to any static file hosting. There are no server handlers then, so the blog API and the form will not work.

Common mistake

Keeping data on the server disk when the site is deployed to a serverless platform like Vercel or Netlify. The server there has no persistent disk: files in .data/ disappear, and posts keep vanishing. For such platforms connect the useStorage storage to an external service (Redis, the platform's own storage) or use an external database.

Thanks for reading!

Donate to the site — we work hard for you.