--- title: "How to Deploy the Qwik JavaScript Framework | Netlify" description: "Qwik has a new way of optimizing page performance by becoming resumable. Learn how to get started and deploy your site with Netlify Edge functions." source: "https://www.netlify.com/blog/how-to-deploy-the-qwik-javascript-framework/" last_updated: "2026-07-11T03:08:42.000Z" --- In this tutorial, I will show you how to deploy a [Qwik](https://qwik.builder.io/docs/overview) application on Netlify. There is a great [step-by-step guide to deploying on Netlify](https://www.netlify.com/blog/2016/09/29/a-step-by-step-guide-deploying-on-netlify/) for general use, but this guide is specifically to show you how to deploy Qwik applications. ## What is Qwik > [Qwik](https://qwik.builder.io) is currently in Beta at the time of writing and may have changes. It is being developed by [Miško Hevery](https://twitter.com/mhevery) and the team at [Builder.io](https://builder.io). Qwik is a **[resumable](https://qwik.builder.io/docs/concepts/resumable)** JavaScript framework that renders server-side HTML to optimize performance. It completely removes the [hydration](https://dev.to/this-is-learning/why-efficient-hydration-in-javascript-frameworks-is-so-challenging-1ca3) 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](https://qwik.builder.io/docs/concepts/progressive). To make this work, Qwik uses an [Optimizer](https://qwik.builder.io/docs/advanced/optimizer) written in Rust to transform the code at build time. [Vite](https://vitejs.dev/) is used for Hot Module Replacement (HMR) and bundling code. ### Qwik Rendering [Rendering on the web](https://www.netlify.com/blog/the-acronyms-of-rendering/) 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](https://whitep4nth3r.com/blog/what-is-jamstack/), 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](https://whitep4nth3r.com/blog/what-is-the-edge-serverless-functions/#what-is-a-serverless-function). 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](https://github.com/netlify/vite-plugin-netlify-edge). Read more about [Netlify Edge here](https://www.netlify.com/products/edge/). ### 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](https://cdn.sanity.io/images/o0o2tn5x/production/8caea331320caed0765440744a86575b77946cd6-1102x494.png?w=450) 2. Choose Netlify as your hosting provider. ![Choose Netlify from the Select a server options](https://cdn.sanity.io/images/o0o2tn5x/production/24bd9153ab3a432aea24a9f74a00f54b4fdc5ad4-1102x494.png?w=450) 3. 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.](https://cdn.sanity.io/images/o0o2tn5x/production/3c1562465f4e2cee4c04000f1d35e50aa471a054-1102x494.png?w=450) 4. 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.](https://cdn.sanity.io/images/o0o2tn5x/production/b83046441091dd0a010b17b430c510b6cdf1070a-1102x586.png?w=450) ### 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-namenpm 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](https://cdn.sanity.io/images/o0o2tn5x/production/3cb868366dbd70ce84463624f131a4a9b669ecc7-1342x1174.png?w=450) ## Deploy Qwik Applications on Netlify Netlify is a web developer platform that is known for making the web better by [increasing productivity](https://www.netlify.com/roi-calculator/). If you are not already a Netlify user, go ahead and [sign up for free](https://app.netlify.com/signup). There are two ways we can deploy a Qwik site to Netlify, the [Netlify CLI](#netlify-cli-deploy) or a [manual git deploy](#deploy-a-qwik-site-from-git). ### Netlify CLI deploy The [Netlify CLI](https://docs.netlify.com/cli/get-started/) 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](https://docs.netlify.com/configure-builds/repo-permissions-linking/) before running `netlify init`. ![Connect to a GitHub or git provider first](https://cdn.sanity.io/images/o0o2tn5x/production/c21a7ffa7da963481565fda9e2ca1d60f4d528e1-1246x156.png?w=450) 2. Either connect to an existing Netlify site, or create and configure a new site. ![Create & configure a new site](https://cdn.sanity.io/images/o0o2tn5x/production/ef10ddb3d76b5b47ef23d3391e394da2253d5ce3-1090x112.png?w=450) 3. Choose the team you would like to add the site to. ![Choose the team you would like to use.](https://cdn.sanity.io/images/o0o2tn5x/production/36825292c018129a1ec4e9ba6a250fabd8717a2c-1190x166.png?w=450) 4. 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.](https://cdn.sanity.io/images/o0o2tn5x/production/82942ee052d68073db894a4f24ef237854e6c91b-994x238.png?w=450) 5. 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](https://cdn.sanity.io/images/o0o2tn5x/production/cd1d267cbf0da9595db2af2e181e04ca8d6f23be-1300x108.png?w=450) 6. Specify your functions directory if you are using Netlify functions. ![Specify Netlify functions folder path](https://cdn.sanity.io/images/o0o2tn5x/production/01a1c3c0d4dfed68545d4a3a5609b1d9d9c53bf7-916x56.png?w=450) 7. And success, your site is deployed! ![Success! Netlify CI/CD Configured](https://cdn.sanity.io/images/o0o2tn5x/production/6b2873c9af0d1605cf5f98a75f0c7e86f287e887-680x74.png?w=450) 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](https://deploy-qwik-ly-on.netlify.app/)! ### Deploy a Qwik Site from Git If you choose to do so, you can also manually deploy a Qwik app on [Netlify](https://app.netlify.com/start). 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](https://cdn.sanity.io/images/o0o2tn5x/production/1e6300bbdbfd9ce6b1fdb62abba8d7fe5146fe3e-1986x464.png?w=450) 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](https://res.cloudinary.com/netlify/image/upload/v1654771257/blog/import.png) That will bring you to a screen to connect your Git provider. ![Connect to your Git provider](https://cdn.sanity.io/images/o0o2tn5x/production/6a4ef89b123e2922cb5a044dee877595a6dcd383-1400x976.png?w=450) 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](https://cdn.sanity.io/images/o0o2tn5x/production/096a6d0c95ee02de67b0a12f9e77c78ea78c8bfe-1300x1718.png?w=450) 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](https://deploy-qwik-ly-on.netlify.app/). Remember, if your experience is different from anything written here or something didn’t work as expected, please [let us know about it here](https://answers.netlify.com) and we will help you or answer any questions you have. ### Share - [X (fka Twitter)](https://twitter.com/intent/tweet?text=How to Deploy the Qwik JavaScript Framework&url=https://www.netlify.com/blog/how-to-deploy-the-qwik-javascript-framework/) - [LinkedIn](https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fwww.netlify.com%2Fblog%2Fhow-to-deploy-the-qwik-javascript-framework%2F) - [Facebook](https://www.facebook.com/sharer.php?u=https://www.netlify.com/blog/how-to-deploy-the-qwik-javascript-framework/) - [Bluesky](https://bsky.app/intent/compose?text=How to Deploy the Qwik JavaScript Framework+https://www.netlify.com/blog/how-to-deploy-the-qwik-javascript-framework/) * * * ### Tags - [JavaScript](/blog/tags/javascript/) - [SSR](/blog/tags/ssr/) - [server side rendering](/blog/tags/server-side-rendering/) - [Qwik](/blog/tags/qwik/) ## Keep reading ![](/_astro/3f45eb6eda4ea8814be310e3df4a7883a5bd9ba0-1200x675_ZcBDUS.webp) Guides & Tutorials May 15, 2026 [ ### How to build a real-time AI chatbot in minutes with Netlify Agent Runners (no backend) ](/blog/how-to-build-a-real-time-ai-chatbot-in-minutes-with-netlify-agent-runners-no-backend) - ![Profile picture of Nahrin Jalal](/_astro/f0e7c8f227a03fe58340c99ef5439d5a896c0733-272x272_Z23kDpD.webp) Nahrin Jalal ![](/_astro/8fe9e8a23f944c9912003233d99a2df7fee637cf-1600x900_Z1gMhmf.webp) Guides & Tutorials May 15, 2026 [ ### Tracking AI search traffic: how to use Netlify Log Drains to maximize AEO ](/blog/tracking-ai-search-traffic) - ![Profile picture of Nahrin Jalal](/_astro/f0e7c8f227a03fe58340c99ef5439d5a896c0733-272x272_Z23kDpD.webp) Nahrin Jalal ## Recent posts News & Announcements June 25, 2026 [ ### Netlify Functions, designed for Agent Experience ](/blog/netlify-functions-designed-for-agent-experience) - ![Profile picture of Eduardo Bouças](/_astro/52958f21e8450baf6d8e60302341a984e220c0cd-512x512_13VDlu.webp) Eduardo Bouças News & Announcements June 24, 2026 [ ### How we measure Netlify’s Agent Experience ](/blog/how-we-measure-netlify-agent-experience) - ![Profile picture of Sean Roberts](/_astro/bbf2243f8171dbddd80ab2103622106cef84d125-512x512_Z1d2LKE.webp) Sean Roberts Guides & Tutorials May 15, 2026 [ ### How to build a real-time AI chatbot in minutes with Netlify Agent Runners (no backend) ](/blog/how-to-build-a-real-time-ai-chatbot-in-minutes-with-netlify-agent-runners-no-backend) - ![Profile picture of Nahrin Jalal](/_astro/f0e7c8f227a03fe58340c99ef5439d5a896c0733-272x272_Z23kDpD.webp) Nahrin Jalal ![](/_astro/3f255b372fa958df35802666ee33b4609b2d71bd-1200x1586_1VtE2D.webp) ### How do the best dev and marketing teams work together? [Access the report](https://www.netlify.com/reports/2024-leadership-trend-report/access/)