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.
After that you can create a 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.
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.
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.
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
Note that you will need to have Node.js installed.
Get started
Install the dependencies...
cd svelte-app
npm install
...then start Rollup:
npm run dev
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…
Top comments (6)
nice,,
btw,, what you think about cloudflade pages different from another cloud service like netlify, vercel, begin, render
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
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)?
There is a svelte-kit adapter for cloudflare, which does that does the work for you:
kit.svelte.dev/docs#adapters
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?
There is a svelte-kit adapter for cloudflare, which does that does the work for you:
kit.svelte.dev/docs#adapters