Svelte: consume the API

npx sv create todofrontendcd todofrontendnpm installnpm run dev

npm uninstall @sveltejs/adapter-autonpm install -D @sveltejs/adapter-static

import adapter from "@sveltejs/adapter-static";import { sveltekit } from "@sveltejs/kit/vite";import { defineConfig } from "vite"; export default defineConfig({  plugins: [    sveltekit({      compilerOptions: {        // Force runes mode for the project, except for libraries. Can be removed in svelte 6.        runes: ({ filename }) =>          filename.split(/[/\\]/).includes("node_modules") ? undefined : true,      },       // Static output: every route is served by the same index.html and      // rendered in the browser (see src/routes/+layout.js).      adapter: adapter({ fallback: "index.html" }),    }),  ],});

// Render everything in the browser: the build is a static site with no server.export const ssr = false;

VITE_API_URL=https://api-production-da990.up.railway.app

import { defineEnvVars } from "@sveltejs/kit/env"; export const variables = defineEnvVars({  // The origin of the Todos API, with no path and no trailing slash.  // public: true makes it importable in browser code; static: true inlines  // the build-time value, which a static site needs.  VITE_API_URL: {    public: true,    static: true,    schema: (value) => value || "http://localhost:8080",  },});

import { VITE_API_URL as API } from "$app/env/public"; const headers = { "Content-Type": "application/json" }; // `fetch` is passed in so load functions can use SvelteKit's fetchexport async function getTodos(fetch = globalThis.fetch) {  const response = await fetch(`${API}/todos`);  if (!response.ok) throw new Error(`GET ${API}/todos failed: ${response.status}`);  return response.json();} export function createTodo(todo) {  return fetch(`${API}/todos`, { method: "POST", headers, body: JSON.stringify(todo) });} export function updateTodo(id, todo) {  return fetch(`${API}/todos/${id}`, { method: "PUT", headers, body: JSON.stringify(todo) });} export function deleteTodo(id) {  return fetch(`${API}/todos/${id}`, { method: "DELETE" });}

src/routes/├─ +layout.js              ssr = false (from the step above)├─ +layout.svelte          shared header and "new todo" button├─ +page.js                loads the list├─ +page.svelte            /            all posts├─ post/[id]/+page.svelte  /post/:id    one post├─ new/+page.svelte        /new         create form└─ edit/[id]/+page.svelte  /edit/:id    edit form

<script>  let { children } = $props();</script> <div class="app">  <h1>Our Todos</h1>  <a href="/new"><button>Make New Todo</button></a>  <main>    {@render children()}  </main></div> <style>  .app {    text-align: center;  }</style>

import { getTodos } from "#lib/api.js"; export async function load({ fetch }) {  return { todos: await getTodos(fetch) };}

export { load } from "../../+page.js";

<script>  let { data } = $props(); // { todos } from +page.js</script> <div>  {#each data.todos as todo (todo.id)}    <article>      <a href="/post/{todo.id}"><h1>{todo.subject}</h1></a>      <h2>{todo.details}</h2>    </article>  {/each}</div>

<script>  import { page } from "$app/state";   let { data } = $props();  const post = $derived(data.todos.find((p) => String(p.id) === page.params.id));</script> {#if post}  <div>    <h1>{post.subject}</h1>    <h2>{post.details}</h2>    <a href="/"><button>Back to Main</button></a>  </div>{:else}  <p>Not found.</p>{/if}

<script>  let { initial = { subject: "", details: "" }, buttonLabel = "Create Todo", onsave } = $props();   let subject = $state(initial.subject);  let details = $state(initial.details);   async function handleSubmit(event) {    event.preventDefault();    await onsave({ subject, details });  }</script> <form onsubmit={handleSubmit}>  <input type="text" placeholder="subject" bind:value={subject} />  <input type="text" placeholder="details" bind:value={details} />  <input type="submit" value={buttonLabel} /></form>

<script>  import { goto } from "$app/navigation";  import { createTodo } from "#lib/api.js";  import TodoForm from "#lib/TodoForm.svelte";   async function save(todo) {    await createTodo(todo);    await goto("/", { refreshAll: true });  }</script> <TodoForm onsave={save} />

<script>  import { goto } from "$app/navigation";  import { page } from "$app/state";  import { updateTodo } from "#lib/api.js";  import TodoForm from "#lib/TodoForm.svelte";   let { data } = $props();  const post = $derived(data.todos.find((p) => String(p.id) === page.params.id));   async function save(todo) {    await updateTodo(post.id, todo);    await goto("/", { refreshAll: true });  }</script> {#if post}  <TodoForm initial={post} buttonLabel="Edit Todo" onsave={save} />{:else}  <p>Not found.</p>{/if}

<a href="/edit/{post.id}"><button>Edit the Todo</button></a>

<script>  import { goto } from "$app/navigation";  import { page } from "$app/state";  import { deleteTodo } from "#lib/api.js";   let { data } = $props();  const post = $derived(data.todos.find((p) => String(p.id) === page.params.id));   async function remove() {    await deleteTodo(post.id);    await goto("/", { refreshAll: true });  }</script> {#if post}  <div>    <h1>{post.subject}</h1>    <h2>{post.details}</h2>    <a href="/"><button>Back to Main</button></a>    <a href="/edit/{post.id}"><button>Edit the Todo</button></a>    <button onclick={remove}>Delete Todo</button>  </div>{:else}  <p>Not found.</p>{/if}