Skip to content

Commit 6f524f3

Browse files
cotyhamiltoncotyhamilton
authored
Update SvelteKit project and dependencies (#8)
1 parent 6ab0b10 commit 6f524f3

File tree

16 files changed

+1059
-1014
lines changed

16 files changed

+1059
-1014
lines changed

‎.dockerignore‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
**
2+
3+
!/src/**
4+
!/static/**
5+
!/.npmrc
6+
!/deno.json
7+
!/deno.lock
8+
!/package.json
9+
!/postcss.config.js
10+
!/svelte.config.js
11+
!/tailwind.config.ts
12+
!/tsconfig.json
13+
!/vite.config.ts

‎.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ node_modules
33
# Output
44
.output
55
.vercel
6+
.netlify
7+
.wrangler
68
/.svelte-kit
79
/build
810

‎Dockerfile‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
# denoland/deno:ubuntu might be required for some builds
2+
FROM denoland/deno:alpine AS build
3+
WORKDIR /app
4+
COPY package.json deno.* ./
5+
RUN deno install
6+
COPY . .
7+
RUN deno task build
8+
9+
FROM denoland/deno:alpine AS runtime
10+
ARG PORT=3000
11+
ENV PORT=$PORT
12+
EXPOSE $PORT
13+
COPY --chown=deno:deno --from=build /app/build /home/deno
14+
WORKDIR /home/deno
15+
USER deno
16+
CMD ["sh", "-c", "deno run -E -N=0.0.0.0:$PORT -R=/home/deno index.js"]

‎README.md‎

Lines changed: 23 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,23 @@
11
# deno sveltekit
22

3+
This repo used to serve as a proof of concept and documentation for any custom
4+
requirements for running sveltekit with deno. There are no longer any major
5+
issues, and you may just follow the prompts of the `sv` cli to create a new
6+
project.
7+
38
## create project
49

510
```bash
611
deno run -A npm:sv@latest create my-app
7-
cd my-app
8-
deno install
9-
deno fmt
10-
deno add --dev npm:@types/deno npm:@sveltejs/adapter-node
11-
deno remove @sveltejs/adapter-auto
1212
```
1313

14-
Update `svelte.config.js`
14+
In the tools prompt select `sveltekit-adapter` and either `node` or `static`
15+
16+
For package manager select `deno`
1517

16-
```diff
17-
- import adapter from "@sveltejs/adapter-auto";
18-
+ import adapter from "@sveltejs/adapter-node";
18+
```bash
19+
cd my-app
20+
deno install
1921
```
2022

2123
## develop
@@ -50,6 +52,18 @@ Run production server
5052
deno run -REN build/index.js
5153
```
5254

55+
## docker
56+
57+
There is a basic `Dockerfile` included in the repo.
58+
59+
```bash
60+
docker build -t my-app .
61+
docker run -p 3000:3000 my-app
62+
63+
# or for a custom port
64+
docker run --env PORT=5001 -p 5001:5001 my-app
65+
```
66+
5367
## deploy
5468

5569
Create project on [deno deploy](https://dash.deno.com/projects) and link repo

‎deno.lock‎

Lines changed: 181 additions & 164 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,25 @@
11
{
2-
"name": "deno-svelte",
2+
"name": "my-app",
3+
"private": true,
34
"version": "0.0.1",
45
"type": "module",
56
"scripts": {
67
"dev": "vite dev",
78
"build": "vite build",
89
"preview": "vite preview",
10+
"prepare": "svelte-kit sync || echo ''",
911
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
1012
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
1113
},
1214
"devDependencies": {
1315
"@fontsource/fira-mono": "^5.0.0",
1416
"@neoconfetti/svelte": "^2.0.0",
1517
"@sveltejs/adapter-node": "^5.2.12",
16-
"@sveltejs/kit": "^2.0.0",
17-
"@sveltejs/vite-plugin-svelte": "^4.0.0",
18-
"@types/deno": "^2.0.0",
19-
"svelte": "^5.0.0",
18+
"@sveltejs/kit": "^2.16.0",
19+
"@sveltejs/vite-plugin-svelte": "^5.0.0",
20+
"svelte": "^5.25.0",
2021
"svelte-check": "^4.0.0",
2122
"typescript": "^5.0.0",
22-
"vite": "^5.0.3"
23+
"vite": "^6.2.5"
2324
}
2425
}

‎src/lib/images/github.svg‎

Lines changed: 1 addition & 16 deletions
Loading

‎src/routes/+layout.svelte‎

Lines changed: 49 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,58 @@
11
<script lang="ts">
2-
import Header from './Header.svelte';
3-
import '../app.css';
2+
import Header from "./Header.svelte";
3+
import "../app.css";
44
5-
let { children } = $props();
5+
let { children } = $props();
66
</script>
77

88
<div class="app">
9-
<Header />
10-
11-
<main>
12-
{@render children()}
13-
</main>
14-
15-
<footer>
16-
<p>
17-
visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to learn about SvelteKit
18-
</p>
19-
</footer>
9+
<Header />
10+
11+
<main>
12+
{@render children()}
13+
</main>
14+
15+
<footer>
16+
<p>
17+
visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to
18+
learn about SvelteKit
19+
</p>
20+
</footer>
2021
</div>
2122

2223
<style>
23-
.app {
24-
display: flex;
25-
flex-direction: column;
26-
min-height: 100vh;
27-
}
28-
29-
main {
30-
flex: 1;
31-
display: flex;
32-
flex-direction: column;
33-
padding: 1rem;
34-
width: 100%;
35-
max-width: 64rem;
36-
margin: 0 auto;
37-
box-sizing: border-box;
38-
}
39-
40-
footer {
41-
display: flex;
42-
flex-direction: column;
43-
justify-content: center;
44-
align-items: center;
45-
padding: 12px;
46-
}
47-
48-
footer a {
49-
font-weight: bold;
50-
}
51-
52-
@media (min-width: 480px) {
53-
footer {
54-
padding: 12px 0;
55-
}
56-
}
24+
.app {
25+
display: flex;
26+
flex-direction: column;
27+
min-height: 100vh;
28+
}
29+
30+
main {
31+
flex: 1;
32+
display: flex;
33+
flex-direction: column;
34+
padding: 1rem;
35+
width: 100%;
36+
max-width: 64rem;
37+
margin: 0 auto;
38+
box-sizing: border-box;
39+
}
40+
41+
footer {
42+
display: flex;
43+
flex-direction: column;
44+
justify-content: center;
45+
align-items: center;
46+
padding: 12px;
47+
}
48+
49+
footer a {
50+
font-weight: bold;
51+
}
52+
53+
@media (min-width: 480px) {
54+
footer {
55+
padding: 12px 0;
56+
}
57+
}
5758
</style>

‎src/routes/+page.svelte‎

Lines changed: 48 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,59 @@
11
<script lang="ts">
2-
import Counter from './Counter.svelte';
3-
import welcome from '$lib/images/svelte-welcome.webp';
4-
import welcomeFallback from '$lib/images/svelte-welcome.png';
2+
import Counter from "./Counter.svelte";
3+
import welcome from "$lib/images/svelte-welcome.webp";
4+
import welcomeFallback from "$lib/images/svelte-welcome.png";
55
</script>
66

77
<svelte:head>
8-
<title>Home</title>
9-
<meta name="description" content="Svelte demo app" />
8+
<title>Home</title>
9+
<meta name="description" content="Svelte demo app" />
1010
</svelte:head>
1111

1212
<section>
13-
<h1>
14-
<span class="welcome">
15-
<picture>
16-
<source srcset={welcome} type="image/webp" />
17-
<img src={welcomeFallback} alt="Welcome" />
18-
</picture>
19-
</span>
20-
21-
to your new<br />SvelteKit app
22-
</h1>
23-
24-
<h2>
25-
try editing <strong>src/routes/+page.svelte</strong>
26-
</h2>
27-
28-
<Counter />
13+
<h1>
14+
<span class="welcome">
15+
<picture>
16+
<source srcset={welcome} type="image/webp" />
17+
<img src={welcomeFallback} alt="Welcome" />
18+
</picture>
19+
</span>
20+
21+
to your new<br />SvelteKit app
22+
</h1>
23+
24+
<h2>
25+
try editing <strong>src/routes/+page.svelte</strong>
26+
</h2>
27+
28+
<Counter />
2929
</section>
3030

3131
<style>
32-
section {
33-
display: flex;
34-
flex-direction: column;
35-
justify-content: center;
36-
align-items: center;
37-
flex: 0.6;
38-
}
39-
40-
h1 {
41-
width: 100%;
42-
}
43-
44-
.welcome {
45-
display: block;
46-
position: relative;
47-
width: 100%;
48-
height: 0;
49-
padding: 0 0 calc(100% * 495 / 2048) 0;
50-
}
51-
52-
.welcome img {
53-
position: absolute;
54-
width: 100%;
55-
height: 100%;
56-
top: 0;
57-
display: block;
58-
}
32+
section {
33+
display: flex;
34+
flex-direction: column;
35+
justify-content: center;
36+
align-items: center;
37+
flex: 0.6;
38+
}
39+
40+
h1 {
41+
width: 100%;
42+
}
43+
44+
.welcome {
45+
display: block;
46+
position: relative;
47+
width: 100%;
48+
height: 0;
49+
padding: 0 0 calc(100% * 495 / 2048) 0;
50+
}
51+
52+
.welcome img {
53+
position: absolute;
54+
width: 100%;
55+
height: 100%;
56+
top: 0;
57+
display: block;
58+
}
5959
</style>

0 commit comments

Comments
 (0)