generated from edmundhung/remix-cloudflare-template
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
0 parents
commit f702043
Showing
31 changed files
with
920 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
/.cache | ||
/.github | ||
/.husky | ||
/build | ||
/public | ||
/node_modules | ||
/dist | ||
/app/styles/tailwind.css |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
{ | ||
"extends": ["@remix-run", "prettier"] | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 wrangler.toml.example wrangler.toml | ||
- 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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
node_modules | ||
.env | ||
|
||
# Remix | ||
/.cache | ||
/build | ||
|
||
# Cloudflare | ||
.wrangler | ||
wrangler.toml | ||
|
||
# Playwright | ||
/test-results | ||
/playwright-report | ||
|
||
# Remix stacks | ||
/package-lock.json |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
_ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
npx lint-staged |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
18 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
/.cache | ||
/.github | ||
/.husky | ||
/build | ||
/public | ||
/node_modules | ||
/dist | ||
/app/styles/tailwind.css |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,115 @@ | ||
# remix-cloudflare-template | ||
|
||
Learn more about [Remix Stacks](https://remix.run/stacks). | ||
|
||
``` | ||
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](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 `wrangler.toml.example` and name it `wrangler.toml`. This | ||
file will be used to configure the development environment and define all the | ||
environment variables that you need for your application. | ||
|
||
```sh | ||
cp wrangler.toml.example wrangler.toml | ||
``` | ||
|
||
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 | ||
|
||
To add a new environment variable, you can update the **var** section on the | ||
[wrangler.toml](./wrangler.toml) file with the new variable: | ||
|
||
```toml | ||
[vars] | ||
NEW_VARIABLE = "..." | ||
``` | ||
|
||
The variable will be available from the `env` object in the context. | ||
|
||
### Setup a KV Namespace | ||
|
||
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: | ||
|
||
```toml | ||
kv_namespaces = [ | ||
{ binding = "cache", id = "cache" }, | ||
{ binding = "new_namespace", id = "new_namespace" } | ||
] | ||
``` | ||
|
||
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. | ||
|
||
### Improving types | ||
|
||
You can improve the types of the `env` object by updating | ||
[env.d.ts](./env.d.ts). | ||
|
||
## Deployment | ||
|
||
Before your first deployment, make sure all the environment variables and | ||
bindings are set properly on the | ||
[Cloudlfare 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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,30 @@ | ||
import * as React from 'react'; | ||
import markdoc, { type RenderableTreeNodes } from '@markdoc/markdoc'; | ||
|
||
export function RemixLogo(props: React.ComponentPropsWithoutRef<'svg'>) { | ||
return ( | ||
<svg | ||
viewBox="0 0 659 165" | ||
version="1.1" | ||
xmlns="http://www.w3.org/2000/svg" | ||
xmlnsXlink="http://www.w3.org/1999/xlink" | ||
aria-labelledby="remix-run-logo-title" | ||
role="img" | ||
width="106" | ||
height="30" | ||
fill="currentColor" | ||
{...props} | ||
> | ||
<title id="remix-run-logo-title">Remix Logo</title> | ||
<path d="M0 161V136H45.5416C53.1486 136 54.8003 141.638 54.8003 145V161H0Z M133.85 124.16C135.3 142.762 135.3 151.482 135.3 161H92.2283C92.2283 158.927 92.2653 157.03 92.3028 155.107C92.4195 149.128 92.5411 142.894 91.5717 130.304C90.2905 111.872 82.3473 107.776 67.7419 107.776H54.8021H0V74.24H69.7918C88.2407 74.24 97.4651 68.632 97.4651 53.784C97.4651 40.728 88.2407 32.816 69.7918 32.816H0V0H77.4788C119.245 0 140 19.712 140 51.2C140 74.752 125.395 90.112 105.665 92.672C122.32 96 132.057 105.472 133.85 124.16Z" /> | ||
<path d="M229.43 120.576C225.59 129.536 218.422 133.376 207.158 133.376C194.614 133.376 184.374 126.72 183.35 112.64H263.478V101.12C263.478 70.1437 243.254 44.0317 205.11 44.0317C169.526 44.0317 142.902 69.8877 142.902 105.984C142.902 142.336 169.014 164.352 205.622 164.352C235.83 164.352 256.822 149.76 262.71 123.648L229.43 120.576ZM183.862 92.6717C185.398 81.9197 191.286 73.7277 204.598 73.7277C216.886 73.7277 223.542 82.4317 224.054 92.6717H183.862Z" /> | ||
<path d="M385.256 66.5597C380.392 53.2477 369.896 44.0317 349.672 44.0317C332.52 44.0317 320.232 51.7117 314.088 64.2557V47.1037H272.616V161.28H314.088V105.216C314.088 88.0638 318.952 76.7997 332.52 76.7997C345.064 76.7997 348.136 84.9917 348.136 100.608V161.28H389.608V105.216C389.608 88.0638 394.216 76.7997 408.04 76.7997C420.584 76.7997 423.4 84.9917 423.4 100.608V161.28H464.872V89.5997C464.872 65.7917 455.656 44.0317 424.168 44.0317C404.968 44.0317 391.4 53.7597 385.256 66.5597Z" /> | ||
<path d="M478.436 47.104V161.28H519.908V47.104H478.436ZM478.18 36.352H520.164V0H478.18V36.352Z" /> | ||
<path d="M654.54 47.1035H611.788L592.332 74.2395L573.388 47.1035H527.564L568.78 103.168L523.98 161.28H566.732L589.516 130.304L612.3 161.28H658.124L613.068 101.376L654.54 47.1035Z" /> | ||
</svg> | ||
); | ||
} | ||
|
||
export function Markdown({ content }: { content: RenderableTreeNodes }) { | ||
return <div className="prose">{markdoc.renderers.react(content, React)}</div>; | ||
} |
Oops, something went wrong.