I'am moving my react apps into docker, I am working in legacy project and we have multiple react apps. We are attaching script with react apps in script tags on every page whose need to use this files. For docker we want to use Express to serve our files. Is there any way to run multiple watch commands ?
here is my package.json file:
{
"name": "docker apps",
"version": "3.0.0",
"description": "apps",
"license": "ISC",
"author": "devs",
"main": "main.js",
"engines": {
"node": ">=14.7.0",
"npm": ">=6.14.13"
},
"scripts": {
"requirements-check": "node checkNodeVersion.js",
"react": "webpack --env.mode production --env.app react",
"react-watch": "webpack --env.mode development --env.app react --watch",
"serve": "nodemon server.js",
"serve:prod": "node server.js --port=80",
"build": "npm run react",
"start": "npm run react-watch",
"test": "jest",
"lint": "eslint .",
"dev-start": "concurrently \"npm run react-watch\" \"npm run serve\"",
"dev-build": "concurrently \"npm run build\" \"npm run serve:prod\"",
"lint-payment": "eslint payment/",
"lint-formLibrary": "eslint formLibrary/",
"lint-fileManager": "eslint fileManager/",
"lint-blockLibrary": "eslint LPBlockLibrary/",
"lint-contracts": "eslint contracts/",
"lint-payment:fix": "eslint --fix payment/",
"lint-formLibrary:fix": "eslint --fix formLibrary/",
"lint-fileManager:fix": "eslint --fix fileManager/",
"lint-blockLibrary:fix": "eslint --fix LPBlockLibrary/",
"lint-contracts:fix": "eslint --fix contracts/",
"lint:fix": "eslint --fix ."
},
"dependencies": {
"@mikecousins/react-pdf": "^5.5.1",
"@tkaramanski/fmcomponents": "^1.6.2",
"@types/testing-library__jest-dom": "^5.9.5",
"axios": "^0.21.1",
"bootstrap": "^4.1.3",
"classnames": "^2.2.6",
"cors": "^2.8.5",
"express": "^4.17.1",
"gulp-cli": "^2.2.0",
"gulp-install": "^1.1.0",
"handlebars-loader": "^1.7.1",
"jsdom": "^16.6.0",
"lodash": "^4.17.11",
"postcss": "^8.1.4",
"postcss-js": "^3.0.1",
"prop-types": "^15.7.2",
"react": "^16.9.0",
"react-bs-notifier": "^5.0.0",
"react-datepicker": "^4.1.1",
"react-dnd": "^7.3.2",
"react-dnd-html5-backend": "^7.2.0",
"react-dom": "^16.9.0",
"react-dropzone": "^7.0.1",
"react-hook-form": "^4.9.6",
"react-hot-loader": "^4.12.18",
"react-infinite-scroll-component": "^4.2.0",
"react-jss": "^8.6.1",
"react-popper-tooltip": "^4.3.1",
"react-redux": "^7.1.3",
"react-router-dom": "^5.2.0",
"react-scrollbar": "^0.5.4",
"reactstrap": "^6.5.0",
"redux": "^4.0.4",
"redux-devtools-extension": "^2.13.8",
"redux-persist": "^6.0.0",
"redux-thunk": "^2.3.0",
"reselect": "^4.0.0",
"resolve-url-loader": "^3.1.2",
"semver": "^5.7.1",
"styled-components": "^5.3.0",
"typesafe-actions": "^5.1.0"
},
"devDependencies": {
"@babel/core": "^7.13.14",
"@babel/plugin-proposal-class-properties": "^7.13.0",
"@babel/plugin-proposal-optional-chaining": "^7.13.12",
"@babel/plugin-transform-runtime": "^7.13.10",
"@babel/preset-env": "^7.13.12",
"@babel/preset-react": "^7.13.13",
"@babel/preset-stage-0": "^7.8.3",
"@babel/preset-typescript": "^7.13.0",
"@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^11.2.5",
"@tkaramanski/fmcomponents": "^1.5.1",
"@types/jest": "^26.0.22",
"@types/react": "^17.0.3",
"@types/react-datepicker": "^4.1.4",
"@types/react-dom": "^17.0.2",
"@types/react-lazyload": "^3.1.0",
"@types/react-redux": "^7.1.16",
"@types/react-router-dom": "^5.1.8",
"@types/styled-components": "^5.1.7",
"@typescript-eslint/eslint-plugin": "^4.17.0",
"autoprefixer": "^9.8.0",
"babel-eslint": "^10.1.0",
"babel-jest": "^26.6.3",
"babel-loader": "^8.2.2",
"babel-plugin-macros": "^3.0.1",
"babel-plugin-styled-components": "^1.12.0",
"babel-polyfill": "^6.26.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"clean-webpack-plugin": "^3.0.0",
"concurrently": "^5.2.0",
"copy-webpack-plugin": "^6.0.1",
"css-loader": "^3.6.0",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.4",
"eslint": "^7.10.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-config-airbnb-typescript": "^12.3.1",
"eslint-plugin-import": "^2.23.4",
"eslint-plugin-jsx-a11y": "^6.3.1",
"eslint-plugin-react": "^7.21.3",
"eslint-plugin-react-hooks": "^4.2.0",
"extract-loader": "^5.1.0",
"file-loader": "^6.0.0",
"gulp": "^4.0.2",
"gulp-babel": "^8.0.0",
"gulp-cli": "^2.2.0",
"gulp-concat": "^2.6.1",
"gulp-sourcemaps": "^2.6.5",
"gulp-uglify": "^3.0.2",
"husky": "^4.3.0",
"identity-obj-proxy": "^3.0.0",
"jest": "^26.6.3",
"mini-css-extract-plugin": "^0.9.0",
"moment": "^2.26.0",
"postcss-loader": "^3.0.0",
"prettier": "^2.4.1",
"pump": "^3.0.0",
"react-copy-to-clipboard": "^5.0.2",
"react-test-renderer": "^16.13.1",
"react-tippy": "^1.4.0",
"redux-mock-store": "^1.5.4",
"renamer": "^1.1.4",
"sass": "^1.35.1",
"sass-loader": "^8.0.2",
"style-loader": "^1.2.1",
"ts-jest": "^26.5.4",
"ts-loader": "^8.1.0",
"typescript": "4.2.3",
"url-loader": "^4.1.0",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.11",
"webpack-fix-style-only-entries": "^0.5.0",
"webpack-merge": "^4.2.2",
"wildcards-entry-webpack-plugin": "^2.1.0"
},
"husky": {
"hooks": {
"pre-commit": "npm run requirements-check",
"pre-push": "npm run lint"
}
},
"jest": {
"setupTestFrameworkScriptFile": "./setupTests.js",
"setupFiles": [
"./payment/src/__mocks__/data.js"
],
"collectCoverageFrom": [
"payment/src/__tests__/*.{js,jsx}",
"LPBlockLibrary/src/__testes__/*{ts,tsx}"
],
"moduleNameMapper": {
"\\.(png|jpg|gif|ttf|eot|svg)$": "<rootDir>/config/jest/fileMock.js"
},
"transform": {
"\\.tsx?$": "ts-jest",
"\\.jsx?$": "babel-jest"
}
}
}
here is my docker:
FROM node:14.17.0
WORKDIR /frontend-apps
ENV PATH /frontend-apps/node_modules/.bin:$PATH
COPY package.json \
package-lock.json \
.npmrc ./
RUN npm config set strict-ssl false
RUN npm install
RUN npm config set strict-ssl true
COPY . ./
EXPOSE 80
CMD [ "npm", "run", "dev-start"]
here is my docker-compose file.
version: '3.7'
services:
frontend-docker-app:
container_name: docker-front-apps
build:
context: .
dockerfile: Dockerfile.test
volumes:
- '.:/frontendApps'
- '/frontendApps/node_modules'
ports:
- 3000:3000
in docker file I try to run multiple commands with concurrently
"react-watch": "webpack --env.mode development --env.app react --watch",
"serve": "nodemon server.js",
"dev-start": "concurrently \"npm run react-watch\" \"npm run serve\"",
CodePudding user response：
I solved my problem, it turned out that I accidentally remove my nodemon package from package.json, and I had bad docker compose config. I changed it to this version:
version: '3.7'
services:
frontend-docker-app:
container_name: docker-front-apps
working_dir: /var/www/app
build:
context: .
dockerfile: Dockerfile.test
volumes:
- .:/var/www/app
- '/frontendApps/node_modules'
tty: true
ports:
- 3000:3000
environment:
- CHOKIDAR_USEPOLLING=true
and changed cmd command from Docker file to this:
EXPOSE 80
CMD [ "npm", "run", "dev-build"]
and everything works fine.