Svelte and Cloudflare Pages

dreitzner

Domenik Reitzner

Posted on March 9, 2021

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…

💖 💪 🙅 🚩
dreitzner
Domenik Reitzner

Posted on March 9, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Svelte and Cloudflare Pages
svelte Svelte and Cloudflare Pages

March 9, 2021