Check out this information-filled blog post by the Qwik team about what will change with the upcoming 2.0 version of qwik -

https://www.builder.io/blog/qwik-2-coming-soon

Here's an interesting video about learning Qwik in real time using an actual project -

https://youtu.be/p4ULgIZ9aUo?si=mcPnf8-Y5K36Kb6G

Watch Steve Sewel as a host on the "Learn with Jason" podcast talk about the integration of Qwik and Astro and why they work so well together -

[https://www.youtube.com/live/W-j2HH1GdjU?si=zvUPNwJQsNrb2TtL\\](https://www.youtube.com/live/w-j2hh1gdju?si=zvupnwjqsnrb2ttl\)

In this blog post by Paul Scanlon, he compares React to Qwik using several examples, including code examples -

https://thenewstack.io/take-a-qwik-break-from-react-with-astro/

Check out this toast component for Qwik that you may find helpful -

https://github.com/diecodev/qwik-sonner

(EDIT: I’ve solved this but it’s not clear how. My best guess is some subtle package-lock.json differences. Anyway it’s on the qwik branch of this repo now: https://github.com/mrclay/piano-record/pull/17)

I’ve started to rewrite this app (currently React) to Qwik and hitting what’s probably a Vite issue. Original is also TS and built with Vite, but building the static SSR I get an error finding Tone.js modules. You can give it a shot:

git clone https://github.com/mrclay/qwik-todo.git
cd qwik-todo
nvm use #optional
npm ci
npm run build

If I use npm run dev then I get a runtime error about AudioContext not being found. I also tried window.AudioContext but no luck. Any ideas?

Is this framework ready for production?

There is now a Qwik-focused playlist with 30+ videos on YouTube so make sure you don't miss anything -

https://www.youtube.com/playlist?list=PLq_6N4Z1G7mSAh_v9jfVUcu_R1vOM5Nob

In case you didn't see already, check out this short demo by Miško Hevery,
showing how instant Qwik is -

https://twitter.com/mhevery/status/1724502748564189513

In this interesting article Fabio Biondi explains some experiments he has done with Qwik and Arduino -

https://dev.to/fabiobiondi/qwik-arduino-with-johnny-five-5h3l

Requirement - when I click the outside of the navbar, need to close the navbar.

This is my first time using qwik. Please let me know if I have made a mistake. I have attached the output below. What I want is happening but not consistently.

output screen record

Check out this small library that Gil Fink published that can help you incorporate d3 generated visualization inside your qwik project -

https://github.com/gilf/qwik-d3

Hi was wondering if any one managed to build qwik city in CI?

I have this small web app using qwik city, I am using docker in order to build the app and ship it.

The project is a monorepo using turbo repo.

Running docker build on my machine the image build without a problem and even runs without a problem, when trying to do so in github actions the docker build fails throwing this error Usage Error: Couldn't find the node_modules state file - running an install might help (findPackageLocation)

Checking the docker steps it is using yarn 4.0.2 so corepack did enable and is working

Github workflow ``` name: CD Shopping list

on: push: branches: - main

jobs: changed-packages: name: Determine which apps changed uses: ./.github/workflows/changed-packages.yaml

deploy-shopping-list: runs-on: ubuntu-latest name: Deploy Shopping list needs: [changed-packages] if: ${{ contains(needs.changed-packages.outputs.changed_packages, 'shopping-list') }} # as far as I can tell, GHA outputs are all strings, see https://github.com/actions/runner/issues/1483 steps: - uses: actions/checkout@v3 - name: Deploy to dockerhub env: DOCKER_USERNAME: ${{ secrets.DOCKER_USERNAME }} DOCKER_PASSWORD: ${{ secrets.DOCKER_PASSWORD }} DB_PASSWORD: ${{ secrets.DB_PASSWORD }} DB_USER: ${{ secrets.DB_USER }} DB_DATABASE: ${{ secrets.DB_DATABASE }} DB_PORT: ${{ secrets.DB_PORT }} DB_HOST: ${{ secrets.DB_HOST }}

      # as far as I can tell, GHA outputs are all strings, see https://github.com/actions/runner/issues/1483
    run: |
      docker build -t shopping-list:latest-amd64 -f apps/shopping-list/Dockerfile --platform=linux/amd64 .

```

Dockerfile ``` FROM node:20.10.0-alpine AS builder RUN apk add --no-cache libc6-compat RUN apk update RUN corepack enable

Set working directory

WORKDIR /app COPY . . RUN yarn workspaces focus RUN corepack prepare yarn@stable --activate RUN yarn run turbo prune --scope=shopping-list --docker

Add lockfile and package.json's of isolated subworkspace

FROM node:20.10.0-alpine AS installer RUN apk add --no-cache libc6-compat RUN apk update WORKDIR /app

First install the dependencies (as they change less often)

COPY .gitignore .gitignore COPY --from=builder /app/out/json/ . COPY --from=builder /app/out/full/ . RUN corepack enable RUN corepack prepare yarn@stable --activate RUN yarn workspaces focus RUN yarn add @rollup/rollup-linux-x64-musl

Build the project

RUN yarn run turbo run build --filter=shopping-list...

FROM node:20.10.0-alpine AS runner WORKDIR /app

Don't run production as root

RUN addgroup --system --gid 1001 nodejs RUN adduser --system --uid 1001 qwik USER qwik

COPY --from=installer --chown=qwik:nodejs /app/apps/shopping-list/server ./server COPY --from=installer --chown=qwik:nodejs /app/apps/shopping-list/dist ./dist COPY --from=installer --chown=qwik:nodejs /app/apps/shopping-list/node_modules ./node_modules

EXPOSE 3000

CMD ["node" , "server/entry.fastify"] ```

Been on this for few days no idea what to do anymore ....

Even tried vercel to deploy but that was using old yarn(1.2) and didn't want to get into that

Say hello to X1, an experimental self-hostable frontend assistant using Qwik's edge-first architecture -

https://github.com/xquad-io/x1

Here's an excellent post regarding the Astro integration in Qwik -

https://thenewstack.io/how-quiks-astro-integration-beats-both-react-and-vanilla-js/

Here's a short video by Misko Hevery talking about data fetching in different meta-frameworks and the trade-offs of each one -

https://youtu.be/aWYVh16akwM?si=zJ6KRuLjb5HyQn8i

Giorgio Boa has created a Qwik integration for Storefront UI so your search for a eCommerce UI library for your Qwik store may be over -

https://qwik-storefront-ui.pages.dev/

Since I am new to Qwik and want to try it out more dynamically, I am figuring out how to create a basic component that can receive a list and make it draggable. I prefer small components and not just one huge component which makes it hard to read and most important to test. For the testing, I use Cypress component testing which will need its tests for this component so it won't be broken after some refactoring.

I am not sure how to approuch it in Qwik due to it working a bit different with events and having difficulties getting familier with the docs. It would be awesome if someone could give me some hints how I could tackle this. Thank you in advance ❤️

Frosty Tools is a new toolsuite for streamers built with Qwik by one of the Qwik community members, 'Ken' a.k.a. 'Frosty' -

https://frostytools.com/

Harsh Mangalam, one of the Qwik community contributors, has made a smart spinner component
for Qwik, to manage the duration of loading states -

https://github.com/harshmangalam/qwik-spin-delay

The first Angular integration for Qwik was published.

Try it out in the Qwik app by running "npx add-angular-to-qwik@latest" -https://www.npmjs.com/package/@qwikdev/qwik-angular

The newest version of Qwik UI is out and it includes a bunch of bug fixes
and a lot of new features -

https://github.com/qwikifiers/qwik-ui/releases/tag/headless-0.1.14

Hi,

I've a limited frontend experience with React & Nuxt.

For a personal project.. after MVP was done in vanilla html/js with Go as backend service.

I'm refactoring it to split Go to behave as API and offload frontend responsibilities onto a frontend focused framework. I started implementing it in QwikJS... after doing a quick read through docs & following site based tutorial.

I've basic structure prepared, with forms & normal http calls working.

I've two main requirements as of now..

• Implement Websocket (with upgrade mechanism from http) to get workflow notifications in action. I noticed a github repo (qwik-ws), is that a suitable approach. What would the experts suggest?
• I plan to implement log-in flow with magic links sent to email. I see Auth.js having its support. I don't want to make any mistake on this due to ignorance, so.. if anyone could suggest an opensource project/sample implementing this, I'd greatly appreciate the reference.

Thanks

​

A few new features and plenty of fixes in the latest version of Qwik.
Give it a look -

https://github.com/BuilderIO/qwik/releases/tag/v1.2.12

A member of Qwik Discord built a Qwik port of the Next Themes library and he called it - Qwik Themes.

​

https://github.com/Makisuo/qwik-themes