Cloudflare

Cloudflare offers two platforms for deploying Solid apps:

• Cloudflare Workers is Cloudflare's recommended platform, which serves static assets through Workers Assets and can also run server-side code on the edge.
• Cloudflare Pages is Cloudflare's original JAMstack platform for frontend projects.

Both are covered below.

Deploying to Cloudflare Workers

The steps below follow Cloudflare's Solid framework guide for Workers.

Deploying an existing SolidStart project

If you already have a SolidStart project, run wrangler deploy in the project directory. Wrangler automatically detects SolidStart, generates the necessary configuration, and deploys your project:

npx wrangler deploy

You can read more about this in Cloudflare's automatic project configuration documentation.

Creating a new project

Use the create-cloudflare CLI (C3) to set up a new project. C3 creates a new project directory, starts Solid's official setup tool, and offers to deploy right away:

npm init cloudflare@latest -- my-solid-app --framework=solid --experimental

pnpm create cloudflare@latest -- my-solid-app --framework=solid --experimental

yarn create cloudflare@latest -- my-solid-app --framework=solid --experimental

bun create cloudflare@latest -- my-solid-app --framework=solid --experimental

deno init --npm cloudflare@latest -- my-solid-app --framework=solid --experimental

Then move into the project directory:

cd my-solid-app

Developing locally

Run the following command in the project directory to start a local dev server and preview your project while you work:

npm run dev

pnpm dev

yarn dev

bun run dev

deno run dev

Deploying

The following command builds and deploys your project to a *.workers.dev subdomain (or a custom domain), from your machine or from CI:

npm run deploy

pnpm deploy

yarn deploy

bun run deploy

deno run deploy

Once deployed, your Solid app is live on Cloudflare Workers. Your app can also use bindings to access Cloudflare's compute, storage, AI, and other platform primitives.

Deploying to Cloudflare Pages

Cloudflare Pages is a JAMstack platform for frontend developers, where JAMstack stands for JavaScript, APIs, and Markup. For additional details and features, you can visit the Cloudflare website.

Using the Cloudflare's web interface

1. Navigate to the Cloudflare login page and log in or sign up.

View on Eraser

2. After logging in, find "Pages" in the left-hand navigation bar. Add a new project by clicking "Create a project," then choose "Connect to Git."

View on Eraser

3. You'll have the option to install Cloudflare Pages on all your repositories or select ones. Choose the repository that contains your Solid project.

View on Eraser

4. Configure your build settings:

• The project name will default to the repository name, but you can change it if you wish.
• In the "build command" field, enter npm run build .
• For the "build output directory" field, use dist .
• Add an environment variable NODE_VERSION and set its value to the version of Node.js you're using.

Note: This step is crucial because Cloudflare Pages uses a version of Node.js older than v13, which may not fully support Vite, the bundler used in Solid projects.

View on Eraser

5. Once you've configured the settings, click "Save and Deploy." In a few minutes, your Solid project will be live on Cloudflare Pages, accessible via a URL formatted as project_name.pages.dev.

Using the Wrangler CLI with Pages

Wrangler is a command-line tool for building Cloudflare Workers and Pages projects. Here are the steps to deploy your Solid project to Pages using Wrangler.

1. Use your package manager of choice to install the Wrangler command-line tool:

npm i wrangler -g

pnpm i wrangler -g

yarn add wrangler -g

bun i wrangler -g

deno add npm:wrangler -g

2. Open your terminal and run the following command to log in:

wrangler login

3. Build your project using the following command:

npm run build

pnpm build

yarn build

bun run build

deno run build

4. Deploy using Wrangler:

wrangler pages deploy dist

After running these commands, your project should be live. While the terminal may provide a link, it's more reliable to check your Cloudflare Pages dashboard for the deployed URL, which usually follows the format project-name.pages.dev.