Vite-React Deployment on Nginx

wahyu eko hadi saputro
2 min readApr 2, 2024

Vite is a popular build tool that offers a faster and more streamlined development experience for modern web projects, including those built with React.

Benefits of Using Vite with React:

Faster Development Server: Vite utilizes native ES modules and pre-bundling, leading to significantly faster startup times compared to traditional bundlers. This allows for quicker iteration and feedback loops during development.

Hot Module Replacement (HMR): Vite provides efficient HMR for React components. Changes made to your React code are reflected in the browser almost instantly without the need for a full page reload.

Improved Developer Experience: The combination of fast startup times and HMR creates a smoother and more enjoyable development workflow.

Requirement:

Nodejs

Nginx : https://nginx.org/

Tailwind : https://tailwindcss.com/docs/guides/vite

Clone : https://github.com/wahyueko22/my-profile-vite-react

Build / compile the application by running :

npm run build

Setting nginx configuration for the listening port

Run nginx and access localhost:9001

Github : https://github.com/wahyueko22/my-profile-vite-react

sources :
https://vitejs.dev/guide/
https://tailwindcss.com/docs/guides/vite
https://www.youtube.com/watch?v=tBwu_eg7i2Q

--

--