javascript react docker initial development environment

REFERENCE: https://mherman.org/blog/dockerizing-a-react-app/

1. This recipe really run well, so. Installing scaffolding tools from react script over npm.

educacion@educacion:~/src/docker13react$ npm install create-react-app

2. Creating a default app, ( scaffolding ) frontend in this case.

educacion@educacion:~/src/docker13react$ npx create-react-app frontend

3. Looking what files were created.

educacion@educacion:~/src/docker13react$ cd frontend/
educacion@educacion:~/src/docker13react/frontend$ ls
Dockerfile  node_modules  package.json  public  README.md  src  yarn.lock

4. Create the docker file, from the tutorial reference.

educacion@educacion:~/src/docker13react/frontend$ cat Dockerfile 
# base image
FROM node
# set working directory
RUN mkdir /usr/src/app
WORKDIR /usr/src/app
# add `/usr/src/app/node_modules/.bin` to $PATH
ENV PATH /usr/src/app/node_modules/.bin:$PATH
# install and cache app dependencies
COPY package.json /usr/src/app/package.json
RUN npm install --silent
RUN npm install react-scripts@1.1.1 -g --silent
# start app
CMD ["npm", "start"]

5. There are some files that can be excluded from de docker image.

educacion@educacion:~/src/docker13react/frontend$ cat .dockerignore 
node_modules

6. Building the docker image for initial react development.

educacion@educacion:~/src/docker13react/frontend$ docker build -t react-docker .

7. Running the docker image in port 3000, exported and binded with the localhost port.

educacion@educacion:~/src/docker13react/frontend$ docker run -it -v ${PWD}:/usr/src/app -v /usr/src/app/node_modules -p 3000:3000 --rm react-docker

http://localhost:3000/ 

8. Using docker compose.

educacion@educacion:~/src/docker13react_initial/frontend$ cat docker-compose.yml 
version: '3.5'
services:
  react-docker:
    container_name: react-docker 
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - '.:/usr/src/app'
      - '/usr/src/app/node_modules'
    ports:
      - '3000:3000'
    environment:
      - NODE_ENV=development

9. Running docker compose

educacion@educacion:~/src/docker13react/frontend$ docker-compose up

10. Ckecking if it is running (manually).

http://localhost:3000/ 

11. Running the visual code editor, for runtime development.

educacion@educacion:~/src/docker13react$ ls
frontend  node_modules  package.json  package-lock.json

educacion@educacion:~/src/docker13react$ code .

12. And now!, It's running OK, pushing to the repository, on bitbucket.org with mercurial.

educacion@educacion:~/src$ hg clone https://bitbucket.org/maximilianou/docker13react_initial

educacion@educacion:~/src/docker13react_initial$ cp -R ../docker13react/* .

13. Adding new files to the repository

educacion@educacion:~/src/docker13react_initial$ hg add .

educacion@educacion:~/src/docker13react_initial$ hg commit -u maximilianou@gmail.com -m 'initial react docker development environment'

14. Updating the repository, with push.

educacion@educacion:~/src/docker13react_initial$ hg push