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

thank you for your hard work

It feels like the new year just started, but it's already the end of February and I'm shocked. This is Eita from the System Development Department

This time I would like to summarize something called "Vite" that I used in my work

I don't see it often when I'm working with the source code, but I do occasionally have the opportunity to use Vite, and since I used it without really understanding its functions or how it worked, I'd like to write about it on my blog, along with what I've learned so far

What is Vite?

First released in 2020, it is a build tool that aims to provide a fast and streamlined development experience and is pronounced " Veeto " (see official website).

(I'll explain about build tools later, so just read this as an example of what they are.)

It provides a fast development environment and loads modules demand , so changes to the source code are immediately reflected in the browser.

Also, when updating, you can refresh only the changes instead of reloading the entire page

It appears to be a build tool designed specifically for JavaScript applications

What is a build tool?

First of all, in recent relatively large-scale web development, we no longer manually load JavaScript files one by one into HTML. (Thank goodness we had to load them in the past.)

Additionally, as development projects grow, the number of JavaScript and CSS files increases, and dividing these files into functional sections during development increases reusability and improves readability

However, when a module is split into multiple modules, the browser must load them in the correct order if one module depends on another, and it must issue HTTP requests to load those files, which can slow down the display speed

Build tools are the solution to these problems

Its responsibilities include bundling , minifying , and transpiling

1. Bundling: Combining multiple files into one reduces the number of HTTP requests and improves loading speed
2. Compression: Remove unnecessary spaces and comments to reduce file size
3. Transpiling: Languages ​​like TypeScript are converted into JavaScript because browsers cannot understand them as they are

Other popular build tools seem to be Webpack, tsc CLI esbuild, and other build tools

Differences from other build tools

• It uses native ES Modules, and by managing modules individually, you can split files and load them when needed
• It performs on-demand processing, converting only the necessary modules when requested by the browser, making it particularly convenient for development environments
• Conventional build tools bundle the entire project when starting the development server, but Vite does not

Actually install Vite and display it

This time we will build a React x TypeScript environment on Docker

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

2．Define Dockerfile and docker-compose.yml (*First, comment out volumes in the docker-compose.yml file)

Dockerfile

FROM node:22.13.1 # Set working directory WORKDIR /app/src/viteapp # Basic configuration of vite application RUN npm install -g create-vite && \ create-vite . --template react-ts --yes # Install dependencies RUN npm install # Start server CMD ["npm", "run", "dev"]

docker-compose.yml

networks: vite-net: driver: bridge services: vite: build: context: . dockerfile: ./docker/node/Dockerfile # volumes: # - ./src/viteapp:/app/src/viteapp networks: - vite-net ports: - 5173:5173 tty: true

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 in the container will be created on the host side.)

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

I thought I'd just access the URL and be done!!! But then I got an error saying I couldn't connect

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

export default defineConfig({ # Add the following three lines server: { host: true }, plugins: [react()], })

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

That's all

This time I covered the overview of vite and how to set up the environment, but if I have the opportunity, I would like to implement CRUD processing and write an article about it

thank you very much.