DEV Community

loading...
Cover image for Svelte and Cloudflare Pages

Svelte and Cloudflare Pages

dreitzner profile image Domenik Reitzner ・2 min read

As I am writing this blog post Cloudflare Pages is 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 (2)

pic
Editor guide
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