In the world of web development, one year is almost a lifetime. So many things happen – APIs change with a blink of an eye, new frameworks come out, and for Svelte – SvelteKit 1.0 was finally released. SvelteKit is a so-called ‘meta-framework’. On top of Svelte, it provides tools, features, and opinions on how to organize your code for the client and the server. It also provides a router and all sorts of additional goodies to supercharge any web app.
SvelteKit projects can deliver blazing fast web-apps that support SEO out of the box. This blog aims to show you how to set up a fast, SEO-optimized landing page that allows users to install a PWA, optimized for performance by Lighthouse standards, utilizing SvelteKit and Ionic’s UI components made capable by ionic-svelte.
Step 1 – Let’s set up the Ionic SvelteKit project base project
Here we like to use the create command of the ionic-svelte repo as follows:
npm create ionic-svelte-app@latest ionic-sveltekit-ssr-demo
You’ll see a new Ionic-Kit project spun up with the configurations and integrations all set:
Under the hood, this runs SvelteKit’s create command and spawns npm commands to get Ionic’s goodies in the project. Next, some configurations are done in svelte.config.js, tsconfig.json and package.json. As a plus – we add Capacitor integration dependencies, so our app can use its plugin ecosystem as PWA, as well as deploy as an Android/iOS app.
This command also sets our adapter configuration to static, meaning we will publish using static hosting (HTML, JS, CSS plus assets on Firebase Hosting, etc.). So, we opt out of managing API REST endpoints via SvelteKit in the same codebase. If we need that, switch to adapter auto.
Next – we set up Tailwind to support the styling of the landing page. Here you can follow the guide from the Tailwind site or you can use the instructions on GitHub. I used the latter and tweaked a few settings and references:
npx svelte-add@latest tailwindcssWe also set up the service worker. We deviate from the seemingly simple explanation of the Vite PWA Kit plugin – it did not work for us in combination with Vercel. And for those who don’t know – service workers also help compensate for low connectivity and flaky connections – and even offline experience for those app parts that can be used offline. How we did it – see app.html, vite.config.js (in the repo linked below) and run the following command:
npm i -D workbox-window vite-plugin-pwaSteps 2 – Preparing routes and configure proper rendering patterns
Out of the box, we have Ionic loaded at the root route (see src/+layout.svelte) and ssr disabled for the whole app (see src/+layout.ts). We don’t want that, so we create a subroute for the PWA holding the Ionic UI goodies. And a subroute for the landing page:
- Create folder
appunder root route - Copy +layout.* and +page.* from root to that folder
- Change path to theme variables in route
/app/+layout.svelte(import '../../theme/variables.css';)
Then we configure ssr = true for the whole app, except the app routes:
In https://github.com/Tommertom/ionic-sveltekit-ssr-demo/blob/main/src/routes/%2Blayout.ts:
export const ssr = trueAnd in https://github.com/Tommertom/ionic-sveltekit-ssr-demo/blob/main/src/routes/app/%2Blayout.ts:
export const ssr = falseNext, we need to remove all Ionic references in the routes that have ssr = true:
+layout.svelte– remove everything except for theapp.postcss(tailwind integration) and<slot/>– we don’t want the Ionic setup routine at root level+page.svelte– remove all and replace with “Hello world!” – we’ll put the Landing page code here later
Now we have set up the proper web rendering patterns for each route: SSR for our landing page and SPA setup for the PWA, all in one code-base.
Oi, isto é um comentário.
Para iniciar a moderar, editar e excluir comentários, visite a tela Comentários no painel.
Os avatares dos comentaristas vêm do Gravatar.