This project is using Qwik with QwikCity. 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.
Inside your project, you'll see the following directory structure:
├── public/
│ └── ...
└── src/
├── components/
│ └── ...
└── routes/
└── ...
-
src/routes: Provides the directory-based routing, which can include a hierarchy oflayout.tsxlayout files, and anindex.tsxfile as the page. Additionally,index.tsfiles are endpoints. Please see the routing docs for more info. -
src/components: Recommended directory for components. -
public: Any static assets, like images, can be placed in the public directory. Please see the Vite public directory for more info.
Use the npm run qwik add command to add additional integrations. Some examples of integrations includes: Cloudflare, Netlify or Express Server, and the Static Site Generator (SSG).
npm run qwik add # or `yarn qwik add`Development mode uses Vite's development server. The dev command will server-side render (SSR) the output during development.
npm start # or `yarn start`Note: during dev mode, Vite may request a significant number of
.jsfiles. This does not represent a Qwik production build.
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.
npm run preview # or `yarn preview`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.
npm run build # or `yarn build`Cloudflare's wrangler CLI can be used to preview a production build locally. To start a local server, run:
npm run serve
Then visit http://localhost:8787/
Cloudflare Pages are deployable through their Git provider integrations.
If you don't already have an account, then create a Cloudflare account here. Next go to your dashboard and follow the Cloudflare Pages deployment guide.
Within the projects "Settings" for "Build and deployments", the "Build command" should be npm run build, and the "Build output directory" should be set to dist.
Cloudflare Page's function-invocation-routes config 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.
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:
{
"include": [
"/*"
],
"exclude": [
"/_headers",
"/_redirects",
"/build/*",
"/favicon.ico",
"/manifest.json",
"/service-worker.js",
"/about"
],
"version": 1
}
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.
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.
Run the following command:
npm create cloudflare@latest -- my-qwik-app --framework=qwik
refer to this guide for more information.
Go to https://github.com/settings/developers and create a new OAuth App.
*Make sure that the authorization callback URL is set to "homepage URL" + /auth/callback/github i.e.
homepage URL = http://localhost:1000/
then
authorization callback URL = http://localhost:1000/auth/callback/github
*MAKE SURE TO COPY THE CLIENT SECRET PROVIDED ONCE YOU CREATE THE OAUTH APP
- If you haven't yet, push the new repository up to github. Upon doing so, go to
https://github.com/{user}/{repo}/settings/secrets/actionsand add both the client id and client seceret that was just created for the oauth app to your new repository under "Repository Secrets". If you use a diffent enviornment manager, you can place those variables there.
Step 4: Modify/Create [email protected]
paste the following code:
import { QwikAuth$ } from "@auth/qwik";
import GitHub from "@auth/qwik/providers/github";
export const { onRequest, useSession, useSignIn, useSignOut, } = QwikAuth$(
({ env }) => ({
secret: env.get('NEXTAUTH_SECRET'),
trustHost: true,
providers: [
GitHub({
clientId: env.get('AUTH_GITHUB_ID'),
clientSecret: env.get('AUTH_GITHUB_SECRET'),
authorization: {
params: {
scope: "read:user user:email repo"
}
}
})
],
cookies:{
pkceCodeVerifier: {
name: "github.pkce.code_verifier",
options: {
httpOnly: true,
sameSite: 'none',
path: "/",
secure: true
},
},
},
callbacks: {
async session({ token, session }) {
// @ts-ignore
session.user.accessToken = token.accessToken
return session
},
async jwt({ token, account }) {
if (account) {
token.accessToken = account.access_token
}
return token
},
},
}),
);
Lines 65-75 are important in order to get back the AccessToken which you need in order to pass through all subsequent API calls
You now have a fully functioning Qwik/Cloudflare/Github Oauth app that should be able to successuly make calls to the github api.