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


This content originally appeared on DEV Community and was authored by Mark Munyaka

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

Install the dependencies.

npm install

Create a src/app.html file.

<head>%sveltekit.head%</head>
<body>%sveltekit.body%</body>

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

<h1>Hello, World!</h1>

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

export const prerender = true;

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;

Create a vite.config.js file:

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

export default defineConfig({
    plugins: [sveltekit()]
});

Run the development server.

npm run dev

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

Build site

npm run build

Sveltekit will produce a build folder containing your static site.

Deploy to Railway

Install the Railway CLI tool:

npm i -g @railway/cli

Login to your Railway account:

railway login --browserless

Create a new Railway project:

railway init

Link the build folder to your Railway project.

cd build && railway link

Deploy your app.

railway up --detach

When the site is ready, generate a domain.

railway domain

Update Site and Redeploy

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

<h1>Hello World!</h1>
<p>Happy to be here</p>

Test update locally:

npm run dev

Rebuild site:

npm run build

Redeploy to Railway.

railway up --detach


This content originally appeared on DEV Community and was authored by Mark Munyaka


Print Share Comment Cite Upload Translate Updates
APA

Mark Munyaka | Sciencx (2024-10-22T09:11:27+00:00) Deploy a Static Sveltekit site to Railway. Retrieved from https://www.scien.cx/2024/10/22/deploy-a-static-sveltekit-site-to-railway/

MLA
" » Deploy a Static Sveltekit site to Railway." Mark Munyaka | Sciencx - Tuesday October 22, 2024, https://www.scien.cx/2024/10/22/deploy-a-static-sveltekit-site-to-railway/
HARVARD
Mark Munyaka | Sciencx Tuesday October 22, 2024 » Deploy a Static Sveltekit site to Railway., viewed ,<https://www.scien.cx/2024/10/22/deploy-a-static-sveltekit-site-to-railway/>
VANCOUVER
Mark Munyaka | Sciencx - » Deploy a Static Sveltekit site to Railway. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/10/22/deploy-a-static-sveltekit-site-to-railway/
CHICAGO
" » Deploy a Static Sveltekit site to Railway." Mark Munyaka | Sciencx - Accessed . https://www.scien.cx/2024/10/22/deploy-a-static-sveltekit-site-to-railway/
IEEE
" » Deploy a Static Sveltekit site to Railway." Mark Munyaka | Sciencx [Online]. Available: https://www.scien.cx/2024/10/22/deploy-a-static-sveltekit-site-to-railway/. [Accessed: ]
rf:citation
» Deploy a Static Sveltekit site to Railway | Mark Munyaka | Sciencx | https://www.scien.cx/2024/10/22/deploy-a-static-sveltekit-site-to-railway/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.