twbs / bootstrap-npm-starter

Starter template for new building with Bootstrap 4 in npm projects.
MIT License
1.23k stars 465 forks source link

live reload not works. #21

Closed liudonghua123 closed 2 years ago

codewithklutch commented 4 years ago

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

codewithklutch commented 4 years ago

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.

liudonghua123 commented 4 years ago

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

planetoftheweb commented 4 years ago

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.

HansUXdev commented 3 years ago

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\"",
  },
klutchdev commented 3 years ago

Slick!!!!

vasilis-exo commented 3 years ago

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

mdo commented 2 years ago

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.