Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update Qwik example to latest version #132

Merged
merged 2 commits into from
Apr 24, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 0 additions & 2 deletions examples/v7-nextjs/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -37,5 +37,3 @@ npm run edgio:deploy
```

Check out our [Next.js documentation](https://docs.edg.io/guides/v7/sites_frameworks/getting_started/next) for more details.

#
1 change: 0 additions & 1 deletion examples/v7-qwik/.prettierignore
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,6 @@ build
.cache
.vscode
.rollup.cache
dist
tsconfig.tsbuildinfo
vite.config.ts
*.spec.tsx
Expand Down
7 changes: 7 additions & 0 deletions examples/v7-qwik/.vscode/launch.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,13 @@
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"name": "Launch Chrome",
"request": "launch",
"type": "chrome",
"url": "http://localhost:5173",
"webRoot": "${workspaceFolder}"
},
{
"type": "node",
"name": "dev.debug",
Expand Down
14 changes: 7 additions & 7 deletions examples/v7-qwik/.vscode/qwik-city.code-snippets
Original file line number Diff line number Diff line change
Expand Up @@ -6,20 +6,20 @@
"body": [
"export const onRequest: RequestHandler = (request) => {",
" $0",
"};"
]
"};",
],
},
"loader$": {
"scope": "javascriptreact,typescriptreact",
"prefix": "qloader$",
"description": "loader$()",
"body": ["export const $1 = routeLoader$(() => {", " $0", "});"]
"body": ["export const $1 = routeLoader$(() => {", " $0", "});"],
},
"action$": {
"scope": "javascriptreact,typescriptreact",
"prefix": "qaction$",
"description": "action$()",
"body": ["export const $1 = routeAction$((data) => {", " $0", "});"]
"body": ["export const $1 = routeAction$((data) => {", " $0", "});"],
},
"Full Page": {
"scope": "javascriptreact,typescriptreact",
Expand All @@ -30,7 +30,7 @@
"",
"export default component$(() => {",
" $0",
"});"
]
}
"});",
],
},
}
26 changes: 13 additions & 13 deletions examples/v7-qwik/.vscode/qwik.code-snippets
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@
"body": [
"export const ${1:${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}} = component$(() => {",
" return <${2:div}>$4</$2>",
"});"
]
"});",
],
},
"Qwik component (props)": {
"scope": "typescriptreact",
Expand All @@ -25,32 +25,32 @@
" $6",
" </${3}>",
" );",
"});"
]
"});",
],
},
"Qwik signal": {
"scope": "javascriptreact,typescriptreact",
"prefix": "quseSignal",
"description": "useSignal() declaration",
"body": ["const ${1:foo} = useSignal($2);", "$0"]
"body": ["const ${1:foo} = useSignal($2);", "$0"],
},
"Qwik store": {
"scope": "javascriptreact,typescriptreact",
"prefix": "quseStore",
"description": "useStore() declaration",
"body": ["const ${1:state} = useStore({", " $2", "});", "$0"]
"body": ["const ${1:state} = useStore({", " $2", "});", "$0"],
},
"$ hook": {
"scope": "javascriptreact,typescriptreact",
"prefix": "q$",
"description": "$() function hook",
"body": ["$(() => {", " $0", "});", ""]
"body": ["$(() => {", " $0", "});", ""],
},
"useVisibleTask": {
"scope": "javascriptreact,typescriptreact",
"prefix": "quseVisibleTask",
"description": "useVisibleTask$() function hook",
"body": ["useVisibleTask$(({ track }) => {", " $0", "});", ""]
"body": ["useVisibleTask$(({ track }) => {", " $0", "});", ""],
},
"useTask": {
"scope": "javascriptreact,typescriptreact",
Expand All @@ -61,8 +61,8 @@
" track(() => $1);",
" $0",
"});",
""
]
"",
],
},
"useResource": {
"scope": "javascriptreact,typescriptreact",
Expand All @@ -72,7 +72,7 @@
"const $1 = useResource$(({ track, cleanup }) => {",
" $0",
"});",
""
]
}
"",
],
},
}
66 changes: 31 additions & 35 deletions examples/v7-qwik/README.md
Original file line number Diff line number Diff line change
@@ -1,48 +1,54 @@
# Edgio v7 Qwik Template
This is a [Qwik](https://qwik.dev/) project bootstrapped with QwikCity and powered by [Edgio](https://edg.io).

This example is a basic Qwik template powered by Edgio.
## Getting Started

**Preview**: https://edgio-community-examples-v7-qwik-live.edgio.link/

To get started with local development, run the following to install the Edgio CLI and start the development server:
### Install Packages

```bash
# Install the latest version of the Edgio CLI
npm i -g @edgio/cli@latest

