Can you explain the distinction between the terms "vite" and "vite preview"?

I recently created a project template with the help of vite.

While looking through my package.json file, I noticed the following section;

  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "preview": "vite preview"
  },

Can someone explain the distinction between using vite and vite preview? In what scenarios would one choose to use vite over vite preview?

Answer №1

npm run dev (or vite) initiates a local web server featuring Hot Module Replacement for development, and automatically detects code changes.

npm run build (or vite build) compiles the project and saves the output to the directory ./dist

npm run preview (or vite preview) launches a local web server serving the compiled solution from ./dist for previewing

Important Note

  • It is essential to execute build prior to running preview.

  • Preview will display the most recent build and does not update automatically with code modifications.

Answer №2

Based on information from the vite documentation:

vite #

The command to start Vite dev server in the current directory. It will enter watch mode during development and run mode during continuous integration automatically.

...

vite preview#

This command is used to locally preview the production build of an app.

In simple terms, vite is for running a development server on your computer, while vite preview is for previewing an already built app as if it were the production build.

Answer №3

The Vite documentation explains that using the "vite" command launches a development server in the present directory, whereas executing "vite preview" allows for a local preview of the production build. Essentially, "vite" facilitates project development with functionalities such as hot module replacement (HMR), while "vite preview" is ideal for testing projects post-building using vite build.

Answer №4

Vite revolutionizes the development process with its cutting-edge build tool that re-compiles only the modified files upon saving. Its user-friendly development server also facilitates hot module replacement (HMR) for seamless workflow.

For a sneak peek into Vite projects in a production-ready setting, Vite preview comes to the rescue. This handy CLI utility not only builds the project but also launches a production server and automatically opens the project in your default browser.

Answer №5

Presented here is the concise summary from executing vite --help and its subcommands in the middle of 2023. Observe the condensed Commands section placed at the beginning, a feature that was previously absent in the CLI documentation (source code).

vite --help

vite/4.3.8

Usage:
  $ vite [root]

Commands:
  [root]           initiate development server
  build [root]     compile for production
  optimize [root]  pre-package dependencies
  preview [root]   locally test production build

For more details, use any command with the `--help` flag:
  $ vite --help
  $ vite build --help
  $ vite optimize --help
  $ vite preview --help

Options:
  --host [host]           [string] specify hostname
  --port <port>           [number] specify port
  --https                 [boolean] utilize TLS + HTTP/2
  --open [path]           [boolean | string] launch browser on startup
  --cors                  [boolean] activate CORS
  --strictPort            [boolean] halt if specified port is already in use
  --force                 [boolean] compel optimizer to disregard cache and re-package
  -c, --config <file>     [string] utilize specific configuration file
  --base <path>           [string] public base path (default: /)
  -l, --logLevel <level>  [string] info | warn | error | silent
  --clearScreen           [boolean] enable/disable clear screen during logging
  -d, --debug [feat]      [string | boolean] display debug logs
  -f, --filter <filter>   [string] apply filter to debug logs
  -m, --mode <mode>       [string] set environmental mode
  -h, --help              Output this message
  -v, --version           Display version number

vite build --help

vite/4.3.8

Usage:
  $ vite build [root]

Options:
  --target <target>             [string] transpile target (default: 'modules')
  --outDir <dir>                [string] output directory (default: dist)
  --assetsDir <dir>             [string] directory under outDir to place assets in (default: assets)
  --assetsInlineLimit <number>  [number] static asset base64 inline threshold in bytes (default: 4096)
  --ssr [entry]                 [string] build specified entry for server-side rendering
  --sourcemap [output]          [boolean | "inline" | "hidden"] output source maps for build (default: false)
  --minify [minifier]           [boolean | "terser" | "esbuild"] enable/disable minification, or specify minifier to use (default: esbuild)
  --manifest [name]             [boolean | string] emit build manifest json
  --ssrManifest [name]          [boolean | string] emit ssr manifest json
  --force                       [boolean] force the optimizer to ignore the cache and re-bundle (experimental)
  --emptyOutDir                 [boolean] force empty outDir when it's outside of root
  -w, --watch                   [boolean] rebuilds when modules have changed on disk
  -c, --config <file>           [string] use specified config file
  --base <path>                 [string] public base path (default: /)
  -l, --logLevel <level>        [string] info | warn | error | silent
  --clearScreen                 [boolean] allow/disable clear screen when logging
  -d, --debug [feat]            [string | boolean] show debug logs
  -f, --filter <filter>         [string] filter debug logs
  -m, --mode <mode>             [string] set env mode
  -h, --help                    Output this message

vite optimize --help

vite/4.3.8

Usage:
  $ vite optimize [root]

Options:
  --force                 [boolean] force the optimizer to ignore the cache and re-bundle
  -c, --config <file>     [string] use specified config file
  --base <path>           [string] public base path (default: /)
  -l, --logLevel <level>  [string] info | warn | error | silent
  --clearScreen           [boolean] allow/disable clear screen when logging
  -d, --debug [feat]      [string | boolean] show debug logs
  -f, --filter <filter>   [string] filter debug logs
  -m, --mode <mode>       [string] set env mode
  -h, --help              Output this message

vite preview --help

vite/4.3.8

Usage:
  $ vite preview [root]

