diff --git a/Docker_Container/.dockerignore b/Docker_Container/.dockerignore new file mode 100644 index 0000000000..56e8146402 --- /dev/null +++ b/Docker_Container/.dockerignore @@ -0,0 +1,5 @@ +node_modules +build +.dockerignore +Dockerfile +Dockerfile.prod \ No newline at end of file diff --git a/Docker_Container/README.md b/Docker_Container/README.md new file mode 100644 index 0000000000..dc9a50a349 --- /dev/null +++ b/Docker_Container/README.md @@ -0,0 +1,54 @@ +## Steps to start the build with Docker + +### Project Setup + +- Install [Docker](https://www.docker.com/) + +- Build and Tag The Docker Image + +``$ docker build -t sample:dev`` + +- Then Spin up the container once build is done + +``` +$ docker run \ + -it \ + --rm \ + -v ${PWD}:/app \ + -v /app/node_modules \ + -p 3001:3000 \ + -e CHOKIDAR_USEPOLLING=true \ + sample:dev +``` + +- Whats Happening here + +1. The ``docker run`` command creates and runs a new conatiner instance from the image we just created + +2. ``-it`` starts the container in interactive mode + +3. ``--rm`` removes the container and volumes after the container exists. + +4. ``-v ${PWD}:/app`` mounts the code into the container at "/app". + +5. Since we want to use the container version of the “node_modules” folder, we configured another volume: ``-v /app/node_modules`` . You should now be able to remove the local “node_modules” flavor. + +6. ``-p 3001:3000`` exposes port 3000 to other Docker containers on the same network (for inter-container communication) and port 3001 to the host. + +7. Finally , ``-e CHOKIDAR_USEPOLLING=true`` enables a polling mechanism via chokidar (which wraps ``fs.watch``, ``fs.watchFile``, and ``fsevents``) so that hot-reloading will work. + +### For using compose file + +- Build the image and fire up the container + +`` $ docker-compose up -d --build `` + +- Ensure the app is running in the browser and test hot - reloading again. Bring down the container before moving on + +``$ docker-compose stop`` + +- Now your container is ready to run + + + + diff --git a/Docker_Container/docker-compose.yml b/Docker_Container/docker-compose.yml new file mode 100644 index 0000000000..ad7cad7f48 --- /dev/null +++ b/Docker_Container/docker-compose.yml @@ -0,0 +1,16 @@ +version: '3.7' + +services: + + sample: + container_name: sample + build: + context: . + dockerfile: Dockerfile + volumes: + - '.:/app' + - '/app/node_modules' + ports: + - 3001:3000 + environment: + - CHOKIDAR_USEPOLLING=true \ No newline at end of file diff --git a/Docker_Container/dockerfile b/Docker_Container/dockerfile new file mode 100644 index 0000000000..34eca8c102 --- /dev/null +++ b/Docker_Container/dockerfile @@ -0,0 +1,21 @@ +# pull official base image +FROM node:13.12.0-alpine + +# set working directory +WORKDIR /app + +# add `/app/node_modules/.bin` to $PATH +ENV PATH /app/node_modules/.bin:$PATH + +# install app dependencies +COPY package.json ./ +COPY yarn.lock ./ +COPY package-lock.json ./ +RUN yarn install --silent +RUN yarn install react-scripts@3.4.1 -g --silent + +# add app +COPY . ./ + +# start app +CMD ["yarn", "start"] diff --git a/README.md b/README.md index a2665fed04..bcc5c01730 100644 --- a/README.md +++ b/README.md @@ -68,3 +68,6 @@ yarn lint See [Configuration Reference](https://cli.vuejs.org/config/). +## Project setup using docker + +See [Docker Container](Docker_Container\README.md)