In the ever-evolving web development landscape, efficiency and modularity have become paramount. This is where Nx and Qwik come into play.

Qwik is a modern web framework that focuses on application performance by reducing the amount of JavaScript that needs to be shipped to the browser. You can learn more about how Qwik achieves this with Resumability here.

Nx is a powerful tool that helps you build extensible and maintainable codebases that scale as your application and team grows. Nx utilises computation cache and workspace analysis to ensure maximum efficiency and developer experience. You can learn more about Nx here.

In this blog post, we’ll explore how to combine the strengths of Nx and Qwik to create a todo app. To do this, we’ll take advantage of an Nx Plugin that was created by the Qwikifiers team to maximise the integration between Qwik and Nx, called qwik-nx.

You do not necessarily need to use an Nx Plugin for Qwik. Instead, you could use the Qwik CLI to create your application and add Nx later.This blog post has decided to use theqwik-nx plugin to leverage better DX provided by the generators offered by the Plugin.

Table of Contents

· Creating the Workspace
· Generate the App
· Generate a new Route
· Build a Basic UI
· Generate a Library
· Add a Qwik Context
· Using the Context
· Adding a routeLoader$ to load data on Navigation
· Handle the Form Action to add todos
· Improve the Architecture
· Conclusion
· Further Reading

You can learn more about this integration in the video below: