├── .eslintignore ├── .eslintrc.cjs ├── .gitignore ├── .prettierignore ├── .vscode └── extensions.json ├── README.md ├── adapters └── vercel-edge │ └── vite.config.ts ├── adaptors └── vercel-edge │ └── vite.config.ts ├── package.json ├── pnpm-lock.yaml ├── postcss.config.js ├── public ├── favicon.svg ├── fonts │ ├── poppins-400.woff2 │ ├── poppins-500.woff2 │ └── poppins-700.woff2 ├── manifest.json └── robots.txt ├── src ├── components │ ├── router-head │ │ └── router-head.tsx │ └── starter │ │ ├── counter │ │ ├── counter.module.css │ │ └── counter.tsx │ │ ├── footer │ │ ├── footer.module.css │ │ └── footer.tsx │ │ ├── gauge │ │ ├── gauge.module.css │ │ └── index.tsx │ │ ├── header │ │ ├── header.module.css │ │ └── header.tsx │ │ ├── hero │ │ ├── hero.module.css │ │ └── hero.tsx │ │ ├── icons │ │ └── qwik.tsx │ │ ├── infobox │ │ ├── infobox.module.css │ │ └── infobox.tsx │ │ ├── next-steps │ │ ├── next-steps.module.css │ │ └── next-steps.tsx │ │ └── tailwind │ │ └── tailwind-example.tsx ├── entry.dev.tsx ├── entry.preview.tsx ├── entry.ssr.tsx ├── entry.vercel-edge.tsx ├── global.css ├── root.tsx └── routes │ ├── demo │ ├── flower │ │ ├── flower.css │ │ └── index.tsx │ └── todolist │ │ ├── index.tsx │ │ └── todolist.module.css │ ├── index.tsx │ ├── layout.tsx │ ├── service-worker.ts │ └── styles.css ├── tailwind.config.js ├── tsconfig.json ├── vercel.json └── vite.config.ts /.eslintignore: -------------------------------------------------------------------------------- 1 | **/*.log 2 | **/.DS_Store 3 | *. 4 | .vscode/settings.json 5 | .history 6 | .yarn 7 | bazel-* 8 | bazel-bin 9 | bazel-out 10 | bazel-qwik 11 | bazel-testlogs 12 | dist 13 | dist-dev 14 | lib 15 | lib-types 16 | etc 17 | external 18 | node_modules 19 | temp 20 | tsc-out 21 | tsdoc-metadata.json 22 | target 23 | output 24 | rollup.config.js 25 | build 26 | .cache 27 | .vscode 28 | .rollup.cache 29 | dist 30 | tsconfig.tsbuildinfo 31 | vite.config.ts 32 | *.spec.tsx 33 | *.spec.ts 34 | .netlify 35 | pnpm-lock.yaml 36 | package-lock.json 37 | yarn.lock 38 | server 39 | -------------------------------------------------------------------------------- /.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | browser: true, 5 | es2021: true, 6 | node: true, 7 | }, 8 | extends: [ 9 | 'eslint:recommended', 10 | 'plugin:@typescript-eslint/recommended', 11 | 'plugin:qwik/recommended', 12 | ], 13 | parser: '@typescript-eslint/parser', 14 | parserOptions: { 15 | tsconfigRootDir: __dirname, 16 | project: ['./tsconfig.json'], 17 | ecmaVersion: 2021, 18 | sourceType: 'module', 19 | ecmaFeatures: { 20 | jsx: true, 21 | }, 22 | }, 23 | plugins: ['@typescript-eslint'], 24 | rules: { 25 | '@typescript-eslint/no-explicit-any': 'off', 26 | '@typescript-eslint/explicit-module-boundary-types': 'off', 27 | '@typescript-eslint/no-inferrable-types': 'off', 28 | '@typescript-eslint/no-non-null-assertion': 'off', 29 | '@typescript-eslint/no-empty-interface': 'off', 30 | '@typescript-eslint/no-namespace': 'off', 31 | '@typescript-eslint/no-empty-function': 'off', 32 | '@typescript-eslint/no-this-alias': 'off', 33 | '@typescript-eslint/ban-types': 'off', 34 | '@typescript-eslint/ban-ts-comment': 'off', 35 | 'prefer-spread': 'off', 36 | 'no-case-declarations': 'off', 37 | 'no-console': 'off', 38 | '@typescript-eslint/no-unused-vars': ['error'], 39 | '@typescript-eslint/consistent-type-imports': 'warn', 40 | }, 41 | }; 42 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 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/extensions.json 29 | .idea 30 | .DS_Store 31 | *.suo 32 | *.ntvs* 33 | *.njsproj 34 | *.sln 35 | *.sw? 36 | 37 | # Yarn 38 | .yarn/* 39 | !.yarn/releases 40 | 41 | # Vercel 42 | .vercel 43 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | **/*.log 2 | **/.DS_Store 3 | *. 4 | .vscode/settings.json 5 | .history 6 | .yarn 7 | bazel-* 8 | bazel-bin 9 | bazel-out 10 | bazel-qwik 11 | bazel-testlogs 12 | dist 13 | dist-dev 14 | lib 15 | lib-types 16 | etc 17 | external 18 | node_modules 19 | temp 20 | tsc-out 21 | tsdoc-metadata.json 22 | target 23 | output 24 | rollup.config.js 25 | build 26 | .cache 27 | .vscode 28 | .rollup.cache 29 | dist 30 | tsconfig.tsbuildinfo 31 | vite.config.ts 32 | *.spec.tsx 33 | *.spec.ts 34 | .netlify 35 | pnpm-lock.yaml 36 | package-lock.json 37 | yarn.lock 38 | server 39 | -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["dbaeumer.vscode-eslint", "unifiedjs.vscode-mdx"], 3 | "unwantedRecommendations": [] 4 | } 5 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Qwik City App ⚡️ 2 | 3 | - [Qwik Docs](https://qwik.builder.io/) 4 | - [Discord](https://qwik.builder.io/chat) 5 | - [Qwik GitHub](https://github.com/BuilderIO/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.builder.io/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.builder.io/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 include: Cloudflare, Netlify or Express server, and the [Static Site Generator (SSG)](https://qwik.builder.io/qwikcity/guides/static-site-generation/). 36 | 37 | ```shell 38 | pnpm qwik add # or `yarn qwik add` 39 | ``` 40 | 41 | ## Development 42 | 43 | Development mode uses [Vite's development server](https://vitejs.dev/). During development, the `dev` command will server-side render (SSR) the output. 44 | 45 | ```shell 46 | npm start # or `yarn 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 locally preview a production build, and it should not be used as a production server. 54 | 55 | ```shell 56 | pnpm preview # or `yarn preview` 57 | ``` 58 | 59 | ## Production 60 | 61 | The production build will generate client and server modules by running both client and server build commands. Additionally, the build command will use Typescript to run a type check on the source code. 62 | 63 | ```shell 64 | pnpm build # or `yarn build` 65 | ``` 66 | 67 | ## Vercel Edge 68 | 69 | This starter site is configured to deploy to [Vercel Edge Functions](https://vercel.com/docs/concepts/functions/edge-functions), which means it will be rendered at an edge location near to your users. 70 | 71 | ## Installation 72 | 73 | The adaptor will add a new `vite.config.ts` within the `adapters/` directory, and a new entry file will be created, such as: 74 | 75 | ``` 76 | └── adapters/ 77 | └── vercel-edge/ 78 | └── vite.config.ts 79 | └── src/ 80 | └── entry.vercel-edge.tsx 81 | ``` 82 | 83 | Additionally, within the `package.json`, the `build.server` script will be updated with the Vercel Edge build. 84 | 85 | ## Production build 86 | 87 | To build the application for production, use the `build` command, this command will automatically run `pnpm build.server` and `pnpm build.client`: 88 | 89 | ```shell 90 | pnpm build 91 | ``` 92 | 93 | [Read the full guide here](https://github.com/BuilderIO/qwik/blob/main/starters/adapters/vercel-edge/README.md) 94 | 95 | ## Dev deploy 96 | 97 | To deploy the application for development: 98 | 99 | ```shell 100 | pnpm deploy 101 | ``` 102 | 103 | Notice that you might need a [Vercel account](https://docs.Vercel.com/get-started/) in order to complete this step! 104 | 105 | ## Production deploy 106 | 107 | The project is ready to be deployed to Vercel. However, you will need to create a git repository and push the code to it. 108 | 109 | You can [deploy your site to Vercel](https://vercel.com/docs/concepts/deployments/overview) either via a Git provider integration or through the Vercel CLI. 110 | -------------------------------------------------------------------------------- /adapters/vercel-edge/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { vercelEdgeAdapter } from '@builder.io/qwik-city/adapters/vercel-edge/vite'; 2 | import { extendConfig } from '@builder.io/qwik-city/vite'; 3 | import baseConfig from '../../vite.config'; 4 | 5 | export default extendConfig(baseConfig, () => { 6 | return { 7 | build: { 8 | ssr: true, 9 | rollupOptions: { 10 | input: ['src/entry.vercel-edge.tsx', '@qwik-city-plan'], 11 | }, 12 | outDir: '.vercel/output/functions/_qwik-city.func', 13 | }, 14 | plugins: [vercelEdgeAdapter()], 15 | }; 16 | }); 17 | -------------------------------------------------------------------------------- /adaptors/vercel-edge/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { vercelEdgeAdaptor } from '@builder.io/qwik-city/adaptors/vercel-edge/vite'; 2 | import { extendConfig } from '@builder.io/qwik-city/vite'; 3 | import baseConfig from '../../vite.config'; 4 | 5 | export default extendConfig(baseConfig, () => { 6 | return { 7 | build: { 8 | ssr: true, 9 | rollupOptions: { 10 | input: ['src/entry.vercel-edge.tsx', '@qwik-city-plan'], 11 | }, 12 | outDir: '.vercel/output/functions/_qwik-city.func', 13 | }, 14 | plugins: [ 15 | vercelEdgeAdaptor({ 16 | staticGenerate: true, 17 | }), 18 | ], 19 | }; 20 | }); 21 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "my-qwik-basic-starter", 3 | "description": "App with Routing built-in (recommended)", 4 | "engines": { 5 | "node": ">=15.0.0" 6 | }, 7 | "private": true, 8 | "scripts": { 9 | "build": "qwik build", 10 | "build.client": "vite build", 11 | "build.preview": "vite build --ssr src/entry.preview.tsx", 12 | "build.server": "vite build -c adapters/vercel-edge/vite.config.ts", 13 | "build.types": "tsc --incremental --noEmit", 14 | "deploy": "vercel deploy", 15 | "dev": "vite --mode ssr", 16 | "dev.debug": "node --inspect-brk ./node_modules/vite/bin/vite.js --mode ssr --force", 17 | "fmt": "prettier --write .", 18 | "fmt.check": "prettier --check .", 19 | "lint": "eslint \"src/**/*.ts*\"", 20 | "preview": "qwik build preview && vite preview --open", 21 | "start": "vite --open --mode ssr", 22 | "qwik": "qwik" 23 | }, 24 | "devDependencies": { 25 | "@builder.io/qwik": "1.0.0", 26 | "@builder.io/qwik-city": "~1.0.0", 27 | "@types/eslint": "8.37.0", 28 | "@types/node": "^18.16.0", 29 | "@typescript-eslint/eslint-plugin": "5.59.1", 30 | "@typescript-eslint/parser": "5.59.1", 31 | "autoprefixer": "^10.4.14", 32 | "eslint": "8.39.0", 33 | "eslint-plugin-qwik": "0.104.0", 34 | "postcss": "^8.4.23", 35 | "prettier": "2.8.8", 36 | "tailwindcss": "^3.3.1", 37 | "typescript": "5.0.4", 38 | "undici": "5.22.0", 39 | "vercel": "^28.19.0", 40 | "vite": "4.3.2", 41 | "vite-tsconfig-paths": "4.2.0" 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /public/favicon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/fonts/poppins-400.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BuilderIO/qwik-tw-vercel-starter-kit/ae4e2e60fbe7ede06703e080da8bdc9f11be3d1a/public/fonts/poppins-400.woff2 -------------------------------------------------------------------------------- /public/fonts/poppins-500.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BuilderIO/qwik-tw-vercel-starter-kit/ae4e2e60fbe7ede06703e080da8bdc9f11be3d1a/public/fonts/poppins-500.woff2 -------------------------------------------------------------------------------- /public/fonts/poppins-700.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BuilderIO/qwik-tw-vercel-starter-kit/ae4e2e60fbe7ede06703e080da8bdc9f11be3d1a/public/fonts/poppins-700.woff2 -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 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 | } 10 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BuilderIO/qwik-tw-vercel-starter-kit/ae4e2e60fbe7ede06703e080da8bdc9f11be3d1a/public/robots.txt -------------------------------------------------------------------------------- /src/components/router-head/router-head.tsx: -------------------------------------------------------------------------------- 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 `` element. 6 | */ 7 | export const RouterHead = component$(() => { 8 | const head = useDocumentHead(); 9 | const loc = useLocation(); 10 | 11 | return ( 12 | <> 13 | {head.title} 14 | 15 | 16 | 17 | 18 | 19 | {head.meta.map((m) => ( 20 | 21 | ))} 22 | 23 | {head.links.map((l) => ( 24 | 25 | ))} 26 | 27 | {head.styles.map((s) => ( 28 |