Mancano poco meno di due giorni all’uscita di Tredici Vite, il nuovo film del premio Oscar Ron Howard, che arriverà su Prime Video dal 5 agosto. Basato su una storia vera, il lungometraggio è scritto da William Nicholson, e narrerà la vicenda della più grande missione di salvataggio mai realizzata. Nel cast troveremo Viggo Mortensen, …

Tredici Vite: il nuovo film di Ron Howard dal 5 agosto su Prime Video

In the hustle of day-to-day work, everyone wants to complete their numerous jobs as fast as possible. And most of the business and personal operations are conducted using applications. Vite.js has made its debut in the market for making apps faster, which has gained a lot of popularity and endorsement from industry experts. Vite Javascript is a no bundler modern technology development environment, allowing applications to render more precisely and efficiently through its native ES module importing and HMR. It has become essential to learn this tech for moving forward in the development domain. So, let’s have a quick overview of Vite and then execute some Vite commands for installing it. What does Vite.js Offer? Hot Module Replacement
HMR is the most popular feature of Vite.js as it allows to update the content on the web page immediately without needing a browser refresh. It is available in the Javascript bundler to optimize the functionality of your application. As per the official Vite documentation, its performance and speed are decoupled from the overall available modules. Bare Module Resolving
Most of the browsers don’t allow importing of bare modules using commands, such as import {createApp} from ‘vue’, as it is not a relative path to the node_modules. However, Vite enables the bare import specifiers from the Javascript files. It rewrites the file content and executes module resolution for locating the suitable file from the dependencies. On-demand compilation
For making the application fast as light-speed, Vite compiles only a portion of code according to the request forwarded by the browser. After compilation, changes are made on-screen, and all unaltered files provide a 304 error code. This feature is quite different from the traditional bundlers, which compile the overall code and bundle them before changing. Due to this, developers prefer Vite for making large and complex applications. Configuration Option
Vite offers a wide array of modules to extend the functionality of your application. By configuring ‘vite.config.js’ and ‘vite.config.ts’ in the project’s root directory, you can optimize the software to add more features to it. In addition, you can use Koa middleware for custom file transformation. Let’s Get through Each Step to Install Vite
Before moving to the installation procedure, you must ensure that the latest version of Node.js is installed on your system. Step 1: Checking Requirements and Initiating installation
Once the Node.js is present and running on your computer , the next step is to run the ‘npm init @vitejs/app.’ Further, a similar list as below provided will be available, and you have to select a project name from it. Project Name List:
In this installation, we have selected vanilla as the project name. When you select an option from the project name list, it creates a directory containing essential files required for software development. ‘index.html’, ‘main.js’, ‘style.css’, ‘favicon.svg’ and some additional files for performing npm and Git operations. Moreover, the ‘package.json’ file is also present, which includes ‘vite’ as a dependency and some basic scripts to initiate the dev ecosystem for starting the build. We have all the required knowledge to move on with the installation process. Step 2: Creating Project Directory
Further, open the terminal on your system and navigate to any directory path to run the command as provided: npx create-vite-app vite-test, where ‘vite-test’ is the name of the project directory. Step 3: Installation command execution
Move to the project directory using the ‘cd’ command and install the application dependency by executing the ‘npm install’ command. Command execution structure:
Step 4: Running the Dev Server
At this step, we will start the dev server by running the ‘npm run dev’ command, and after its successful execution, you will be able to view your application on http://localhost:3000/ . Also, if you perform any modification in the project files, all the changes will be immediately reflected on the screen. Step 5: Vite Test
This screen will be displayed to you once you navigate to the localhost page to view your application. Now, you are ready to use Vite.js for your software development projects. Vite Install on macOS: Step-by-Step Guide
Likewise, for Windows computers, you need to install Noed.js before installing Vite.js on MacOS. Let’s get started with installing Vite.js on MacOS. Follow the below steps, and you are good to go with your application creation. Step 1: Creating a new Vite App
Open the terminal and create new projects using any of the two commands. Using NPX: npx create-vite-app testing-vite
Using Yarn: yarn create-vite-app testing-vite
‘testing-vite’ is the project’s name, and you can replace it with any other term of your choice. Step 2: Accessing Project Directory and Installing Packages
Move to the directory with the project name you have created in the first step. And install all the dependencies and packages required to work with the application development. You can use ‘npm install’ or ‘yarn’ to perform this installation. Step 3: Running the Dev Server
You have to run the server in the browser to view your application, and for this, you can use ‘npm run dev’ and ‘yarn dev’ commands. Step 4: Vite Test
By navigating to http://localhost:3000/ , you can test whether your server is running or not. Your server is running seamlessly if you view a similar page, as shown in the screengrab below. Step 5: Creating the build
You have to run this command for bundling up your production application. It will Rollup the App and store the output in the dist directory, present in the root of your software project. In addition, you can find out all the static assets in it. Steps to Install Vite.js Vue Router
Vue Router is an essential component of every application. It leads to establishing a connection between the browser’s URL and elements of Vue to ensure smooth rendering over the App. It also aids in syncing URLs so that the user can view that in your software solution. Let’s move further to understand its installation. Step 1: Checking Prerequisites
First, check whether you have Vue.js on your computer or not. If it is present, then we are good to go further, and if it’s not, you must install its packages in your vite.js application. ‘npm I –save [email protected] ’ is the command you have to execute to install Vue Router packages in your Vite App. It will ensure that the latest version of the Vue Router is installed. Step 2: Creating a Javascript file
You have to create a file with the name ‘router.js’ for defining the routes as displayed below:
After successful execution of this code, you have to register the ‘register.js’ file in the ‘main.js’ using the command as defined:
Step 3: Root Component Configuration
This is the last step of Vue Router installation, in which you have to modify the App.vue root component to enable it to render all other app components for rendering. After this, you will have the leverage to register custom routes for your Vite.js application. Vite Install for Single Page Application
Most people have a question, about whether they can create a single page application with Vite.js or not. A reliable answer is. Yes, you can fabricate SPA software with it. Let’s find out which packages you have to install and configure for doing it so. At first, we have to execute ‘npm init @vitejs/app’ and pick out a Vue template. We will get a Vite, Vue, and Vite plugin for compiling the Vue. In addition, for handling the routes, you have to install Vue Router, which is an essential component, leading to flawless functionality of your single-page application. It will work efficiently after enabling Vue Router and linking it with your App. Vite has a significant role here, as most operations are Vue-based. Moreover, we can also create a multi-page application using the Vite Rollup configuration. If you find difficulty defining the routes, you can use a community-made plugin vite-plugin-vue-router to simplify the task. Backend Configuration
If your project requires custom integration, you must follow the below-provided steps to configure it manually. Otherwise, you can navigate to the Awesome Vite website to serve the HTML with a traditional backend. Step 1: Enable the build manifest and configure the entry in your Vite config file. Step 2: If module preload polyfill is not disabled, you have to import it in your entry. Step 3: Add the below-shown code in your HTML template and modify the http://localhost:3000 with the local URL, where Vite is currently running. Step 4: Check the following server configuration to assure that static asset precisely work in the Vite environment. Otherwise, the application won’t load images. Step 5: This step focuses on the production part. You have to run a vite build command to create a manifest.json file, whose content will look like the screenshot provided below. The JSON file must contain:
Record <name, chunk>
Key should be the base name for non-entry chunks. Both static and dynamic information must be available in chunks. Concluding Up
Vite is a robust technology, and one should always know to install it on their system. And you can effortlessly install it on any Windows or macOS-based machine with the above-given step. If you find any error or difficulty at any step, you should try to verify the prerequisites, confirm the configuration with the provided steps, and then continue it. You can use Vite with any Vue application; whether it’s Vue 2 or Vue 3, it is compatible with both of them. Stay Tuned for more exciting articles and guides. Looking for Javascript Development? Leverage the advantages of the most advanced programming language, offering exceptional features, rich UI, versatility, and sleek structure, assuring performance and speed in every situation. Our software experts grasp JavaScript concepts, making your application interoperable, stable, and lightweight.

