SvelteKit frontend + GraphQL backend hosting in the EU?
Tags: sveltekit, graphql, javascript, php
Published: 2022-01-30 10:06:14

In the recent months I tried to get an overview of how to build simple web apps with SvelteKit and a backend solutions, e.g. simple personal side projects. I look for open source solutions (if available). This is my current state of research, happy for every suggestion!

## 1. How can I use GraphQL?

It took me so while to understand that GraphQL is just meant to be a better alternative to the REST api, the next evolutionary step so to speak (GraphQL allows you query multiple data objects with one request and aimes at prevent overfetching. See e.g. [GraphQL vs REST](https://back4app.medium.com/graphql-vs-rest-62a3d6c2021d)).

How can GraphQL apis be connected to SvelteKit? Rodney Lab has a good tutorial on using fetch: [SvelteKit GraphQL Queries using fetch Only](https://rodneylab.com/sveltekit-graphql-queries-fetch/
). Backend solutions like supabase offer a JS-client ([supabase JS client](https://github.com/supabase/supabase-js)) to connect to the api.

If I should choose a solution immediately, it would definitely be Supabase because of the easy setup and row level security integration. Crazy how simple web app building became! See this multi user TODO app example from James Q Quick, where users can only edit their own TODOs:

{% youtube YqIyET7XKIQ %}

But it comes at a price: $25/project/month is not something which is suitable for a lot of sideprojects. Therefore I looked for alternatives (see 3.).

## 2. How can I host it on EU servers (GDPR-compliance)

Hosting in EU server regions is (still) not a standard for every hosting solution, e.g. vercel and netlify have no such option currently as far as I know. (Why is this important? See the recent discussion about austrias data protection agency which found that the [use of google analytics is a violation of  EU data protection rules](https://techcrunch.com/2022/01/12/austrian-dpa-schrems-ii/)). 

Luckily there are hosting solutions such as render.com or supabase which let you select a european server region:

![Screenshot select option for Frankfurt/EU as server region on render.com](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ktemfxr4ifi3aguz287f.png)

![Screenshot of server region options on supabase](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/87qr3a48s415h7dl3zpp.png)

## 3. Alternatives like Supabase

Because Supabases starter pricing of 25$/month/project won't be a fit for most side projects, I found the following alternatives: 

**Node Backend (selfhosted)**

- Strapi
- Directus 

Strapi has a convincing way of building a backend, everything is nicely tracked in git. I didn't tested directus, but it seems to offer a similiar experience. But - coming from a PHP background - I still find it very challenging to deploy nodeJS backends. See e.g. the guide  [Deploy Strapi](https://render.com/docs/deploy-strapi), lots of options and every service will cost a monthly fee (of course). 

**SaaS:**

There are of course a lot of "Software as a Service"-type of services, e.g. Supabase for web apps, Storyblok for editorial workflows. 

- Supabase
- Storyblok
- Hasura, Fauna, GraphCMS ... a lot more

While these all look convincing, their pricing can vary as well and selfhosting the open source ones would be overkill for side projects. 

**PHP (selfhosted):**

So funnily enough my current state of research ended where it began - looking at PHP options. PHP backends are easy to deploy, there are tons of hosters in EU-regions, no pricy rate  limits and there are as well [green hosters](https://www.thegreenwebfoundation.org/directory/). 

I currently evaluate the following approaches, looking for a simple and secure way of building simple web apps: 

- WordPress WPGraphQL (follow [Jason Bahl](https://twitter.com/jasonbahl) for twitter fun ;-)). Building the simple multi user TODO app example from above is theoretically possible with WPGraphQL as well, but there are no tutorials yet and it will take some custom work (see [answer of Jason in WPGraphQL slack](https://wp-graphql.slack.com/archives/C3NM1M291/p1643353459269249)). 

Side note: WPEngine recently launched the platform [Atlas: The Future of Headless WordPress](https://wpengine.com/atlas/), will be interesting to see if this will be a major push for headless wordpress and GraphQL in the wordpress world.

- Laravel Lighthouse seems very promising and there are a few tutorials and online courses available for it yet ([beginner advice from RamboVivaldi](https://twitter.com/RamboVivaldi/status/1478485106713141252)). I currently research on how to get a nice and simple dashboard experience for Laravel (like the ones you saw in the Supabase SvelteKit tutorial above). 

Let's see where I'll come up in the next months. :-)

How about you? Where do host your frontend and backend? How do you build simple web apps for side projects with SvelteKit?

**Updates**: 

Other providers / tools I found after writing this article.

- https://northflank.com/
- https://cleavr.io/