Lite Server doesn't reload the page upon making changes to my index.html file.
I'm not using a bs-config.json file. My index.html opens correctly in a new tab when starting lite server using :
npm run dev
This console info might help:
> lite#1.0.0 dev C:\test\lite
> lite-server
Did not detect a `bs-config.json` or `bs-config.js` override file. Using lite-server defaults...
** browser-sync config **
{ injectChanges: false,
files: [ './**/*.{html,htm,css,js}' ],
watchOptions: { ignored: 'node_modules' },
server: { baseDir: './', middleware: [ [Function], [Function] ] } }
[Browsersync] Access URLs:
-------------------------------------
Local: http://localhost:3000
External: http://192.168.1.39:3000
-------------------------------------
UI: http://localhost:3001
UI External: http://localhost:3001
-------------------------------------
[Browsersync] Serving files from: ./
[Browsersync] Watching files...
19.07.26 21:02:27 304 GET /index.html
[Browsersync] Reloading Browsers...
When changing and saving my index.html,
[BrowserSync] 'Reloading Browsers'
appears in my console, but my page won't reload.
I need to press F5 and then
19.07.26 21:09:32 200 GET /index.html
appears in my console.
Package.json :
{
"name": "lite",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "lite-server"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"lite-server": "^2.5.3"
}
}
How do I get Lite Server to hot reload my page ?
I found the solution
"browser-sync" only works when there is the tag "body"
Just add body tag in your html page
Related
Today, I'm coding a few npm packages and a few things that need to be prepared repeatedly.
So I wanted to code a CLI to get those things done quickly.
Here is the src/cli.js code:
export function cli(args){
console.log(args);
}
Here is the package.json code:
{
"name": "my-project",
"version": "1.0.0",
"description": "A CLI to bootstrap new project",
"main": "src/index.js",
"bin": {
"#kensoni/my-project": "bin/my-project",
"my-project": "bin/my-project"
},
"publishConfig": {
"access": "public"
},
"keywords": [
"cli"
],
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Ken Nguyen",
"license": "MIT",
"dependencies": {
"arg": "^5.0.0",
"esm": "^3.2.25",
"inquirer": "^8.1.1"
}
}
Here is the bin/my-project code:
#!/usr/bin/env/ node
require = require('esm')(module /*, options*/);
require('../src/cli').cli(process.argv);
After I execute the command npm link and open a new cmd type my-project, I get the following message:
'"/"' is not recognized as an internal or external command,
operable program or batch file.
I am using these versions:
node: 14.17.1
npm: 7.18.1
Any ideas how it might work.
Thanks in advance.
Remove "/" after env
#!/usr/bin/env node
//...
Im about to go from webpack to Parcel, but some problems has come to my attention with how to put everything together. Especially since my project structure is a bit different than the one proposed in the documentation.
Here's my project structure
root
- package.json
- js
-- app.js
-- shim.js
- scss
-- main.scss
public
And I want to put the 'js' files into public/ and then the scss-file (main.scss) into public/css, but I can't figure out how this is supposed to work with 'targets' and 'source' in my package.json.
Here's how I want it to look after the servings;
root
- package.json
- js
-- app.js
-- shim.js
- scss
-- main.scss
public
- css
-- main.css
- app.js
- shim.js
package.json
{
"name": "embed",
"scripts": {
"start": "parcel serve ./src/index.html",
"build": "parcel build ./src/index.html",
"dev": "parcel serve ./js/app.js ./js/shim.js --dist-dir ./public"
},
"source": ["./scss/main.scss"],
"css": "./scss/main.scss",
"targets": {
"css": { "distDir": "./public/css" }
},
"browserslist": "> 0.2%",
"devDependencies": {
"#babel/core": "^7.13.1",
"#babel/preset-env": "^7.13.5",
"parcel": "next",
"sass": "^1.32.8"
},
"dependencies": {
"#popperjs/core": "^2.8.3",
"bootstrap": "^5.0.0-beta2"
}
}
The above configuration doesnt create any css-file at all. But if I add:
"dev": "parcel serve ./js/app.js ./js/shim.js ./scss/main.scss -out --dist-dir ./public"
It generates a css file into public/scss/. And not public/css which I actually want. Is there any way to achieve this?
I'm using Addy Osmani's 'Critical'
https://github.com/addyosmani/critical
the package.json below is working fine, but the build is only copying the critical css not extracting. I've tried --extract multiple places with and without a defined stylesheet, it seems i cant wrap my head around it.
{
"name": "boilerplate",
"version": "1.0.0",
"main": "index.js",
"repository": "",
"author": "",
"license": "MIT",
"scripts": {
"build:critical": "critical index.html --minify --css dist/css/style.css > dist/css/critical.css",
},
"devDependencies": {
"critical": "^0.8.1",
}
}
If you output a HTML file instead, the CSS will be extracted. I had the same issue. Furthermore, in the output index file, the CSS link will have a rel="preload" automatically.
Here it's the command I am using:
critical dist/public/index.html --base dist/public --inline --minify > dist/public/index.critical.html
I hope that it will help.
I'm using node v0.10.32. Windows 8.1.
My objective is to link a node application as a node_module in another main app.
I go to my-module folder and do
npm link
Then, I go to the main-app folder and do
npm link my-module
This is the result
c:\dev\main-app>npm link my-module
unbuild my-module#0.0.2
c:\dev\main-app\node_modules\my-module -> C:\Users\Nizar\AppData\Roaming\npm\node_modules\my-module -> C:\dev\my-module
But, the linkage does NOT seem to work, require('my-module') throws the following error
c:\dev\main-app>node app.js
module.js:340
throw err;
^
Error: Cannot find module 'my-module'
at Function.Module._resolveFilename (module.js:338:15)
my-module is indeed v0.0.2.
I can access it from main-app/node_module/my-module
This folder exists C:\Users\Nizar\AppData\Roaming\npm\node_modules\my-module
my-module package.json has "name": "my-module"
Moreover, %NODE_PATH% is correctly set:
c:\dev\main-app>echo %NODE_PATH%
C:\Users\Nizar\AppData\Roaming\npm\node_modules
Ideas?
There are a few things to try. On Windows, npm link is handled by creating junction points. Issuing a dir node_modules command should result in a line like:
01/15/2016 11:02 AM <JUNCTION> my-module [C:\Users\Nizar\AppData\Roaming\npm\node_modules\my-module]
Assuming that's there, then the problem is more than likely:
A lack of an index.js file (which is the default filename node uses to resolve modules)
You're using a different file than index.js as the main file of your module, in which case you need to tell node what that file is, by using the main key in your package.json file.
For example (taken from here):
{
"name": "node-js-sample",
"version": "0.2.0",
"description": "A sample Node.js app using Express 4",
"main": "index.js", // <-- LIKE THIS
"scripts": {
"start": "node index.js"
},
"dependencies": {
"express": "^4.13.3"
},
"engines": {
"node": "4.0.0"
},
"repository": {
"type": "git",
"url": "https://github.com/heroku/node-js-sample"
},
"keywords": [
"node",
"heroku",
"express"
],
"author": "Mark Pundsack",
"contributors": [
"Zeke Sikelianos <zeke#sikelianos.com> (http://zeke.sikelianos.com)"
],
"license": "MIT"
}
I have published a jRCarousel jQuery plugin to npm. I initially got the error that name can not contain capital letters, so I have changed that in package.json and then published it got published but on npm website when I try the "Try it out" option I get the "ReferenceError: jQuery is not defined" error. Not sure why is the error as I have specified the dependency in package.json.
Also if there are any changes to only package.json and not to any other files in package or module , how can I update only the package.json file on npm, or do I have to publish it new version no.(which I want to avoid).
Here is my package.json
{
"name": "jrcarousel",
"version": "1.0.0",
"description": "jRCarousel - jQuery Responsive Carousel,
a modern, lightweight responsive carousel plugin",
"main": "dist/jRCarousel.min.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "https://github.com/vinayakjadhav/jRCarousel.git"
},
"keywords": [
"jquery-plugin",
"ecosystem:jquery",
"jQuery Resposive Carousel",
"jQuery slider",
"Responsive Slider",
"Carousel",
"Slider",
"Gallery",
"lightweight"
],
"author": "Vinayak Rangnathrao Jadhav",
"license": "MIT",
"dependencies": {
"jquery": "^1.9.1"
},
"bugs": {
"url": "https://github.com/vinayakjadhav/jRCarousel/issues"
},
"homepage": "https://github.com/vinayakjadhav/jRCarousel",
"devDependencies": {}
}
npm package
Github Repository
TRY IT OUT Link
Note: I am new to npm, have searched a lot but very less info available related to jquery-plugin publishing. Any help is appreciated.
Wrap your plugin with this code. It's the UMD pattern that allows your plugin to run inside browser and most of module bundlers.
(function (root, factory) {
if (typeof define === "function" && define.amd) {
define(["jquery"], factory);
} else if (typeof exports === "object") {
module.exports = factory(require("jquery"));
} else {
factory(root.jQuery);
}
}(this, function ($) {
...your plugin code goes here...
}));