Skip to content

Commit a9e51ac

Browse files
gioboabalazsorban44
gioboa
and
balazsorban44
authored
feat: add Qwik integration (#11068)
* feat: add Qwik integration * feat: add Qwik explanation * feat: add Qwik dev application * feat: add secret auto detaction * feat: add fillOptionsWithEnvVariables method * refactor: remove @auth/core dependency from the Qwik dev app * feat: imporve code * chore: update vite config * chore: linter 🧽 * suggestions * suggestions * fixes * more suggestions * callbackUrl -> redirectTo --------- Co-authored-by: Balázs Orbán <[email protected]>
1 parent af246b7 commit a9e51ac

27 files changed

+2358
-96
lines changed

‎.gitignore‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,9 @@ packages/*/lib
3838
packages/**/generated
3939
.xata*
4040

41+
# Qwik needs to use .mjs. REVIEW: Check back, can we just use .js?
42+
packages/*/*.mjs
43+
4144
# Development app
4245
apps/dev/src/css
4346
apps/dev/prisma/migrations

‎apps/dev/qwik/.env.example‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
AUTH_SECRET=
2+
3+
AUTH_GITHUB_ID=
4+
AUTH_GITHUB_SECRET=

‎apps/dev/qwik/.gitignore‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
# Build
2+
/dist
3+
/lib
4+
/lib-types
5+
/server
6+
7+
# Development
8+
node_modules
9+
*.local
10+
11+
# Cache
12+
.cache
13+
.mf
14+
.rollup.cache
15+
tsconfig.tsbuildinfo
16+
17+
# Logs
18+
logs
19+
*.log
20+
npm-debug.log*
21+
yarn-debug.log*
22+
yarn-error.log*
23+
pnpm-debug.log*
24+
lerna-debug.log*
25+
26+
# Editor
27+
.vscode/*
28+
!.vscode/launch.json
29+
!.vscode/*.code-snippets
30+
31+
.idea
32+
.DS_Store
33+
*.suo
34+
*.ntvs*
35+
*.njsproj
36+
*.sln
37+
*.sw?
38+
39+
# Yarn
40+
.yarn/*
41+
!.yarn/releases

‎apps/dev/qwik/README.md‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
# Qwik City App ⚡️
2+
3+
- [Qwik Docs](https://qwik.dev/)
4+
- [Discord](https://qwik.dev/chat)
5+
- [Qwik GitHub](https://github.com/QwikDev/qwik)
6+
- [@QwikDev](https://twitter.com/QwikDev)
7+
- [Vite](https://vitejs.dev/)
8+
9+
---
10+
11+
## Project Structure
12+
13+
This project is using Qwik with [QwikCity](https://qwik.dev/qwikcity/overview/). QwikCity is just an extra set of tools on top of Qwik to make it easier to build a full site, including directory-based routing, layouts, and more.
14+
15+
Inside your project, you'll see the following directory structure:
16+
17+
```
18+
├── public/
19+
│ └── ...
20+
└── src/
21+
├── components/
22+
│ └── ...
23+
└── routes/
24+
└── ...
25+
```
26+
27+
- `src/routes`: Provides the directory-based routing, which can include a hierarchy of `layout.tsx` layout files, and an `index.tsx` file as the page. Additionally, `index.ts` files are endpoints. Please see the [routing docs](https://qwik.dev/qwikcity/routing/overview/) for more info.
28+
29+
- `src/components`: Recommended directory for components.
30+
31+
- `public`: Any static assets, like images, can be placed in the public directory. Please see the [Vite public directory](https://vitejs.dev/guide/assets.html#the-public-directory) for more info.
32+
33+
## Add Integrations and deployment
34+
35+
Use the `pnpm qwik add` command to add additional integrations. Some examples of integrations includes: Cloudflare, Netlify or Express Server, and the [Static Site Generator (SSG)](https://qwik.dev/qwikcity/guides/static-site-generation/).
36+
37+
```shell
38+
pnpm qwik add # or `pnpm qwik add`
39+
```
40+
41+
## Development
42+
43+
Development mode uses [Vite's development server](https://vitejs.dev/). The `dev` command will server-side render (SSR) the output during development.
44+
45+
```shell
46+
npm start # or `pnpm start`
47+
```
48+
49+
> Note: during dev mode, Vite may request a significant number of `.js` files. This does not represent a Qwik production build.
50+
51+
## Preview
52+
53+
The preview command will create a production build of the client modules, a production build of `src/entry.preview.tsx`, and run a local server. The preview server is only for convenience to preview a production build locally and should not be used as a production server.
54+
55+
```shell
56+
pnpm preview # or `pnpm preview`
57+
```
58+
59+
## Production
60+
61+
The production build will generate client and server modules by running both client and server build commands. The build command will use Typescript to run a type check on the source code.
62+
63+
```shell
64+
pnpm build # or `pnpm build`
65+
```

‎apps/dev/qwik/package.json‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
{
2+
"name": "qwik-auth-app",
3+
"description": "Qwik + Auth.js Developer app",
4+
"engines": {
5+
"node": "^18.17.0 || ^20.3.0 || >=21.0.0"
6+
},
7+
"engines-annotation": "Mostly required by sharp which needs a Node-API v9 compatible runtime",
8+
"private": true,
9+
"trustedDependencies": [
10+
"sharp"
11+
],
12+
"trustedDependencies-annotation": "Needed for bun to allow running install scripts",
13+
"type": "module",
14+
"scripts": {
15+
"build": "qwik build",
16+
"build.client": "vite build",
17+
"build.preview": "vite build --ssr src/entry.preview.tsx",
18+
"build.types": "tsc --incremental --noEmit",
19+
"deploy": "echo 'Run \"npm run qwik add\" to install a server adapter'",
20+
"dev": "vite --mode ssr",
21+
"dev.debug": "node --inspect-brk ./node_modules/vite/bin/vite.js --mode ssr --force",
22+
"fmt": "prettier --write .",
23+
"fmt.check": "prettier --check .",
24+
"preview": "qwik build preview && vite preview --open",
25+
"start": "vite --open --mode ssr",
26+
"qwik": "qwik"
27+
},
28+
"devDependencies": {
29+
"@auth/qwik": "workspace:*",
30+
"@builder.io/qwik": "^1.5.5",
31+
"@builder.io/qwik-city": "^1.5.5",
32+
"@types/eslint": "^8.56.10",
33+
"@types/node": "^20.12.7",
34+
"@typescript-eslint/eslint-plugin": "^7.7.1",
35+
"@typescript-eslint/parser": "^7.7.1",
36+
"eslint": "^8.57.0",
37+
"eslint-plugin-qwik": "^1.5.5",
38+
"prettier": "^3.2.5",
39+
"typescript": "5.4.5",
40+
"undici": "*",
41+
"vite": "^5.2.10",
42+
"vite-tsconfig-paths": "^4.2.1"
43+
}
44+
}

‎apps/dev/qwik/public/favicon.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎apps/dev/qwik/public/manifest.json‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"$schema": "https://json.schemastore.org/web-manifest-combined.json",
3+
"name": "qwik-project-name",
4+
"short_name": "Welcome to Qwik",
5+
"start_url": ".",
6+
"display": "standalone",
7+
"background_color": "#fff",
8+
"description": "A Qwik project app."
9+
}

‎apps/dev/qwik/public/robots.txt‎

Whitespace-only changes.

‎apps/dev/qwik/qwik.env.d.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
// This file can be used to add references for global types like `vite/client`.
2+
3+
// Add global `vite/client` types. For more info, see: https://vitejs.dev/guide/features#client-types
4+
/// <reference types="vite/client" />

‎apps/dev/qwik/src/components/router-head/router-head.tsx‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import { component$ } from "@builder.io/qwik"
2+
import { useDocumentHead, useLocation } from "@builder.io/qwik-city"
3+
4+
/**
5+
* The RouterHead component is placed inside of the document `<head>` element.
6+
*/
7+
export const RouterHead = component$(() => {
8+
const head = useDocumentHead()
9+
const loc = useLocation()
10+
11+
return (
12+
<>
13+
<title>{head.title}</title>
14+
15+
<link rel="canonical" href={loc.url.href} />
16+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
17+
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
18+
19+
{head.meta.map((m) => (
20+
<meta key={m.key} {...m} />
21+
))}
22+
23+
{head.links.map((l) => (
24+
<link key={l.key} {...l} />
25+
))}
26+
27+
{head.styles.map((s) => (
28+
<style
29+
key={s.key}
30+
{...s.props}
31+
{...(s.props?.dangerouslySetInnerHTML
32+
? {}
33+
: { dangerouslySetInnerHTML: s.style })}
34+
/>
35+
))}
36+
37+
{head.scripts.map((s) => (
38+
<script
39+
key={s.key}
40+
{...s.props}
41+
{...(s.props?.dangerouslySetInnerHTML
42+
? {}
43+
: { dangerouslySetInnerHTML: s.script })}
44+
/>
45+
))}
46+
</>
47+
)
48+
})

0 commit comments

Comments
 (0)