Deploy a Solid Site

Solid Open external link is an open-source web application framework focused on generating performant applications with a modern developer experience based on JSX.

In this guide, you will create a new Solid application implemented via SolidStart Open external link (Solid’s meta-framework) and deploy it using Cloudflare Pages.

​​ Create a new project

Create a new project (my-solid-app) by running the following command in your terminal:

$ mkdir my-solid-app
$ cd my-solid-app
$ npm init solid@latest

You will be prompted to select a starter. Choose any of the available options. You will then be asked if you want to enable Server Side Rendering. Reply yes. Finally, you will be asked if you want to use TypeScript, choose either yes or no.

Then, install the application’s dependencies:

$ npm install

After installing dependencies, run your application:

$ npm run dev

​​ SolidStart Cloudflare configuration

In order to use SolidStart with Cloudflare Pages, add the SolidStart Cloudflare Pages adapter Open external link to your application:

$ npm install --save-dev solid-start-cloudflare-pages

Next, use the adapter in your the vite.config.(ts/js) file:

vite.config.ts
import solid from "solid-start/vite";
import { defineConfig } from "vite";
+ import cloudflare from "solid-start-cloudflare-pages";

export default defineConfig({
-  plugins: [solid()],
+  plugins: [solid({ adapter: cloudflare({}) })],
});

​​ Before you continue

All of the framework guides assume you already have a fundamental understanding of Git Open external link . If you are new to Git, refer to this summarized Git handbook Open external link on how to set up Git on your local machine.

If you clone with SSH, you must generate SSH keys Open external link on each computer you use to push or pull from GitHub.

Refer to the GitHub documentation Open external link and Git documentation Open external link for more information.

​​ Create a GitHub repository

Create a new GitHub repository by visiting repo.new Open external link . After creating a new repository, prepare and push your local application to GitHub by running the following commands in your terminal:

$ git init
$ git remote add origin https://github.com/<your-gh-username>/<repository-name>
$ git add .
$ git commit -m "Initial commit"
$ git branch -M main
$ git push -u origin main

​​ Deploying with Cloudflare Pages

Deploy your site to Pages by logging in to the Cloudflare dashboard Open external link > Account Home > Pages and selecting Create a project. Select the new GitHub repository that you created and, in Set up builds and deployments, provide the following information:

After configuring your site, you can begin your first deploy. You should see Cloudflare Pages installing npm, your project dependencies, and building your site before deploying it.

After deploying your site, you will receive a unique subdomain for your project on *.pages.dev. Every time you commit new code to your Solid repository, Cloudflare Pages will automatically rebuild your project and deploy it. You will also get access to preview deployments on new pull requests, to preview how changes look to your site before deploying them to production.

​​ Use bindings in your Solid application

A binding allows your application to interact with Cloudflare developer products, such as KV, Durable Object, R2, and D1 Open external link .

To add a binding in your SolidStart, add the binding to the Cloudflare adapter. This allows you to access your bindings during development, and test your application before deploying it.

The following example configuration supposes you are using a KV namespace binding named "MY_KV". You will need to update the adapter’s use in your vite.config.(ts/js) file in the following way:

vite.config.ts
import solid from "solid-start/vite";
import { defineConfig } from "vite";
import cloudflare from "solid-start-cloudflare-pages";

export default defineConfig({
-  plugins: [solid({ adapter: cloudflare({}) })],
+  plugins: [
+   solid({
+     adapter: cloudflare({
+       kvNamespaces: ["MY_KV"],
+     }),
+   }),
+  ],
});

You can then access the binding in the environment variable provided to you by SolidStart. For example, in a createServerData$ Open external link loader:

export function routeData() {
  return createServerData$(async (_, { env }) => {
    const { MY_KV } = (env as { MY_KV: KVNamespace }));
    // ...
  });
}

After setting up the binding locally, you only need to set the binding in the Cloudflare dashboard as well and it will be available for your Solid application on your next deployment. To add the binding there, refer to Bindings.

​​ Learn more

By completing this guide, you have successfully deployed your Solid site to Cloudflare Pages. To get started with other frameworks, refer to the list of Framework guides.