Options:
  --host [host]           [string] specify hostname
  --port <port>           [number] specify port
  --strictPort            [boolean] exit if specified port is already in use
  --https                 [boolean] utilize TLS + HTTP/2
  --open [path]           [boolean | string] launch browser on startup
  --outDir <dir>          [string] output directory (default: dist)
  -c, --config <file>     [string] use specified config file
  --base <path>           [string] public base path (default: /)
  -l, --logLevel <level>  [string] info | warn | error | silent
  --clearScreen           [boolean] allow/disable clear screen when logging
  -d, --debug [feat]      [string | boolean] show debug logs
  -f, --filter <filter>   [string] filter debug logs
  -m, --mode <mode>       [string] set env mode
  -h, --help              Output this message

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Symfony/encore requires devDependencies in order to successfully compile

My experience with Symfony5 and encore has been smooth until I attempted to deploy to production. In order to install dependencies, you can use the command npm install --production. To compile, run npm run build --prod. I encountered an issue when trying ...

Getting data for Selectize.js

I've implemented Selectize.js to create a tagging feature for assigning users to jobs, utilizing the existing users within the system. In my scenario Following the provided documentation, I have included a select box with the multiple attribute that ...

Ways to transform epoch timestamp to present timestamp?

Is there a way to accurately convert an epoch timestamp in milliseconds to the current timestamp in milliseconds? My Attempt: var currentTime = (resp.timestamp * 1000) + 1980000000; resp.timestamp represents the epoch timestamp I attempted to add 5 ho ...

Excessive JSON formatting is consuming an excessive amount of storage space

As I work on developing a website that recommends locations to visit in NYC, I am facing an issue with saving JSON data in local storage. My goal is to allow users to add their own suggestions and eventually integrate MongoDB into the site. To build the si ...

Having trouble sending data through a jQuery AJAX request?

When I make a post request using jQuery AJAX to an ActionResult method, I encounter the following issue: $("#itemTextbox, #itemTextboxNew, #quantity1Textbox").on("keydown", function (e) { if ((e.keyCode == 120){ var GetReportLast5SellAndBuyURL="/Trd/Se ...

What is the best way to generate script code dynamically on an HTML page depending on the environment?

I am facing a challenge with my asp.net application. I need to insert a dynamic script into the html section, and this script's value must change depending on the environment (TEST, QA, etc.). To illustrate, here is the script where DisplayValue is th ...

With Vue 3 Pinia, values fetched from an API within a Pinia store cannot be statically assigned; they will always be reactive

I have a frontend built with vue3 and using pinia as the store. I am setting it up as shown below: export const useShopStore = defineStore( "shop", () => { const state = reactive({ data: { fruits: [], owners: [] ...

Retrieving an HTML element that has been added through DOM manipulation

After successfully creating a Jquery function that inserts a 'save button' into the page when a specific button is clicked, I encountered an issue with another function meant to be activated when the save button is clicked. The first function see ...

Tips for effectively dividing a component's code into smaller sub-components

Within my component MyComp, there exists an extensive code that I wish to divide into 3 separate components. In envisioning the structure of MyComp, I am seeking general advice and a brief example in response: import React, { Component, Fragment } from & ...

AngularJS - Leveraging the power of two-way data binding with JSON strings

I am a beginner with AngularJS and I'm currently working on retrieving, parsing, and displaying data from a SOAP web service. So far, I have been able to successfully make calls to a public weather service, capture and display the XML data that is ret ...

using Angular and RxJS to filter out an element from an array

One of the functions in my service is a delete function. This function calls an API that returns either true or false. If the response is true, I then proceed to find the index of the item in my array, splice it out, and return the updated array. Here&apos ...

How can you personalize the background color of a Material-UI tooltip?

Is there a way to customize the hover tooltip with a "? icon" for users providing input guidance in a text field? I prefer the design to have white background with grey text and larger font size, as opposed to MUI's default style which is grey with wh ...

Stopping React from re-rendering a component when only a specific part of the state changes

Is there a way to prevent unnecessary re-renders in React when only part of the state changes? The issue I'm facing is that whenever I hover over a marker, a popup opens or closes, causing all markers to re-render even though 'myState' rema ...

Press the button to automatically scroll to a designated div section

One of the challenges I'm facing involves a fixed menu and content box (div) on a webpage. Whenever I click on the menu, the content box should scroll to a specific div. Initially, everything was working fine. Here is a sample of it in action: http ...

Navigating with Anchors, Styling and jQuery

Firstly: Apologies in advance for any language errors as English is not my native tongue. :) The Scenario Here's the deal: I'm attempting to create a single button that, when clicked by the user, automatically scrolls down to the next DIV. Each ...

Positioning a div above a Bootstrap navbar that disappears when scrolling

I am currently using bootstrap to design a website, and I am attempting to create a div that would initially appear above the navbar on an unscrolled webpage. However, once the user starts scrolling, I want this div to disappear and have the navbar fill it ...

JavaScript - Executing the change event multiple times

Below is the table I am working with: <table class="table invoice-items-table"> <thead> <tr> <th>Item</th> <th>Quantity</th> <th>Price</th> & ...

Utilizing request parameters within middleware that employs the 'createHandler' function from the 'graphql-http' package

I'm currently working on an Express server that uses GraphQL to handle HTTP requests. One of the key features of this Express server is the implementation of two crucial middlewares: app.use(authenticate); app.use('/graphql', createHandler ...

There was an error of "Uncaught TypeError: CANNON.NaiveBroadPhase is not a constructor"

I've been diving into cannon.js and encountering the following error: Uncaught TypeError: CANNON.NaiveBroadPhase is not a constructor. I've tried numerous solutions but none seem to be working. Here's a snippet of my script: var scene, came ...

A guide on eliminating null or empty values within a React table's map

Is there a way to determine if the value of {row.storeId} is null or empty? If it is, I would like to display NA within the <TableCell>. {props.tableData.map(row => ( <TableRow key={row.storeId}> <TableCell>{row ...