justinnoel

{
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build && vite build --mode client && npx tailwindcss -i ./src/index.css -o ./dist/static/assets/index.css --minify",
    "format": "prettier --config .prettierrc --ignore-path .prettierignore '**/*.{json,js,jsx,ts,tsx,css,scss,md}' --write",
    "lint": "eslint --ext \".js,.jsx,.ts,.tsx\" --ignore-path .eslintignore . --max-warnings 0 --fix",
    "prepare": "husky install"
  },
  "husky": {

justinnoel

type LogRemote = {
  details: {
    message: string,
  },
  env: {
    REMOTE_LOGGING_URL: string,
    REMOTE_LOGGING_KEY: string,
    REMOTE_LOGGING_SOURCE: string,
  },
};

justinnoel

<Register history={props.history} />

justinnoel

Ref: https://discord.com/channels/595317990191398933/941119649783894016/1040772933687201802

How to setup sessions stored in Cloudflare KV using the Remix createCloudflareKVSessionStorage

server.js

Sets up the server to include access to sessionStorage and db on every request. These can then be accessed anywhere else in the code base using `context.

app_session.js

justinnoel

import fetch from 'node-fetch';

function ownKeys(object, enumerableOnly) {
  var keys = Object.keys(object);

  if (Object.getOwnPropertySymbols) {
    var symbols = Object.getOwnPropertySymbols(object);

    if (enumerableOnly) {
      symbols = symbols.filter(function (sym) {

justinnoel

addEventListener("fetch", (event) => {
   event.respondWith(handleRequest(event.request));
});

const workouts = [
   {
      week: 1,
      starts: 18383383383,
      workout: [
         {

justinnoel

addEventListener("fetch", (event) => {
  event.respondWith(handleRequest(event.request).catch((err) => new Response(err.stack, {status: 500})));
});

async function handleRequest(request) {
	const {pathname} = new URL(request.url);
	if (pathname.startsWith("/api/post")) {
	  const {data, error} = await getPostData(request);
	  if (error) {
		 return new Response(error, {status: 400})

justinnoel

export async function getPostData(request) {
  const {headers} = request;
  const contentType = headers.get("content-type") || "";
  
  if (contentType.includes("application/json")) {
    return await request.json();
  }

  if (contentType.includes("form")) {
    const formData = await request.formData();

justinnoel

This gist aims to show you how to use KV datastore using Cloudflare pages. The reason I created this quick guide is it took 
me almost 2 weeks to get it working, mainly because it is very new and the documentation is not up fully fleshed out yet

https://developers.cloudflare.com/workers/runtime-apis/kv
https://developers.cloudflare.com/pages/platform/functions
https://blog.cloudflare.com/wrangler-v2-beta/

Steps:

Install wrangler 2

justinnoel

export async function getJson(url, options) {
  try {
    const response = await fetch(url, options);
    const contentType = response.headers.get("content-type");

    if (! response.ok || ! contentType.includes("application/json")) {
      console.log(`ERROR: getJSON -> Invalid Response -> response.status = ${
        response.status
      }`,);
      console.log(`ERROR: getJSON -> Invalid Response ->response.statusText = ${