Logo

dev-resources.site

for different kinds of informations.

Deploy a Static Sveltekit site to Railway

Published at
10/22/2024
Categories
railway
sveltekit
devops
Author
markmunyaka
Categories
3 categories in total
railway
open
sveltekit
open
devops
open
Author
11 person written this
markmunyaka
open
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
sveltekit Article's
30 articles in total
Favicon
Optimize SvelteKit performance with brotli compression
Favicon
SvelteKit VS Astro. laidback side by side
Favicon
Integrating SvelteKit with Storyblok (Using Svelte 5)
Favicon
Make EditorJS work in Svelte(kit) SSR
Favicon
Why Svelte?
Favicon
Nosecone: a library for setting security headers in Next.js, SvelteKit, Node.js, Bun, and Deno
Favicon
Building AI-Powered Apps with SvelteKit: Managing HTTP Streams from Ollama Server
Favicon
NgSysV2-3.4: A Serious Svelte InfoSys: Rules-friendly version
Favicon
NgSysV2-3.3: A Serious Svelte InfoSys: Firebase D/b rules and Login
Favicon
NgSysV2-3.6: A Serious Svelte InfoSys: Deploying to the Google Cloud
Favicon
NgSysV2-3.5: A Serious Svelte InfoSys: Client-Server Version
Favicon
NgSysV2-4.2: SEO (Search Engine Optimisation)
Favicon
NgSysV2-4.3: Automated Svelte Pre-render Builds
Favicon
NgSysV2-4.4: Responsive/Adaptive Design
Favicon
Deploy a Static Sveltekit site to Railway
Favicon
Why You Should Avoid Using `try...catch` in SvelteKit Actions
Favicon
How to integrate shadcn-svelte into the editable.website template
Favicon
PostgreSQL Full Text Search Rank by Position
Favicon
How to Build a Content-Driven Static Site with Markdown, SvelteKit and Fusionable
Favicon
Interview with Prabhu Kiran Konda, Creator of Snail AI!
Favicon
"Helper" Varaibles in Svelte 5
Favicon
Experiences and Caveats of Svelte 5 Migration
Favicon
Running a Function When an #await Block resolves in Svelte(Kit)
Favicon
SanS-UI v0.0.1 Quick Start!
Favicon
Introduction to Svelte: Features and Benefits of the Modern JavaScript Framework
Favicon
Sveltekit + TypeScript + TypeORM + ESM
Favicon
Svelte 5 is out!!!
Favicon
SanS-UI Released v0.0.1
Favicon
How to Integrate Passkeys into SvelteKit
Favicon
AWS Amplify (Gen2) with SvelteKit: authentication on SSR

Featured ones: