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.
Related
We are trying to push a Docker image based on NodeRED to Heroku. Local build and test runs like a charm, but when we deploy it to Heroku, the Docker image build fails. Our docker file is quite simple:
FROM nodered/node-red
USER node-red
# Copy package.json to the WORKDIR so npm builds all
COPY package.json .
RUN mkdir -p node-red-static
COPY node-red-static/ node-red-static/
COPY defaults .
# NodeRED configuration
COPY .node-red/settings.js /usr/src/node-red/.node-red/settings.js
COPY .node-red/flows.json /data/flows.json
COPY package.json /usr/src/node-red/package.json
# Actual installation
RUN npm install --unsafe-perm --no-update-notifier --no-fund --only=production
(I also tried without setting the user)
The heroku.yml:
build:
docker:
web: Dockerfile
The error on git push heroku master:
npm WARN saveError EACCES: permission denied, open '/usr/src/node-red/package.json'
remote: npm WARN saveError EACCES: permission denied, open '/usr/src/node-red/package.json'
remote: npm WARN Error: EACCES: permission denied, open '/usr/src/node-red/package.json'
remote: npm WARN { [Error: EACCES: permission denied, open '/usr/src/node-red/package.json']
remote: npm WARN stack:
remote: npm WARN 'Error: EACCES: permission denied, open \'/usr/src/node-red/package.json\'',
remote: npm WARN errno: -13,
remote: npm WARN code: 'EACCES',
remote: npm WARN syscall: 'open',
remote: npm WARN path: '/usr/src/node-red/package.json' }
remote: npm WARN node-red No description
remote: npm WARN node-red No repository field.
remote: npm WARN node-red No README data
remote: npm WARN node-red No license field.
remote:
remote: audited 627 packages in 2.146s
What do I miss?
Update
The package.json
{
"name": "insect-core",
"version": "0.1.0",
"engines": {
"node": "16.1.0",
"npm": "7.9.0"
},
"main": "index.js",
"scripts": {
"serve": "node-red --settings ./.node-red/settings-development.js --userDir ./.node-red",
"start": "node-red --settings ./.node-red/settings.js --userDir /data",
"debug": "node-red --inspector --settings ./.node-red/settings.js --userDir ./.node-red",
"test": "echo \"Error: no test specified\" && exit 1"
}
"author": "techdev#protenga.com",
"license": "Apache-2.0",
"dependencies": {
"node-red": "^1.3.5",
"node-red-configurable-ping": "^1.0.1",
"node-red-contrib-auth": "^0.1.7",
"node-red-contrib-cloudantplus": "^0.3.0",
"node-red-contrib-dashboard-bar-chart-data": "^0.9.7",
"node-red-contrib-dnsquery": "^1.0.6",
"node-red-contrib-env": "^1.0.2",
"node-red-contrib-fast-csv": "^0.4.0",
"node-red-contrib-google": "^0.2.0",
"node-red-contrib-google-sheets": "^0.1.0",
"node-red-contrib-jwt": "^0.1.0",
"node-red-contrib-loop-processing": "^0.5.1",
"node-red-contrib-md5": "^1.0.4",
"node-red-contrib-moment": "^4.0.0",
"node-red-contrib-objectcleaner": "0.0.3",
"node-red-contrib-redis": "^1.3.9",
"node-red-contrib-simple-message-queue": "^0.2.7",
"node-red-contrib-simple-sendmail": "^0.1.9",
"node-red-contrib-socketio": "^1.0.7",
"node-red-contrib-uuid": "0.0.4",
"node-red-node-rbe": "^0.5.0",
"node-red-node-tail": "^0.3.1"
}
}
Just to clarify:
What fails:
heroku stack:set container
git push heroku master
which tries to build the container on heroku
What worked:
heroku container:login
heroku container:push web --app insectos
heroku container:release web --app insectos
First up, copying settings.js to /usr/app/node-red/.node-red will do nothing as it will be ignored. The usrDir for the Node-RED Docker container is /data so the settings.js needs to be copied to there.
Second, to install extra nodes add them to the package.json in /data not /usr/src/node-red. Then run npm install ... in the /data directory, this will install the nodes into /data/node_modules.
If you want to remove any of the core nodes then you need to included their filenames in the nodesExcludes key in the settings.js as follows:
...
nodesExcludes: [ '90-exec.js', '10-file.js'],
...
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 working behind a proxy and therefore I use a local npm registry in nexus.
I have an .npmrc config with the registry settings in jenkins:
/var/jenkins_home/tools/jenkins.plugins.nodejs.tools.NodeJSInstallation/nodejs-default/bin/node "/var/jenkins_home/tools/jenkins.plugins.nodejs.tools.NodeJSInstallation/nodejs-default/bin/npm" config get registry
https://nexus/repository/npm-all/
When I want to run npm install I get the following error:
/var/jenkins_home/tools/jenkins.plugins.nodejs.tools.NodeJSInstallation/nodejs-default/bin/node "/var/jenkins_home/tools/jenkins.plugins.nodejs.tools.NodeJSInstallation/nodejs-default/bin/npm" "install"
npm ERR! Error while executing:
npm ERR! /usr/bin/git ls-remote -h -t git://github.com/ariya/esprima.git
npm ERR!
npm ERR! fatal: unable to connect to github.com:
npm ERR! github.com[0: 192.30.253.113]: errno=Connection refused
npm ERR! github.com[1: 192.30.253.112]: errno=Connection refused
npm ERR!
npm ERR!
npm ERR! exited with error code: 128
npm ERR! A complete log of this run can be found in:
npm ERR! /root/.npm/_logs/2018-03-29T13_46_39_199Z-debug.log
Why it want to connect to github.com instead of nexus? It is second run of npm install, the first install downloads some packages from nexus but when it want to download ariya/esprima it stops with the same error.
My package.json: (it is an old build)
{
"name": "my-application",
"version": "1.0.0",
"devDependencies": {
"autonumeric": "^1.9.39",
"bootbox": "^4.4.0",
"bootstrap": "^3.3.5",
"bootstrap-datepicker": "^1.4.1",
"bootstrap-tour": "^0.10.1",
"chalk": "^1.0.0",
"file-sync-cmp": "^0.1.1",
"font-awesome": "^4.4.0",
"grunt": "^0.4.5",
"grunt-auto-install": "^0.2.4",
"grunt-contrib-clean": "^0.6.0",
"grunt-contrib-copy": "^0.8.0",
"grunt-replace": "^0.10.2",
"grunt-ts": "^4.2.0",
"grunt-tsd": "^0.1.0",
"i18next": "^1.9.0",
"i18next-client": "^1.9.0",
"jquery": "^2.1.4",
"jquery.cookie": "^1.4.1",
"jquery.scrollto": "^2.1.1",
"knockout": "^3.3.0",
"moment": "^2.10.3",
"qunit": "^0.7.6",
"require": "^2.4.18",
"requirejs": "^2.1.18",
"typeahead.js": "^0.11.1"
},
"dependencies": {
"grunt-cli": "^1.2.0"
}
}
I have an Ionic project already working and running. I wanted to dockerize it so I wrote and added Dockerfile and .dockerignore to it manually. My project structure looks like following:
My package.json:
{
"name": "example",
"version": "1.1.1",
"description": "example: An Ionic project",
"dependencies": {
"angular-messages": "^1.5.1",
"gulp": "^3.5.6",
"gulp-concat": "^2.2.0",
"gulp-minify-css": "^0.3.0",
"gulp-rename": "^1.2.0",
"gulp-sass": "^2.0.4"
},
"devDependencies": {
"bower": "^1.3.3",
"gulp-util": "^2.2.14",
"shelljs": "^0.3.0"
},
"cordovaPlugins": [
"cordova-plugin-device",
"cordova-plugin-console",
"cordova-plugin-whitelist",
"cordova-plugin-splashscreen",
"cordova-plugin-statusbar",
"ionic-plugin-keyboard"
],
"cordovaPlatforms": [
"android"
]
}
My bower.json:
{
"name": "HelloIonic",
"private": "true",
"dependencies": {
"angular": "~1.3.1",
"angular-route": "~1.3.1",
"angular-cookies": "~1.4.0",
"bootstrap": "~3.3.0",
"bootstrap-material-design": "~0.1.5",
"jquery": "~2.1.1",
"ngDialog": "~0.3.3",
"underscore": "~1.7.0",
"ionic": "^1.2.4",
"angular-resource": "^1.5.2",
"angular-google-chart": "^0.1.0",
"angular-ui-router-styles": "^1.1.0",
"angular-audio": "^1.7.2"
},
"resolutions": {
"angular": "~1.3.1"
}
}
My Dockerfile:
FROM node:4.0
COPY . /www/app
RUN npm install -g ionic cordova
RUN npm install -g bower
RUN npm install -g gulp
WORKDIR /www/app
RUN npm install
RUN echo '{"allow_root":true}' > /root/.bowerrc
RUN bower install
EXPOSE 8100 35729
ENTRYPOINT ["ionic"]
CMD ["serve", "--all", "--port", "8100", "--livereload-port", "35729"]
And .dockerignore:
Dockerfile
config.xml
.sass-cache
.editorconfig
.io-config.json
.dockerignore
hooks/
platforms/
node_modules/
resources/
plugins/
www/css/*.css
*.zip
*.tar*
It is built successfully (I guess, as there are no errors) but when I execute docker build -t ionic-preview . but when I run it with docker run -p 8100:8100 -it ionic-preview - > it runs but no static files are loaded.
Is there anything wrong with my dockerfile? Or what is the issue?
UPDATE:
When normally I run my application, I see like following:
With docker I see this:
You did not share your data yet as in: -v /src/webapp:/webapp
So you could do:
docker run -p 8100:8100 -v /src/webapp:/webapp -it ionic-preview
Change the maps to your maps.
Source: https://docs.docker.com/engine/tutorials/dockervolumes/#locating-a-volume