Development_Flow and deploying code
Travis CI is the Continuous integration provider -pull down the code and run set off tests.
Steps:
1.Install node js https://nodejs.org/en/download/
2.C:\Users\manjunathk>node -v
v12.18.3
3.npm install -g create-react-app
4.create-react-app frontend
5. cd frontend
C:\Users\manjunathk>cd frontend
6.npm run test
7.C:\Users\manjunathk\frontend>npm run build
C:\Users\manjunathk\frontend>npm run build
> frontend@0.1.0 build C:\Users\manjunathk\frontend
> react-scripts build
Creating an optimized production build...
8.C:\Users\manjunathk\frontend>ls build/static/js
9. npm run start
STeps to create Dockerfile
1.Dockerfile in Devlopment
Dockerfile.dev
FROM node:alpine
WORKDIR '/app'
COPY package.json .
RUN npm install
COPY . .
CMD ["npm", "run", "start"]
Delete this folder - because RUN npm install will tc the dependencies
C:\Users\manjunathk\frontend>docker build -f Dockerfile.dev .
docker run -it -p 3000:3000 e774527c9671
in windows
Now we are changing local folder i.e in src App.js
From
Instead re-build again we shall make use of volumes
Docker Quickstart (recommended)
Please go to the below directory and execute
ex: docker run -it -p 3000:3000 -v /app/node_modules -v ${PWD}:/app -e CHOKIDAR_USEPOLLING=true CONTAINER_ID
docker run -it -p 3000:3000 -v /app/node_modules -v ${PWD}:/app -e CHOKIDAR_USEPOLLING=true fc44cb4b6f96
Compiled successfully!
You can now view frontend in the browser.
Local: http://localhost:3000
On Your Network: http://172.17.0.2:3000
Note that the development build is not optimized.
To create a production build, use npm run build.
So we experienced the usage of Docker Volumes to automatically get changes we made to our source to reflect inside container
now lets create a docker-composed.yml file to get rid off the long command
to override docker file selection where . is the current directory i.e context .
version: '3'
services:
web:
stdin_open: true
environment:
- CHOKIDAR_USEPOLLING=true
build:
context: .
dockerfile: Dockerfile.dev
ports:
- "3000:3000"
volumes:
- /app/node_modules
- .:/app
Windows power shell
PS C:\Users\manjunathk\frontend> docker-compose up
Building web
Step 1/6 : FROM node:alpine
---> 0d8a3475dbc3
Step 2/6 : WORKDIR '/app'
---> Using cache
---> 339b6488a555
Step 3/6 : COPY package.json .
---> c2f131044db3
Step 4/6 : RUN npm install
---> Running in 886ded0bff9f
Attaching to frontend_web_1
web_1 |
web_1 | > frontend@0.1.0 start /app
web_1 | > react-scripts start
web_1 |
web_1 | ℹ ｢wds｣: Project is running at http://172.20.0.2/
web_1 | ℹ ｢wds｣: webpack output is served from
web_1 | ℹ ｢wds｣: Content not from webpack is served from /app/public
web_1 | ℹ ｢wds｣: 404s will fallback to /
web_1 | Starting the development server...
web_1 |
web_1 | Compiled successfully!
web_1 |
web_1 | You can now view frontend in the browser.
web_1 |
web_1 | Local: http://localhost:3000
web_1 | On Your Network: http://172.20.0.2:3000
web_1 |
web_1 | Note that the development build is not optimized.
web_1 | To create a production build, use npm run build.
web_1 |
web_1 | Compiling...
-----
Run Tests inside container
To get image id
: PS C:\Users\manjunathk\frontend> docker build -f Dockerfile.dev .
PS C:\Users\manjunathk\frontend> docker build -f Dockerfile.dev .
Sending build context to Docker daemon 1.399MB
Step 1/6 : FROM node:alpine
---> 0d8a3475dbc3
Step 2/6 : WORKDIR '/app'
---> Using cache
---> 339b6488a555
Step 3/6 : COPY package.json .
---> Using cache
---> 88ec03fee2cb
Step 4/6 : RUN npm install
---> Using cache
---> 4208580ce90d
Step 5/6 : COPY . .
---> 3f61eff232f9
Step 6/6 : CMD ["npm", "run", "start"]
---> Running in ad01c2dff179
Removing intermediate container ad01c2dff179
---> 5629ad850bf0
Successfully built 5629ad850bf0
PS C:\Users\manjunathk\frontend> docker run 5629ad850bf0 npm run test
PS C:\Users\manjunathk\frontend> docker run -it 5629ad850bf0 npm run test
PASS src/App.test.js
✓ renders learn react link (199ms)
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 1.323s, estimated 5s
Ran all test suites matching /app/i.
Lets do live updating tests.
go to
From
import React from 'react';
import { render } from '@testing-library/react';
import App from './App';
test('renders learn react link', () => {
const { getByText } = render(<App />);
const linkElement = getByText(/learn react/i);
expect(linkElement).toBeInTheDocument();
});
To
import React from 'react';
import { render } from '@testing-library/react';
import App from './App';
test('renders learn react link', () => {
const { getByText } = render(<App />);
const linkElement = getByText(/learn react/i);
expect(linkElement).toBeInTheDocument();
});
test('renders learn react link', () => {
const { getByText } = render(<App />);
const linkElement = getByText(/learn react/i);
expect(linkElement).toBeInTheDocument();
});
test('renders learn react link', () => {
const { getByText } = render(<App />);
const linkElement = getByText(/learn react/i);
expect(linkElement).toBeInTheDocument();
});
docker exec -it 89d167a482f9 npm run test
now i am having one test to show live updating
Alternate way is run tests by using
Docker Compose for running test
docker-compose.yml
version: '3'
services:
web:
stdin_open: true
environment:
- CHOKIDAR_USEPOLLING=true
build:
context: .
dockerfile: Dockerfile.dev
ports:
- "3000:3000"
volumes:
- /app/node_modules
- .:/app
tests:
build:
context: .
dockerfile: Dockerfile.dev
volumes:
- /app/node_modules
- .:/app
command: ["npm", "run", "test"]
note: Follow proper indentation
Tests Not Re-running on Windows
broken on Windows need to check
No comments:
Post a Comment