i'm trying to start my local development environment with webpack
and faced a problem with this scripts part
"scripts": {
"start": "npm run build",
"build": "webpack -d && copy /src/index.html /dist/index.html && webpack-dev-server --content-base src/ --inline",
"build:prod": "webpack -p && copy /src/index.html dist/index.html"
},
when i'm doing npm start I see 2 errors like this
and one more with just npm run build failed
what can be the reason for these errors ?
index.html exist at provided address
i though mb i missed something on my dependencies, but everything seems to on place
"dependencies": {
"body-parser": "^1.18.2",
"express": "^4.16.1",
"oracledb": "^1.13.1",
"react": "^16.0.0",
"react-dom": "^16.0.0",
"socket.io": "^2.0.3"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.9.1"
}
The relevant error is:
The syntax of the command is incorrect.
As you're chaining multiple commands, you should generally isolate them and test them individually to see which one fails, but because it's right after the webpack build output, it must be the second one.
copy /src/index.html /dist/index.html
copy is a Windows command and on Windows the command-line options start with a / instead of a - like on Unix. You're trying to use Unix style paths, which end up being recognised as options. Paths on Windows use \ (backslash) instead of / (forward slash). Even if it were Unix, you don't want to start the path with a /, because that would look in the root of your file system, not the current directory, and it would fail because it can't find the file, unless you coincidentally have such a file in the root of your file system.
The command should be:
copy src\index.html dist\index.html
This won't work on other operating systems and it's an additional step in the build system. As an alternative you can integrate it into webpack with the copy-webpack-plugin, or in your specific case you can let webpack generate the index.html for you with the html-webpack-plugin. An advantage of the html-webpack-plugin is that it automatically inserts <script> tags with the produced bundles (especially useful if you use hashes in your bundle names). This means that webpack would output everything you need for you application and you could just deploy your dist directory. As a bonus, it plays nicely with webpack-dev-server, so everything can be kept in memory and you don't need to generate the file beforehand to make it work.
Related
This may be a dumb question, but I'm stumped.
I have 3 environments: Dev(local), Staging(remote) and Production(remote).
I'm writing a relatively simply Express App.
In my package.json file, I have specified start scripts for each of the 3 environments. Here's the full file:
{
"name": "test-app",
"version": "0.0.1",
"description": "test utility app",
"private": true,
"scripts": {
"start": "cross-env NODE_ENV=development nodemon ./bin/www",
"start:staging": "cross-env NODE_ENV=staging nodemon ./bin/www",
"start:production": "cross-env NODE_ENV=production && nodemon ./bin/www"
},
"devDependencies": {
"cross-env": "^7.0.3"
},
"dependencies": {
"axios": "^0.24.0",
"config": "^3.3.6",
"cookie-parser": "~1.4.4",
"cors": "^2.8.5",
"debug": "~2.6.9",
"dotenv": "^8.2.0",
"express": "^4.17.1",
"http-errors": "~1.6.3",
"jade": "~1.11.0",
"morgan": "~1.9.1",
"nodemon": "^2.0.15"
}
}
Now, my question is, how do I specify which start script should be used in each remote server environment?
I understand how to start the development environment, so ignore that and focus on Staging and Production.
For example, I want the start:staging to be executed in Staging and the start:production to be executed in Production.
I may be thinking about this incorrectly, so please let me know if I should be approaching the Staging and Production environments differently.
It just seems to me the Staging and Production environments would have no idea which environment they should operate as without me assigning them as one or the other somehow.
Maybe this is done as part of the workflow? I'm using github actions for build/deployment, fyi.
Update
So, I did a little more digging. In the workflow file, there's a build step:
name: npm install, build, and test
run: |
npm install
npm run build --if-present
npm run test --if-present
Would I simply add something like: npm run start:staging or npm run start:production as appropriate?
You basically want to run the scripts and don't know the commands to run, right?
So
npm run start:staging
On gh-actions
- name: run app on staging
run: npm run start:staging
I have this react app I want to dockerize. But the problem is, even though I tried, it doesn't work. But it works pretty well locally
This is how the current directories look like:
docker-compose.yaml
frontend_v2
- node_modules
- public
- src
- <react jsx files>
- Dockerfile
- package.json
- package-lock.json
So this is the content of the above Dockerfile:
# Use an official node runtime as a parent image
FROM node:latest
WORKDIR /app
# Install dependencies
COPY package.json /app
RUN npm install
# Add rest of the client code
COPY . /app
EXPOSE 3000
CMD ["npm", "start"]
And I am using a docker-compose.yml to spin up the container, and this is how it looks like:
This is in the root directory.
version: "3.2"
services:
frontend:
build: ./frontend_v2
environment:
CHOKIDAR_USEPOLLING: "true"
volumes:
# - /app/node_modules
- ./frontend_v2/src:/app/src
ports:
- 80:3000
Problem I am facing is, even though the container is running I get the below error (which I don't get I run locally)
When i try
docker logs <exited-container-id> i get this below output
> cyberhr-rv18.0.4#0.1.0 start /app
> react-scripts start
There might be a problem with the project dependency tree.
It is likely not a bug in Create React App, but something you need to fix locally.
The react-scripts package provided by Create React App requires a dependency:
"webpack-dev-server": "3.11.0"
Don't try to install it manually: your package manager does it automatically.
However, a different version of webpack-dev-server was detected higher up in the tree:
/app/node_modules/webpack-dev-server (version: 3.10.3)
Manually installing incompatible versions is known to cause hard-to-debug issues.
If you would prefer to ignore this check, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That will permanently disable this message but you might encounter other issues.
To fix the dependency tree, try following the steps below in the exact order:
1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
2. Delete node_modules in your project folder.
3. Remove "webpack-dev-server" from dependencies and/or devDependencies in the package.json file in your project folder.
4. Run npm install or yarn, depending on the package manager you use.
In most cases, this should be enough to fix the problem.
If this has not helped, there are a few other things you can try:
5. If you used npm, install yarn (http://yarnpkg.com/) and repeat the above steps with it instead.
This may help because npm has known issues with package hoisting which may get resolved in future versions.
6. Check if /app/node_modules/webpack-dev-server is outside your project directory.
For example, you might have accidentally installed something in your home folder.
7. Try running npm ls webpack-dev-server in your project folder.
This will tell you which other package (apart from the expected react-scripts) installed webpack-dev-server.
If nothing else helps, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That would permanently disable this preflight check in case you want to proceed anyway.
P.S. We know this message is long but please read the steps above :-) We hope you find them helpful!
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! cyberhr-rv18.0.4#0.1.0 start: `react-scripts start`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the cyberhr-rv18.0.4#0.1.0 start 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! /root/.npm/_logs/2020-09-18T08_32_25_268Z-debug.log
[Update]
Here's my package.json file:
{
"name": "cyberhr-rv18.0.4",
"version": "0.1.0",
"private": true,
"homepage": "",
"dependencies": {
"3d-force-graph": "^1.60.11",
"#blueprintjs/core": "^3.26.1",
"#coreui/coreui": "^2.1.12",
"#coreui/coreui-plugin-chartjs-custom-tooltips": "^1.3.1",
"#coreui/icons": "0.3.0",
"#coreui/react": "^2.5.1",
"#emotion/core": "^10.0.35",
"#material-ui/core": "^4.11.0",
"#tensorflow/tfjs": "^1.7.2",
"#tensorflow/tfjs-tsne": "^0.2.0",
"axios": "^0.19.2",
"bootstrap": "^4.3.1",
"chart.js": "^2.8.0",
"classnames": "^2.2.6",
"core-js": "^3.1.4",
"d3-dsv": "^1.2.0",
"enzyme": "^3.10.0",
"enzyme-adapter-react-16": "^1.14.0",
"evergreen-ui": "^4.27.4",
"flag-icon-css": "^3.3.0",
"font-awesome": "^4.7.0",
"google-maps-react": "^2.0.2",
"jquery": "^3.4.0",
"material-dashboard-react": "^1.8.0",
"mdbreact": "4.25.3",
"node-sass": "^4.12.0",
"prop-types": "^15.7.2",
"react": "^16.8.4",
"react-animations": "^1.0.0",
"react-app-polyfill": "^1.0.1",
"react-bootstrap": "^1.0.0-beta.5",
"react-chartjs-2": "^2.7.6",
"react-chat-popup": "^1.1.2",
"react-dom": "^16.8.4",
"react-dropzone": "^11.0.1",
"react-force-graph": "^1.32.1",
"react-full-screen": "^0.2.4",
"react-loadable": "^5.5.0",
"react-nvd3": "^0.5.7",
"react-perfect-scrollbar": "^1.4.4",
"react-pure-grid": "^2.1.1",
"react-redux": "^6.0.1",
"react-reveal": "^1.2.2",
"react-router-config": "^5.0.1",
"react-router-dom": "^4.3.1",
"react-scripts": "^3.4.3",
"react-spinners": "^0.9.0",
"react-step-wizard": "^5.3.2",
"react-table": "^7.2.1",
"react-test-renderer": "^16.8.6",
"react-toastify": "^6.0.8",
"react-window-size": "^1.2.2",
"reactstrap": "^8.0.0",
"redux": "^4.0.1",
"simple-line-icons": "^2.4.1",
"tabler-react": "^2.0.0-alpha.1",
"three": "latest",
"tsne-js": "^1.0.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"devDependencies": {
"react-to-print": "^2.1.1"
}
}
Can someone please help me?
Firstly, make sure you are copying the same package-lock.json file that you use to install deps locally, to make sure you have the same dependency tree in your container as you do locally.
COPY package.json package-lock.json /app/
Then, make sure that you are matching the same node/npm version as you run locally (replace 12 with the major version you are running, be it 10, 12, 14 or whatever):
FROM node:12
Each node version is bundled with a specific npm version (latest 12 version comes with npm 6.14.6), you can find the bundled NPM version int he changelogs, https://github.com/nodejs/node/tree/master/doc/changelogs
Additionally, instead of running npm install, you might wanna run npm ci in the container. The latter skips any checks for discrepancy between the lock file and your package.json file and just installs the locked dependency tree, which is not only faster, but will also match your local dep tree exactly.
EDIT:
In addition, this line:
COPY . /app
Would also overwrite node_modules unless you have ignored it via .dockerignore or similar.
Easiest would probably be to add a .dockerignore file to the same folder as your Dockerfile and add lines stating:
.git
node_modules
The complete Dockerfile would look like this:
# Use whatever version you are running locally (see node -v)
FROM node:12
WORKDIR /app
# Install dependencies (you are already in /app)
COPY package.json package-lock.json ./
RUN npm ci
# Add rest of the client code
# .dockerignore needs to skip node_modules
COPY . /app
EXPOSE 3000
CMD ["npm", "start"]
So here
# Install dependencies
COPY package.json /app
RUN npm install
at the end of these steps you will have a NEW package-lock.json file and node_modules folder in the container build environment.
But then the posted Dockerfile has:
# Add rest of the client code
COPY . /app
and quite possibly -- WHAMMO! -- they're gone. Whatever OLD package-lock.json file or node_modules directory was in the . folder on the build machine will overwrite the ./app folder in the container -- including those NEW files just created in the container. Or perhaps end up with some unholy mix of both in the node_modules directory.
I take a different approach. I get everything working as I want it, and use this Dockerfile that lives in the directory with the source code:
FROM node:alpine # as of 2020-09 this runs node 14; also uses sh not bash
COPY . /app
WORKDIR /app
USER node
EXPOSE 8888 # change this to the port(s) where your app listens
CMD [ "node", "./index.js" ]
This is copied from a production system that relies on Google Cloud Build to build the container for launch on GCP. Therefore, the environment on the execution system is going to be Linux, the same as on my developer system.
If you are going cross-platform development, this obviously won't work sometimes.
I am trying to deploy my node.js app on Azure webapp via bitbucket.
when I checked the the wwwroot folder on kudu console, I could not find any node_modules folder and hence the app failed to start
I have tried both npm install and npm install --production in kudu console (inside the wwwroot folder), and I could see the node_modules and files being install via filezilla.... however when I try to start the app again, the node_modules just disappears, can't see it neither in kudu console nor in filezilla.
the package.json file in the project folder:
{
"name": "fo",
"version": "1.0.0",
"description": "xx xx xx",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "xx xx",
"license": "MIT",
"dependencies": {
"angular-map-it": "0.0.20",
"angular-maps": "^6.0.1",
"angular-waypoints": "^2.0.0",
"axios": "^0.19.0",
"bcrypt": "^3.0.6",
"bluebird": "^3.5.5",
"body-parser": "^1.19.0",
"connect-mongodb-session": "^2.2.0",
"convert-json": "^0.5.0",
"csvtojson": "^2.0.10",
"dotenv": "^8.0.0",
"express": "^4.17.1",
"express-session": "^1.16.2",
"fixed-width-string": "^1.0.0",
"guid": "0.0.12",
"json2csv": "^4.5.2",
"jsontoxml": "^1.0.1",
"moment": "^2.24.0",
"moment-business-days": "^1.1.3",
"money": "^0.2.0",
"mongoose": "^5.6.4",
"multer": "^1.4.1",
"ng-storage": "^0.3.2",
"node-crisp-api": "^1.8.3",
"nodemailer": "^6.3.0",
"objects-to-csv": "^1.0.1",
"open-exchange-rates": "^0.3.0",
"sanitize": "^2.1.0",
"svg-assets-cache": "^1.1.3"
}
}
I don't understand, how people make node.js app work on azure? why node_modules is disappearing? and why azure is not automatically installing them based on my package.json??
Azure App Service understands package.json and npm-shrinkwrap.json files and can install modules based on entries in these files.
Azure App Service does not support all native modules and might fail when compiling modules with specific prerequisites. While some popular modules like MongoDB have optional native dependencies and work fine without them, the following workarounds proved successful with almost all native modules available today:
Navigate to Kudu - https://yoursite.scm.azurewebsites.net/
Locate the wwwroot folder and run the install command command.
cd site
cd wwwroot
npm install
Run npm install on a Windows machine that has all the native module's prerequisites installed. Then, deploy the created node_modules folder as part of the application to Azure App Service. Before compiling, check that your local Node.js installation has matching architecture and the version is as close as possible to the one used in Azure (the current values can be checked on runtime from properties process.arch and process.version). So, ensure that
Azure App Service can be configured to execute custom bash or shell scripts during deployment, giving you the opportunity to execute custom commands and precisely configure the way npm install is being run. For a video showing how to configure that environment, see Custom Website Deployment Scripts with Kudu. Kindly ensure that all the configuration is appropriate.
If the issue still persist, kindly let us know what specific error message you receive ( app failed to start) for further investigation and also take a look at this ‘Best practices and troubleshooting guide for node applications on Azure App Service Windows’ for more details on the topic.
My app needs the package: man, but by default it's not installed on the heroku/nodejs buildpack.
So according to the documentation, heroku/heroku-buildpack-apt is the tool for the job when your app needs additional apt dependencies.
I assigned the new buildpack and added a Aptfile to the root of the project with one line:
man
Here is my full package.json
{
"name": "unix-translator",
"version": "0.0.0",
"private": true,
"scripts": {
"start": "node ./bin/www",
"test": "mocha --exit"
},
"dependencies": {
"body-parser": "~1.18.2",
"cookie-parser": "~1.4.3",
"debug": "~2.6.9",
"express": "~4.15.5",
"jade": "~1.11.0",
"morgan": "~1.9.0",
"node-dev": "^3.1.3",
"serve-favicon": "~2.4.5",
"dateTools": "file:lib/unix-command"
},
"devDependencies": {
"chai": "^4.1.2",
"mocha": "^4.1.0"
}
}
Here's my Procfile:
web: node ./bin/www
This gets the dependency successfully installed because I see it when I run which man now. But it doesn't work.
I get this error when I try to use the man program:
~ $ man cat
man: error while loading shared libraries: libmandb-2.7.5.so: cannot open shared object file: No such file or directory
I did found this blog post and this other blog post which both suggest the problem related to permissions and the location of files... I SSHed into my dyno and ran: /sbin/ldconfig -v and it eventually threw this error:
/sbin/ldconfig.real: Can't create temporary cache file /etc/ld.so.cache~: Read-only file system
^ The command needs to be run with sudo and that's not available inside a dyno. :-(
So I'm stuck again.
Not 100% sure, but this might be worth a shot:
Replace the "prestart" in your package.json with heroku-prebuild (or heroku-postbuild), as follows:
"scripts": {
"start": "node ./bin/www",
"test": "mocha --exit",
"heroku-prebuild": "apt-get update && apt-get install man"
},
You had this in "prestart", which means it gets executed when you run npm start.
However, from your question, it looks like you are accessing a one-off Heroku dyno (e.g. with "heroku run bash"), and then trying to run "man cat" therein. So when you do that, you are not running "npm start" at all on your dyno.
By putting the "apt-get" in one of the Heroku specific build steps, it executes when your slug gets built, and hence whatever you install should be available on any dyno in your app (including one-off dynos).
I'm trying to deploy a Node app to Heroku, but I'm having an issue successfully running browserify when the app is deployed.
When I'm running locally, I browserify my script with npm run bundle like so (from package.json):
"bundle": "./node_modules/browserify/bin/cmd.js build/main.js -o public/scripts/bundle.js
which browserifies the script in build/main.js and puts it into public/scripts/bundle.js.
For deploying to Heroku, I added
"postinstall": "npm run bundle"
However, when I deploy, I get the following error:
Error: ENOENT: no such file or directory, open 'public/scripts/bundle.js.tmp-browserify-59309133185877094263'
Well, that's correct, that file shouldn't exist... yet. When I run npm run bundle locally, I do see that file briefly pop into existence, but then it is quickly removed and I'm left with a nice updated bundle.js.
I read through Heroku's docs on this, but I'm miffed... can anyone clarify how to get through this?
For reference, here are the relevant parts of my package.json:
"scripts": {
"bundle": "./node_modules/browserify/bin/cmd.js build/main.js -o public/scripts/bundle.js",
"postinstall": "npm run bundle"
},
"dependencies": {
"body-parser": "^1.17.1",
"browserify": "^14.1.0",
"ejs": "^2.5.6",
"express": "^4.15.2",
"jquery": "^3.2.1",
"path": "^0.12.7",
"superagent": "^3.5.2"
},
"devDependencies": {},
"engines": {
"node": "6.8.1",
"npm": "4.0.5"
}
Solved! I had bundle.js included in my global gitinore configuration. Just had to take that out, good to go!