DEV Community

Cover image for Svelte 3 - How to integrate with svelte routing

Svelte 3 - How to integrate with svelte routing

Luis Castillo on May 08, 2020

Hello everyone, as part of the quick post series that I am doing (If you haven't seen my previous post, you can check Quickstart with Svelte 3). S...
Collapse
 
mdsadman profile image
PsyKickSam (Sadman) • Edited

This is a nice tutorial, helped me a lot.

hydratable is now inside the compilerOptions section in svelte >= 3.0.0
below code might help


plugins: [
svelte({
preprocess: sveltePreprocess({ sourceMap: !production }),
compilerOptions: {
hydratable: true,
// enable run-time checks when not in production
dev: !production
}
}),

Collapse
 
kgim profile image
KGIM

by the way to remind, you can import sveltePreprocess from svelte-preprocess after installed

Collapse
 
kodertian profile image
kodertian

Nice tutorial! ... I was wondering how I could change the current page's title? The way I understand until now is that the title comes from the public located file index.html, but it would be nice to have a different title according to the current page.

Collapse
 
lukocastillo profile image
Luis Castillo

Good catch, definitely this is a great feature I will create a new post to explain how can we set a Title dynamically or if you already found a workaround I will be happy to see the implementation.

Collapse
 
serchavalos profile image
Sergio Avalos

As an update, it is not necessary to use a server.js file; only add the option --single to the script start like this:

"start": "sirv public --single --no-clear",
Enter fullscreen mode Exit fullscreen mode

This is from the documentation of sirv
npmjs.com/package/sirv-cli

Collapse
 
giorgosk profile image
Giorgos Kontopoulos 👀

Nice write up. Let me add to the discussion that there is another routing solution for svelte projects routify.dev/

Collapse
 
lukocastillo profile image
Luis Castillo

Wow, I didn't know this library but looks very good. I saw the guide and the documentation and seems pretty easy to implement and also has nice features as goto, params, and more.

Thank you for share this new solution. 😃

Collapse
 
alanxtreme profile image
Alan Daniel

by the time.. is routify better?

Collapse
 
arunkumartdr profile image
Arun Kumar

If you are hosting in a LAMP server use this trick

craete a .htaccess file in root folder with below code

FallBackResource index.html

this will work if your using the build output using this command

npm run build

also remember to use this code in your App.svelte file : Click Here

Collapse
 
radiomiskovice profile image
Jindřich Vavruška • Edited

Hello, the Link pattern is easy, but how could I redirect to another route as a result of an action?
My scenario:

  • current route is a page to create a new record (in a database) or to login, via REST API
    • in case of failure, I would stay on the same page, so no problem;
    • however, in case of success, I want to switch to another route - either default homepage, or list of database records.

How can I invoke the link/route from typescript?

Collapse
 
radiomiskovice profile image
Jindřich Vavruška

I found it ;-)
navigate()

Collapse
 
silviuiordache profile image
SilviuIordache

For people getting console errors about hydratable, notice that the correct syntax in main.js is not: "hydrate: true", like in the blog post, but "hydratable: true"

Collapse
 
joaocesar profile image
João César de Lima

My svelte app can finally reload pages! Thanks a lot!!!

Collapse
 
lukocastillo profile image
Luis Castillo

Amazing!!!, also if you want to connect your app with Rest services, this link can help you.

dev.to/lukocastillo/svelte-3-how-t...

Collapse
 
livetexon profile image
LiveTeXon

Where i need to put the server.js file?