react-vite-ts-eslint-prettier-template

1
# Dockerizing a React App - https://tmpl.at/3IBqbrn
2
# Dockerizing a React Application using NGINX and React-Router | by Connor Kent | Level Up Coding - https://levelup.gitconnected.com/dockerizing-a-react-application-using-nginx-and-react-router-43154cc8e58c
3
# Configuring Nginx for React Router - https://www.barrydobson.com/post/react-router-nginx/
4

5
# Build step / image
6
# -------------------------------------------------- #
7

8
FROM node:18-alpine as build
9

10
# set working directory
11
WORKDIR /app
12

13
# add `/app/node_modules/.bin` to $PATH
14
# ENV PATH /app/node_modules/.bin:$PATH
15

16
# install npm
17
RUN npm install -g npm@8.19.2
18

19
# install app dependencies
20
COPY package.json ./
21
RUN npm install
22

23
# copy app files
24
COPY . ./
25

26
# build the app
27
RUN npm run build
28

29

30
# Deployment step / image
31
# -------------------------------------------------- #
32

33
FROM nginx:stable-alpine
34

35
COPY --from=build /app/dist /usr/share/nginx/html
36
COPY ./nginx.conf /etc/nginx/conf.d/default.conf
37

38
EXPOSE 80
39

40
CMD ["nginx", "-g", "daemon off;"]
41

42

43
# How to use
44
# -------------------------------------------------- #
45

46
## Remove previous build & container
47
# docker image rm react-template --force
48
# docker rm react-template-container --force
49

50
## Build image
51
# docker build -t react-template .
52

53
## Run the container and remove it after it exits
54
# docker run -it -d --name react-template-container --rm -p 1337:80 react-template
55