/nginx_vite_react_docker

running react app, created by vite, in docker compose and integrated nginx web-server

Primary LanguageCSS

NGINX + React + Vite + TypeScript

This repo is my sample of React + Vite + TypeScript + Nginx + Docker + DockerCompose

Project Hierarchy Review

nginx_vite_react
├─ client
│ ├─ public
│ │ └─ vite.svg
│ ├─ src
│ │ ├─ assets
│ │ │ └─ react.svg
│ │ ├─ App.css
│ │ ├─ index.css
│ │ ├─ main.tsx
│ │ └─ vite-env.ts
│ ├─ .eslintrc.cjs
│ ├─ index.html
│ ├─ package.json
│ ├─ package.lock.json
│ ├─ tsconfig.json
│ ├─ tsconfig.node.json
│ └─ vite.config.json
├─ nginx
│ └─ nginx.conf
├─ .gitignore
├─ docker-compose.yml
└─ Readme.md

Installation (on host)

  • First change work directory
    $ cd client

  • Second install node_modules dependencies
    $ npm i

  • Third start dev server
    $ npm run dev

Run in Docker-compose

  • First input in terminan command
    $ docker image build -f Dockerfile -t vite_react .
    or sudo: # sudo docker image build -f Dockerfile -t vite_react .

  • Second input next
    $ docker compose -f docker-compose.yml -p serve up

  • Use it!

serve - is name of project started in docker-compose

author: @letnull19a