It’s the second part of article — React app from scratch. I’ll show you how to create a CD process to make your app better from scratch. Before we start I’ll put useful links. First part of article: _It’s a first part of tutorial where I’m going to show how to create react app from scratch._medium.com React app from scratch Other my article — how to start using Docker: _In this article I want to show how to use docker for development and testing. To show that now is time to switch from…_hackernoon.com Making right things using Docker If your project is open source — you can use . You just need to create like this: Travis CI .travis.yml language: node_jsnode_js: "8" "9"script: npm test And see result: But I want to show you how to create CI/CD environment from scratch. We will use with Jenkins has official image on . Jenkins Docker . docker hub All configs you can find on github: https://github.com/evheniy/react-app/tree/master/jenkins Jenkins To run Jenkins using official image from docker hub we need to run next command: docker run --name jenkins -p 8080:8080 jenkins But we need to store our data if we need to update image or restart container. So we need to map volume to host machine: docker run -p 8080:8080 -v $PWD/jenkins:/var/jenkins_home jenkins We will use docker not only for running Jenkins. With docker we can run docker registry and we can test and create images for our react app. Registry To run using docker image on docker hub run: docker registry docker run -d -p 5000:5000 --restart always --name registry registry To push a new image to registry use next commands: docker pull ubuntudocker tag ubuntu localhost:5000/ubuntudocker push localhost:5000/ubuntu Docker compose To run registry with Jenkins I’ll use docker-compose. But before I’ll create Dockerfile for Jenkins. We need it for running docker inside docker. touch Dockerfile And put: jenkins**/**jenkins:lts FROM root USER Here I use latest image of Jenkins and run it as root. Now we are ready to use docker-compose. Let’s create file for running Jenkins and docker repository in one command: docker-compose touch And one more. As we need to run docker inside docker we need to add more volumes. But first run command: which docker And put next code: '3' version: **services: jenkins:build:** . jenkins true always - 8080:8080 - ./jenkins_home:/var/jenkins_home- /var/run/docker.sock:/var/run/docker.sock- :/usr/bin/docker container_name: privileged: restart: ports: volumes: /usr/local/bin/docker registry registry always - 5000:5000 registry:image: container_name: restart: ports: To run it use docker-compose up -d And to stop: docker-compose stop To bring everything down (with volumes): docker-compose down --volumes Or if you want to remove docker images: docker-compose down --rmi all So let’s run it and configure Jenkins to use pipeline. Open : http://localhost:8000/ To see the password just run (we need it only once): docker exec jenkins cat /var/jenkins_home/secrets/initialAdminPassword And enter it on page: And as it’s our first run we see configuration page: I choose the second point and check next plugins: Click and wait: install If you check directory we have a lot of Jenkins files: After you need to create a new user: And that’s all. Jenkins is ready. Next we need to create a new build. You can make it from start page: On first step we need to enter name and choose type of our build configurations: I use multibranch pipeline configuration. Next we need to configure our build (name, access to github) And some other configs like cleaning and scanning time. As I made it for react-app I use the same github repo ( ) https://github.com/evheniy/react-app And after Jenkins scans it Configs Next step is creating Jenkinsfile, Dockerfile, Dockerfile.test and save it on github: node {try {stage('Checkout') {checkout scm}stage('Environment') {sh 'git --version'echo "Branch: ${env.BRANCH_NAME}"sh 'docker -v'sh 'printenv'}stage('Build Docker test'){sh 'docker build -t react-test -f Dockerfile.test --no-cache .'}stage('Docker test'){sh 'docker run --rm react-test'}stage('Clean Docker test'){sh 'docker rmi react-test'}stage('Deploy'){if(env.BRANCH_NAME == 'master'){sh 'docker build -t react-app --no-cache .'sh 'docker tag react-app localhost:5000/react-app'sh 'docker push localhost:5000/react-app'sh 'docker rmi -f react-app localhost:5000/react-app'}}}catch (err) {throw err}} Dockerfile # Extending image node:carbon FROM apt-get update apt-get upgrade **-**y apt-get **-**y install autoconf automake libtool nasm make pkg-config git apt-utils RUN RUN RUN # Create app directory mkdir **-**p **/ / /**app**WORKDIR / / /**app RUN usr src usr src # Versions npm **-**v node **-**v RUN RUN # Install app dependencies package.json package-lock.json **/ / / / COPY / / / /COPY usr src app usr src app RUN** npm install # Bundle app source . **/ / /**app COPY usr src # Port to listener 3000 EXPOSE # Environment variables production 3000 "/" ENV NODE_ENV ENV PORT ENV PUBLIC_PATH npm run start:build RUN # Main command [ "npm", "run", "start:server" ] CMD Dockerfile.test # Extending image node:carbon FROM apt-get update apt-get upgrade **-**y apt-get **-**y install autoconf automake libtool nasm make pkg-config git apt-utils RUN RUN RUN # Create app directory mkdir **-**p **/ / /**app**WORKDIR / / /**app RUN usr src usr src # Versions npm **-**v node **-**v RUN RUN # Install app dependencies package.json package-lock.json **/ / / / COPY / / / /COPY usr src app usr src app RUN** npm install # Bundle app source . **/ / /**app COPY usr src # Environment variables test ENV NODE_ENV # Main command [ "npm", "test" ] CMD And after rescanning Jenkins checks it: And logs: We see a lot of interesting information. Now we can check that our image stored in our registry. Run command: docker pull localhost:5000/react-app Now you can run this image on production server. In this article I created docker compose file for running Jenkins and Docker registry. I created Jenkinsfile and Dockerfile for testing and releasing our app. In next articles I’ll show how to use SSR, modular structure, webpack optimization, chaos monkey, testing and code coverage…

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Continuous delivery of react app with Jenkins and Docker

Too Long; Didn't Read

Company Mentioned

Evheniy Bystrov

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Continuous delivery of react app with Jenkins and Docker

Too Long; Didn't Read

Company Mentioned

Evheniy Bystrov

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES