What is Vite? What is a build tool? Steps to build a React x TypeScript environment on Docker

thank you for your hard work.

Just as I thought the new year had just started, I was shocked by the Systems Development Department, which was already in the end of February.

This time I would like to summarize the "Vite" that I used during my work.

I don't see it often when I touched the source code, but I occasionally used Vite, and since I used it without really understanding the functions and mechanisms, I will leave it on my blog with a new learning experience.

What is Vite?

It was first released in 2020, and is a build tool aimed at providing a fast, lean development experience, and is pronounced " Vito ." (See the official website)

(Please read on about the build tools as there are some such things to explain later)

It provides a fast development environment and loads modules demand , so whenever you make changes to the source code, it will be reflected in your browser.

Also, when updating, you can update only the changes, not the entire page.

It seems to be a build tool specifically designed for JavaScript applications.

What is a build tool?

First of all, in recent years, relatively large web development, we do not manually load JavaScript files into HTML one by one. (Thank you very much, perhaps it was necessary to load it in the past)

Additionally, as development projects grow, JavaScript and CSS files increase, and during development, these files are split into roles to improve reusability and readability.

However, if a module is dependent on another module, the browser will need to load the execution order correctly, and it may cause HTTP requests to load those files, which may slow down the display speed.

Build tools are what solves these problems.

The roles include bundles , compression , and transpiles

1. Bundle: reduce the number of HTTP requests and improve loading speed by combining multiple files together
2. Compression: Remove unnecessary space and comments to reduce file size
3. Transpile: Convert languages ​​such as TypeScript cannot be understood by the browser as they are, so convert them to JavaScript.

Other popular build tools seem to be build tools such as Webpack and tsc CLI esbuild.

Differences from other build tools

• It uses a native ES Module, and allows you to separate files and load them when needed by managing modules individually.
• It performs on-demand processing to convert only the required modules when requested by a browser, making it particularly convenient in a development environment.
• Traditional build tools bundle the entire project when starting a development server, but not in Vite.

Install and view Vite

This time, we will be building a React x TypeScript environment on Docker

１．Create a project directory and create a src directory under it

2．Define the Dockerfile and docker-compose.yml (*Comment out the volumes in the doker-compose.yml file at first)

Dockerfile

docker-compose.yml

3．Run "docker compose build" to create an image and run "docker compose up -d"

4．Go to the src directory and run "docker cp blog-vite-1:/app/src/viteapp/ ." (A copy of the directory inside the container will be created on the host side)

5．Uncomment out volumes in docker-compose.yml and run "docker compose up -d" again to apply volume settings.

Access the corresponding URL and it's all done! ! ! Just as I thought so, I got mad for not being able to connect.

After doing some research, I found that the official Vite documentation states that by default, only "localhost" listens, and to listen for public addresses, I had to add the following to the "vite.config.ts" file.
Reference material: https://ja.vite.dev/config/server-options.html#server-host

After adding the above, I accessed the URL again and it was displayed safely!

That's all.

This time I've covered the overview of vite and the environment construction, but if I have the opportunity, I would like to implement CRUD processing and write an article.

thank you very much.