Deploy Qwik Project
This article will teach you how to deploy your Qwik (opens in a new tab) project on Zeabur.
First, you need to initialize a Qwik project in your local development environment. We can follow the instructions in the Qwik official documentation (opens in a new tab) to complete this step.
npm create [email protected]
After following the instructions to complete the initialization, you should see something like the following:
💫 Let's create a Qwik app 💫 ✔ Project name … qwik-app ✔ Select a starter › Basic 🦄 Success! Project created in portfolio directory 🐰 Next steps: cd qwik-app npm install npm start 💬 Integration? Add Netlify, Cloudflare, Tailwind...: npm run qwik add 💬 Questions? Start the conversation at: https://qwik.builder.io/chat https://twitter.com/QwikDev 📺 Presentations, Podcasts and Videos: https://qwik.builder.io/media/
And you will see a
qwik-app folder created in your current directory.
After initialization, you can switch to the
qwik-app folder and run
npm start to start the development server.
cd qwik-app npm start
You should see something like the following:
VITE v3.1.1 ready in 140 ms ➜ Local: http://localhost:5174/ ➜ Network: use --host to expose
Next, you can start modifying the code to develop your Qwik project.
Install Adaptor Package
In order to run your Qwik project on Zeabur, you need to install the Qwik Node.js (Express) adaptor package before deployment.
npm run qwik add express
After installation, you should see something like the following:
🦄 Success! Added express to your app 📚 Relevant docs: https://qwik.builder.io/qwikcity/adaptors/node/ https://expressjs.com/ 💬 Questions? Start the conversation at: https://qwik.builder.io/chat https://twitter.com/QwikDev
Test Build Locally
After installing the adaptor package, you can first test the build locally to make sure your project runs properly.
npm run build
If your code has no problems, you should see two new folders,
server, added to the project directory.
Next, try entering the following command to start the local server:
Next, try entering
http://localhost:3000 in your browser, and you should see the page running smoothly:
After confirming that the local test build has no problems, you can create a code repository on GitHub and push the current code up.
Finally, go back to the project page of your project on Zeabur, click the Deploy service or Add new service button, and select Deploy your source code.
Search for the code repository you just created, and click
import, and your Qwik application will automatically start deploying.
After deployment, you can refer to the Binding Domain document to learn how to bind a public domain name that can be accessed externally to your Qwik project.