npm install
npm run edgio:dev
```

To test the production build locally, run the following commands:
### Local Development Server

```bash
npm run edgio:build

edgio run -p
npm run edgio:dev
```

When you're ready to deploy, run the following commands:
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

You can start editing the page by modifying `src/routes/index.tsx`. The page auto-updates as you edit the file.

## Learn More

To learn more about Edgio, take a look at the following resources:

- [Edgio Documentation](https://docs.edg.io) - learn about Edgio features

## Deploy on Edgio

Deploy this project on Edgio with the following command:

```bash
npm run edgio:deploy
```

Check out our [Qwik documentation](https://docs.edg.io/applications/v7/sites_frameworks/getting_started/qwik) for more details.

---

## Qwik City App ⚡️
# Qwik City App ⚡️

- [Qwik Docs](https://qwik.builder.io/)
- [Discord](https://qwik.builder.io/chat)
- [Qwik Docs](https://qwik.dev/)
- [Discord](https://qwik.dev/chat)
- [Qwik GitHub](https://github.com/BuilderIO/qwik)
- [@QwikDev](https://twitter.com/QwikDev)
- [Vite](https://vitejs.dev/)

---

### Project Structure
## Project Structure

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.
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.

Inside your project, you'll see the following directory structure:

Expand All @@ -56,21 +62,21 @@ Inside your project, you'll see the following directory structure:
└── ...
```

- `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.
- `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.

- `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](https://vitejs.dev/guide/assets.html#the-public-directory) for more info.

### Add Integrations and deployment
## Add Integrations and deployment

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)](https://qwik.builder.io/qwikcity/guides/static-site-generation/).
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)](https://qwik.dev/qwikcity/guides/static-site-generation/).

```shell
npm run qwik add # or `yarn qwik add`
```

### Development
## Development

Development mode uses [Vite's development server](https://vitejs.dev/). The `dev` command will server-side render (SSR) the output during development.

Expand All @@ -80,28 +86,18 @@ npm start # or `yarn start`

> Note: during dev mode, Vite may request a significant number of `.js` files. This does not represent a Qwik production build.

### Preview
## Preview

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.

```shell
npm run preview # or `yarn preview`
```

### Production
## Production

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.

```shell
npm run build # or `yarn build`
```

## Express Server

This app has a minimal [Express server](https://expressjs.com/) implementation. After running a full build, you can preview the build using the command:

```
npm run serve
```

Then visit [http://localhost:8080/](http://localhost:8080/)
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,18 @@ module.exports = {
// The name of the site in Edgio to which this app should be deployed.
// name: 'my-site-name',

// The name of the team in Edgio to which this app should be deployed.
// team: 'my-team-name',
// The name of the organization in Edgio to which this app should be deployed.
// organization: 'my-organization-name',

// Overrides the default path to the routes file. The path should be relative to the root of your app.
// routes: 'routes.js',



// When set to true or omitted entirely, Edgio includes the deployment number in the cache key,
// effectively purging the cache each time you deploy.
// purgeCacheOnDeploy: false,

// If you need to proxy some URLs to an origin instead of your Next.js app, you can configure the origins here:
// origins: [
// {
Expand All @@ -21,13 +27,13 @@ module.exports = {
//
// // When provided, the following value will be sent as the host header when connecting to the origin.
// // If omitted, the host header from the browser will be forwarded to the origin.
// override_host_header: "example.com",
// override_host_header: "test-origin.edgio.net",
//
// // The list of backend hosts
// hosts: [
// {
// // The domain name or IP address of the origin server
// location: "example.com"
// location: "test-origin.edgio.net"
// }
// ]
// }
Expand All @@ -38,10 +44,10 @@ module.exports = {
// // Set to true to include all packages listed in the dependencies property of package.json when deploying to Edgio.
// // This option generally isn't needed as Edgio automatically includes all modules imported by your code in the bundle that
// // is uploaded during deployment
// includeNodeModules: true,
// // includeNodeModules: true,
//
// // Include additional paths that are dynamically loaded by your app at runtime here when building the serverless bundle.
// include: ['views/**/*'],
// // include: ['views/**/*'],
// },

// The maximum number of URLs that will be concurrently prerendered during deployment when static prerendering is enabled.
Expand Down
Loading
Loading