SvelteKit is a relatively new SSR framework for SvelteJS. We can compare it to NextJS, but instead of using React, it uses Svelte. In this tutorial, you'll learn how you can create a blog website with SvelteKit and Strapi as a CMS.
Hi
I’m trying to follow this tutorial but I get this error:
npm ERR! 404 ‘create-strapi-project@latest’ is not in the npm registry.
I went to npmjs.org to check and it doesn’t seem tot be there. Am I missing something stupidly simple?
Thanks
Use npx create-strapi-app instead of npx create-strapi-project.
Hope it helps.
Juslin’s answer worked for me. Maybe I should do a pull request to update the documentation.
ah! thank you! I’ll try it!
When I get to the part where I restart the server and go to:
http://localhost:3000/posts
I get an error:
Error: Cannot find module ‘tailwindcss’
Require stack:
Anyone have any ideas ?
I compared with the github rep & it all looks fine up to this stage.
TIA, Dave
You have to run again npm install
In this sveltekit blog example, the app is unable to display images that are uploaded to the strapi media library. What is the best way to do this?
JohnSal could you provide me with a bit more context?
Best tutorial I’ve seen for SvelteKit in a long time. Thank you !
My apologies if that was a little vague. From the svelte front-end created, what is the best way to reference/display media that has been uploaded via to the strapi cms?
@JohnSal by default relations are not populated. To tell strapi it should also populate relations such as media you can attach query string information to your strapi query route such as http://strapidomain:1337/api/type?populate=namedrelation
Example for employees with photo media(this is for typescript, but its similar to javascript):
in src/routes/api/employees.json.ts
what i like is to have the return value (in this example .json. in the Endpoint filename => endpoint.json.ts)
import type {EndpointOutput} from '@sveltejs/kit'
export async function get(): Promise<EndpointOutput> {
const res = await fetch('http://localhost:1337/api/employees?populate=Photo')
const data = await res.json()
return {body: data}
}
With this procedure you will receive 4 types of image URLs => ‘large, small, medium and thumbnail’.
To populate all relations one could use wildcard * in query string
const res = await fetch('http://localhost:1337/api/employees?populate=*')
ps.: @Strapi-Team, please expand your posts example data with such media image relation.
Kind regards,
Raphael
Hi
I’m trying to follow this tutorial but I get this errors
proxy.js:15 [HMR][Svelte] Unrecoverable error in <Index>: next update will trigger a full reload
logError @ proxy.js:15
Proxy<Index> @ proxy.js:377
create_if_block_2 @ root.svelte? [sm]:38
create_default_slot @ root.svelte? [sm]:37
create_slot @ index.mjs:69
create_fragment @ __layout.svelte? [sm]:2
init @ index.mjs:1824
_layout @ __layout.svelte? [sm]:2
createProxiedComponent @ svelte-hooks.js:266
ProxyComponent @ proxy.js:239
Proxy<__layout> @ proxy.js:346
create_fragment @ root.svelte? [sm]:36
init @ index.mjs:1824
Root @ root.svelte? [sm]:16
createProxiedComponent @ svelte-hooks.js:266
ProxyComponent @ proxy.js:239
Proxy<Root> @ proxy.js:346
_init @ start.js:757
start @ start.js:592
await in start (async)
start @ start.js:1213
(anonymous) @ (index):16
index.mjs:1995 Uncaught (in promise) Error: {#each} only iterates over array-like objects.
at validate_each_argument (index.mjs:1995)
at create_fragment (index.svelte? [sm]:24)
at init (index.mjs:1824)
at new Routes (index.svelte? [sm]:25)
at createProxiedComponent (svelte-hooks.js:266)
at new ProxyComponent (proxy.js:239)
at new Proxy<Index> (proxy.js:346)
at create_if_block_2 (root.svelte? [sm]:38)
at Array.create_default_slot (root.svelte? [sm]:37)
at create_slot (index.mjs:69)
validate_each_argument @ index.mjs:1995
create_fragment @ index.svelte? [sm]:24
init @ index.mjs:1824
Routes @ index.svelte? [sm]:25
createProxiedComponent @ svelte-hooks.js:266
ProxyComponent @ proxy.js:239
Proxy<Index> @ proxy.js:346
create_if_block_2 @ root.svelte? [sm]:38
create_default_slot @ root.svelte? [sm]:37
create_slot @ index.mjs:69
create_fragment @ __layout.svelte? [sm]:2
init @ index.mjs:1824
_layout @ __layout.svelte? [sm]:2
createProxiedComponent @ svelte-hooks.js:266
ProxyComponent @ proxy.js:239
Proxy<__layout> @ proxy.js:346
create_fragment @ root.svelte? [sm]:36
init @ index.mjs:1824
Root @ root.svelte? [sm]:16
createProxiedComponent @ svelte-hooks.js:266
ProxyComponent @ proxy.js:239
Proxy<Root> @ proxy.js:346
_init @ start.js:757
start @ start.js:592
await in start (async)
(anonymous) @ (index):16
client.ts:52 [vite] connected.
You will probably get an error like this… page in load functions has been replaced by url and params on page new.svelte and [slug].svelte if you use the latest version of Sveltekit.
new.svelte
Replace
page: {query}
by
url: {searchParams}
in your Load function.
[slug].svelte
Replace
page: {params}
by
params
Hi, im kind of new in strapi, i can make the app but how do i deploy it? i mean, i can have both the strapi and the sveltekit in the same project or i have to make them separately? or theres a method to use them concurrently? help please
Dear,
I have a problem to keep the login status. Even I make it enable in Users-Permissions => AUTH, USER (Sellect all for Authenticated and public)
I created Auth controller as like explained
Now, if we access
/auth/me, we get404 NotFoundError.
Like the
postroutes, Strapi doesn’t, by default, allow anyone to access this route either. So, let’s edit permissions like how we did earlier for theAuthenticatedrole.
Any idea what’s wrong?
Best regards,
Uno
Hello all,
I’m new to web development, and totally new to both Strapi and Svelte, so forgive me if the answer to my question should be obvious.
I’m encountering issues with the Fetch Blog Posts section, just before the Posts Page section. All of the non-relational data renders just fine, but the author is always undefined.
I read in this thread that querying http://strapidomain:1337/api/type?populate=* would solve the issue, but whether I use populate=* or populate=author, the author field is never fetched by the query. For this reason, I think the issue is on the Strapi side rather than the Svelte side.
I also tried restarting the tutorial, and even cloning Sheriff’s source code from GitHub and starting from there, yet nothing seems to fetch this author field.
I’ve triple-checked my Strapi configuration too. Users, permissions, posts, everything is as the tutorial states it should be. Would anyone happen to know where I’m going wrong?
Hi,
SvelteKit last update broke the tutorial: EndpointOutput is no longer typed.
Could you provide an update please ?
Hi all, at the step where importing …/app.css into __layout.svelte, my layout just breaks and nothing appears.
Am I importing incorrectly? I looked at the final source code and used that.
/*app.css*/
/* Write your global styles here, in PostCSS syntax */
@tailwind base;
@tailwind components;
@tailwind utilities;
/*__layout.svelte*/
<script lang="ts">
import '../app.css';
</script>
Page is showing blank and devtools is showing this
