DEV Community

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

Posted on

Deploy a Static Sveltekit site to Railway

Sveltekit is a framework for building websites. Railway is a platform for hosting web apps. This guide shows you how to host a static Sveltekit site on Railway.

Prerequisites

  • Railway Account
  • Node.js

Create Sveltekit app

On your local machine, create a package.json file in your app folder.

{
    "scripts": {
        "dev": "vite dev",
        "build": "vite build",
        "preview": "vite preview"
    },
    "devDependencies": {
        "@sveltejs/adapter-static": "latest",
        "@sveltejs/kit": "latest",
        "@sveltejs/vite-plugin-svelte": "latest",
        "svelte": "latest",
        "vite": "latest"
    },
    "type": "module"
}
Enter fullscreen mode Exit fullscreen mode

Install the dependencies.

npm install
Enter fullscreen mode Exit fullscreen mode

Create a src/app.html file.

<head>%sveltekit.head%</head>
<body>%sveltekit.body%</body>
Enter fullscreen mode Exit fullscreen mode

Create a src/routes/+page.svelte file.

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

Create a src/routes/+layout.js file.

export const prerender = true;
Enter fullscreen mode Exit fullscreen mode

Create a svelte.config.js file:

import adapter from '@sveltejs/adapter-static';

/** @type {import('@sveltejs/kit').Config} */
const config = {
    kit: {
        adapter: adapter()
    }
};

export default config;
Enter fullscreen mode Exit fullscreen mode

Create a vite.config.js file:

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';

export default defineConfig({
    plugins: [sveltekit()]
});
Enter fullscreen mode Exit fullscreen mode

Run the development server.

npm run dev
Enter fullscreen mode Exit fullscreen mode

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

Build site

npm run build
Enter fullscreen mode Exit fullscreen mode

Sveltekit will produce a build folder containing your static site.

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 build folder to your Railway project.

cd build && railway link
Enter fullscreen mode Exit fullscreen mode

Deploy your app.

railway up --detach
Enter fullscreen mode Exit fullscreen mode

When the site is ready, generate a domain.

railway domain
Enter fullscreen mode Exit fullscreen mode

Update Site and Redeploy

Update home page, src/routes/+page.svelte:

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

Test update locally:

npm run dev
Enter fullscreen mode Exit fullscreen mode

Rebuild site:

npm run build
Enter fullscreen mode Exit fullscreen mode

Redeploy to Railway.

railway up --detach
Enter fullscreen mode Exit fullscreen mode
👋 While you are here

Reinvent your career. Join DEV.

It takes one minute and is worth it for your career.

Get started

Top comments (0)

Billboard image

Deploy and scale your apps on AWS and GCP with a world class developer experience

Coherence makes it easy to set up and maintain cloud infrastructure. Harness the extensibility, compliance and cost efficiency of the cloud.

Learn more

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

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

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay