![\"how](\"https:\/\/simpleprogrammer.com\/wp-content\/uploads\/2022\/04\/ViteJs.png\")
<\/p>\nBack in April 2020, the developer community started to get hints of a new development server from Evan You (the creator of Vue.js, the popular JavaScript framework). Here\u2019s the first tweet he shared about the idea he was working on.<\/p>\n
<\/p>\n
The initial goal of ViteJS was to improve the development experience of Vue apps by providing a dev server faster than Vue CLI\u2019s. But this new build tool turned out to be a lot more than that. In February 2021, Vite 2 was launched as its first stable version, and Evan soon declared that this next-gent front-end build tool would be the foundation for future Vue-oriented tools.<\/p>\n
So, if you have come from the realm of JavaScript and worked with Webpack, Gulp, Grunt, and other traditional tools to create and bundle the entire app codebase, there is something new for you: ViteJS<\/a>. This advanced front-end tool<\/a> can refresh the dev server in the blink of an eye and dramatically reduce the development time.<\/p>\n Interesting enough? Whether you\u2019re an experienced programmer or a newbie, this guide will help you understand how ViteJS works, how to install and set it up, create a SPA with it, and more.<\/p>\n Before you start with the installation guide, it\u2019s important to know how ViteJS works so that you can use this tool correctly without any confusion.<\/p>\n Generally, Vue developers use Vue CLI (includes Webpack internally) to set up software projects during development and production. But this process comes with a couple of issues that the development team has to face quite often:<\/p>\n ViteJS mitigates these drawbacks by compiling code-on-demand. It compiles only the imported code on the present screen so that the performance of HMR gets decoupled from the total number of modules. Meaning, HMR updates become regularly fast irrespective of the size of your app, and the page reloads in a flash.<\/p>\n As the very first step of working with ViteJS, you need to install a copy of Node on your system<\/a>.<\/p>\n I have chosen Node because it\u2019s one of the greatest tools to build real-time web applications. It offers cross-platform applications<\/a> which run easily on any web. Moreover, as developers, we don\u2019t need anything extra to execute a Node application.<\/p>\n Also, Node.js offers a set of built-in modules that can be used without further installation. We can install some custom modules from the NPM as the application requires. Hence, Node is a suitable and reliable option for ViteJS installation.<\/p>\n Once you complete the process, execute the command Important files, such as lit-element-tsstyle.css, favicon.svg, main.js, index.html and many more are used for Git and npm. The package.json file only includes ViteJS as a dependency, along with some scripts to set up the development environment and initiate a build.\ufffc<\/p>\n Here, some other files for Git are used. Git is a DevOps tool used for source code management. It is a free and open-source version control system used to handle every project size. Moreover, Git is used to track changes in the source code, enabling multiple developers to work together on non-linear development.<\/p>\n Now it’s time to move to a directory path, open a terminal, and run Once you have successfully called the command, move to your project directory with the cd command. You have to install the application dependencies by writing and running the command By executing the above command, you will open the app in VS code.<\/p>\n You can then initiate the dev-server and execute the app with the You will be able to access and view the app at http:\/\/localhost:3000\/<\/a>. If you need to edit any of the project files, the screen will instantly reflect all the changes.<\/p>\n Now, something like the above image will be seen on your display screen.<\/p>\n By this time, your application should be running just fine.<\/p>\n In order to understand how ViteJS HMR works, let\u2019s use the component Here’s what the executed code will look like:<\/p>\n The reload time of ViteJS is a lot faster than typical VueJS apps; hence any changes you make to the code will be visible on the screen.<\/p>\n In Vuejs, the This is how the module looks:<\/p>\n As you can see, instead of a bundle, ViteJS offers modules that make the whole app blazing fast.<\/p>\n Now your Vue.js code is all ready to run smoothly!<\/p>\n You may wonder why you need to install and set up the Vue Router. The reason is that it’s the official router for working with Vue.js and creating Vue apps. Learning how to install and set up the Vue Router with ViteJS will surely be helpful for your ViteJS project.<\/p>\n To start with the installation, you need to first install Run the command Next, you have to create a After you successfully execute the code, it’s time to register the The next step is to change the root component in the App.vue file to render all the components.<\/p>\n Now you can choose any other custom route and register it seamlessly.<\/p>\n Wondering if ViteJS works with single-page applications or not?<\/p>\n Let’s try to set one up with Vue.<\/p>\n Run Developing a SPA will require you to handle routes. So, you have to install the Vue Router<\/a>.<\/p>\n However, ViteJS is not really helpful in this process. With a basic Vue setup, we have to be careful about what we plug into Vue. Although ViteJS is also useful to create multiple pages, as outlined in the multi-page app<\/a> in the documents, you must tweak ViteJS\u2019s rollup configuration.<\/p>\n But, on the brighter side, I found a fairly new plugin made by the community: vite-plugin-vue-router.<\/a> Just like Nuxt, it creates a router based on your file paths.<\/p>\n Given the expertise of the Vue-Vite community, we can positively expect that someone will soon create a Vue+Vue Router+Vuex template for ViteJS. But the chances of it being better than Nuxt are honestly less. The same applies to the scenario with Svelte and SvelteKit\/Supper, React, and NextJS. These are the top frameworks for web app development<\/a>, getting consistently optimized for complex apps and their own libraries.<\/p>\n If there is no battle and time-tested web app framework for your chosen programming language<\/a>, ViteJS is definitely worth a shot, leaving aside the fact that it would still need some configuration.<\/p>\n Some codebases don’t support Jamstack but use PHP or .NET as a back-end. ViteJS has efficiently come up with a back-end integration page<\/a> that will guide you to creating improved CSS and JavaScript bundles.<\/p>\n After ViteJS follows the instruction, it generates a manifest file that includes all the information about created bundles. This file will help you build the <script><\/em> and <link><\/em> tags for the JavaScript and CSS bundles, respectively.<\/p>\n Every import becomes a main.js file, except the dynamic imports that are bundled into separate bundles.<\/p>\n Being in the tech industry for over a decade, I have used multiple build tools for hundreds of projects. No matter whether it was Webpack, Gradle, or Gulp, large-scale projects always used to take a day or two to set up and ensure everything was working fine. Then came the tasks of optimizing build times, improving bundle optimization, and fixing bugs.<\/p>\nHow Does ViteJS Work?<\/h2>\n
\n
Getting Started with ViteJS Installation<\/h2>\n
npm init @vitejs\/app<\/code><\/em>. You will then get to choose a project name and template. Here are the options you can select from at the time of writing:<\/p>\n\n
vanilla<\/code><\/li>\nvue<\/code><\/li>\nvue-ts<\/code><\/li>\nreact<\/code><\/li>\nreact-ts<\/code><\/li>\nsvelte<\/code><\/li>\nsvelte-ts<\/code><\/li>\npreact<\/code><\/li>\npreact-ts<\/code><\/li>\nlit-element<\/code><\/li>\nlit-element-ts<\/code><\/li>\n<\/ul>\nnpx create-vite-app<\/code><\/em><\/p>\n![\"how](\"https:\/\/simpleprogrammer.com\/wp-content\/uploads\/2022\/04\/step-1.png\")
<\/p>\nnpm install<\/code>.<\/p>\n![\"\"](\"https:\/\/simpleprogrammer.com\/wp-content\/uploads\/2022\/04\/step-2.png\")
<\/p>\nnpm run dev<\/code><\/em> command.<\/p>\n![\"how](\"https:\/\/simpleprogrammer.com\/wp-content\/uploads\/2022\/04\/step-3.png\")
<\/p>\n![\"\"](\"https:\/\/simpleprogrammer.com\/wp-content\/uploads\/2022\/04\/preview.png\")
<\/p>\nHow Hot Module Replacement (HMR) Works in ViteJS<\/h2>\n
Hello.vue<\/code> inside the component folder.<\/p>\n<template><\/code>
\n<h5>{{ msg }}<\/h5><\/code>
\n<button @click=\"count++\">count is: {{ count }}<\/button><\/code>
\n<p><\/code>
\nEdit<\/code>
\n<code>components\/Hello.vue<\/code> to test hot module replacement.<\/code>
\n<\/p><\/code>
\n<\/template><\/code>
\n<script><\/code>
\nexport default {<\/code>
\nname: \"Hello\",<\/code>
\nprops: {<\/code>
\nmsg: String,<\/code>
\n},<\/code>
\ndata() {<\/code>
\nreturn {<\/code>
\ncount: 0,<\/code>
\n};<\/code>
\n},<\/code>
\n};<\/code>
\n<\/script><\/code><\/p>\nmain.js<\/code> file runs under the hood. If you need to review the code on the browser through the menu, it calls the main.js<\/code> file as a module.<\/p>\n![\"how](\"https:\/\/simpleprogrammer.com\/wp-content\/uploads\/2022\/04\/module-preview.png\")
<\/p>\nSetting Up ViteJS Vue Router<\/h2>\n
vue.js<\/code> packages on your ViteJS app.<\/p>\nnpm i --save vue-router@v4.0.0-alpha.11<\/code><\/em> and install the latest version of Vue Router.<\/p>\nrouter.js<\/code> file. Here’s how you should define the routes:<\/p>\nimport { createWebHistory, createRouter } from \"vue-router\"; import Home from \".\/components\/Hello.vue\"; const history = createWebHistory(); const routes = [{ path: \"\/\", component: Home }, ]; const router = createRouter({ history, routes }); export default router;<\/code><\/em><\/p>\nregister.js<\/code> file with the main.js<\/code> file by calling the following command:<\/p>\nimport { createApp } from 'vue' import App from '.\/App.vue' import '.\/index.css' import router from \".\/router\"; createApp(App).use(router).mount('#app')<\/code><\/em><\/p>\n<template><\/code>
\n<img alt=\"Vue logo\" src=\".\/assets\/logo.png\" \/><\/code>
\n<Hello msg=\"Hello Vue 3.0 + Vite\" \/><\/code>
\n<router-view \/><\/code>
\n<\/template><\/code>
\n<script><\/code>
\nimport Hello from \".\/components\/Hello.vue\";<\/code>
\nexport default {<\/code>
\nname: \"App\",<\/code>
\ncomponents: {<\/code>
\nHello,<\/code>
\n},<\/code>
\n};<\/code>
\n<\/script><\/code><\/p>\nSetting Up a Single Page Application (SPA)<\/h2>\n
npm init @vitejs\/app<\/code><\/em> and then choose the Vue template of your choice. You will get Vue, ViteJS, and a Vite plugin to compile Vue.<\/p>\nBack-End Integration with ViteJS<\/h2>\n
ViteJS, an Opportunity for Improvement<\/h2>\n