Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

sveltekit edge fullstack graphql with api crud + pages + worker + D1(with drizzle orm) + (supabase-postgres+ drizzle) + (neon-postgres+ drizzle) + kv crud + R2+ remote-proxy

Notifications You must be signed in to change notification settings

jahir9991/sveltekit-cloudflare-fullstack

Folders and files

NameName
Last commit message
Last commit date

Latest commit

History

57 Commits

Repository files navigation

GraphQl :

Live Demo :: https://cloudflare-fullstack.pages.dev/graphql.

Full API documentation

Api doc:: https://cloudflare-fullstack.pages.dev/doc/.

postgres(supabase) + drizzle-orm

get data from postgres::https://cloudflare-fullstack.pages.dev/api/supabase.

cloudflare D1 + drizzle-orm

get data from D1 ::https://cloudflare-fullstack.pages.dev/api/d1/users.

cloudflare KV

get data from KV ::https://cloudflare-fullstack.pages.dev/api/kv.

graphql

//hooks.server.ts
if (event.url.pathname.startsWith('/graphql')) {
	await injectD1(event);
	return GraphQLServer(event);
}
//need to add Compatibility flags in cf dashboard
//src/graphQL.server.ts
export const GraphQLServer = (context) => {
	return createYoga({
		schema: makeExecutableSchema({
			resolvers: [userResolver, postResolver],
			typeDefs: [globalTypeDefination, userTypeDefinitions, postTypeDefination]
		}),
		context,
		graphqlEndpoint: '/graphql',
		landingPage: true,
		multipart: true,
		cors: true,
		logging: 'error'
	}).handle(context.request, context.response);
};

prerequesite

# need to add this proxy package for proxy cloudflare remote assets 
"cfw-bindings-wrangler-bridge" 
#need to add Compatibility flags in cf dashboard
Compatibility flags: nodejs_compat

wrangler.toml

#example.wrangler.toml
name = "cloudflare-fullstack"
compatibility_date = "2023εΉ΄08月14ζ—₯"
compatibility_flags = ["nodejs_compat"]
# for local dev....
vars = { ENVIRONMENT = "dev" ,BASE_URL = "dev.example.com"}
d1_databases =[{ binding = "DB" ,database_name = "cloudflare_fullstack_db" , database_id = "{id from cloudflare}" , migrations_dir = "migrationsD1" }]
kv_namespaces =[{ binding = "KV" , id = "{id from cloudflare}" , preview_id = "{id from cloudflare}" }]
[env.staging]
vars = { ENVIRONMENT = "staging" ,BASE_URL = "staging.example.com"}
d1_databases =[{ binding = "DB" ,database_name = "cloudflare_fullstack_db" , database_id = "{id from cloudflare}" , migrations_dir = "migrationsD1" }]
kv_namespaces =[{ binding = "KV" , id = "{id from cloudflare}" , preview_id = "{id from cloudflare}" }]
[env.production]
vars = { ENVIRONMENT = "production" ,BASE_URL = "example.com"}
d1_databases =[{ binding = "DB" ,database_name = "cloudflare_fullstack_db" , database_id = "{id from cloudflare}" , migrations_dir = "migrationsD1" }]
kv_namespaces =[{ binding = "KV" , id = "{id from cloudflare}" , preview_id = "{id from cloudflare}" }]

Developing

install dependencies with npm install (or pnpm install or yarn),

Start a proxy server if you want to access your remote Cloudflare resources:

npm run proxy
# "proxy": "wrangler dev node_modules/cfw-bindings-wrangler-bridge/worker/index.js --remote --env staging --ip 127.0.0.1 --port 8787",
# or start the sveltekit server and open the app in a new browser tab
npm run start -- --open

Building

To create a production version of your app:

npm run build

You can preview the production build with npm run preview.

πŸ’ͺ Contributions

We welcome contributions ! If you have an idea for a new feature or have found a bug, please open an issue in the repository. If you'd like to submit a fix or new feature, please create a pull request with a detailed description of your changes.

Packages

No packages published

Contributors 2

AltStyle γ«γ‚ˆγ£γ¦ε€‰ζ›γ•γ‚ŒγŸγƒšγƒΌγ‚Έ (->γ‚ͺγƒͺγ‚ΈγƒŠγƒ«) /