Deploy a Nuxt App

Nuxt is a Vue.js framework that makes web development intuitive and powerful. You can create performant and production-grade full-stack web apps and websites with confidence.

Nuxt is known as The Intuitive Vue Framework because it simplifies building Vue.js applications with features like server-side rendering and easy routing.

This guide covers how to deploy a Nuxt app to Railway in four ways:

One-click deploy from a template.
From a GitHub repository.
Using the CLI.
Using a Dockerfile.

Now, let's create a Nuxt app!

Create a Nuxt App

Note: If you already have a Nuxt app locally or on GitHub, you can skip this step and go straight to the Deploy Nuxt App on Railway.

To create a new Nuxt app, ensure that you have Node installed on your machine.

Run the following command in your terminal to create a new Nuxt app:

npx nuxi@latest init helloworld

A new Nuxt app will be provisioned for you in the helloworld directory.

Run the Nuxt App locally

Next, cd into the directory and start the development server by running the following command:

npm run dev

Open your browser and go to http://localhost:3000 to see your app.

Deploy the Nuxt App to Railway

Railway offers multiple ways to deploy your Nuxt app, depending on your setup and preference.

One-Click Deploy from a Template

If you’re looking for the fastest way to get started, the one-click deploy option is ideal.

Click the button below to begin:

We highly recommend that you eject from the template after deployment to create a copy of the repo on your GitHub account.

Note: You can also choose from a variety of Nuxt app templates created by the community.

Deploy from the CLI

Install the Railway CLI:
- Install the CLI and authenticate it using your Railway account.
Initialize a Railway Project:
- Run the command below in your Vue app directory.
```
railway init
```
- Follow the prompts to name your project.
- After the project is created, click the provided link to view it in your browser.

Modify Package.json Config:

By default, Nuxt doesn't add a start script in the package.json file. We'll need to add that to instruct Railway on how to run our app.
Add "start":"node .output/server/index.mjs" to the package.json file.

package.json

{
    "name": "nuxt-app",
    "private": true,
    "type": "module",
    "scripts": {
        "build": "nuxt build",
        "dev": "nuxt dev",
        "start": "node .output/server/index.mjs",
        "generate": "nuxt generate",
        "preview": "nuxt preview",
        "postinstall": "nuxt prepare"
    },
    "dependencies": {
        "nuxt": "^3.13.0",
        "vue": "latest",
        "vue-router": "latest"
    }
}

Note: Railway uses Nixpacks to build and deploy your code with zero configuration. The Nixpack Node provider will pick up the start script in the package.json file and use it to serve the app.

Deploy the Application:
- Use the command below to deploy your app:
```
railway up
```
- This command will scan, compress and upload your app's files to Railway. You’ll see real-time deployment logs in your terminal.
- Once the deployment completes, go to View logs to check if the service is running successfully.
Set Up a Public URL:
- Navigate to the Networking section under the Settings tab of your new service.
- Click Generate Domain to create a public URL for your app.

Deploy from a GitHub Repo

To deploy a Nuxt app to Railway directly from GitHub, follow the steps below:

Create a New Project on Railway:
- Go to Railway to create a new project.
Modify Package.json Config:
- Follow step 3 mentioned in the CLI guide
Deploy from GitHub:
- Select Deploy from GitHub repo and choose your repository.
  - If your Railway account isn’t linked to GitHub yet, you’ll be prompted to do so.
Deploy the App:
- Click Deploy to start the deployment process.
- Once the deployed, a Railway service will be created for your app, but it won’t be publicly accessible by default.
Verify the Deployment:
- Once the deployment completes, go to View logs to check if the server is running successfully.
Set Up a Public URL:
- Navigate to the Networking section under the Settings tab of your new service.
- Click Generate Domain to create a public URL for your app.

Use a Dockerfile

Create a Dockerfile in the helloworld or Nuxt app's root directory.

Add the content below to the Dockerfile:

# Use the Node alpine official image
# https://hub.docker.com/_/node
FROM node:lts-alpine AS build

# Create and change to the app directory.
WORKDIR /app

# Copy the files to the container image
COPY package*.json ./

# Install packages
RUN npm ci

# Copy local code to the container image.
COPY . ./

# Build the app.
RUN npm run build

# Copy files to the container image.
COPY --from=build /app ./

# Serve the app
CMD ["npm", "run", "start"]