DEV Community

Cover image for Svelte and Cloudflare Pages
Domenik Reitzner
Domenik Reitzner

Posted on • Updated on

Svelte and Cloudflare Pages

As I was writing this blog post Cloudflare Pages was still in open beta.

So here is a quick tour on how you can set up your svelte project on cloudflare pages.

Basic setup

First things first.
Login to your cloudflare account (if you don't have one yet, it is really easy to set one up).
Select the icon on the right for cloudflare pages.
cloudflare pages button
After that you can create a new project.
create new project

Connect Repository & build

To continue you need to connect your github repo to cloudflare pages. After that you can select one of your (svelte) repositories.
select you svelte repository

On the next page you can set you project name and build settings. There is already a configuration for svelte that you can select from the dropdown. If needed you can adapt the values to your specific setup.
build settings with svelte selected

The first build took a little longer, so no need to worry if it is not immediately done (I guess this is due to the fact that the first setup of your instance takes some time).

Add a custom domain

So after your first build you can access your site on your-project.pages.dev. If you have your domain set up with cloudflare you can easily set up a custom domain for your project.

Just go to your pages dashboard and select your project.
After that you can go to the custom domains tab.
custom domain tab

After that your svelte site is ready to shine on cloudflare pages.

Links

Repo used:

Looking for a shareable component template? Go here --> sveltejs/component-template


svelte app

This is a project template for Svelte apps. It lives at https://github.com/sveltejs/template.

To create a new project based on this template using degit:

npx degit sveltejs/template svelte-app
cd svelte-app
Enter fullscreen mode Exit fullscreen mode

Note that you will need to have Node.js installed.

Get started

Install the dependencies...

cd svelte-app
npm install
Enter fullscreen mode Exit fullscreen mode

...then start Rollup:

npm run dev
Enter fullscreen mode Exit fullscreen mode

Navigate to localhost:5000. You should see your app running. Edit a component file in src, save it, and reload the page to see your changes.

By default, the server will only respond to requests from localhost. To allow connections from other computers, edit the sirv commands in package.json to include the option --host 0.0.0.0.

If you're using Visual Studio Code we recommend installing the official extension Svelte for VS Code. If you are using other editors you may…

Discussion (6)

Collapse
dansvel profile image
dan

nice,,

btw,, what you think about cloudflade pages different from another cloud service like netlify, vercel, begin, render

Collapse
dreitzner profile image
Domenik Reitzner Author

Probably the infrastructure that they have is what sets them apart the most.
I already use their nameservers so pages on Subdomains can be created very easily.
I have also heard that there cloudflare workers are nice, but I have no idea how they compare to other services.
Thanks for taking the time to read

Collapse
yawnxyz profile image
Jan Z

Thanks!

You can't develop Sveltekit or Sapper and have it automatically move the server-side to Workers right? You have to treat the Workers like any external server (as opposed to the hooks built into Sveltekit)?

Thread Thread
dreitzner profile image
Domenik Reitzner Author

There is a svelte-kit adapter for cloudflare, which does that does the work for you:
kit.svelte.dev/docs#adapters

Collapse
theonlytails profile image
TheOnlyTails

Hi, I was trying to do this with a SvelteKit project, yet it seems to fail since SvelteKit expects a Node server. Do you know of a solution to that?

Collapse
dreitzner profile image
Domenik Reitzner Author

There is a svelte-kit adapter for cloudflare, which does that does the work for you:
kit.svelte.dev/docs#adapters