Introducing Qwik integration for Nx

Intro

While the Qwik framework itself confidently continues its way to v1, it feels like an exactly right time to introduce the Nx plugin for it, which is named qwik-nx. The main functionality that this plugin provides is the generation and execution of Qwik applications in an Nx workspace that fits the standards of other Nx applications.
Since Qwik itself uses Vite as a build tool, this Nx plugin leverages the functionality of the brand new @nrwl/vite package to build and run your Qwik applications.

Getting started

The first thing to be done in order to get started is to generate an Nx workspace. qwik-nx plugin is one of the first that uses Nx’s custom interactive presets, so all you need to do is simply run npx create-nx-workspace@latest --preset=qwik-nx. You will firstly be prompted with generic questions like what workspace name to use and whether to enable Nx Cloud and after short initialization it will proceed with Qwik specific questions.

Once done, you will end up with a pretty much regular Nx repository with a Qwik application with Qwik city and all relevant dependencies installed.

At this point it is only possible to create a basic app with Qwik City, but we are planning to include all other starters that standard Qwik CLI provides.

Creating new applications, libraries and components

Upon setting up the workspace, we will get access to a bunch of neat generators that the qwik-nx plugin has prepared. It’s highly recommended to use Nx console plugins for VS Code and Webstorm, since they do the perfect job visualizing all configuration options and actual changes with dry runs.

Generating new apps

In VS Code’s Nx Console by clicking generate => qwik-nx - application you will see the following options

Alternatively you can run npx nx generate qwik-nx:application <name> with the same options you see on the screenshot above. With everything left as-is we will end up with exactly the same application as what was created during the initialization process.

There is a lot of excitement around tailwind as well, so it is worth mentioning that it’s possible to include tailwind configuration for the app that is being created using the tailwind option. If you haven’t done so, you can always do it later by running npx nx generate qwik-nx:setup-tailwind –project=<application name>.

Generating libs

qwik-nx:library generator is built upon the standard Nx library generator, so it does pretty much what you would expect from it: there’re generic options for Nx libs along with Qwik specific ones.

Generating components

qwik-nx plugin also provides an ability to qwikly (you got this one, right?) scaffold a new component for your app. All you have to do is run the qwik-nx:component generator and select the project for the new component to be placed in. It is also highly configurable as per options shown on the screenshot below.

As of now there's no "route" generator, but expect to see it added soon.

Running and building the code

qwik-nx plugin replaces direct invocation of build, serve and test commands with Nx generators to standardize these tasks in a consistent and predictable manner. Plugin relies on executors provided by the @nrwl/vite package. Here’s the list of commands available for the Qwik application:

• serve - uses @nrwl/vite:dev-server executor to run the app in the development mode with hot reloads
• build - uses @nrwl/vite:build executor to generate the bundle for the client side app
• build-ssr - also uses @nrwl/vite:build executor to generate code needed for Vite preview server
• preview - wraps up build commands above in order to run the app simulating production mode https://qwik.builder.io/docs/getting-started/#running-in-production
• test - uses @nrwl/vite:test executor that relies on vitest
• lint - just a regular @nrwl/linter:eslint executor

Wrapping up

Nx by itself is an awesome tool with great capabilities of managing code in distributed fashion with one or more applications in the repository. With the qwik-nx plugin, Qwik applications and libraries can fit seamlessly into an Nx monorepo, making it easier for developers to achieve their goals.
Being focused on speed and performance, Qwik framework promises to be the next revolutionary solution in web development. As we move forward, qwik-nx plugin will evolve and become more capable and feature-rich as Qwik itself does.

Need Help?

At Valor Software, we are passionate about staying at the forefront of technology and are integration partners with the creators of Qwik, Builder.io. If you have any questions or need assistance with your project, don't hesitate to contact us at [e-mail].

Comments

[Yoav Ganbar]

🎉🎉🎉

[Thomas Lepérou]

That's great; thanks for sharing!

[Giorgio Boa]

Thanks for this awesome contribution 😊

[Arthur-Fedotiev]

Are there any caveats/recommendations/generators when it comes to adding integrations with vercel/netlify/...etc and SSG adaptor?

[Dmitriy Stepanenko]

We're planning to add other generators further down the road. At this point you can add anything you want, qwik application works and being configured in the same way as it would be w\o Nx, only paths and layout are different. Although the process might be a bit inconvenient, since qwik cli won't really work due to these differences with nx workspace layout and everything should be configured manually.

By the way, we would love to see any external contributions 🙂

[Matheus Rafael]

Great