Merge pull request #132 from edgio-docs/COMSUP-320_qwik

Update Qwik example to latest version

examples/v7-nextjs/README.md

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

examples/v7-qwik/.prettierignore

@@ -26,7 +26,6 @@ build
 .cache
 .vscode
 .rollup.cache
-dist
 tsconfig.tsbuildinfo
 vite.config.ts
 *.spec.tsx

examples/v7-qwik/.vscode/launch.json

@@ -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",

examples/v7-qwik/.vscode/qwik-city.code-snippets

@@ -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",
@@ -30,7 +30,7 @@
       "",
       "export default component$(() => {",
       "  $0",
-      "});"
-    ]
-  }
+      "});",
+    ],
+  },
 }

examples/v7-qwik/.vscode/qwik.code-snippets

@@ -6,8 +6,8 @@
     "body": [
       "export const ${1:${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}} = component$(() => {",
       "  return <${2:div}>$4</$2>",
-      "});"
-    ]
+      "});",
+    ],
   },
   "Qwik component (props)": {
     "scope": "typescriptreact",
@@ -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",
@@ -61,8 +61,8 @@
       "  track(() => $1);",
       "  $0",
       "});",
-      ""
-    ]
+      "",
+    ],
   },
   "useResource": {
     "scope": "javascriptreact,typescriptreact",
@@ -72,7 +72,7 @@
       "const $1 = useResource$(({ track, cleanup }) => {",
       "  $0",
       "});",
-      ""
-    ]
-  }
+      "",
+    ],
+  },
 }

examples/v7-qwik/README.md

@@ -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:
 
@@ -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.
 
@@ -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/)

examples/v7-qwik/edgio.config.js → examples/v7-qwik/edgio.config.cjs

@@ -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: [
   //   {
@@ -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"
   //       }
   //     ]
   //   }
@@ -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.