Deploy a Static Nuxt site to Railway

Nuxt is a framework for building websites. It is based on Vue.js, a frontend JavaScript library. Railway is a platform for hosting web apps. This guide shows you how to host a static Nuxt site on Railway.

Prerequisites

• GitHub Account
• Railway Account
• Node.js

Create Nuxt app

On your local machine, create a new folder named my-app.

mkdir my-app

Open my-app.

cd my-app

Create a package.json file and add this:

{
  "scripts": {
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview"
  },
  "dependencies": {
    "nuxt": "^3.13.2",
    "vue": "latest"
  }
}

Install the dependencies.

npm install

Create a app.vue file and add this:

<template>
<h1>Hello, World!</h1>
</template>

Run the development server.

npm run dev

Visit http://localhost:3000 to view your site.

lynx localhost:3000

Build site

Stop your server and build your Nuxt site.

npm run generate

Nuxt will produce a dist folder containing the static site that you'll deploy.

Preview your site.

npm run preview

Deploy to Railway

Install the Railway CLI tool:

npm i -g @railway/cli

Login to your Railway account:

railway login --browserless

Create a new Railway project:

railway init

Link the dist folder to your Railway project.

Change working directory to dist.

cd dist

Link current directory, i.e. dist to your Railway project.

railway link

Deploy your app.

railway up --detach

When site is ready, generate a domain and test your deployment.

railway domain

Update Site and Redeploy

Update home page, app.vue:

<template>
<h1>Hello World!</h1>
<p>Happy to be here</p>
</template>

Test update locally:

npm run dev

Rebuild site:

npm run generate

Redeploy to Railway.

cd dist && railway up --detach