How to build and deploy with Vite JS

What Is Vite? Vite is the French word for fast and is a Javascript development server and bundler that delivers source files over ESM or ES6 modules making it blazing fast in things like start, reload and it also supports Hot Module Reloading or HMR.

Vite is the brain child of Evan You the creator of the Vue JS framework but supports out of the gate building applications with React, Svelte, Preact, Vanilla JS and of course Vue. Typescript is also available for any of the mentioned libs.

Let’s learn by doing. Let’s build and deploy a vanilla js Vite app and talk about some the features of this awesome next generation front end tooling

Table of Contents:

00:00 - What is Vite JS
00:43 - Build and deploy a vite js app
01:45 - Vite js scaffold libs options
02:07 - Switch into project and install deps
02:32 - Structure of a vite js Vanilla install
04:30 - Run the dev server
04:48 - Quick CSS change
05:21 - Run first production build
07:36 - One way to check prod build locally
08:09 - Checking prod build in one step
09:37 - Build a small app vanilla js app
10:51 - Add a simple JS module
12:18 - Import module into main
14:41 - Let's add a second method to our module
18:01 - Helps focus on building your app
18:36 - Preflight steps before we deploy
20:14 - Use surge to deploy the project
21:08 - Check production URL in browser
22:08 - And like that we are live 😉

[daishokomiyama]

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.

[terhuneb]

Thank you for focusing on the basics and keeping the demo realistic.

[Suz-Do]

This was so helpful. I was working with Vite and had it hosted, but not sure why it was showing a blank page in production. It was making sure that the HTML/CSS/JS assets cross-origin related file path in the index.html was correct. Thank you!

[flopasen]

thanks a lot for the clear tutorial, it's good to find something that actually works exactly how it's shown!

[peaceyeah]

really nice tutorial man, also you are so relaxed, i really enjoyed watching this video, good stuff man, big like :)

[neonwatty]

filled in a lot of gaps in my understanding of using vite - thanks!

[franciscocollette]

thanks! you are great, I was looking how to serve and this worked perfect, good to know about surge

[arman_deve]

This tutorial was very good, thank you

[Samrood-bouo]

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.

[xl-skybb]

clear, precise and concise, thank you very much

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!

[StrikerFeed]

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.

[constantine]

good good very good... im noob to web dev but i understood everything )) .... thanks

[hutomifawaza]

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

[amarachiiheanacho]

amazing tutorial thank you very much, I was wondering what if we wanted to manage image asset bundling, like specify bundling config in our app

[openaidalle]

Hi, I'm deploying vitejs with express app to heroku and it's pointing to localhost.. what should be changed in the package.json scripts part?

[Viralplace]

I would like to use a template engine like handlebars, Mustache or Nunjucks to modularize the html and import for example any partials inside the index.html. How can I do that?

[alvinolavarrieta]

Great tutorial. Is there are way to change where the assets are saved for production? For example assets/js for JavaScript files, assets/css for styles, assets/images and so on..

[moneyfr]

What do I need to learn beside js to understand vite? I don't understand the documentation

[Venkateshganjiganji-qnwm]

Vitejs react serversideandclient code deploy Ela chyali