we're using remix now

.dev.vars.example

@@ -0,0 +1 @@
+GITHUB_TOKEN=

.eslintignore

@@ -0,0 +1,8 @@
+/.cache
+/.github
+/.husky
+/build
+/public
+/node_modules
+/dist
+/app/styles/tailwind.css

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": ["@remix-run", "prettier"]
+}

.github/workflows/ci.yml

@@ -0,0 +1,43 @@
+name: CI
+on:
+  - push
+jobs:
+  test:
+    name: 🔍 Testing
+    runs-on: ubuntu-latest
+    steps:
+      - name: ⬇️ Checkout repo
+        uses: actions/checkout@v3
+      - name: ⎔ Setup node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+      - name: 📥 Download deps
+        uses: bahmutov/npm-install@v1
+        with:
+          useLockFile: false
+      - name: 🎭 Install Playwright
+        run: npx playwright install --with-deps
+      - name: 📦 Prepare the environment
+        run: cp .dev.vars.example .dev.vars
+      - name: 💣 Run some tests
+        run: npx playwright test
+
+  lint:
+    name: ⬣ Linting
+    runs-on: ubuntu-latest
+    steps:
+      - name: ⬇️ Checkout repo
+        uses: actions/checkout@v3
+      - name: ⎔ Setup node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+      - name: 📥 Download deps
+        uses: bahmutov/npm-install@v1
+        with:
+          useLockFile: false
+      - name: ✨ Code format check
+        run: npx prettier --check .
+      - name: ✅ Code linting
+        run: npx eslint . --ext .js,.mjs,.ts,.tsx

.gitignore

@@ -1,24 +1,18 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
-
 node_modules
-dist
-dist-ssr
-*.local
+.env
+
+# Remix
+/.cache
+/build
+
+# Cloudflare
+.wrangler
+.dev.vars
+worker-configuration.d.ts
+
+# Playwright
+/test-results
+/playwright-report
 
-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
-.idea
-.DS_Store
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
+# Remix stacks
+/package-lock.json

.node-version

@@ -0,0 +1 @@
+18

.prettierignore

@@ -0,0 +1,8 @@
+/.cache
+/.github
+/.husky
+/build
+/public
+/node_modules
+/dist
+/app/styles/tailwind.css

.prettierrc.js

@@ -0,0 +1,32 @@
+/** @type {import("prettier").Config} */
+const config = {
+	arrowParens: 'avoid',
+	bracketSameLine: false,
+	bracketSpacing: true,
+	embeddedLanguageFormatting: 'auto',
+	endOfLine: 'lf',
+	htmlWhitespaceSensitivity: 'css',
+	insertPragma: false,
+	jsxSingleQuote: false,
+	printWidth: 80,
+	proseWrap: 'always',
+	quoteProps: 'as-needed',
+	requirePragma: false,
+	semi: true,
+	singleAttributePerLine: false,
+	singleQuote: true,
+	tabWidth: 2,
+	trailingComma: 'all',
+	useTabs: true,
+	overrides: [
+		{
+			files: ['**/*.json', '**/*.md'],
+			options: {
+				useTabs: false,
+			},
+		},
+	],
+	plugins: ['prettier-plugin-tailwindcss'],
+};
+
+export default config;

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Edmund Hung
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,30 +1,122 @@
-# React + TypeScript + Vite
+# remix-cloudflare-template
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+Learn more about [Remix Stacks](https://remix.run/stacks).
 
-Currently, two official plugins are available:
+```
+npx create-remix@latest --template edmundhung/remix-cloudflare-template
+```
+
+What's included?
+
+- Development with [Vite](https://vitejs.dev)
+- [Github Actions](https://github.com/features/actions) for CI/CD
+- [Markdoc](https://markdoc.dev) for rendering markdown
+- Styling with [Tailwind](https://tailwindcss.com/)
+- End-to-end testing with [Playwright](https://playwright.dev/)
+- Local third party request mocking with [MSW](https://mswjs.io/)
+- Code formatting with [Prettier](https://prettier.io)
+- Linting with [ESLint](https://eslint.org)
+- Static Types with [TypeScript](https://typescriptlang.org)
+
+## Development
+
+Before start, copy [.dev.vars.example](./.dev.vars.example) and name it
+`.dev.vars` with the required secrets.
+
+```sh
+cp .dev.vars.example .dev.vars
+```
+
+To starts the vite dev server:
+
+```sh
+npm run dev
+```
+
+You can also start the Playwright UI mode to test your application. You will
+find all the tests defined in the [/tests/e2e](./tests/e2e) directory.
+
+```sh
+npm run test
+```
+
+To test your application on the workerd runtime, you can start the wrangler dev
+server with:
+
+```sh
+npm run build && npm run start
+```
+
+### New environment variable & secret
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+To add a new secret, please
+[update the value](https://developers.cloudflare.com/workers/configuration/secrets/#secrets-in-development)
+on the `.dev.vars` file.
 
-## Expanding the ESLint configuration
+For the rest of the environment variable, you can update the **var** section on
+the [wrangler.toml](./wrangler.toml) file with the new variable:
 
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+```toml
+[vars]
+NEW_VARIABLE = "..."
+```
+
+The variables will be available from the `env` object in the context.
+
+### Setup a KV Namespace
 
-- Configure the top-level `parserOptions` property like this:
+To setup a new KV namespace on the **development environment**, update
+[wrangler.toml](./wrangler.toml) with another object similar to the cache
+namespace as shown below:
 
-```js
-export default {
-  // other rules...
-  parserOptions: {
-    ecmaVersion: 'latest',
-    sourceType: 'module',
-    project: ['./tsconfig.json', './tsconfig.node.json'],
-    tsconfigRootDir: __dirname,
-  },
-}
+```toml
+kv_namespaces = [
+  { binding = "cache", id = "cache" },
+  { binding = "new_namespace", id = "new_namespace" }
+]
 ```
 
-- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
-- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
+Note that the `id` has no effect on the dev environment. You can use the same
+name for both `id` and `binding`. The namespace will be available form the `env`
+object in the context.
+
+### Generate env types
+
+You can generate the types of the `env` object based on `wrangler.toml` and
+`.dev.vars` with:
+
+```sh
+npx wrangler types
+```
+
+## Deployment
+
+Before your first deployment, make sure all the environment variables and
+bindings are set properly on the
+[Cloudflare Dashboard](https://dash.cloudflare.com/login).
+
+### Creating a new application
+
+To create a new application on the Cloudflare Dashboard, select **Workers and
+Pages** from the menu and click on **Create Application**. You can then follow
+the instructions based on your needs.
+
+### Setting up environment variables
+
+To set up environment variables, select **Workers and Pages** from the menu and
+look for the application details. You will find the **environment variables**
+section under the **Settings** tab.
+
+### Setting up KV namespaces
+
+To set up a new KV namespaces, you need to create a new namespace first through
+the **KV** menu under **Workers and Pages** and click **Create a namespace**.
+
+After creating the namespace, you can bind the namespace to the application from
+the application details page. You can find the setting from the **Functions**
+section under the **Settings** tab.
+
+### Debugging
+
+If your application is not working properly, you can find the real-time logs in
+the **Functions** tab from the deployment details page.