DEV Community

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

Posted on

1

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
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

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay