bootstrap-npm-starter icon indicating copy to clipboard operation
bootstrap-npm-starter copied to clipboard

live reload not works.

Open liudonghua123 opened this issue 4 years ago • 7 comments

liudonghua123 avatar Jun 23 '20 06:06 liudonghua123

What did you run for a start command?? Did you get any errors?

codewithklutch avatar Jun 27 '20 15:06 codewithklutch

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:

  1. npx https://blog.npmjs.org/post/162869356040/introducing-npx-an-npm-package-runner

  2. 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 avatar Jun 27 '20 15:06 codewithklutch

@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.

liudonghua123 avatar Jun 27 '20 16:06 liudonghua123

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.

planetoftheweb avatar Jul 01 '20 16:07 planetoftheweb

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:

  1. using the config object as "variables" in the npm scripts to configuration more powerful (see example below)
  2. using npm script lifecycles so that npm run css would run precss, css and postcss scripts.
  3. 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\"",
  },

HansUXdev avatar Dec 29 '20 21:12 HansUXdev

Slick!!!!

klutchdev avatar Dec 31 '20 06:12 klutchdev

How we can add live-reload functionality in this project? Any advice?

vasilis-exo avatar Jun 02 '21 11:06 vasilis-exo

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.

mdo avatar Sep 02 '22 17:09 mdo