Bat for creating a Vite project

Notice
Things I want to do
Creating a project using a batch file
Result

Notice

This article is outdated, and the Vite project structure is different from what it is today.

I recommend creating a project using Vite’s own mechanism, referring to the following article.

Things I want to do

I tried creating a Vite project on the following page, but since it involves a lot of manual work, I’d like to automate it.

Creating a project using a batch file

Create a folder

Create a folder to use for the project.

This time, I created the following folders.

F:\TS\Vite_auto

Creating a batch file

Create a CreateViteProject.bat file in the folder you created.

Paste the following content into the CreateViteProject.bat file you created and save it.

call npm create vite@latest ./ -- --template vanilla
del *.js
del *.html
del *.svg
del *.css
rmdir /s /q public
mkdir src
call npm install
echo import { defineConfig } from "vite"; >> vite.config.js
echo export default defineConfig({ >> vite.config.js
echo   root: './src', >> vite.config.js
echo   base: "./", >> vite.config.js
echo   build: { >> vite.config.js
echo     outDir: '../dist',  >> vite.config.js
echo    }, >> vite.config.js
echo }); >> vite.config.js

Executing a batch file

Run the CreateViteProject.bat file that you created.

When the following message appears, select ‘Ignore files and continue’ using the arrow keys.

Next, when asked for the project name, press Enter without entering anything.

The folder name will become the project name.

If your folder structure looks like the following, then it was successful.

.
|   CreateViteProject.bat
|   .gitignore
|   package.json
|   package-lock.json
|   vite.config.js
|
+---src
\---node_modules

File creation and bundling

HTML and JS files should be placed under the src folder.

Note that index.html is apparently required.

The following command will bundle the files.

npm run build

If the process completes without errors, a file will be created in the dist folder.

Result

Project creation, which previously required manual input, has now been simplified.