February 2023: See my other experiment as well with WordPress REST API, https://github.com/mandrasch/sveltekit-pico-headless-wp

Beware: This is not yet SvelteKit 1.0, needs updates/migration. sveltejs/kit#5774

Experimental learning project, connecting a SvelteKit-frontend (made with bootstrap5) to a WordPress backend via WPGraphQL-plugin. This is called a 'headless WordPress'-setup. It's work in progress.

• New goal: Use only open source plugins

• Status: 🚧 Work in progress, currently conversion to monorepo and experiment with carbon fields usage 🚧

• Live-Demo: mandrasch.github.io/sveltekit-wp-bs5/

• WordPress : WP-Backend (can later be hidden completely)

• 📺 Teaser-Video: https://www.youtube.com/watch?v=gqRaN8Bojv0 (ACF might be replaced with carbon fields or similiar)

First time install (see WordPress quickstart):

cd wp-backend/
ddev start && ddev exec wp core download && ddev launch

After installation, setup our child theme and graphql plugins (via WPCLI):

ddev wp theme activate twentytwentytwo-child
ddev wp plugin install --activate wp-graphql atlas-content-modeler
ddev wp plugin install --activate https://carbonfields.net/zip/latest/
ddev wp rewrite structure '/%postname%/'

• 👷‍♂️ TODO: https://github.com/matepaiva/wp-graphql-crb needs to be installed as well, right now only possible with composer?
• 👷‍♂️ TODO / decide: Use (classic editor) or use Gutenberg (rich, but complex?)? ddev wp plugin --activate classic-editor
• 👷‍♂️ TODO / decide: Use atlas-content-modeler (how can we store json for data model in git?) or cpt-ui (types generation can be exported to PHP? ddev wp plugin --activate custom-post-type-ui)

Afterwards you only need to run

ddev start

cd frontend/
npm install

.env.local already exists, just run

npm run dev

to start local development.

• Custom fields - https://carbonfields.net/? https://www.wpgraphql.com/extenstion-plugins/wpgraphql-for-carbon-fields/?
• Multilang (Open Source option available? Has to work with custom fields)
• Permissions (Restrict custom types to clients/roles, let users own entries?!)
• Support not only postname permalink structure in sveltekit

** Frontend **

• SvelteKit
• bootstrap5

** Backend / Wordpress: **

• https://wordpress.org/plugins/wp-graphql/
• https://de.wordpress.org/plugins/advanced-custom-fields/
• https://www.wpgraphql.com/acf/
• https://de.wordpress.org/plugins/custom-post-type-ui/

Big thanks to

• Kellen Mace for sharing Intro to Headless WordPress with SvelteKit (and Gutenberg in Headless WordPress: Render Blocks as HTML)!
• Jason Bahl for providing https://www.wpgraphql.com/ and https://www.wpgraphql.com/acf/
  • https://www.wpgraphql.com/2021/12/23/query-any-page-by-its-path-using-wpgraphql/
  • https://www.youtube.com/watch?v=rIg4MHc8elg
• the WordPress community
• https://www.youtube.com/watch?v=Naz0Fv_VVQk
• https://github.com/Dax89/electron-sveltekit#bootstrap-5-and-fontawesome-support
• https://github.com/mylastore/svelte-kit/blob/main/src/lib/Nav.svelte#L19

Note for Gitpod: You must create .env.local (see .env.local.example) in order to connect a WordPress instance with WPGraphQL-plugin. Use CTRL + c to abort and run npm run dev afterwards again.

See "How can you use this" below.

Currently I use @sveltejs/adapter-static, but I also want to test (sustainable) node hosting with @sveltejs/adapter-node on providers like render.com in future.

• a) @sveltejs/adapter-static - static generation, only HTML/JS/CSS is delivered to the user. If WordPress content changes, a Webhook must be called (via https://de.wordpress.org/plugins/wp-webhooks/ for example) to trigger a new build
• b) @sveltejs/adapter-node, e.g. via nodeJS hosting - not explored this yet, for sustainability there is also prerendering / static generation involved (See: https://twitter.com/KellenMace/status/1469044771729690624)

• Implement a function which routes to post or pages (https://www.wpgraphql.com/2021/12/23/query-any-page-by-its-path-using-wpgraphql/) for ACF link field
• ⚠️ Bugfix permalinks and links to articles with base path => manitu hosting installed them differently than standard, how can we automatically support them? (e.g. blog/2021/12/10/hello-world)
• ⚠️ Fix internal links in posts, see: https://www.youtube.com/watch?v=Naz0Fv_VVQk
• Figure out how to test the production build with other .env url via .env.production? https://timdeschryver.dev/blog/environment-variables-with-sveltekit
• Figure out pre-rendering and caching for sustainability
  • See: https://twitter.com/m_andrasch/status/1468899046488256519
• Figure out webhooks on render.com, netlify, vercel, deploynow, etc.
• Figure out previews for editors?
• Figure out how to use 2-click-media embeds (GDPR / Privacy)
• Figure out how to deal with cookies (GDPR / Privacy)
• Figure out how to deal with images / where to host them, include them in static build?
• Use bootstrap navbar & footer (with content - and settings from WP?)
• Use aliases? https://codingcat.dev/post/make-pathing-easier-with-aliases-in-sveltekit
• Get featured blog post for hero section
• Try out adapter-node as well
• Add wordpress graphql api in .env via GitHub action secret
• Try out Atlas Content Modeler
• Try out ACF & graphql acf
• Try out Custom Post Types UI (has built in support for graphql 🥳)
• Try out https://de.wordpress.org/plugins/headless-mode/
• Try out yoast & graphql
• Figure out how to exclude README.md from pipeline process, site doesn't need to be re-generated if I commit a README change 🌱
• Provide DDEV WordPress auto-install, so everything can be launched on Gitpod (see DDEV Gitpod launcher) 🚀

1. Create (empty) github repo without license/README
2. Clone it to local harddrive, go to folder:
3. Run npm init svelte@next in the new repo folder
4. npm install bootstrap - install bootstrap5
5. Add preprocess npm install --save-dev svelte-preprocess
6. npm install --save-dev sass postcss autoprefixer for scss
7. Add preprocess config for postcss autoprefixer & sass in config svelte.config.js
8. Run npm i --save-dev @sveltejs/adapter-static@next, add to config, see here: https://github.com/sveltejs/kit/tree/master/packages/adapter-static#usage
9. Added .vscode/-folder,.github/(action)-folder + gitpod.yml config
10. Add process.env.PATHS_BASE & dev to config
11. Add src/route/__layout.svelte for scss and js loading
12. Add gutenberg standard styles npm install @wordpress/block-library --save, add them them to __layout.svelte thanks to https://www.youtube.com/watch?v=Naz0Fv_VVQk
13. And most importantly: Add static/.nojekyll otherwise GitHub Pages won't work!! 🤦

Big thanks to