A minimal Svelte app powered by the SvelteKit meta-framework, with content being served from Garchi CMS.
- 💡 For demonstration purposes, this template assumes that you have a Garchi Headless Web page with the slug
/home
, and a single Section calledHeader
that takes two string properties;title
andsubtitle
. src/routes/+page.svelte
demonstrates displaying a page from Garchi CMS. Page details are passed into the HTML<head>
element for SEO, and all page sections are rendered as Svelte components.src/routes/+page.server.ts
demonstrates how to fetch a page from the Garchi CMS API.src/components/garchi/...
should contain a Svelte component for each section type that you have in your Garchi CMS project. These will be imported dynamically bysrc/components/GarchiComponent.svelte
, based on the section name that you chose inside Garchi CMS.src/app.html
includes a special Garchi CMS script that enables the live page preview feature.
- The Garchi API key is imported as a private environment variable, which prevents you from accidentally leaking your API keys.
- Likewise, the Garchi API client code is also implemented as a server-only lib module, at
src/lib/server/garchi.ts
.
To build on top of this template, first clone or download this repository to your machine.
Next, copy the contents of the .env.example
file into a new file called .env
. Replace the GARCHI_API_KEY
variable with your Garchi CMS key, and GARCHI_SPACE_UID
with the Space UID of the space you want to fetch pages from.
From the command line, first install dependencies with npm install
. Then to start a development server:
npm run dev
# or, start the server and open the app in a new browser tab
npm run dev -- --open
To create a production version of your app:
npm run build
You can preview the production build with npm run preview
.
To deploy your app, you may need to install an adapter for your target environment.