I'm trying to run this npm script with debugger:
"scripts": {
"start": "webpack-dev-server --inline --hot -d"
},
here's how it's configured:
here's how it fails:
You'll have to add another script to your package.json that looks something like this (and change the configuration to point to it rather than start):
"startDebug": "node $NODE_DEBUG_OPTION ./node_modules/path/to/webpack-dev-server.js --inline --hot -d"
Alternatively, if you don't need debug capabilities, you should be able to run (not debug) that configuration without any problem.
Related
I have made an npm package called awesome-react-gamepads and updated the version several times (currently 0.1.2). This is fine and if you use npm you get the latest version however cdn's like jsdelvr do not have even close to the latest version as seen here https://www.jsdelivr.com/package/npm/awesome-react-gamepads. Is there something I have to specify in my config to force this? I can provide more code upon request I just don't know where the issue is. In my package.json I have the following scripts:
"scripts": {
"format": "prettier --write \"src/**/*.ts\" \"src/**/*.js\"",
"lint": "tslint -p tsconfig.json",
"test": "jest --config jestconfig.json",
"compile": "tsc -p tsconfig.json && tsc -p tsconfig-cjs.json && tsc -p tsconfig-umd.json",
"prepublish": "npm run compile"
},
Trying to figure out how can I create a production build with webpack but first run it locally as a last test before deploying it to the server.
I was thinking of creating another command something like npm run build_local for that purpose but can't quite figure out how to do that.
I can see the following in the root package.json and I was thinking of somehow combining dev + build but can't figure out how to do that (or using config otherwise):
"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"
},
Any advice on how can I run a production build in localhost with something like npm run build_local command?
EDIT
What I've tried so far is to run (manually) http-server ./dist which seem to run the folder on localhost, but the result in fact deviates from production (and dev) behavior - in my case it first renders everything as expected but as long as I press refresh, it returns 404 not found which is unexpected (on dev and server deployed versions it still renders the login page in this case):
for example if I open localhost:8080, vue redirects me to localhost:8080/login which is expected and works fine. On refresh it gives 404 though.
Ideally I'd expect it to work at least in the same way as dev build on localhost.
Any ideas?
So it was as simple as combining the dev command and providing prod config to it under the root package.json:
"build_local": "webpack-dev-server --inline --progress --config build/webpack.prod.conf.js"
//
Or in the package.json:
"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"
"build_local": "webpack-dev-server --inline --progress --config build/webpack.prod.conf.js"
}
Now I can do npm run build_local which runs production build on localhost
Note: as per this github thread and this doc reference to prevent 404 on refresh also add the following to your webpack.prod.conf.js (anywhere in the file, but for reference you can paste it just before plugins)
devServer: {
contentBase: path.join(__dirname, 'dist'),
historyApiFallback: true, //this line is requried
compress: true,
port: 9000
},
You can now check your production build under the localhost:9000
If anyone knows about any drawbacks give me a comment or post the corrected answer
I'm trying to set up a project which makes use of express and react. And I'm trying to make the best use of React-Slingshot project to benefit from it as much as possible. But the thing is that my project needs to be served (on the server side) by a script which I wrote. That script will use express and possibly socket.io to server the client side.
I think this is a problem if I use projects like React-Slingshot since they come with their own server scripts which support hot reloading and stuff. I'm willing to give up the fancy functionality like hot reloading. But I need to keep the --watch functionality so each time some file is changed, the code is compiled without me restarting the whole server.
Right now, the script section of package.json looks like this:
"scripts": {
"preinstall": "node tools/nodeVersionCheck.js",
"setup": "node tools/setup/setupMessage.js && npm install && node tools/setup/setup.js",
"remove-demo": "babel-node tools/removeDemo.js",
"start-message": "babel-node tools/startMessage.js",
"prestart": "npm run start-message",
"start": "concurrently -k -r -s first \"npm run test:watch\" \"npm run open:src\" \"npm run lint:watch\"",
"open:src": "babel-node tools/srcServer.js",
"open:dist": "babel-node tools/distServer.js",
"lint": "esw webpack.config.* src tools --color",
"lint:watch": "npm run lint -- --watch",
"clean-dist": "npm run remove-dist && mkdir dist",
"remove-dist": "rimraf ./dist",
"prebuild": "npm run clean-dist && npm run lint && npm run test",
"build": "babel-node tools/build.js && babel server -d dist --presets es2015,stage-2",
"test": "jest",
"test:CI": "babel-node tools/testCi.js",
"test:cover": "npm run test -- --coverage ",
"test:cover:CI": "npm run test:CI -- --coverage && cat ./coverage/lcov.info | node_modules/coveralls/bin/coveralls.js",
"test:watch": "jest --watch",
"open:cover": "npm run test:cover && opn ./coverage/lcov-report/index.html",
"analyze-bundle": "babel-node ./tools/analyzeBundle.js"
},
This is a modified version of what you can find in React-Slingshot. I've made a change so when I run npm run build, it builds the server code as well and terminates. It used to be like this:
"build": "babel-node tools/build.js && npm run open:dist",
Now, I'm trying to find a way to run my own server (i.e. node temp/server.js) while the rest of the code is compiled based on --watch as for my dev environment.
I believe you need a package like watch also check this video
After using npm test to do linting, it immediately starts to build all 2000 modules, and since it is already previously built, so I press CTRL-C, but only to find that because it got interrupted in the middle, some files are corrupted.
Is there a way to only run the linting without having it build all the modules?
Yes, your lint command is just something user made. If you go into your package.json and look for the 'test' command, you'll see that it calls several other commands including lint and build. Just make it lint only, or create a seperate function called npm lint. Here's an example package.json. As you can see, it has a lint and a test command.
{
"name": "boilerplate",
"version": "0.0.1",
"private": true,
"scripts": {
"start:native": "node node_modules/react-native/local-cli/cli.js start",
"start:web": "react-scripts start",
"lint": "eslint src/**",
"test": "node_modules/.bin/jest --env=jsdom",
"test:watch": "node_modules/.bin/jest --verbose --watchAll --env=jsdom"
}
}
I created a react native project, and I want to enable flow for my project.
I have flow-bin installed by
npm install --save flow-bin
However, it returns
missing script: flow
when I run
npm run-script flow
Anyone got any idea? Thanks!
npm run-script flow will not execute the flow command, but will just look into the scripts entry in the package.json file and execute the command under the flow entry (see the documentation for more information). This has the advantage that it will include binaries located in your dependencies (a.k.a. binaries inside the node_modules folder), which is something you usually do not have in your $PATH, avoiding the need to configure that for every project. Make sure that your package.json looks something like this:
//...
"scripts":{
//...
"flow": "flow; test $? -eq 0 -o $? -eq 2"
}
//...
Source: docs
Add "flow": "flow" as a new entry under "scripts" in your package.json file:
...
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"flow": "flow"
},
...
The tutorials I was following seem to skip this step but the Facebook github repo has it: https://facebook.github.io/create-react-app/docs/adding-flow