TOPICS
What is Qwik?
Qwik is an innovative and revolutionary framework by Misko Hevery, the creator of Angular and AngularJS. It allow to get amazing performance, improve the hydration process thanks to a new concept, the "Resumability", and the DX is amazing if compared to other front-end frameworks and libraries.
This is just the first of a new collection of videos about this framework, so I started from the basics:
- how to create a Project with Qwik
- versioning the project on GitHub
- create a new project on Vercel
- deploy and publish it online
- create a new route in Qwik and deploy it again
Visit my YouTube Channel
Follow me on my YouTube Channel or on LinkedIn for more tips and tutorials about front-end topics
You can watch the full tutorial in the video below but following I try to summarize the process
Video Transcript
Hi, I'm Fabio, and today I wanna show how you can easily created an application in Qwik and deploy it on Vercel. Anyway the process is more or less the same if you have to deploy a React, Angular or an application built with any modern front-end framework Today I will use Qwik that is an amazing framework created by Misko Hevery, the father of AngularJS and Angular but I will talk more in details about it in the next videos
First we can create the project simply running npm create qwik@latest on your terminal.
npm create qwik@latest
webstorm .
# code . (visual studio Code)
npm run devThe CLI ask for the project name, you can choose between several templates (and I have choosen the Basic App) . We also install all the dependencies and initialize a git repository. After a few moments you can then open your project in your favorite editor
The index.tsx file is the default route of your application and you can see it just running npm run dev on your terminal that start a webserver with your application.
Now we can remove all the template from index.tsx and I just write a new title: hello qwik.
I modify the page title but here we can also update some metadata.
Now we are ready to deploy our amazing application. But where? We can choose our favourite platform, Google Cloud, AWS, Azure and so on but I often show how to deploy an application on Vercel, because it's fast and very easy to use. After choosing the cloud platform we should install the right Qwik adapter and you can find all of them in the official documentation. I go to the Vercel page and copy the command.
So we come back to the application and run the command that requires few seconds to configure everything. THe next step is the creation of a github repository: write the name of the project, public or private and create the repo. Just copy the command to connect your local project with the github repository, come back to project, add everything to stage, write a commit and I paste the command I have copied from GitHub. Push everything and our repository is now updated. Now open vercel.com, create an account and open your dashboard.
Add a new project and first time you must connect your GitHub account. I have previously done this operation so I'm already connected. In fact I already see our new project and we can just click on IMPORT.
As you can see, Qwik uses Vite behind the scenes and Vercel has already recognize it. All the default options should be ok and we can just click on Deploy. The process starts and you can explore all the build process to see if everything is going wrong. And if there is no build errors, your site is finally online and you can click on the preview to try if it really works. Now we come back to the project to make and update.
We can simply create a new route named home with an index.tsx file inside it. Now we write a Qwik component and as you can see we use the componen$ function provided by Qwik and we can simply create a function that return a JSX just as we usually do in React, Solid, Astro and so on. So our route is now available on /home.
Now we 're ready to push everything on github and when we come back to the vercel dashboard we can see the build in in progress. We can also click on the latest commit to see how the build is going and after few moments our updates will be online and new page will available for everybody
The process involves several steps but nothing so complex.
I hope you find this guide useful and in the next videos we will look at different aspects of this new frameworkqui
And that's all for this video If you like my content don't forget to subscribe my channel and follow me on Linkedin where I often share content and tips on the frontend world
Follow me
Follow me on my YouTube Channel or on LinkedIn for more tips and tutorials about front-end topics
LinkedIn Post
You can also read my original post on LinkedIn
