DEV Community

Cover image for Deploy a Static Nuxt site to Railway
Mark Munyaka
Mark Munyaka

Posted on

Deploy a Static Nuxt site to Railway

#nuxt #railway #webdev

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
Enter fullscreen mode Exit fullscreen mode

Open my-app.

cd my-app
Enter fullscreen mode Exit fullscreen mode

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"
  }
}
Enter fullscreen mode Exit fullscreen mode

Install the dependencies.

npm install
Enter fullscreen mode Exit fullscreen mode

Create a app.vue file and add this:

<template>
<h1>Hello, World!</h1>
</template>
Enter fullscreen mode Exit fullscreen mode

Run the development server.

npm run dev
Enter fullscreen mode Exit fullscreen mode

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

lynx localhost:3000
Enter fullscreen mode Exit fullscreen mode

Build site

Stop your server and build your Nuxt site.

npm run generate
Enter fullscreen mode Exit fullscreen mode

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

Preview your site.

npm run preview
Enter fullscreen mode Exit fullscreen mode

Deploy to Railway

Install the Railway CLI tool:

npm i -g @railway/cli
Enter fullscreen mode Exit fullscreen mode

Login to your Railway account:

railway login --browserless
Enter fullscreen mode Exit fullscreen mode

Create a new Railway project:

railway init
Enter fullscreen mode Exit fullscreen mode

Link the dist folder to your Railway project.

Change working directory to dist.

cd dist
Enter fullscreen mode Exit fullscreen mode

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

railway link
Enter fullscreen mode Exit fullscreen mode

Deploy your app.

railway up --detach
Enter fullscreen mode Exit fullscreen mode

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

railway domain
Enter fullscreen mode Exit fullscreen mode

Update Site and Redeploy

Update home page, app.vue:

<template>
<h1>Hello World!</h1>
<p>Happy to be here</p>
</template>
Enter fullscreen mode Exit fullscreen mode

Test update locally:

npm run dev
Enter fullscreen mode Exit fullscreen mode

Rebuild site:

npm run generate
Enter fullscreen mode Exit fullscreen mode

Redeploy to Railway.

cd dist && railway up --detach
Enter fullscreen mode Exit fullscreen mode

Top comments (0)