Skip to content

Commit

Permalink
refactor: 把 nextjs 换成 qwik
Browse files Browse the repository at this point in the history
  • Loading branch information
clansty committed Nov 20, 2024
1 parent 0eb27ea commit 2fbde5d
Show file tree
Hide file tree
Showing 68 changed files with 1,808 additions and 4,447 deletions.
1 change: 1 addition & 0 deletions .idea/aquadx-bot.iml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 4 additions & 0 deletions apps/web/.gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -39,3 +39,7 @@ next-env.d.ts
.wrangler
.dev.vars
.worker-next

# Cloudflare
functions/**/*.js
server
86 changes: 32 additions & 54 deletions apps/web/README.md
Original file line number Diff line number Diff line change
@@ -1,68 +1,46 @@
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`c3`](https://developers.cloudflare.com/pages/get-started/c3).
## Cloudflare Pages

## Getting Started
Cloudflare's [wrangler](https://github.com/cloudflare/wrangler) CLI can be used to preview a production build locally. To start a local server, run:

First, run the development server:

```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```
pnpm serve
```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

## Cloudflare integration

Besides the `dev` script mentioned above `c3` has added a few extra scripts that allow you to integrate the application with the [Cloudflare Pages](https://pages.cloudflare.com/) environment, these are:
- `pages:build` to build the application for Pages using the [`@cloudflare/next-on-pages`](https://github.com/cloudflare/next-on-pages) CLI
- `preview` to locally preview your Pages application using the [Wrangler](https://developers.cloudflare.com/workers/wrangler/) CLI
- `deploy` to deploy your Pages application using the [Wrangler](https://developers.cloudflare.com/workers/wrangler/) CLI

> __Note:__ while the `dev` script is optimal for local development you should preview your Pages application as well (periodically or before deployments) in order to make sure that it can properly work in the Pages environment (for more details see the [`@cloudflare/next-on-pages` recommended workflow](https://github.com/cloudflare/next-on-pages/blob/05b6256/internal-packages/next-dev/README.md#recommended-workflow))
### Bindings
Then visit [http://localhost:8787/](http://localhost:8787/)

Cloudflare [Bindings](https://developers.cloudflare.com/pages/functions/bindings/) are what allows you to interact with resources available in the Cloudflare Platform.
### Deployments

You can use bindings during development, when previewing locally your application and of course in the deployed application:
[Cloudflare Pages](https://pages.cloudflare.com/) are deployable through their [Git provider integrations](https://developers.cloudflare.com/pages/platform/git-integration/).

- To use bindings in dev mode you need to define them in the `next.config.js` file under `setupDevBindings`, this mode uses the `next-dev` `@cloudflare/next-on-pages` submodule. For more details see its [documentation](https://github.com/cloudflare/next-on-pages/blob/05b6256/internal-packages/next-dev/README.md).
If you don't already have an account, then [create a Cloudflare account here](https://dash.cloudflare.com/sign-up/pages). Next go to your dashboard and follow the [Cloudflare Pages deployment guide](https://developers.cloudflare.com/pages/framework-guides/deploy-anything/).

- To use bindings in the preview mode you need to add them to the `pages:preview` script accordingly to the `wrangler pages dev` command. For more details see its [documentation](https://developers.cloudflare.com/workers/wrangler/commands/#dev-1) or the [Pages Bindings documentation](https://developers.cloudflare.com/pages/functions/bindings/).
Within the projects "Settings" for "Build and deployments", the "Build command" should be `pnpm build`, and the "Build output directory" should be set to `dist`.

- To use bindings in the deployed application you will need to configure them in the Cloudflare [dashboard](https://dash.cloudflare.com/). For more details see the [Pages Bindings documentation](https://developers.cloudflare.com/pages/functions/bindings/).
### Function Invocation Routes

#### KV Example
Cloudflare Page's [function-invocation-routes config](https://developers.cloudflare.com/pages/platform/functions/routing/#functions-invocation-routes) can be used to include, or exclude, certain paths to be used by the worker functions. Having a `_routes.json` file gives developers more granular control over when your Function is invoked.
This is useful to determine if a page response should be Server-Side Rendered (SSR) or if the response should use a static-site generated (SSG) `index.html` file.

`c3` has added for you an example showing how you can use a KV binding.
By default, the Cloudflare pages adaptor _does not_ include a `public/_routes.json` config, but rather it is auto-generated from the build by the Cloudflare adaptor. An example of an auto-generate `dist/_routes.json` would be:

In order to enable the example:
- Search for javascript/typescript lines containing the following comment:
```ts
// KV Example:
```
and uncomment the commented lines below it.
- Do the same in the `wrangler.toml` file, where
the comment is:
```
# KV Example:
```
- If you're using TypeScript run the `cf-typegen` script to update the `env.d.ts` file:
```bash
npm run cf-typegen
# or
yarn cf-typegen
# or
pnpm cf-typegen
# or
bun cf-typegen
```
```
{
"include": [
"/*"
],
"exclude": [
"/_headers",
"/_redirects",
"/build/*",
"/favicon.ico",
"/manifest.json",
"/service-worker.js",
"/about"
],
"version": 1
}
```

After doing this you can run the `dev` or `preview` script and visit the `/api/hello` route to see the example in action.
In the above example, it's saying _all_ pages should be SSR'd. However, the root static files such as `/favicon.ico` and any static assets in `/build/*` should be excluded from the Functions, and instead treated as a static file.

Finally, if you also want to see the example work in the deployed application make sure to add a `MY_KV_NAMESPACE` binding to your Pages application in its [dashboard kv bindings settings section](https://dash.cloudflare.com/?to=/:account/pages/view/:pages-project/settings/functions#kv_namespace_bindings_section). After having configured it make sure to re-deploy your application.
In most cases the generated `dist/_routes.json` file is ideal. However, if you need more granular control over each path, you can instead provide you're own `public/_routes.json` file. When the project provides its own `public/_routes.json` file, then the Cloudflare adaptor will not auto-generate the routes config and instead use the committed one within the `public` directory.
15 changes: 15 additions & 0 deletions apps/web/adapters/cloudflare-pages/vite.config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import { cloudflarePagesAdapter } from "@builder.io/qwik-city/adapters/cloudflare-pages/vite";
import { extendConfig } from "@builder.io/qwik-city/vite";
import baseConfig from "../../vite.config";

export default extendConfig(baseConfig, () => {
return {
build: {
ssr: true,
rollupOptions: {
input: ["src/entry.cloudflare-pages.tsx", "@qwik-city-plan"],
},
},
plugins: [cloudflarePagesAdapter()],
};
});
8 changes: 0 additions & 8 deletions apps/web/babel.config.js

This file was deleted.

4 changes: 0 additions & 4 deletions apps/web/dirfix.ts

This file was deleted.

28 changes: 0 additions & 28 deletions apps/web/next.config.mjs

This file was deleted.

41 changes: 12 additions & 29 deletions apps/web/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,45 +4,28 @@
"private": true,
"type": "module",
"scripts": {
"dev": "tsx dirfix.ts && next dev",
"build": "tsx dirfix.ts && next build",
"start": "next start",
"lint": "next lint",
"build:worker": "tsx dirfix.ts && cloudflare",
"dev:worker": "wrangler dev --port 8771",
"preview:worker": "pnpm run build:worker && pnpm run dev:worker",
"deploy:worker": "pnpm run build:worker && wrangler deploy",
"tail": "pnpm wrangler tail"
"build": "qwik build",
"build.server": "vite build -c adapters/cloudflare-pages/vite.config.ts",
"build.client": "vite build",
"deploy": "pnpm run build && wrangler pages deploy ./dist",
"dev": "vite --mode ssr",
"serve": "wrangler pages dev ./dist --compatibility-flags=nodejs_als"
},
"dependencies": {
"@clansty/maibot-clients": "workspace:^",
"@clansty/maibot-types": "workspace:^",
"@clansty/maibot-utils": "workspace:^",
"next": "^15.0.3",
"react": "^18.3.1",
"react-dom": "^18.3.1"
"@clansty/maibot-utils": "workspace:^"
},
"devDependencies": {
"@babel/plugin-transform-block-scoping": "^7.25.9",
"@babel/preset-env": "^7.26.0",
"@babel/preset-typescript": "^7.26.0",
"@babel/runtime": "^7.26.0",
"@builder.io/qwik": "^1.7.3",
"@builder.io/qwik-city": "^1.7.3",
"@cloudflare/workers-types": "^4.20241112.0",
"@iconify-json/twemoji": "^1.2.0",
"@opennextjs/cloudflare": "^0.2.1",
"@types/node": "^22.9.1",
"@types/react": "^18.3.12",
"@types/react-dom": "^18.3.1",
"@unocss/postcss": "^0.64.1",
"babel-loader": "^9.2.1",
"esbuild-loader": "^4.2.2",
"json-loader": "^0.5.7",
"postcss": "^8.4.49",
"tsx": "^4.19.2",
"typescript": "^5.6.3",
"unocss": "^0.64.1",
"vercel": "^39.1.0",
"webpack": "^5.96.1",
"wrangler": "^3.88.0"
"vite": "^5.2.10",
"vite-tsconfig-paths": "^4.2.1",
"wrangler": "^3.0.0"
}
}
9 changes: 0 additions & 9 deletions apps/web/postcss.config.js

This file was deleted.

9 changes: 9 additions & 0 deletions apps/web/public/_headers
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
# https://developers.cloudflare.com/pages/platform/headers/

/*service-worker.js
Cache-Control: no-store
Content-Type: application/javascript
X-Content-Type-Options: nosniff

/build/*
Cache-Control: public, max-age=31536000, s-maxage=31536000, immutable
1 change: 1 addition & 0 deletions apps/web/public/_redirects
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
# https://developers.cloudflare.com/pages/platform/redirects/
4 changes: 4 additions & 0 deletions apps/web/qwik.env.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
// This file can be used to add references for global types like `vite/client`.

// Add global `vite/client` types. For more info, see: https://vitejs.dev/guide/features#client-types
/// <reference types="vite/client" />
12 changes: 0 additions & 12 deletions apps/web/src/app/b50/[tguid]/[profile]/page.tsx

This file was deleted.

12 changes: 0 additions & 12 deletions apps/web/src/app/b50/aquadx/[username]/page.tsx

This file was deleted.

8 changes: 0 additions & 8 deletions apps/web/src/app/b50/template.tsx

This file was deleted.

26 changes: 0 additions & 26 deletions apps/web/src/app/error.tsx

This file was deleted.

6 changes: 0 additions & 6 deletions apps/web/src/app/global.css

This file was deleted.

43 changes: 0 additions & 43 deletions apps/web/src/app/layout.tsx

This file was deleted.

18 changes: 0 additions & 18 deletions apps/web/src/app/levelProgress/[tguid]/[profile]/[level]/page.tsx

This file was deleted.

Loading

0 comments on commit 2fbde5d

Please sign in to comment.