How to Install Vite.js on your Computer?

| CSS-Tricks
3 minutes read
Content delivery networks, or CDNs, allow you to improve the delivery of your website’s static resources, most notably, with CDN caching. They do this by serving your content from edge locations, which are located all over the world. When a user browses to your site, and your site requests resources from the CDN, the CDN will route that request to the nearest edge location. If that location has the requested resources, either from that user’s prior visit, or from another person, then the content will be served from cache. If not, the CDN will request the content from your underlying domain, cache it, and serve it. There are countless CDNs out there , but for this post we’ll be using AWS CloudFront. We’ll look at setting up a CloudFront distribution to serve all our site’s assets: JavaScript files, CSS files, font files, etc. Then we’ll see about integrating it into a Vite build. If you’d like to learn more about Vite, I have an introduction here . Setting up a CloudFront CDN distribution
Let’s jump right in and set up our CloudFront CDN distribution. For any serious project, you should be setting up your serverless infrastructure with code, using something like the Serverless Framework, or AWS’s CDK. But to keep things simple, here, we’ll set up our CDN using the AWS console. Head on over to the CloudFront homepage. At the top right, you should see an orange button to create a new distribution. The creation screen has a ton of options, but for the most part the default selections will be fine. First and foremost, add the domain where your resources are located. Next, scroll down and find the Response headers policy dropdown, and choose “CORS-With-Preflight.”
Lastly, click the Create Distribution button at the bottom, and hopefully you’ll see your new distribution. Integrating the CDN with Vite
It’s one thing for our CDN to be set up and ready to serve our files. But it’s another for our site to actually know how to request them from our CDN. I’ll walk through integrating with Vite, but other build systems, like webpack or Rollup, will be similar. When Vite builds our site, it maintains a “graph” of all the JavaScript and CSS files that various parts of our site import, and it injects the appropriate <script> tags, <link> tags, or import() statements to load what’s needed. What we need to do is tell Vite to request these assets from our CDN when in production. Let’s see how. Open up your vite.config.ts file. First, we’ll need to know if we’re on the live site (production) or in development (dev). const isProduction = process.env.NODE_ENV === "production";
This works since Vite sets this environment variable when we run vite build, which is what we do for production, as opposed to dev mode with hot module reloading. Next we tell Vite to draw our assets from our CDN like so, setting the base property of our config object:
export default defineConfig({  base: isProduction ? process.env.REACT_CDN : "",
Be sure to set your REACT_CDN environment variable to your CDN’s location, which in this case, will be our CloudFront distribution’s location. Mine looks something (but not exactly) like this:
https://distributiondomainname.cloudfront.net
Watch your VitePWA settings! As one final piece of cleanup, if you happen to be using the VitePWA plugin , be sure to reset your base property like this:
VitePWA({  base: "https://css-tricks.com/",

Adding CDN Caching to a Vite Build | CSS-Tricks

| CSS-Tricks
10 minutes read
The VitePWA plugin from Anthony Fu is a fantastic tool for your Vite-powered sites. It helps you add a service worker that handles:
offline support
…and other goodies! We’ll walk through the concept of service workers together, then jump right into making one with the VitePWA plugin. New to Vite? Check out my prior post for an introduction. Table of Contents
A
service worker
is a background process that runs on a separate thread in your web application. Service workers have the ability to intercept network requests and do… anything. The possibilities are surprisingly wide. For example, you could intercept requests for TypeScript files and compile them on the fly. Or you could intercept requests for video files and perform an advanced transcoding that the browser doesn’t currently support. More commonly though, a service worker is used to cache assets, both to improve a site’s performance and enable it to do something when it’s offline. When someone first lands on your site, the service worker the VitePWA plugin creates installs, and caches all of your HTML, CSS, and JavaScript files by leveraging the Cache Storage API . The result is that, on subsequent visits to your site, the browser will load those resources from cache, rather than needing to make network requests. And even on the first visit to your site, since the service worker just pre-cached everything, the next place your user clicks will probably be pre-cached already, allowing the browser to completely bypass a network request. Versioning and manifests
You might be wondering what happens with a service worker when your code is updated. If your service worker is caching, say, a foo.js file, and you modify that file, you want the service worker to pull down the updated version, the next time a user visits the site. But in practice you don’t have a foo.js file. Usually, a build system will create something like foo-ABC123.js, where “ABC123” is a hash of the file. If you update foo.js, the next deployment of your site may send over foo-XYZ987.js. How does the service worker handle this? It turns out the Service Worker API is an extremely low-level primitive. If you’re looking for a native turnkey solution between it and the cache API, you’ll be disappointed. Basically, the creation of your service worker needs to be automated, in part, and connected to the build system. You’d need to see all the assets your build created, hard-code those file names into the service worker, have code to pre-cache them, and more importantly, keep track of the files that are cached. If code updates, the service worker file also changes, containing the new filenames, complete with hashes. When a user makes their next visit to the app, the new service worker will need to install, and compare the new file manifest with the manifest that’s currently in cache, ejecting files that are no longer needed, while caching the new content. This is an absurd amount of work and incredibly difficult to get right. While it can be a fun project, in practice you’ll want to use an established product to generate your service worker — and the best product around is Workbox , which is from the folks at Google. Even Workbox is a bit of a low-level primitive. It needs detailed information about the files you’re pre-caching, which are buried in your build tool. This is why we use the VitePWA plugin. It uses Workbox under the hood, and configures it with all the info it needs about the bundles that Vite creates. Unsurprisingly, there are also webpack and Rollup plugins if you happen to prefer working with those bundlers. Our first service worker
I’ll assume you already have a Vite-based site. If not, feel free to create one from any of the available templates . First, we install the VitePWA plugin:
npm i vite-plugin-pwa
import  VitePWA  from "vite-plugin-pwa"
plugins: [  VitePWA()
We’ll add more options in a bit, but that’s all we need to create a surprisingly useful service worker. Now let’s register it somewhere in the entry of our application with this code:
import  registerSW  from "virtual:pwa-register";if ("serviceWorker" in navigator) {  // && !/localhost/.test(window.location))  registerSW();
Don’t let the code that’s commented out throw you for a loop. It’s extremely important, in fact, as it prevents the service worker from running in development. We only want to install the service worker anywhere that’s not on the localhost where we’re developing, that is, unless we’re developing the service worker itself, in which case we can comment out that check (and revert before pushing code to the main branch). Let’s go ahead and open a fresh browser, launch DevTools, navigate to the Network tab, and run the web app. Everything should load as you’d normally expect. The difference is that you should see a whole slew of network requests in DevTools. That’s Workbox pre-caching the bundles. Things are working! What about offline functionality? So, our service worker is pre-caching all of our bundled assets. That means it will serve those assets from cache without even needing to hit the network. Does that mean our service worker could serve assets even when the user has no network access? Indeed, it does! And, believe it or not, it’s already done. Give it a try by opening the Network tab in DevTools and telling Chrome to simulate offline mode, like this. The “No throttling” option is the default selection. Click that and select the “Offline” option to simulate an offline connection. Let’s refresh the page. You should see everything load. Of course, if you’re running any network requests, you’ll see them hang forever since you’re offline. Even here, though, there are things you can do. Modern browsers ship with their own internal, persistent database called IndexedDB. There’s nothing stopping you from writing your own code to sync some data to there, then write some custom service worker code to intercept network requests, determine if the user is offline, and then serve equivalent content from IndexedDB if it’s in there. But a much simpler option is to detect if the user is offline , show a message about being offline, and then bypass the data requests. This is a topic unto itself, which I’ve written about in much greater detail. Before showing you how to write, and integrate your own service worker content, let’s take a closer look at our existing service worker. In particular, let’s see how it manages updating/changing content. This is surprisingly tricky and easy to mess up, even with the VitePWA plugin. Before moving on, make sure you tell Chrome DevTools to put you back online. How service workers update
Take a closer look at what happens to our site when we change the content. We’ll go ahead and remove our existing service worker, which we can do in the Application tab of DevTools, under Storage. Click the “Clear site data” button to get a clean slate. While I’m at it, I’m going to remove most of the routes of my own site so there’s fewer resources, then let Vite rebuild the app. Look in the generated sw.js to see the generated Workbox service worker. There should be a pre-cache manifest inside of it. Mine looks like this:
If sw.js is minified, run it through Prettier to make it easier to read. Now let’s run the site and see what’s in our cache:
Let’s focus on the settings.js file. Vite generated assets/settings.ccb080c2.js based on the hash of its contents. Workbox, being independent of Vite, generated its own hash of the same file. If that same file name were to be generated with different content, then a new service worker would be re-generated, with a different pre-cache manifest (same file, but different revision) and Workbox would know to cache the new version, and remove the old when it’s no longer needed. Again, the filenames will always be different since we’re using a bundler that injects hash codes into our file names, but Workbox supports dev environments which don’t do that. Since the time writing, the VitePWA plugin has been updated and no longer injects these revision hashes. If you’re attempting to follow along with the steps in this article, this specific step might be slightly different from your actual experience. See this GitHub issue for more context. If we update our settings.js file, then Vite will create a new file in our build, with a new hash code, which Workbox will treat as a new file. Let’s see this in action. After changing the file and re-running the Vite build, our pre-cache manifest looks like this:
Now, when we refresh the page, the prior service worker is still running and loading the prior file. Then, the new service worker, with the new pre-cache manifest is downloaded and pre-cached. The new pre-cached manifest is displayed in the list of cached assets. Notice that both versions of our settings file are there (and both versions of a few other assets were affected as well): the old version, since that’s what’s still being run, and the new version, since the new service worker has pre-cached it. Note the corollary here: our old content is still being served to the user since the old service worker is still running. The user is unable to see the change we just made, even if they refresh because the service worker, by default, guarantees any and all tabs with this web app are running the same version. If you want the browser to show the updated version, close your tab (and any other tabs with the site), and re-open it. The cache should now only contain the new assets. Workbox did all the legwork of making this all come out right! We did very little to get this going. A better way to update content
It’s unlikely that you can get away with serving stale content to your users until they happen to close all their browser tabs. Fortunately, the VitePWA plugin offers a better way. The registerSW function accepts an object with an onNeedRefresh method. This method is called whenever there’s a new service worker waiting to take over. registerSW also returns a function that you can call to reload the page, activating the new service worker in the process. That’s a lot, so let’s see some code:
if ("serviceWorker" in navigator) {  // && !/localhost/.test(window.location) && !/lvh.me/.test(window.location)) {  const updateSW = registerSW(    onNeedRefresh()      Toastify(        text: `<h4 style="display: inline">An update is available!</h4> <br><br> <a class="do-sw-update">Click to update and reload</a>  `,        escapeMarkup: false,        gravity: "bottom",        onClick()          updateSW(true);      ).showToast();  );}
I’m using the toastify-js library to show a toast UI component to let users know when a new version of the service worker is available and waiting. If the user clicks the toast, I call the function VitePWA gives me to reload the page, with the new service worker running. Now when we have pending updates, a nice toast component pops up on the front end. Clicking it reloads the page with the new content in there. One thing to remember here is that, after you deploy the code to show the toast, the toast component won’t show up the next time you load your site. That’s because the old service worker (the one before we added the toast component) is still running. That requires manually closing all tabs and re-opening the web app for the new service worker to take over. Then, the next time you update some code, the service worker should show the toast, prompting you to update. Why doesn’t the service worker update when the page is refreshed? I mentioned earlier that refreshing the page does not update or activate the waiting service worker, so why does this work? Calling this method doesn’t only refresh the page, but it calls some low-level Service Worker APIs (in particular skipWaiting) as well, giving us the outcome we want. Runtime caching
We’ve seen the bundle pre-caching we get for free with VitePWA for our build assets. What about caching any other content we might request at runtime? Workbox supports this via its runtimeCaching feature. Here’s how. The VitePWA plugin can take an object, one property of which is workbox, which takes Workbox properties. const getCache = ( name, pattern : any) => (  urlPattern: pattern,  handler: "CacheFirst" as const,  options:    cacheName: name,    expiration:      maxEntries: 500,      maxAgeSeconds: 60 * 60 * 24 * 365 * 2 // 2 years    ,    cacheableResponse:      statuses: [200]);// ...  plugins: [    VitePWA(      workbox:        runtimeCaching: [          getCache(            pattern: /^https://s3.amazonaws.com/my-library-cover-uploads/,            name: "local-images1"          ),          getCache(            pattern: /^https://my-library-cover-uploads.s3.amazonaws.com/,            name: "local-images2"          )        ]    )  ],// ... I know, that’s a lot of code. But all it’s really doing is telling Workbox to cache anything it sees matching those URL patterns. The docs provide much more info if you want to get deep into specifics. Now, after that update takes effect, we can see those resources being served by our service worker. And we can see the corresponding cache that was created. Adding your own service worker content
Let’s say you want to get advanced with your service worker. You want to add some code to sync data with IndexedDB, add fetch handlers, and respond with IndexedDB data when the user is offline (again, my prior post walks through the ins and outs of IndexedDB). But how do you put your own code into the service worker that Vite creates for us? There’s another Workbox option we can use for this: importScripts. VitePWA({  workbox: {    importScripts: ["sw-code.js"],
Here, the service worker will request sw-code.js at runtime. In that case, make sure there’s an sw-code.js file that can be served by your application. The easiest way to achieve that is to put it in the public folder (see the Vite docs for detailed instructions). If this file starts to grow to a size such that you need to break things up with JavaScript imports, make sure you bundle it to prevent your service worker from trying to execute import statements (which it may or may not be able to do). You can create a separate Vite build instead. Wrapping up
At the end of 2021, CSS-Tricks asked a bunch of front-end folks what one thing someone cans do to make their website better. Chris Ferdinandi suggested a service worker. Well, that’s exactly what we accomplished in this article and it was relatively simple, wasn’t it? That’s thanks to the VitePWA with hat tips to Workbox and the Cache API. Service workers that leverage the Cache API are capable of greatly improving the perf of your web app. And while it might seem a little scary or confusing at first, it’s nice to know we have tools like the VitePWA plugin to simplify things a great deal. Install the plugin and let it do the heavy lifting. Sure, there are more advanced things that a service worker can do, and VitePWA can be used for more complex functionality, but an offline site is a fantastic starting point! For more updates check below links and stay updated with News AKMI .

Using the VitePWA Plugin for an Offline Site | CSS-Tricks

| CSS-Tricks
9 minutes read
Vite (pronounced “veet”) is a newish JavaScript bundler. It comes batteries-included, requires almost no configuration to be useful, and includes plenty of configuration options. Oh—and it’s fast. Incredibly fast. This post will walk through the process of converting an existing project to Vite. We’ll cover things like aliases, shimming webpack’s dotenv handling, and server proxying. In other words, we’re looking at how to move a project from its existing bundler to Vite. If you’re looking instead to start a fresh project, you’ll want to jump to their documentation . Long story, short: the CLI will ask for your framework of choice—React, Preact, Svelte, Vue, Vanilla, or even lit-html—and whether you want TypeScript, then give you a fully functioning project. Scaffold first! If you are interested in learning about integrating Vite into a legacy project, I’d still recommend scaffolding an empty project and poking around it a bit. At times, I’ll be pasting some clumps of code, but most of that comes straight from the default Vite template. Our use case
What we’re looking at is based on my own experience migrating the webpack build of my booklist project ( repo ). There isn’t anything particularly special about this project, but it’s fairly big and old, and leaned hard on webpack. So, in that sense, it’s a good opportunity to see some of Vite’s more useful configuration options in action as we migrate to it. What we won’t need
One of the most compelling reasons to reach for Vite is that it already does a lot right out of the box, incorporating many of the responsi bilities from other frameworks so there are fewer dependencies and a more established baseline for configurations and conventions. So, instead of starting by calling out what we need to get started, let’s go over all the common webpack things we don’t need because Vite gives them to us for free. Static asset loading
woff
This takes any references to font files, images, SVG files, etc., and copies them over to your dist folder so they can be referenced from your new bundles. This comes standard in Vite. Styles
I say “styles” as opposed to “css” intentionally here because, with webpack, you might have something like this:
test: /.s?css$/,  use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],// laternew MiniCssExtractPlugin( filename: "[name]-[contenthash].css" ),
…which allows the application to import CSS or SCSS files. You’ll grow tired of hearing me say this, but Vite supports this out of the box. Just be sure to install Sass itself into your project, and Vite will handle the rest. Transpilation / TypeScript
It’s likely your code is using TypeScript, and or non-standard JavaScript features, like JSX. If that’s the case, you’ll need to transpile your code to remove those things and produce plain old JavaScript that a browser (or JavaScript parser) can understand. In webpack that would look something like this:
j)sx?$/,  exclude: /node_modules/,  loader: "babel-loader",
…with a corresponding Babel configuration to specify the appropriate plugins which, for me, looked like this:
"presets": ["@babel/preset-typescript"],  "plugins": [    "@babel/plugin-proposal-class-properties",    "@babel/plugin-syntax-dynamic-import",    "@babel/plugin-proposal-optional-chaining",    "@babel/plugin-proposal-nullish-coalescing-operator"  ]
While I could have probably stopped using those first two plugins years ago, it doesn’t really matter since, as I’m sure you’ve guessed, Vite does this all for us. It takes your code, removes any TypeScript and JSX, and produces code supported by modern browsers. If you’d like to support older browsers (and I’m not saying you should), then there’s a plugin for that . node_modules
Surprisingly, webpack requires you to tell it to resolve imports from node_modules, which we do with this:
resolve:  modules: [path.resolve("./node_modules")]
Production mode
One of the common things we do in webpack is distinguish between production and development environments by manually passing a mode property, like this:
mode: isProd ? "production" : "development",
const isProd = process.env.NODE_ENV == "production";
And, of course, we set that environment variable via our build process. Vite handles this a bit differently and gives us different commands to run for development builds versus those for production, which we’ll get into shortly. File extensions
At the risk of belaboring the point, I’ll quickly note that Vite also doesn’t require you to specify every file extension you’re using. resolve:  extensions: [".ts", ".tsx", ".js"],
Just set up the right kind of Vite project, and you’re good to go. Rollup plugins are compatible! This is such a key point I wanted to call it out in its own section. If you still wind up with some webpack plugins you need to replace in your Vite app when you finish this blog post, then try to find an equivalent Rollup plugin and use that. You read that correctly: Rollup plugins are already (or usually, at least) compatible with Vite. Some Rollup plugins, of course, do things that are incompatible with how Vite works—but in general, they should just work. Your first Vite project
Remember, we’re moving an existing legacy webpack project to Vite. If you’re building something new, it’s better to start a new Vite project and go from there. That said, the initial code I’m showing you is basically copied right from what Vite scaffolds from a fresh project anyway, so taking a moment to scaffold a new project might also a good idea for you to compare processes. The HTML entry point
Yeah, you read that right. Rather than putting HTML integration behind a plugin, like webpack does, Vite is HTML first. It expects an HTML file with a script tag to your JavaScript entrypoint, and generates everything from there. Here’s the HTML file (which Vite expects to be called index.html) we’re starting with:
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <title>The GOAT of web apps</title> </head> <body> <div id="home"></div> <script type="module" src="https://css-tricks.com/reactStartup.tsx"></script> </body></html>
Note that the <script> tag points to /reactStartup.tsx. Adjust that to your own entry as needed. Let’s install a few things, like a React plugin:
npm i vite @vitejs/plugin-react @types/node
We also create the following vite.config.ts right next to the index.html file in the project directory. import  defineConfig  from "vite";import react from "@vitejs/plugin-react";export default defineConfig(  plugins: [react()]);
Lastly, let’s add a few new npm scripts:
"dev": "vite","build": "vite build","preview": "vite preview",
Now, let’s start Vite’s development server with npm run dev. It’s incredibly fast, and incrementally builds whatever it needs to, based on what’s requested. But, unfortunately, it fails. At least for right now. We’ll get to how to set up aliases in a moment, but for now, let’s instead modify our reactStartup file (or whatever your entry file is called) as follows:
import React from "react";import  render  from "react-dom";render( <div> <h1>Hi there</h1> </div>,  document.getElementById("home"));
Now we can run it our npm run dev command and browse to localhost:3000. Hot module reloading (HMR)
Now that the development server is running, try modifying your source code. The output should update almost immediately via Vite’s HMR. This is one of Vite’s nicest features. It makes the development experience so much nicer when changes seem to reflect immediately rather than having to wait, or even trigger them ourselves. The rest of this post will go over all the things I had to do to get my own app to build and run with Vite. I hope some of them are relevant for you! Aliases

Adding Vite to Your Existing Web App | CSS-Tricks

The insider guide to Events — Follow recommendations from top trendsetters for a personalized feed of your citys most interesting events.

Application Date	5/22/2017
Grant Date
Title	Method and device for producing packages provided with images
Related Topics	Packaging machinery, Plastics applications, Thermoplastics, Product management, Industrial gases
Status	Application

Wells Fargo Success Story

3M Success Story

Platform Overview

Vite

About Vite

Vite Headquarter Location

Predict your next investment

Vite Patents

Latest Vite News

Discover the right solution for your team