Skip to content

Commit 505afe8

Browse files
gioboagioboa
committed
add demo app
1 parent 6303dae commit 505afe8

26 files changed

+985
-0
lines changed

‎apps/demo/.eslintrc.json‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
{
2+
"extends": [
3+
"eslint:recommended",
4+
"plugin:@typescript-eslint/recommended",
5+
"plugin:qwik/recommended",
6+
"../../.eslintrc.json"
7+
],
8+
"parser": "@typescript-eslint/parser",
9+
"parserOptions": {
10+
"project": ["apps/demo/tsconfig.*?.json"],
11+
"ecmaVersion": 2021,
12+
"sourceType": "module",
13+
"ecmaFeatures": {
14+
"jsx": true
15+
}
16+
},
17+
"plugins": ["@typescript-eslint"],
18+
"ignorePatterns": ["!**/*"],
19+
"overrides": [
20+
{
21+
"files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
22+
"rules": {}
23+
},
24+
{
25+
"files": ["*.ts", "*.tsx"],
26+
"rules": {}
27+
},
28+
{
29+
"files": ["*.js", "*.jsx"],
30+
"rules": {}
31+
}
32+
]
33+
}

‎apps/demo/.prettierignore‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
# Files Prettier should not format
2+
**/*.log
3+
**/.DS_Store
4+
*.
5+
dist
6+
node_modules

‎apps/demo/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.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 a 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/static-site-generation/static-site-config/).
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+
```

‎apps/demo/package.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"name": "demo"
3+
}

‎apps/demo/project.json‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
{
2+
"name": "demo",
3+
"$schema": "../../node_modules/nx/schemas/project-schema.json",
4+
"projectType": "application",
5+
"sourceRoot": "apps/demo/src",
6+
"targets": {
7+
"build": {
8+
"executor": "qwik-nx:build",
9+
"options": {
10+
"runSequence": ["demo:build.client", "demo:build.ssr"],
11+
"outputPath": "dist/apps/demo"
12+
},
13+
"configurations": {
14+
"preview": {}
15+
}
16+
},
17+
"build.client": {
18+
"executor": "@nx/vite:build",
19+
"options": {
20+
"outputPath": "dist/apps/demo",
21+
"configFile": "apps/demo/vite.config.ts"
22+
}
23+
},
24+
"build.ssr": {
25+
"executor": "@nx/vite:build",
26+
"defaultConfiguration": "preview",
27+
"options": {
28+
"outputPath": "dist/apps/demo"
29+
},
30+
"configurations": {
31+
"preview": {
32+
"ssr": "src/entry.preview.tsx",
33+
"mode": "production"
34+
}
35+
}
36+
},
37+
"preview": {
38+
"executor": "@nx/vite:preview-server",
39+
"options": {
40+
"buildTarget": "demo:build",
41+
"port": 4300
42+
}
43+
},
44+
"test": {
45+
"executor": "@nx/vite:test",
46+
"outputs": ["../../coverage/apps/demo"],
47+
"options": {
48+
"passWithNoTests": true,
49+
"reportsDirectory": "../../coverage/apps/demo"
50+
}
51+
},
52+
"serve": {
53+
"executor": "@nx/vite:dev-server",
54+
"options": {
55+
"buildTarget": "demo:build.client",
56+
"mode": "ssr",
57+
"port": 4200
58+
}
59+
},
60+
"serve.debug": {
61+
"executor": "nx:run-commands",
62+
"options": {
63+
"command": "node --inspect-brk ../../node_modules/vite/bin/vite.js --mode ssr --force",
64+
"cwd": "apps/demo"
65+
}
66+
},
67+
"lint": {
68+
"executor": "@nx/linter:eslint",
69+
"outputs": ["{options.outputFile}"],
70+
"options": {
71+
"lintFilePatterns": ["apps/demo/**/*.{ts,tsx,js,jsx}"]
72+
}
73+
}
74+
},
75+
"tags": []
76+
}

‎apps/demo/public/favicon.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎apps/demo/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/demo/public/robots.txt‎

Whitespace-only changes.

‎apps/demo/src/components/header/header.css‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
header {
2+
display: flex;
3+
background: white;
4+
border-bottom: 10px solid var(--qwik-dark-purple);
5+
}
6+
7+
header .logo a {
8+
display: inline-block;
9+
padding: 10px 10px 7px 20px;
10+
}
11+
12+
header ul {
13+
margin: 0;
14+
padding: 3px 10px 0 0;
15+
list-style: none;
16+
flex: 1;
17+
text-align: right;
18+
}
19+
20+
header li {
21+
display: inline-block;
22+
margin: 0;
23+
padding: 0;
24+
}
25+
26+
header li a {
27+
display: inline-block;
28+
padding: 15px 10px;
29+
text-decoration: none;
30+
}
31+
32+
header li a:hover {
33+
text-decoration: underline;
34+
}

‎apps/demo/src/components/header/header.tsx‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import { component$, useStylesScoped$ } from '@builder.io/qwik';
2+
import { QwikLogo } from '../icons/qwik';
3+
import styles from './header.css?inline';
4+
5+
export default component$(() => {
6+
useStylesScoped$(styles);
7+
8+
return (
9+
<header>
10+
<div class="logo">
11+
<a href="https://qwik.builder.io/" target="_blank">
12+
<QwikLogo />
13+
</a>
14+
</div>
15+
<ul>
16+
<li>
17+
<a
18+
href="https://qwik.builder.io/docs/components/overview/"
19+
target="_blank"
20+
>
21+
Docs
22+
</a>
23+
</li>
24+
<li>
25+
<a
26+
href="https://qwik.builder.io/examples/introduction/hello-world/"
27+
target="_blank"
28+
>
29+
Examples
30+
</a>
31+
</li>
32+
<li>
33+
<a
34+
href="https://qwik.builder.io/tutorial/welcome/overview/"
35+
target="_blank"
36+
>
37+
Tutorials
38+
</a>
39+
</li>
40+
</ul>
41+
</header>
42+
);
43+
});

0 commit comments

Comments
 (0)