A walk-through of how to deploy Vue using the ready made Vue Vite Blocklet and ABT Node.
<iframe width="560" height="315" src="https://www.youtube.com/embed/LsvX5GaDRpM" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
Introduction#
In this demo, we will show you how to quickly deploy Vue Vite using a ready-made Blocklet and ABT Node. Similar to other Blocklets, ABT Node is an adaptable developer platform that enables developers to easily build their projects using their preferred frameworks including ReactJS, Express and of course Vue. The Vue Vite Blocklet includes everything you need to quickly deploy and start coding using Vue with integrated tools to easily add decentralized identity, blockchains and more.
What is Vue Vite#
For those who don't know, Vue is a progressive framework to easily build user interfaces and is designed to be incrementally adopted (similar to adding Blocklets for what you need). In this demo, we have combined Vue with Vite, a lightening fast cold server that offers instant hot modules and true on-demand compilation. Vite offers a no-bundler dev setup that allows you to develop Vue apps with Single-File Components without any bundling during development. Interestingly enough, Vite not only works with VueJS, but can be used by other libraries like ReactJS.
Deploy Vue + Vite on ABT Node#
To get started with Vue Vite and ABT Node simply visit the Blocklet Github page - https://www.github.com/blocklet - and select the Vue + Vite Blocklet.
Click on Open in Gitpod#
Select the option to Open in Gitpod to start the Cloud IDE and to launch the Vue Vite Blocklet on ABT Node. Note, we've partnered with Gitpod to enable developers to quickly start coding, building and debuging their applications and projects entirely in the cloud using ArcBlock's ABT Node.
Automatically Deploys Vue and ABT Node#
As the screenshot indicates, the ABT Node Daemon has launched and will deploy ABT Node in Debug mode so you can immediately begin playing with the code, as well as access ABT Node's dashboard and a preview of the Vue on the web.
ABT Node is Now Running#
We can see now that the dev server is running locally in the cloud and services like NGINX have been deployed automatically.
Click on the links#
Accessible URLs are now available including a link to access the ABT Node dashboard and Vue in our browser.
Preview Vue Vite and start coding#
At this point, Vue is running on ABT Node in the cloud and a developer can access the source files and begin editing the code for their project.
Try Vue + Vite Now#
Now, it's your turn to get started. Click on this link to start the Cloud IDE launch the Vue Blocklet on ABT Node.
Deploy to ABT Node#
If you are a developer and ready to get started with Vue on your ABT Node environment, return to [Github and you can select Install on ABT Node](https://github.com/blocklet/vue-vite-demo) to install any Blocklet directly into your dev environment. Simply follow the steps to complete the install.