TypeScript/JavaScript: How to use alternative vite package in the place of deprecated @vitejs/create-app package?

In the article — Is Vite Better than Webpack?. Fixing Webpack’s developer experience | Bits and Pieces (bitsrc.io) from the “Getting started with Vite” section. The command to run a Vite bootstrapped application is `npm init @vitejs/app` but this command is not valid anymore. You will get the following error,

$npm init @vitejs/app

@vitejs/create-app is deprecated, use npm init vite instead

/Users/akarshseggemu/.npm/_npx/cd7b34a2811665ef/node_modules/@vitejs/create-app/index.js:43
require('create-vite')
^

The error message shows the alternative command package with the command,

$npm init vite

or

$npm init vite@latest

You need to choose the project name and select framework. Post which the project will be created.

Output from the project creation

$npm init vite      
Need to install the following packages:
create-vite@5.2.3
Ok to proceed? (y) y
✔ Project name: … vite-project
✔ Select a framework: › React
✔ Select a variant: › Remix ↗
Need to install the following packages:
create-remix@2.9.2
Ok to proceed? (y) y
npm WARN deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
npm WARN deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported

 remix   v2.9.2 💿 Let's build a better website...
      ◼  Directory: Using vite-project as project directory

      ◼  Using basic template See https://remix.run/guides/templates for more
      ✔  Template copied

   git   Initialize a new git repository?
         No

  deps   Install dependencies with npm?
         Yes

      ✔  Dependencies installed

  done   That's it!

         Enter your project directory using cd ./vite-project
         Check out README.md for development and deploy instructions.

         Join the community at https://rmx.as/discord

We need to change the directory to the project. In my case it is vite-project . Then I executed the command

$npm run build

> build
> remix vite:build

vite v5.2.12 building for production...
✓ 83 modules transformed.
build/client/.vite/manifest.json                1.07 kB │ gzip:  0.30 kB
build/client/assets/_index-B17S9f7F.js          0.73 kB │ gzip:  0.37 kB
build/client/assets/root-LChrk_Sm.js            1.44 kB │ gzip:  0.84 kB
build/client/assets/jsx-runtime-56DGgGmo.js     8.11 kB │ gzip:  3.05 kB
build/client/assets/entry.client-jPehgn16.js   11.63 kB │ gzip:  4.09 kB
build/client/assets/components-BAmE7OwT.js    224.08 kB │ gzip: 72.46 kB
✓ built in 532ms
vite v5.2.12 building SSR bundle for production...
✓ 5 modules transformed.
build/server/.vite/manifest.json  0.15 kB
build/server/index.js             6.84 kB
✓ built in 17ms

As the build command was successful, I then executed the command

npm run dev

> dev
> remix vite:dev

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

I navigated to the URL `http://localhost:5173/` in the browser then I saw the following web page

I hope my article showed you how to use the new alternative vite instead of the depcreated @vitejs/create-app package.

If you like my articles, please follow me on Medium, you can also watch my videos on YouTube and you can also support me by buying me a coffee.