Skip to content

Announcing Qwik for starter.dev

Hello there! Today, I'm so excited to introduce our new Qwik starter kit, which comes with 4 different technologies configured, and is ready for use. These technologies are: Qwik City, Storybook, Tailwind CSS, and GraphQL.

In this short article, we will talk about the core framework, the routing, example apps to get you started, the tools and technologies used in this kit, and how it is a great out-of-the-box starter for your next Qwik project.

Qwik

Qwik is a new JavaScript framework by Misko Hevery, creator of Angular, for building frontend browser applications. The major benefit of Qwik is its performance optimization, which features resumability and lazy loading. Today we will be focusing on the Qwik framework starter kit.

Technologies Used in the Starter Kit

  • Qwik City The kit is configured to make use of Qwik City, which offers directory-based routing (you don’t have to worry about colocation) and much more. Qwik City is a meta-framework of Qwik. It brings an opinionated and performant way to build sites at scale.

  • Storybook Storybook is a frontend workshop for building UI components and pages in isolation, testing, and documentation. It is open source and free. It is a great tool for testing and visualizing your components in different states. Qwik currently doesn’t have out-of-the-box support for Storybook, but we have figured out a way to configure it for Qwik. For more information on how we set up Storybook in Qwik, visit here.

  • Tailwind CSS Because Tailwind CSS is one of the most loved CSS libraries, we also included in this kit. Tailwind CSS is an open-source CSS framework. There is no special configuration to use Tailwind CSS in your Qwik app. You can use module CSS, or follow along with the kit (i.e we export the CSS classes as a variable). We will still achieve the same result, and make our code a bit cleaner, unlike when we write the CSS classes in the JSX directly.

  • GraphQL GraphQL is another great tool that was added to the kit. This gives you an out-of-the-box configuration to start making API calls to your GraphQL backend. GraphQL is an open-source data query and manipulation language for APIs, and a runtime for fulfilling queries with existing data.

How to Get Started

To get started, visit the Qwik starter.dev page for all the steps needed to create a new application with our starter.dev CLI, and run the application on your local system.

Example Apps in the Starter Kit

In this starter kit, we have two main components;

  • Counter
  • Greeting

In the Counter component, we see how we can utilize the useStore hook provided by Qwik to store our counter state.

Image

In the Greeting component, we made use of the GraphQL config in the starter kit. The app sends a query request with the value entered in the input field, which is then returned back as a response from the API.

Image

With all of these configurations and code samples, we believe that with this Qwik starter kit, you can start building your production-scale application.

Conclusion

Qwik is still in its early days, and we will continue to update as we learn more. We welcome everyone to take a look, and if you have any questions or run into any trouble feel free to join the discussions going on at starter.dev or on our Discord.