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
Top comments (0)