bootstrap-npm-starter
bootstrap-npm-starter copied to clipboard
live reload not works.
What did you run for a start command?? Did you get any errors?
I don't if anyone has had a chance to look into this or not, but if testing shows we need a solution I have a couple ideas:
-
npx https://blog.npmjs.org/post/162869356040/introducing-npx-an-npm-package-runner
-
Add 'start' to npm.scripts in package.json
There is also another (seperate) open ticket requesting we simplify the start command to resemble React's 'create-react-app' command- I would like to see if anyone thinks that npx and/or adjustments to package.json could rectify the situation. I will do run a bunch of tests later to see if I can reproduce these problems and see if I can troubleshoot it.
@codewithklutch Hi, I executed npm run watch
and npm run serve
, then I modified some css, the browser neither reload or live hot reload. I have enabled live reload extension of chrome. There is not any errors on the terminal.
The server npm module doesn't look like it handles live reloading so there isn't a way of live reloading. I think @mdo is looking at moving this to Webpack or something else which would have these capabilities.
For live reload, I think it would be worth exploring using live reload's cli instead of using nodemon, I haven't done this yet so if anyone has and has run into issues, please let me know.
As for adjustments other adjustments to package.json as @codewithklutch mentioned I'd be more than happy to submit a PR to add any of following:
- using the config object as "variables" in the npm scripts to configuration more powerful (see example below)
- using npm script lifecycles so that
npm run css
would run precss, css and postcss scripts. - adding babel to compile JavaScript
Example of config object and "variables" (not what they are actually called, but I'm using the term):
"config": {
"babel":"./node_modules/.bin/babel",
"presets":"@babel/preset-env",
"plugins":"@babel/plugin-proposal-optional-chaining,@babel/plugin-proposal-function-bind",
"sourcemaps": "false",
"style": "compact",
"src": "./src/",
"dest": "./public",
"page": "./src/index.html",
"port": "3000",
"extentions": "html,scss,js",
"ignore ": "",
},
"scripts": {
"js": "babel $npm_package_config_src/js --out-dir $npm_package_config_dest --presets=$npm_package_config_presets --plugins $npm_package_config_plugins",
"precss": "node-sass --include-path node_modules --output-style $npm_package_config_style --source-map true --source-map-contents true --precision 6 $npm_package_config_src/scss -o $npm_package_config_dest/css",
"css": "purgecss --css $npm_package_config_src/css/*.css --content $npm_package_config_page --output $npm_package_config_dest/css/",
"postcss": "postcss --replace $npm_package_config_dest/css/*.css --use autoprefixer --map",
"minify:css": "cssnano < $npm_package_config_dest/css/bootstrap.css > $npm_package_config_dest/css/bootstrap.min.css",
"server": "serve --listen $npm_package_config_port",
"watch": "nodemon -e $npm_package_config_extentions -x \"npm run css && npm run js\"",
},
Slick!!!!
How we can add live-reload functionality in this project? Any advice?
Closing as a won't fix—please see #95 and consider migrating to one of our newer examples with Bootstrap 5 at https://github.com/twbs/examples.