I'm trying to figure out a way to make polyserve / polymer-cli to reload my browser each time a "watched" file changes but I haven't found anything apart of adding Livereload to the HTMLs files that I think is going to be a mess due that when developing web components I load separate HTML files.
For auto reloading using Polymer CLI as a server in your project you should have node / yarn installed. Then you need to install browser-sync locally.
npm install -D browser-sync
or
yarn add browser-sync --dev
Your package.json file will need to look something like:
{
"name": "MY-ELEMENT",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"start": "npm run serve | npm run watch",
"serve": "polymer serve --port 8080",
"test": "polymer test",
"watch": "browser-sync start --proxy localhost:8080 --open --startPath \"components/MY-ELEMENT\" --files \"**/*.html\""
},
"devDependencies": {
"browser-sync": "^2.18.13"
}
}
(If its a regular Polymer app you should remove the --startPath argument as that is for Polymer component development)
I'm using polyserve-watch which watches, serves and reloads webcomponents using polyserve and browser-sync``.
Best regards
Related
Background:
I have a lerna monorepo with yarn workspaces and two packages. I am using tsc as the TS compiler.
packages/module1/package.json:
"scripts": {
"watch": "tsc --watch",
"build": " tsc && tsc -m es6 --outDir ./dist/esm && webpack --config webpack.config.js",
}
packages/module2/package.json:
scripts: {
"watch": "tsc --watch",
"build": " tsc && tsc -m es6 --outDir ./dist/esm && webpack --config webpack.config.js",
}
root package.json:
"scripts": {
"build": "lerna run build",
"start:project": "lerna run start --scope=#project_name/project",
"start:project:watch": "concurrently \"yarn build && lerna run watch\" \"yarn start:project\"",
},
Expected Behavior:
yarn start:project:watch will run the build scripts and the watch scripts for each package
E.g. modifying any file in either package will rebuild the project and reload the page in the browser.
Current Behavior:
yarn start:project:watch will runs the build scripts and watch scripts for package1 only.
E.g. project is rebuilt when files in package1 are modified, but not rebuilt when package2 files are modified.
What might be going on and what could I be missing?
There are possibly 2 reasons for this to happen
you are using --scope which is specific to a single package
if you want dependent packages to be rebuilt then you should include the --include-dependents flag
However even if you fix both cases mentioned above it might still work incorrectly but Lerna and Lerna-Lite added a new lerna watch command that will help with this scenario which can be used in this way.
Watch for changes on package-1 or its dependents and run the "build" script on the scoped package and also its dependents:
$ lerna watch --scope=my-package-1 --include-dependents -- lerna run build --stream --scope=\$LERNA_PACKAGE_NAME --include-dependents
how would be the right way to run an express-generator created with pm2 ?
which would be the right adjustments i should make to run with pm2?
As it says in his documentation I should run the app like :
DEBUG=myapp:* npm start
Thats ok when i run with npm but what should I change to run it with pm2?
in the package.js file lays..
"scripts": {
"start": "node ./bin/www",
"test": "mocha --timeout 10000"
},
I have changed this to like, but is not added in pm2 monit:
"scripts": {
"start": "pm2 start ./bin/www",
"test": "mocha --timeout 10000"
},
Ok I have done like this:
In terminal run the app like
pm2 start ./bin/www
where resides de app.
that way it will run a your app as a "www" and you can monitor with pm2 monit.
I've seen a lot of package.json files where there are scripts that doesn't do anything but call a dependency with the same name. For example :
{
"scripts": {
"lint": "npm run tslint \"src/**/*.ts\"",
"tslint": "tslint"
},
"devDependencies": {
"tslint": "~4.4.2",
"tslint-loader": "^3.3.0"
}
}
Here we have the script tslint that just calls the dependency tslint. I guess that is some kind of a way to make the lint script shorter but how would it look like if there was no script called tslint.
I don't believe NPM has this kind of functionality built in. Yarn (the third-party NPM client built by Facebook, Google, Exponent and Tilde) on the other hand, does - you can just use yarn run and it will pick up the executable from your dependencies, even if you don't have a script for it defined in your package.json:
yarn run tslint
yarn run tslint "src/**/*.ts"
I used nodejs on my vserver to make a tiny script to manage users in a db.
In package.json I added the "bin" and set it to my script. My attempt was to make a command available on the whole server so I dont need to go to the directory where the script lies and write "node usermanager.js".
I used npm link and it seemed to work fine:
/home/sl4yer/bin/cl9wnhook -> /home/sl4yer/lib/node_modules/cl9wnhook_usermanager/usermanager.js
/home/sl4yer/lib/node_modules/cl9wnhook_usermanager -> /home/sl4yer/cl9wnHook/usermanager
package.json btw is:
{
"name": "cl9wnhook_usermanager",
"version": "1.0.0",
"description": "User manager for cl9wnHook",
"main": "usermanager.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"bin": {
"cl9wnhook": "./usermanager.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"commander": "^2.9.0",
"js-sha512": "^0.2.2",
"readline-sync": "^1.4.5"
}
}
so using the command "cl9wnhook" should work.
But when I call it, I get:
[sl4yer#lynx usermanager]$ cl9wnhook
: No such file or directory
Any idea?
sudo npm link
I did it, and successfully.
Try adding
#!/usr/bin/env node
on the top of your usermanager.js file. It should work.
Pack the package
npm pack
Then install it globally to run it from any folder.
npm install --global <package_file>.tgz
your bin in your package.json like this:
{
"bin": {
"app": "bin/app"
},
}
but first in your app file you should add at the top this #!/usr/bin/env node
Note
This will help you
Really things can mess up from time to time when working with NPM or Yarn. In these cases first do a complete clean install.
rm -rf ./node_modules
yarn install
npm install
If that doesn't solve your problem then check the bin property in package.json, if it is mapping to the cli file correctly?
You can check what is packed by running yarn pack.
Here is my package.json looks like:
{
"name": "Myproject",
"version": "0.4.13",
Note:Here 4 is not the minor version.0013 is minor
"dependencies": {
"lodash": "^4.0.0",
"vinyl-fs": "2.2.1"
},
"repository": {},
"devDependencies": {
.........
......
How can I automate versioning of package.json using Jenkins build.
Required format should be:
0.4.13-$BUILD_NUMBER
So far I try to do it using sed command:
sed -i "s/version: .*/version: 0.4.13-$BUILD_NUMBER/" package.json
But it's not updating version number in package.json file.
Also used
npm version 0.4.13-$BUILD_NUMBER
FYI:The generated build artifact should look like 0.0013-1.war
If you're using grunt, you could use the recommendation here.
Alternatively, there's a built in function in npm that does this for you. Run npm version, docs here.