---
slug: "svelte-build-ssr-app-docker-image"
title: "Creating a Docker Image for SSR with Svelte"
description: "Using SvelteKit, I will create a program that retrieves data from other API servers on the server-side, renders the HTML, and returns it. Additionally, I will package this program into a Docker image."
url: "https://www.ytyng.com/en/blog/svelte-build-ssr-app-docker-image"
publish_date: "2024-06-15T11:03:46Z"
created: "2024-06-15T11:03:46Z"
updated: "2026-02-27T11:52:50.598Z"
categories: ["Svelte"]
keywords: ""
featured_image_url: "https://media.ytyng.com/resize/20250611/7e9207938de441bf97bdc6674ff5c131.png.webp?width=768"
has_video: true
has_music: true
video_urls: ["https://media.ytyng.net/ytyng-blog/309/featured-video-1.mp4", "https://media.ytyng.net/ytyng-blog/309/featured-video-2.mp4", "https://media.ytyng.net/ytyng-blog/309/featured-video-3.mp4"]
music_urls: ["https://media.ytyng.net/ytyng-blog/309/featured-music-309-4.mp3", "https://media.ytyng.net/ytyng-blog/309/featured-music-309-5.mp3"]
lang: "en"
---
# Creating a Docker Image for SSR with Svelte
# Create a Server-Side SvelteKit Application, Fetch Data from an API Server, and Convert It to a Docker Image
In this guide, we will use SvelteKit to create a program that fetches data from another API server on the server side, renders HTML, and returns it. Finally, we will convert it into a Docker image.
## Setting Up Svelte
Refer to the official documentation: [Creating a Project](https://kit.svelte.jp/docs/creating-a-project)
```shell
npm create svelte@latest my-ssr-app
```
Select `Skeleton project`.
Select `Yes, using TypeScript syntax`.
Choose options as per your preference.
```
Next steps:
1: cd my-ssr-app
2: npm install
3: git init && git add -A && git commit -m "Initial commit" (optional)
4: npm run dev -- --open
```
Execute as instructed.
If you are using asdf, create a `.tool-versions` file.
```shell
echo 'nodejs 20.10.0' > my-ssr-app/.tool-versions
```
Test execution:
```shell
npm run dev -- --open
```
## Writing Code
Write files under the `src/routes` directory.
### Create `src/routes/+page.server.ts`
We will fetch dummy data from [JSON Placeholder](https://jsonplaceholder.typicode.com/).
#### `src/routes/+page.server.ts`
```ts
export async function load() {
const res = await fetch('https://jsonplaceholder.typicode.com/posts/1');
if (!res.ok) {
throw new Error('Failed to fetch data');
}
return {
postEntry: await res.json()
};
}
```
### Modify `src/routes/+page.svelte`
Use the data fetched on the server side.
#### `src/routes/+page.svelte`
```svelte
Post #1
{postEntry.title}
{postEntry.body}
```
## Confirm Operation
By viewing the generated HTML, you can confirm that SSR is functioning.
## Set Up Build Environment for Node
Refer to: [Node Adapter Documentation](https://kit.svelte.jp/docs/adapter-node)
```shell
npm i -D @sveltejs/adapter-node
```
Modify `svelte.config.js`:
```js
import adapter from '@sveltejs/adapter-auto';
```
to
```js
import adapter from '@sveltejs/adapter-node';
```
## Build
```shell
npm run build
```
## Confirm the Build
```shell
cd build
node ./
```
You should see:
```
Listening on 0.0.0.0:3000
```
Open http://127.0.0.1:3000 in your browser.
## Write the Dockerfile
### Dockerfile
```dockerfile
FROM node:bookworm-slim
COPY ./build /app
COPY ./package.json /app/
WORKDIR /app
EXPOSE 3000
CMD ["node", "./"]
```
## Build the Docker Image
```shell
docker build . -t my-ssr-app:latest
```
## Run the Docker Container
```shell
docker run -p 3000:3000 my-ssr-app
```
You should see:
```
Listening on 0.0.0.0:3000
```
Open http://127.0.0.1:3000 in your browser.
