Introducing Qwik integration for Nx
Tags: qwik, nx, javascript, tooling
Published: 2022-12-30 14:00:55

## 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](https://github.com/qwikifiers/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.


![Installation process](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/83vp7h9rhr7i7y5dcmxw.gif)

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. 


![Structure of the workspace](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sylghq9m6u2qy2asf0cj.png)

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](https://marketplace.visualstudio.com/items?itemName=nrwl.angular-console) and [Webstorm](https://plugins.jetbrains.com/plugin/15000-nx-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
![qwik-nx:application generator options](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ll30qq7182yk6jj26hos.png) 

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.


![qwik-nx:library generator options](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mavh44p4omd405wvs2s4.png)

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


![qwik-nx:component generator options](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u7e3zak2yedi0q207tui.png)

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 sales@valor-software.com.