Vite is a blazing fast build tool that is designed specifically for modern web development. It supports many popular frameworks such as Vue.js, React, and Preact, and it enables developers to build and deploy applications quickly and efficiently. In this article, we will explore the steps to build and deploy a project using Vite JS.
Step 1: Install Vite JS
To begin, you’ll need to have Node.js installed on your machine. Once you have Node.js, open your terminal and run the following command to install Vite globally:
“`
npm install -g create-vite
“`
Step 2: Create a New Project
After installing Vite, you can create a new project by running the following command in your terminal:
“`
create-vite my-project
“`
This will create a new directory named “my-project” with the basic project structure and dependencies set up.
Step 3: Install Dependencies
Navigate to the newly created project directory by running:
“`
cd my-project
“`
Next, install the project dependencies using npm or yarn:
“`
npm install
“`
Step 4: Start the Development Server
To start the development server, run the following command:
“`
npm run dev
“`
This will launch the development server, which will watch for changes in your code and provide a blazing fast hot module replacement feature. You can access your application by opening the provided URL in your browser.
Step 5: Build for Production
Vite makes the production build process extremely fast. To generate a production-ready build, open your terminal and run:
“`
npm run build
“`
This command will create an optimized build in the `dist` directory.
Step 6: Deploy the Application
Once you have built your application for production, you can deploy it to your preferred hosting provider or server. Copy the contents of the `dist` directory, including the `index.html`, and upload it to your hosting provider using FTP or any other deployment method you prefer.
It’s worth noting that Vite generates a production-ready build that is optimized for performance. It takes advantage of the latest features provided by modern browsers such as native ES module support and faster reload times.
In addition to the basic build and deployment process, Vite also provides advanced features such as SSR (Server-Side Rendering) and a plugin system for extending its functionality.
In conclusion, building and deploying a project using Vite is a quick and straightforward process. By following the steps outlined in this article, you can harness the power of Vite to create modern web applications with ease and efficiency.
I totally agree with what you said. We should indeed focus on the code, rather than on tooling which might break the app. Building without relying on tooling is somehow a luxury for JS developers today.
Too lame, showing unecessary parts, taking too much time for unnecessary actions. !!
Vitejs react serversideandclient code deploy Ela chyali
Really good tutorial!!
really nice tutorial man, also you are so relaxed, i really enjoyed watching this video, good stuff man, big like 🙂
failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/jsx". Strict MIME type checking is enforced for module scripts per HTML spec.
Buen tutorial, señor Ady. Gracias.
Hi!
Thanks for this videotutorial.
I want to know what if I install jQuery using npm install jquery –save when the npm… Do jQuery will be part of the final build?
Thanks!
thanks! you are great, I was looking how to serve and this worked perfect, good to know about surge
good good very good… im noob to web dev but i understood everything )) …. thanks
filled in a lot of gaps in my understanding of using vite – thanks!
tnx
I want to ask, i'm migrating from webpack to vite, when i try yarn serve everything works normally, but when deploy or yarn preview the app just loads, how to solve that? thank you
So it looks like you can't develop a static multipage landing? For example, every page have its specific script with some unique logic. It means that I have to make different js files and link them into its html files. And it feels like it doesn't make sense then because I can do it without any bundler. It'll help only with a css preprocessors support out of the box, because when using gulp or webpack, you need to spend some time to configure it correctly.
This tutorial was very good, thank you
Thank you so much brother
Hi Bro, the code at timestamp 09.10 does not work in Windows when i run live server in "dist" folder. Please test in the Windows environment. I suggest that trainer should always consider running their code under the Windows environment, otherwise value of the course will fail. This can be proven when i look at the number of views you got. You should get more only if you also show the Windows option as well.
dist folder is the one that contains the final product. So no Hot reload module there, the hash must be for something else. But it's the first thing I disabled when using vite.
thanks a lot for the clear tutorial, it's good to find something that actually works exactly how it's shown!
What do I need to learn beside js to understand vite? I don't understand the documentation