Rework Your Workweek: Join us in celebrating Matterday - how would you spend an extra day?

Guides & Tutorials

How to Deploy the Qwik JavaScript Framework

Guides & Tutorials

How to Deploy the Qwik JavaScript Framework

In this tutorial, I will show you how to deploy a Qwik application on Netlify. There is a great step-by-step guide to deploying on Netlify for general use, but this guide is specifically to show you how to deploy Qwik applications.

What is Qwik

Qwik is currently in Beta at the time of writing and may have changes. It is being developed by Miško Hevery and the team at Builder.io.

Qwik is a resumable JavaScript framework that renders server-side HTML to optimize performance. It completely removes the hydration step that other frontend frameworks use. The core principle of Qwik is to load as little JavaScript up front as possible and delay the execution of any other JavaScript on the page until it is needed. This allows the application to progressively download code without a big bundle right away. To make this work, Qwik uses an Optimizer written in Rust to transform the code at build time. Vite is used for Hot Module Replacement (HMR) and bundling code.

Qwik Rendering

Rendering on the web has swung like a pendulum from completely server-side to all static. We now have frameworks that can do hybrid rendering like Next.js and SvelteKit. However, because Qwik needs to progressively load JavaScript to improve the performance, it needs to be able to grab that from a server or server-side rendering (SSR). This may not fit into the true Jamstack architecture, but that doesn’t mean it can’t be hosted on Netlify. Platforms like Netlify can take the server side code and use it as serverless or edge functions. This is typically done with some type of adapter or plugin during the build step. In Qwik’s case, it uses the Netlify Edge functions with a Vite plugin. Read more about Netlify Edge here.

Getting Started with Qwik

The quickest (pun intended 😁) way to get started with a Qwik app that will be deployed to Netlify, is to use the command line interface — or CLI — tool. Type the following into a terminal to start the Qwik CLI.

npm init qwik@latest

This command opens the CLI that will prompt you with the following.

Qwik CLI

  1. Choose your project type, we are choosing a blank starter app to keep it simple.

Choose the Starter option from the select a starter options

  1. Choose Netlify as your hosting provider.

Choose Netlify from the Select a server options

  1. Select packages you want configured automatically. Eslint and prettier for linting and code formatting, TailwindCSS is an option for styling.

Select which packages you want configured with space bar, prettier, eslint, or tailwindcss.

  1. Success! Your Qwik app is created. Follow the next steps to install the dependencies and run the project locally.

Success! Project saved in directory and next steps.

Running the Qwik App

Once you have completed the steps in the CLI, change directory (cd), into your newly created project and install the dependencies with a package manager. The Qwik CLI suggests using npm.

cd qwik-app-name
npm install # or yarn or pnpm

Then you can run the dev server to see the site locally with the npm start command.

npm start  # or yarn or pnpm

Starter Application

Once through the steps of creating the application and installing the dependencies, you are on your way to deploying the app. If you used the CLI and chose Netlify as the hosting provider, a netlify.toml file already setup for you. If you happened to start here, you can create a netlify.toml file in the root that has the code below in it.

[build]
publish = "dist"
command = "npm run build"

netlify toml file and file structure of Qwik in VSCode

Deploy Qwik Applications on Netlify

Netlify is a web developer platform that is known for making the web better by increasing productivity. If you are not already a Netlify user, go ahead and sign up for free. There are two ways we can deploy a Qwik site to Netlify, the Netlify CLI or a manual git deploy.

Netlify CLI deploy

The Netlify CLI is a way to configure, build, test, and deploy your sites without leaving the command line. If you don’t have the Netlify CLI installed, run the following command to install it globally.

npm install netlify-cli -g

Once installed, many commands can be ran with either the netlify {command} or ntl {command} for short. First, run the netlify login command to authenticate your Netlify account to the CLI. This will open a browser window, asking you to log in with Netlify and grant access to Netlify CLI.

To setup a new site using the CLI, run netlify init. This will guide you through the steps to get your site connected and deployed.

  1. If you don’t have your app connected to git, the Netlify CLI will ask if you want to deploy it manually or connect to a repo. Deploying manually will add more steps, to avoid this you can add your site to a git provider before running netlify init.

Connect to a GitHub or git provider first

  1. Either connect to an existing Netlify site, or create and configure a new site.

Create & configure a new site

  1. Choose the team you would like to add the site to.

Choose the team you would like to use.

  1. Name your site or leave it blank for a random name. Once this is done, your site is created and your links are available, but the site is not yet deployed.

Choose a unique site name or leave black for a random one.

  1. Netlify will attempt to detect the build command and directory of the output for the app, but it can be customized in the next steps. For Qwik apps they are:

Your build command and directory to deploy

  1. Specify your functions directory if you are using Netlify functions.

Specify Netlify functions folder path

  1. And success, your site is deployed!

Success! Netlify CI/CD Configured

Once configured, any new push to your git repository, git push, will trigger a new site build or by running netlify deploy --prod. Running netlify open will open the Netlify admin URL for your new Qwik app on Netlify!

Deploy a Qwik Site from Git

If you choose to do so, you can also manually deploy a Qwik app on Netlify. Once you have a git repository pushed, navigate to the Sites page in your Netlify dashboard and click the button “Add new site”.

Select Sites page from the nav bar

A dropdown menu will appear that asks if you want to import an existing project, start from a template, or deploy manually. To get a site from git, you should choose the Import an existing project option.

Select Import an existing project from Add new site dropdown

That will bring you to a screen to connect your Git provider.

Connect to your Git provider

Choose the provider where the git repository for your app is located, then Netlify will authenticate and pop up a search for your available repos. Choose your repository, and Netlify will auto detect the framework and populate the build command and publish directory. If there is a custom build, you can edit the settings on this screen.

Link your site to a Git repository and setup the build settings

Click the Deploy site button and Netlify will begin deploying your application. Now your Qwik app is live!

That’s it, now you have a Qwik app deployed to Netlify. Remember, if your experience is different from anything written here or something didn’t work as expected, please let us know about it here and we will help you or answer any questions you have.

Keep reading

Recent posts

Book cover with the title Deliver web project 10 times faster with Jamstack enterprise

Deliver web projects 10× faster

Get the whitepaper