I would like my start script to also include a grep command. In particular, I would like the npm start command to run npm start |& grep -v error
My package.jcon:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
You can use:
npm-run-script
Further details:
https://docs.npmjs.com/cli/v7/commands/npm-run-script
Related
I have a react app which starts outside of Docker but not inside.
I'm running a backend Node app which works in Docker, this failing front-end is the issue. From previous threads and questions i'm certain it is not the 'globby' module at fault, it's likely to be my config or installation.
The error:
react-scripts start
/usr/src/app/node_modules/react-dev-utils/node_modules/globby/index.js:49
...taskOptions
^^^
SyntaxError: Unexpected token ...
at createScript (vm.js:56:10)
at Object.runInThisContext (vm.js:97:10)
at Module._compile (module.js:542:28)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at Object.<anonymous> (/usr/src/app/node_modules/react-dev-utils/globby.js:10:14)
npm info lifecycle react-frontend#0.1.0~start: Failed to exec start script
npm ERR! Linux 4.19.128-microsoft-standard
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "start"
npm ERR! node v6.11.1
npm ERR! npm v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! react-frontend#0.1.0 start: `react-scripts start`
npm ERR! Exit status 1
My Dockerfile
FROM node:6.11.1
RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app
COPY package.json ./
COPY package-lock.json ./
RUN npm install
COPY . .
EXPOSE 3000
CMD ["npm", "start"]
My package.json
{
"name": "react-frontend",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"globby": "^11.0.1",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "^4.0.1",
"web-vitals": "^0.2.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
What i've tried:
deleting node_modules and redoing npm install
Docker rebuilds
After #vpalmerini pointed out the Node version, I updated to 14.15.4-alpine and ran
docker-compose build
docker-compose up
So now my Dockerfile contains
FROM node:14.15.4-alpine
The app is now running as expected.
I dockerirized a vue.js app init by webpack, and run it with docker-compose. It runs with no problem in terminal, but when I go to the browser: "impossibile to reach ip".
I use docker-toolbox (thus, a VM).
First of all I make a new folder and execute the follow lines in order to init a new vue project using webpack:
npm install -g vue-cli
vue init webpack vueapp2
Now, if I run my applicatoin using npm run dev it works fine. In order to dockerizing it, I make a Dockerfile:
FROM node:alpine
RUN npm install -g vue-cli
WORKDIR '/app'
COPY ./package*.json ./
RUN npm install
COPY ./ ./
CMD [ "npm", "run", "dev"]
and a docker-compose.yml:
version: "3"
services:
node-app:
build: .
ports:
- "8080:8000"
In order to works with Docker using docker Toolbox, I have to map local-machine port to container-port (8080:8000). That's should works fine because I do similar things with a vue.js app serve by live-server succesfully (https://github.com/Aragorn1992gb/vue-liveserver-dockerized). But that's that use webpack no: it says "impossible to reach ip" when I digit container ip: http://192.168.99.100:8080/.
The line CMD [ "npm", "run", "dev"] on Dockerfile should execute command "npm run [script 'dev' staying on package.json]". That's my package.json:
{
"name": "vue-app2",
"version": "1.0.0",
"description": "A Vue.js project",
"author": "Aragorn1992gb <giacomobrunetta#gmail.com>",
"private": true,
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"lint": "eslint --ext .js,.vue src",
"build": "node build/build.js"
},
"dependencies": {
"vue": "^2.5.2",
"vue-router": "^3.0.1"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
"babel-eslint": "^8.2.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-loader": "^7.1.1",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"chalk": "^2.0.1",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.0",
"eslint": "^4.15.0",
"eslint-config-standard": "^10.2.1",
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^1.7.1",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-node": "^5.2.0",
"eslint-plugin-promise": "^3.4.0",
"eslint-plugin-standard": "^3.0.1",
"eslint-plugin-vue": "^4.0.0",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.4",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^2.30.1",
"node-notifier": "^5.1.2",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"portfinder": "^1.0.13",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8",
"postcss-url": "^7.2.1",
"rimraf": "^2.6.0",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "^0.5.8",
"vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2",
"webpack": "^3.6.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-server": "^2.9.1",
"webpack-merge": "^4.1.0"
},
"engines": {
"node": ">= 6.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
I found different solutions but without any success. One of the advise is it to add --host 0.0.0.0 to dev like this: "dev": "webpack-dev-server --host 0.0.0.0 --inline --progress --config build/webpack.dev.conf.js",, because it has to reach my docker ip, but stil not working. Actually must be a problem with that "dev" script, there is some problem to run it using dockerfile. This is my project on repo: https://github.com/Aragorn1992gb/vue-webapp-dockerizing
I just change contaner port from 8000 to 8080:
version: "3"
services:
node-app:
build: .
ports:
- "8080:8080"
Because on config/index.js the specified port is 8080. I can also change that port (i.e. 8000) and change it also in docker.compose.yml (i.e. 8080:8000).
Putting also --host 0.0.0.0 to dev, like that:
"dev": "webpack-dev-server --host 0.0.0.0 --inline --progress --config build/webpack.dev.conf.js",
Because webpack listen only on localhost container, I must allow requests from other interfaces (container ip)
I'm creating a rails application from scratch using the following blog which needs me to run rails s and then yarn start in the /client folder of the application (where all the JS and React components will live).
The /client/package.json file has some scripts configured to run a server that detects changes in my react components and reloads the components automatically:
client/package.json:
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-scripts": "3.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"proxy": "http://localhost:3001"
}
I use a program called hivemind which is a Procfile manager and I would like both the rails server process and the yarn process to run together in the same terminal.
I'd like to do something like this in my Profile:
server: bin/rails server
react: yarn start
The problem is that Profile lives in the root of my application and I have to change directory into client and then run yarn start.
TL;DR:
Is there an option with yarn run that you can tell it to run from another folder or read a package.json file in another folder and have it run the script in that file?
You can write cmd arguments in Procfile
try changing react command to
react: cd client && yarn start
It will change the current directory and runs your script
When you run yarn [command] yarn looks for a file locally called package.json. You can add yarn commands inside the "scripts" section of this file. In my own rails app root directory I added a "start" command that did what Sumanth's answer does but now I can just have
react: yarn start
in my Procfile.
Below is the edited version of my package.json file in my app's root path:
{
"name": "create-repack-app",
"version": "1.0.0",
"scripts": {
"build": "cd client && npm install --only=dev && npm install && npm run build && cd ..",
"deploy": "cp -a client/build/. public/",
"heroku-postbuild": "npm run build && npm run deploy && echo 'Client Built'",
"start": "cd client && yarn start"
},
"keywords": [],
"author": "",
"license": "ISC"
}
I tried to use this tutorial, to install webpack to asp.net core project
https://codeburst.io/how-to-use-webpack-in-asp-net-core-projects-a-basic-react-template-sample-25a3681a5fc2
Here is command in my package.json
{
"name": "streamline",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"wbp": "webpack wwwroot/source/app.js wwwroot/dist/bundle.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.16.0",
"webpack-command": "^0.4.1"
}
}
But when I run it with npm run wbp I get this
internal/modules/cjs/loader.js:596
throw err;
^
Error: Cannot find module 'import-local'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:594:15)
at Function.Module._load (internal/modules/cjs/loader.js:520:25)
at Module.require (internal/modules/cjs/loader.js:650:17)
at require (internal/modules/cjs/helpers.js:20:18)
at Object. (/Users/nemesises/Documents/GitHub/streamline/Streamline/node_modules/webpack-command/lib/cli.js:11:21)
at Module._compile (internal/modules/cjs/loader.js:702:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:713:10)
at Module.load (internal/modules/cjs/loader.js:612:32)
at tryModuleLoad (internal/modules/cjs/loader.js:551:12)
at Function.Module._load (internal/modules/cjs/loader.js:543:3) npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! streamline#1.0.0
wbp: webpack wwwroot/source/app.js wwwroot/dist/bundle.js npm ERR!
Exit status 1 npm ERR! npm ERR! Failed at the streamline#1.0.0 wbp
script. npm ERR! This is probably not a problem with npm. There is
likely additional logging output above.
npm ERR! A complete log of this run can be found in: npm ERR!
/Users/nemesises/.npm/_logs/2018-07-13T14_21_24_555Z-debug.log
How I can fix it?
UPDATE
After I make this
"wbp": "webpack --entry wwwroot/source/app.js --output wwwroot/dist/bundle.js"
Reinstall npm packages and try to run command
I got this error
ERROR in Entry module not found: Error: Can't resolve 'wwwroot/source/app.js' in
'/Users/nemesises/Documents/GitHub/streamline/StreamLine' npm ERR!
code ELIFECYCLE npm ERR! errno 2 npm ERR! streamline#1.0.0 wbp:
webpack --entry wwwroot/source/app.js --output wwwroot/dist/bundle.js npm ERR! Exit status 2 npm ERR! npm ERR!
Failed at the streamline#1.0.0 wbp script. npm ERR! This is probably
not a problem with npm. There is likely additional logging output
above.
npm ERR! A complete log of this run can be found in: npm ERR!
/Users/nemesises/.npm/_logs/2018-07-14T19_45_54_642Z-debug.log
But I got this file in my folder!
If I use my old command and create dist/bundle.js it works, but bundle.js is empty
webpack --entry wwwroot/source/app.js --output wwwroot/dist/bundle.js
--entry says what is the entry
--output what to output to
It seems like npm has failed to install the dependencies properly. Try to reinstall the local packages by executing the following commands in your package.json directory:
rm -rf node_modules
npm install
If everything goes fine with npm install you should be able to run npm run wbp successfully.
this worked for me: webpack --entry ./wwwroot/source/app.js --output wwwroot/dist/bundle.js, note ./ in ./wwwroot.
I'm currently digging my way into this ASP.NET CORE + Webpack + Script combo. Luckily, I've found my solution, hope this can fit your case. Take a look at my package.json
{
"name": "blindforced",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"wbp": "webpack --mode production wwwroot/source/app.js --output wwwroot/dist/bundle.js",
"dev": "webpack --mode development wwwroot/assets/app.js --output wwwroot/dist/bundle.js",
"build": "webpack --mode production wwwroot/assets/app.js --output wwwroot/dist/bundle.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.29.6",
"webpack-cli": "^3.2.3"
}
}
I used the following command to run the container :
docker run -p 3333:3333 -d maill/node-web-app
Here is the result of docker ps :
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
f26270107bfa maill/node-web-app "npm run dev" 49 seconds ago Up 46 seconds 0.0.0.0:3000->3000/tcp musing_fermi
However when I try to access webserver on host using localhost:3333 it doesn't work.
I am using windows 10 pro.
docker logs musing_fermi shows:
DONE Compiled successfully in 3541ms16:04:50 | OPEN localhost:3000
Dockerfile :
FROM node:8
WORKDIR /usr/src/app
COPY package*.json ./
RUN npm i
COPY . .
EXPOSE 3333
CMD [ "npm", "run", "dev" ]
package.json :
{
"name": "webapp-pst-horizon",
"version": "1.0.0",
"description": "Webapp pour les formations enedis",
"author": "Léo Coletta",
"private": true,
"scripts": {
"dev": "cross-env HOST=0.0.0.0 PORT=3333 nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate",
"lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
"precommit": "npm run lint"
},
"dependencies": {
"#nuxtjs/axios": "^5.3.1",
"#nuxtjs/proxy": "^1.2.4",
"axios": "^0.18.0",
"babel-polyfill": "^6.26.0",
"cookie": "^0.3.1",
"js-cookie": "^2.2.0",
"nuxt": "^1.4.1",
"vuetify": "^1.0.19",
"webpack": "^3.1.0"
},
"devDependencies": {
"babel-eslint": "^8.2.3",
"cross-env": "^5.2.0",
"eslint": "^4.9.0",
"eslint-config-airbnb-base": "^12.1.0",
"eslint-loader": "^2.0.0",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-vue": "^4.5.0",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.2"
}
}
Based on what you have in the question so far, and that you have OPEN localhost:3000 coming from your container logs, I'd guess your application is listening on localhost. This is != localhost outside the container. You need to configure your application to listen on 0.0.0.0 inside the container.
To go along with johnharris85's answer, add the following to your package.json:
From nuxt documentation on "How to edit HOST and PORT?"
You can configure the PORT with 3 different ways:
...
...
Via a nuxt config in the package.json:
Inside your package.json:
"config": {
"nuxt": {
"host": "0.0.0.0",
"port": "3333"
}
},
"scripts": {
"dev": "nuxt"
}