Episodes
freewaytofluency said almost 3 years ago on Using Bootstrap Themes :
The bootstrap theme I purchased didn't include minified css or js files. At about 6 mins in you imported these files into the application.js. What should I do in my case? I don't want to have to include every file manually.

David Kimura PRO said almost 3 years ago on Using Bootstrap Themes :
Typically, there will be an example application or demo included and you can see if there is an entry point file which includes the other ones. Also, there might be some files asset compiling with something like Babel. Which Bootstrap theme did you go with?

freewaytofluency said almost 3 years ago on Using Bootstrap Themes :
I went with a paid one called [LearnPlus ](https://themeforest.net/item/learnplus-learning-management-application/15287372) which is a theme for a learning management system (similar to a dashboard in many ways). There is an src folder and a dist folder in the theme. The src folder is written in a templating language called nunjacks so I guess it's best to ignore that. The dist folder has html for all the pages in the theme, manually importing every stylesheet and javascript file into each one through an assets folder. I guess this is the one that I need but there are so many minified css and js files in it. Do I need to import every single one into my rails app? The directory structure is such: dist - assets - css (a bunch of minified css files in here) - data (material icons and vector maps folders in here) - fonts (font awesome / material-icons folders in here) - images (various placeholder images used in the pages here) - js (a bunch of minifed js files in here) - vendor (a bunch of minified css and js files in here for all the various plugins like bootstrap.min.css, jquery.nestable.js) - html file - another html file - yet another html file etc...

freewaytofluency said almost 3 years ago on Using Bootstrap Themes :
the spacing got stripped out when I posted the directory structure above so here we go again: dist - assets - css (a bunch of minified css files in here) - data (material icons and vector maps folders in here) - fonts (font awesome / material-icons folders in here) - images (various placeholder images used in the pages here) - js (a bunch of minifed js files in here) - vendor (a bunch of minified css and js files in here for all the various plugins like bootstrap.min.css, jquery.nestable.js) The html files are inside the dist folder, at the same level as the assets folder

David Ng PRO said almost 3 years ago on Using Bootstrap Themes :
After the set up, I find the sidebarToggle button does not work, any ideas ?

David Kimura PRO said almost 3 years ago on Using Bootstrap Themes :
You can add this snippet to the `packs/application.js` or wherever appropriate. ``` $(document).ready(function () { $(".sidebar, #sidebarToggleTop").on('click', function (e) { $("body").toggleClass("sidebar-toggled"); $(".sidebar").toggleClass("toggled"); if ($(".sidebar").hasClass("toggled")) { $('.sidebar .collapse').collapse('hide'); }; }); }); ```

frosch said over 2 years ago on Using Bootstrap Themes :
Hey i have a theme i wanted to include and it worked well, but when i push the app to heroku i get an error because of fontawesome does anyone have a clue how to solve it ? ``` remote: Compiling... remote: Compilation failed: remote: ModuleNotFoundError: Module not found: Error: Can't resolve '@fortawesome/fontawesome-free/js/all' in '/tmp/build_96cef61f9af080d6aea1e5e90ef9c612/app/javascript/packs' remote: at factory.create (/tmp/build_96cef61f9af080d6aea1e5e90ef9c612/node_modules/webpack/lib/Compilation.js:925:10) remote: at factory (/tmp/build_96cef61f9af080d6aea1e5e90ef9c612/node_modules/webpack/lib/NormalModuleFactory.js:401:22) remote: at resolver (/tmp/build_96cef61f9af080d6aea1e5e90ef9c612/node_modules/webpack/lib/NormalModuleFactory.js:130:21) remote: at asyncLib.parallel (/tmp/build_96cef61f9af080d6aea1e5e90ef9c612/node_modules/webpack/lib/NormalModuleFactory.js:224:22) remote: at /tmp/build_96cef61f9af080d6aea1e5e90ef9c612/node_modules/neo-async/async.js:2830:7 remote: at /tmp/build_96cef61f9af080d6aea1e5e90ef9c612/node_modules/neo-async/async.js:6877:13 remote: at normalResolver.resolve (/tmp/build_96cef61f9af080d6aea1e5e90ef9c612/node_modules/webpack/lib/NormalModuleFactory.js:214:25) remote: at doResolve (/tmp/build_96cef61f9af080d6aea1e5e90ef9c612/node_modules/webpack/node_modules/enhanced-resolve/lib/Resolver.js:213:14) remote: at hook.callAsync (/tmp/build_96cef61f9af080d6aea1e5e90ef9c612/node_modules/webpack/node_modules/enhanced-resolve/lib/Resolver.js:285:5) remote: at _fn0 (eval at create (/tmp/build_96cef61f9af080d6aea1e5e90ef9c612/node_modules/tapable/lib/HookCodeFactory.js:33:10), :15:1) remote: at resolver.doResolve (/tmp/build_96cef61f9af080d6aea1e5e90ef9c612/node_modules/webpack/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:44:7) remote: at hook.callAsync (/tmp/build_96cef61f9af080d6aea1e5e90ef9c612/node_modules/webpack/node_modules/enhanced-resolve/lib/Resolver.js:285:5) remote: at _fn0 (eval at create (/tmp/build_96cef61f9af080d6aea1e5e90ef9c612/node_modules/tapable/lib/HookCodeFactory.js:33:10), :15:1) remote: at hook.callAsync (/tmp/build_96cef61f9af080d6aea1e5e90ef9c612/node_modules/webpack/node_modules/enhanced-resolve/lib/Resolver.js:285:5) remote: at _fn0 (eval at create (/tmp/build_96cef61f9af080d6aea1e5e90ef9c612/node_modules/tapable/lib/HookCodeFactory.js:33:10), :27:1) remote: at resolver.doResolve (/tmp/build_96cef61f9af080d6aea1e5e90ef9c612/node_modules/webpack/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:67:43) remote: at hook.callAsync (/tmp/build_96cef61f9af080d6aea1e5e90ef9c612/node_modules/webpack/node_modules/enhanced-resolve/lib/Resolver.js:285:5) remote: at _fn41 (eval at create (/tmp/build_96cef61f9af080d6aea1e5e90ef9c612/node_modules/tapable/lib/HookCodeFactory.js:33:10), :28:1) remote: at resolver.doResolve (/tmp/build_96cef61f9af080d6aea1e5e90ef9c612/node_modules/webpack/node_modules/enhanced-resolve/lib/ModuleKindPlugin.js:30:40) remote: at hook.callAsync (/tmp/build_96cef61f9af080d6aea1e5e90ef9c612/node_modules/webpack/node_modules/enhanced-resolve/lib/Resolver.js:285:5) remote: at _fn0 (eval at create (/tmp/build_96cef61f9af080d6aea1e5e90ef9c612/node_modules/tapable/lib/HookCodeFactory.js:33:10), :15:1) remote: at hook.callAsync (/tmp/build_96cef61f9af080d6aea1e5e90ef9c612/node_modules/webpack/node_modules/enhanced-resolve/lib/Resolver.js:285:5) remote: at _fn2 (eval at create (/tmp/build_96cef61f9af080d6aea1e5e90ef9c612/node_modules/tapable/lib/HookCodeFactory.js:33:10), :16:1) remote: at args (/tmp/build_96cef61f9af080d6aea1e5e90ef9c612/node_modules/webpack/node_modules/enhanced-resolve/lib/forEachBail.js:30:14) remote: at hook.callAsync (/tmp/build_96cef61f9af080d6aea1e5e90ef9c612/node_modules/webpack/node_modules/enhanced-resolve/lib/Resolver.js:285:5) remote: at _fn0 (eval at create (/tmp/build_96cef61f9af080d6aea1e5e90ef9c612/node_modules/tapable/lib/HookCodeFactory.js:33:10), :15:1) remote: at resolver.doResolve (/tmp/build_96cef61f9af080d6aea1e5e90ef9c612/node_modules/webpack/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:44:7) remote: at hook.callAsync (/tmp/build_96cef61f9af080d6aea1e5e90ef9c612/node_modules/webpack/node_modules/enhanced-resolve/lib/Resolver.js:285:5) remote: at _fn0 (eval at create (/tmp/build_96cef61f9af080d6aea1e5e90ef9c612/node_modules/tapable/lib/HookCodeFactory.js:33:10), :15:1) remote: at hook.callAsync (/tmp/build_96cef61f9af080d6aea1e5e90ef9c612/node_modules/webpack/node_modules/enhanced-resolve/lib/Resolver.js:285:5) remote: at _fn0 (eval at create (/tmp/build_96cef61f9af080d6aea1e5e90ef9c612/node_modules/tapable/lib/HookCodeFactory.js:33:10), :27:1) remote: at resolver.doResolve (/tmp/build_96cef61f9af080d6aea1e5e90ef9c612/node_modules/webpack/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:67:43) remote: at hook.callAsync (/tmp/build_96cef61f9af080d6aea1e5e90ef9c612/node_modules/webpack/node_modules/enhanced-resolve/lib/Resolver.js:285:5) remote: at _fn42 (eval at create (/tmp/build_96cef61f9af080d6aea1e5e90ef9c612/node_modules/tapable/lib/HookCodeFactory.js:33:10), :16:1) remote: at hook.callAsync (/tmp/build_96cef61f9af080d6aea1e5e90ef9c612/node_modules/webpack/node_modules/enhanced-resolve/lib/Resolver.js:285:5) remote: at _fn0 (eval at create (/tmp/build_96cef61f9af080d6aea1e5e90ef9c612/node_modules/tapable/lib/HookCodeFactory.js:33:10), :27:1) remote: resolve '@fortawesome/fontawesome-free/js/all' in '/tmp/build_96cef61f9af080d6aea1e5e90ef9c612/app/javascript/packs' remote: Parsed request is a module remote: using description file: /tmp/build_96cef61f9af080d6aea1e5e90ef9c612/package.json (relative path: ./app/javascript/packs) remote: Field 'browser' doesn't contain a valid alias configuration remote: resolve as module remote: looking for modules in /tmp/build_96cef61f9af080d6aea1e5e90ef9c612/app/javascript remote: using description file: /tmp/build_96cef61f9af080d6aea1e5e90ef9c612/package.json (relative path: ./app/javascript) remote: Field 'browser' doesn't contain a valid alias configuration remote: using description file: /tmp/build_96cef61f9af080d6aea1e5e90ef9c612/package.json (relative path: ./app/javascript/@fortawesome/fontawesome-free/js/all) remote: no extension remote: Field 'browser' doesn't contain a valid alias configuration remote: /tmp/build_96cef61f9af080d6aea1e5e90ef9c612/app/javascript/@fortawesome/fontawesome-free/js/all doesn't exist remote: .mjs remote: Field 'browser' doesn't contain a valid alias configuration remote: /tmp/build_96cef61f9af080d6aea1e5e90ef9c612/app/javascript/@fortawesome/fontawesome-free/js/all.mjs doesn't exist remote: .js remote: Field 'browser' doesn't contain a valid alias configuration remote: /tmp/build_96cef61f9af080d6aea1e5e90ef9c612/app/javascript/@fortawesome/fontawesome-free/js/all.js doesn't exist remote: .sass remote: Field 'browser' doesn't contain a valid alias configuration remote: /tmp/build_96cef61f9af080d6aea1e5e90ef9c612/app/javascript/@fortawesome/fontawesome-free/js/all.sass doesn't exist remote: .scss remote: Field 'browser' doesn't contain a valid alias configuration remote: /tmp/build_96cef61f9af080d6aea1e5e90ef9c612/app/javascript/@fortawesome/fontawesome-free/js/all.scss doesn't exist remote: .css remote: Field 'browser' doesn't contain a valid alias configuration remote: /tmp/build_96cef61f9af080d6aea1e5e90ef9c612/app/javascript/@fortawesome/fontawesome-free/js/all.css doesn't exist remote: .module.sass remote: Field 'browser' doesn't contain a valid alias configuration remote: /tmp/build_96cef61f9af080d6aea1e5e90ef9c612/app/javascript/@fortawesome/fontawesome-free/js/all.module.sass doesn't exist remote: .module.scss remote: Field 'browser' doesn't contain a valid alias configuration remote: /tmp/build_96cef61f9af080d6aea1e5e90ef9c612/app/javascript/@fortawesome/fontawesome-free/js/all.module.scss doesn't exist remote: .module.css remote: Field 'browser' doesn't contain a valid alias configuration remote: /tmp/build_96cef61f9af080d6aea1e5e90ef9c612/app/javascript/@fortawesome/fontawesome-free/js/all.module.css doesn't exist remote: .png remote: Field 'browser' doesn't contain a valid alias configuration remote: /tmp/build_96cef61f9af080d6aea1e5e90ef9c612/app/javascript/@fortawesome/fontawesome-free/js/all.png doesn't exist remote: .svg remote: Field 'browser' doesn't contain a valid alias configuration remote: /tmp/build_96cef61f9af080d6aea1e5e90ef9c612/app/javascript/@fortawesome/fontawesome-free/js/all.svg doesn't exist remote: .gif remote: Field 'browser' doesn't contain a valid alias configuration remote: /tmp/build_96cef61f9af080d6aea1e5e90ef9c612/app/javascript/@fortawesome/fontawesome-free/js/all.gif doesn't exist remote: .jpeg remote: Field 'browser' doesn't contain a valid alias configuration remote: /tmp/build_96cef61f9af080d6aea1e5e90ef9c612/app/javascript/@fortawesome/fontawesome-free/js/all.jpeg doesn't exist remote: .jpg remote: Field 'browser' doesn't contain a valid alias configuration remote: /tmp/build_96cef61f9af080d6aea1e5e90ef9c612/app/javascript/@fortawesome/fontawesome-free/js/all.jpg doesn't exist remote: as directory remote: /tmp/build_96cef61f9af080d6aea1e5e90ef9c612/app/javascript/@fortawesome/fontawesome-free/js/all doesn't exist remote: looking for modules in /tmp/build_96cef61f9af080d6aea1e5e90ef9c612/vendor remote: using description file: /tmp/build_96cef61f9af080d6aea1e5e90ef9c612/package.json (relative path: ./vendor) remote: Field 'browser' doesn't contain a valid alias configuration remote: using description file: /tmp/build_96cef61f9af080d6aea1e5e90ef9c612/package.json (relative path: ./vendor/@fortawesome/fontawesome-free/js/all) remote: no extension remote: Field 'browser' doesn't contain a valid alias configuration remote: /tmp/build_96cef61f9af080d6aea1e5e90ef9c612/vendor/@fortawesome/fontawesome-free/js/all doesn't exist remote: .mjs remote: Field 'browser' doesn't contain a valid alias configuration remote: /tmp/build_96cef61f9af080d6aea1e5e90ef9c612/vendor/@fortawesome/fontawesome-free/js/all.mjs doesn't exist remote: .js remote: Field 'browser' doesn't contain a valid alias configuration remote: /tmp/build_96cef61f9af080d6aea1e5e90ef9c612/vendor/@fortawesome/fontawesome-free/js/all.js doesn't exist remote: .sass remote: Field 'browser' doesn't contain a valid alias configuration remote: /tmp/build_96cef61f9af080d6aea1e5e90ef9c612/vendor/@fortawesome/fontawesome-free/js/all.sass doesn't exist remote: .scss remote: Field 'browser' doesn't contain a valid alias configuration remote: /tmp/build_96cef61f9af080d6aea1e5e90ef9c612/vendor/@fortawesome/fontawesome-free/js/all.scss doesn't exist remote: .css remote: Field 'browser' doesn't contain a valid alias configuration remote: /tmp/build_96cef61f9af080d6aea1e5e90ef9c612/vendor/@fortawesome/fontawesome-free/js/all.css doesn't exist remote: .module.sass remote: Field 'browser' doesn't contain a valid alias configuration remote: /tmp/build_96cef61f9af080d6aea1e5e90ef9c612/vendor/@fortawesome/fontawesome-free/js/all.module.sass doesn't exist remote: .module.scss remote: Field 'browser' doesn't contain a valid alias configuration remote: /tmp/build_96cef61f9af080d6aea1e5e90ef9c612/vendor/@fortawesome/fontawesome-free/js/all.module.scss doesn't exist remote: .module.css remote: Field 'browser' doesn't contain a valid alias configuration remote: /tmp/build_96cef61f9af080d6aea1e5e90ef9c612/vendor/@fortawesome/fontawesome-free/js/all.module.css doesn't exist remote: .png remote: Field 'browser' doesn't contain a valid alias configuration remote: /tmp/build_96cef61f9af080d6aea1e5e90ef9c612/vendor/@fortawesome/fontawesome-free/js/all.png doesn't exist remote: .svg remote: Field 'browser' doesn't contain a valid alias configuration remote: /tmp/build_96cef61f9af080d6aea1e5e90ef9c612/vendor/@fortawesome/fontawesome-free/js/all.svg doesn't exist remote: .gif remote: Field 'browser' doesn't contain a valid alias configuration remote: /tmp/build_96cef61f9af080d6aea1e5e90ef9c612/vendor/@fortawesome/fontawesome-free/js/all.gif doesn't exist remote: .jpeg remote: Field 'browser' doesn't contain a valid alias configuration remote: /tmp/build_96cef61f9af080d6aea1e5e90ef9c612/vendor/@fortawesome/fontawesome-free/js/all.jpeg doesn't exist remote: .jpg remote: Field 'browser' doesn't contain a valid alias configuration remote: /tmp/build_96cef61f9af080d6aea1e5e90ef9c612/vendor/@fortawesome/fontawesome-free/js/all.jpg doesn't exist remote: as directory remote: /tmp/build_96cef61f9af080d6aea1e5e90ef9c612/vendor/@fortawesome/fontawesome-free/js/all doesn't exist remote: /tmp/build_96cef61f9af080d6aea1e5e90ef9c612/app/javascript/packs/node_modules doesn't exist or is not a directory remote: /tmp/build_96cef61f9af080d6aea1e5e90ef9c612/app/javascript/node_modules doesn't exist or is not a directory remote: /tmp/build_96cef61f9af080d6aea1e5e90ef9c612/app/node_modules doesn't exist or is not a directory remote: /tmp/node_modules doesn't exist or is not a directory remote: /node_modules doesn't exist or is not a directory remote: looking for modules in /tmp/build_96cef61f9af080d6aea1e5e90ef9c612/node_modules remote: using description file: /tmp/build_96cef61f9af080d6aea1e5e90ef9c612/package.json (relative path: ./node_modules) remote: Field 'browser' doesn't contain a valid alias configuration remote: using description file: /tmp/build_96cef61f9af080d6aea1e5e90ef9c612/package.json (relative path: ./node_modules/@fortawesome/fontawesome-free/js/all) remote: no extension remote: Field 'browser' doesn't contain a valid alias configuration remote: /tmp/build_96cef61f9af080d6aea1e5e90ef9c612/node_modules/@fortawesome/fontawesome-free/js/all doesn't exist remote: .mjs remote: Field 'browser' doesn't contain a valid alias configuration remote: /tmp/build_96cef61f9af080d6aea1e5e90ef9c612/node_modules/@fortawesome/fontawesome-free/js/all.mjs doesn't exist remote: .js remote: Field 'browser' doesn't contain a valid alias configuration remote: /tmp/build_96cef61f9af080d6aea1e5e90ef9c612/node_modules/@fortawesome/fontawesome-free/js/all.js doesn't exist remote: .sass remote: Field 'browser' doesn't contain a valid alias configuration remote: /tmp/build_96cef61f9af080d6aea1e5e90ef9c612/node_modules/@fortawesome/fontawesome-free/js/all.sass doesn't exist remote: .scss remote: Field 'browser' doesn't contain a valid alias configuration remote: /tmp/build_96cef61f9af080d6aea1e5e90ef9c612/node_modules/@fortawesome/fontawesome-free/js/all.scss doesn't exist remote: .css remote: Field 'browser' doesn't contain a valid alias configuration remote: /tmp/build_96cef61f9af080d6aea1e5e90ef9c612/node_modules/@fortawesome/fontawesome-free/js/all.css doesn't exist remote: .module.sass remote: Field 'browser' doesn't contain a valid alias configuration remote: /tmp/build_96cef61f9af080d6aea1e5e90ef9c612/node_modules/@fortawesome/fontawesome-free/js/all.module.sass doesn't exist remote: .module.scss remote: Field 'browser' doesn't contain a valid alias configuration remote: /tmp/build_96cef61f9af080d6aea1e5e90ef9c612/node_modules/@fortawesome/fontawesome-free/js/all.module.scss doesn't exist remote: .module.css remote: Field 'browser' doesn't contain a valid alias configuration remote: /tmp/build_96cef61f9af080d6aea1e5e90ef9c612/node_modules/@fortawesome/fontawesome-free/js/all.module.css doesn't exist remote: .png remote: Field 'browser' doesn't contain a valid alias configuration remote: /tmp/build_96cef61f9af080d6aea1e5e90ef9c612/node_modules/@fortawesome/fontawesome-free/js/all.png doesn't exist remote: .svg remote: Field 'browser' doesn't contain a valid alias configuration remote: /tmp/build_96cef61f9af080d6aea1e5e90ef9c612/node_modules/@fortawesome/fontawesome-free/js/all.svg doesn't exist remote: .gif remote: Field 'browser' doesn't contain a valid alias configuration remote: /tmp/build_96cef61f9af080d6aea1e5e90ef9c612/node_modules/@fortawesome/fontawesome-free/js/all.gif doesn't exist remote: .jpeg remote: Field 'browser' doesn't contain a valid alias configuration remote: /tmp/build_96cef61f9af080d6aea1e5e90ef9c612/node_modules/@fortawesome/fontawesome-free/js/all.jpeg doesn't exist remote: .jpg remote: Field 'browser' doesn't contain a valid alias configuration remote: /tmp/build_96cef61f9af080d6aea1e5e90ef9c612/node_modules/@fortawesome/fontawesome-free/js/all.jpg doesn't exist remote: as directory remote: /tmp/build_96cef61f9af080d6aea1e5e90ef9c612/node_modules/@fortawesome/fontawesome-free/js/all doesn't exist remote: remote: remote: ! remote: ! Precompiling assets failed. remote: ! remote: ! Push rejected, failed to compile Ruby app. remote: remote: ! Push failed remote: Verifying deploy... remote: remote: ! Push rejected to thegecko88. remote: ```

David Kimura PRO said over 2 years ago on Using Bootstrap Themes :
Have you been able to successfully run `yarn install`? The error message `node_modules doesn't exist or is not a directory` makes me think that the JS Libraries and dependencies haven't been installed yet.

frosch said over 2 years ago on Using Bootstrap Themes :
``` PS C:\code\thegecko> yarn install yarn install v1.21.1 warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json. [1/4] Resolving packages... success Already up-to-date. Done in 0.56s. ``` yarn is working and if i run the rails server local, everything is working fine

David Kimura PRO said over 2 years ago on Using Bootstrap Themes :
Sorry, I mean on heroku. Try and whatever else buildpacks needed for your application (if any) ``` heroku buildpacks:clear heroku buildpacks:set heroku/nodejs heroku buildpacks:add heroku/ruby ```

frosch said over 2 years ago on Using Bootstrap Themes :
yeah yarn is going threw. i tested now deploying without fontawesome and the app is building fine and working.

plasschaert PRO said over 2 years ago on Using Bootstrap Themes :
Hi! I'm using Material Dashboard Pro from Creative Tim. I did the `yarn install` and `yarn add bootstrap jquery popper.js`, but I'm getting the following error in my Chrome inspect console: ``` Uncaught Error: Cannot find module 'moment' at webpackMissingModule (bootstrap-datetimepicker.min.js:47) at bootstrap-datetimepicker.min.js:47 at Object../vendor/assets/javascripts/plugins/bootstrap-datetimepicker.min.js (bootstrap-datetimepicker.min.js:47) at __webpack_require__ (bootstrap:19) at Module../app/javascript/packs/application.js (application.js:1) at __webpack_require__ (bootstrap:19) at bootstrap:83 at bootstrap:83 ``` I'm also getting the following errors in my logs: ``` WARNING in ./vendor/assets/javascripts/plugins/moment.min.js Module not found: Error: Can't resolve './locale' in '/Users/sebastianplasschaert/rss-to-speech/vendor/assets/javascripts/plugins' @ ./vendor/assets/javascripts/plugins/moment.min.js @ ./app/javascript/packs/application.js ERROR in ./vendor/assets/javascripts/plugins/jquery.dataTables.min.js Module not found: Error: Can't resolve 'datatables.net' in '/Users/sebastianplasschaert/rss-to-speech/vendor/assets/javascripts/plugins' @ ./vendor/assets/javascripts/plugins/jquery.dataTables.min.js 33537:47-33539:4 33647:47-33649:4 34200:47-34202:4 35084:47-35086:4 35196:47-35198:4 35855:47-35857:4 36480:47-36482:4 36573:47-36575:4 37095:47-37097:4 37668:47-37670:4 37911:47-37913:4 38332:47-38334:4 38982:47-38984:4 39130:47-39132:4 39448:47-39450:4 39836:47-39838:4 @ ./app/javascript/packs/application.js ERROR in ./vendor/assets/javascripts/plugins/jquery.dataTables.min.js Module not found: Error: Can't resolve 'datatables.net-autofill' in '/Users/sebastianplasschaert/rss-to-speech/vendor/assets/javascripts/plugins' @ ./vendor/assets/javascripts/plugins/jquery.dataTables.min.js 34180:47-34182:4 @ ./app/javascript/packs/application.js ERROR in ./vendor/assets/javascripts/plugins/jquery.dataTables.min.js Module not found: Error: Can't resolve 'datatables.net-bs4' in '/Users/sebastianplasschaert/rss-to-speech/vendor/assets/javascripts/plugins' @ ./vendor/assets/javascripts/plugins/jquery.dataTables.min.js 34180:47-34182:4 35049:47-35051:4 38942:47-38944:4 @ ./app/javascript/packs/application.js ERROR in ./vendor/assets/javascripts/plugins/jquery.dataTables.min.js Module not found: Error: Can't resolve 'datatables.net-buttons' in '/Users/sebastianplasschaert/rss-to-speech/vendor/assets/javascripts/plugins' @ ./vendor/assets/javascripts/plugins/jquery.dataTables.min.js 35049:47-35051:4 35084:47-35086:4 35196:47-35198:4 35855:47-35857:4 36480:47-36482:4 @ ./app/javascript/packs/application.js ERROR in ./vendor/assets/javascripts/plugins/jquery.dataTables.min.js Module not found: Error: Can't resolve 'datatables.net-responsive' in '/Users/sebastianplasschaert/rss-to-speech/vendor/assets/javascripts/plugins' @ ./vendor/assets/javascripts/plugins/jquery.dataTables.min.js 38942:47-38944:4 @ ./app/javascript/packs/application.js ERROR in ./vendor/assets/javascripts/plugins/bootstrap-datetimepicker.min.js Module not found: Error: Can't resolve 'moment' in '/Users/sebastianplasschaert/rss-to-speech/vendor/assets/javascripts/plugins' @ ./vendor/assets/javascripts/plugins/bootstrap-datetimepicker.min.js 55:49-80 @ ./app/javascript/packs/application.js ERROR in ./vendor/assets/javascripts/plugins/fullcalendar.min.js Module not found: Error: Can't resolve 'moment' in '/Users/sebastianplasschaert/rss-to-speech/vendor/assets/javascripts/plugins' @ ./vendor/assets/javascripts/plugins/fullcalendar.min.js 7:79-96 @ ./app/javascript/packs/application.js Rendered shared/_nav.html.erb (Duration: 1.2ms | Allocations: 306) Rendered shared/_footer.html.erb (Duration: 0.7ms | Allocations: 120) Completed 200 OK in 10326ms (Views: 10312.9ms | ActiveRecord: 0.0ms | Allocations: 15581) ``` The paths seem to be correct but the modules aren't loading. Any ideas on what could be going wrong?

David Kimura PRO said over 2 years ago on Using Bootstrap Themes :
In the `vendor/assets/javascripts/plugins` folder, do you have the datatables, datetimepicker, moment, etc libraries in there?

dom.davies said over 2 years ago on Using Bootstrap Themes :
FYI in March 2020
If rendering the sidebar partial is throwing an error -

I had to add layouts to the path

<%= render 'layouts/navigations/sidebar' %>

Gabriel González Zabala said over 2 years ago on Using Bootstrap Themes :
Hi! Great tutorial, totally worth it!
I used the resume theme https://startbootstrap.com/themes/resume/
Everything went really good except from the js I think, the automatic scrolling between sections doesn't work. It just go like a normal link.
Here are the errors that I see in the terminal:

ActionController::RoutingError (No route matches [GET] "/vendor/bootstrap/js/bootstrap.bundle.min.js"):
ActionController::RoutingError (No route matches [GET] "/vendor/jquery/jquery.min.js"):
ActionController::RoutingError (No route matches [GET] "/js/resume.min.js"):
ActionController::RoutingError (No route matches [GET] "/vendor/jquery-easing/jquery.easing.min.js"):
ActionController::RoutingError (No route matches [GET] "/img/profile.jpg"):
ActionController::RoutingError (No route matches [GET] "/vendor/bootstrap/js/bootstrap.bundle.min.js"):
ActionController::RoutingError (No route matches [GET] "/vendor/jquery-easing/jquery.easing.min.js"):
ActionController::RoutingError (No route matches [GET] "/js/resume.min.js"):

Any help will be very much appreciated!

.



David Kimura PRO said over 2 years ago on Using Bootstrap Themes :
  My thoughts are that you still have references to the javascript files in your application layout file. This is what is found in their template which seems to match with what you have in your errors. You probably don't need the jquery and bootstrap references, but may need to import in the jquery.easing and the resume javascript files.

  <!-- Bootstrap core JavaScript -->
 |   <script src="vendor/jquery/jquery.min.js"></script>
 |   <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
 | 

 |   <!-- Plugin JavaScript -->
 |   <script src="vendor/jquery-easing/jquery.easing.min.js"></script>
 | 

 |   <!-- Custom scripts for this template -->
 |   <script src="js/resume.min.js"></script>

Gabriel González Zabala said over 2 years ago on Using Bootstrap Themes :
  Thanks for you answer. I thought the same but I followed the tutorial and make sure that there is no references in the application layout file.
Weird thing is that is working for the stylesheets but not the js...
This is my application layout:

<!DOCTYPE html>
<html>
  <head>
    <title>Blog</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload', defer: true %>
    <%= stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload', defer: true %>

    <!-- Custom fonts for this template -->
    <link href="https://fonts.googleapis.com/css?family=Saira+Extra+Condensed:500,700" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Muli:400,400i,800,800i" rel="stylesheet">

  </head>

  <body id="page-top">
    <%= render 'layouts/navigations/sidebar' %>

    <div class="container-fluid p-0">

      <section class="resume-section p-3 p-lg-5 d-flex align-items-center" id="about" style="background-color: #100C08;">
        <%= yield %>
      </section>

      <hr class="m-0">

      <%= render 'layouts/navigations/experience' %>

      <hr class="m-0">

      <%= render 'layouts/navigations/education' %>

      <hr class="m-0">

      <%= render 'layouts/navigations/skills' %>

      <hr class="m-0">

      <%= render 'layouts/navigations/interests' %>

      <hr class="m-0">

     <%= render 'layouts/navigations/awards' %>

    </div>
  </body>
</html>

muhammadyana said over 2 years ago on Using Bootstrap Themes :
hi, how to call font lcoal url in webpakcer? 
@font-face {
  font-family: 'NeoSans';
  font-style: normal;
  font-weight: normal;
  src: local('NeoSans'), 
  font-url('NeoSans-Medium.woff') format('woff');
  }
  
  @font-face {
  font-family: 'NeoSans Bold';
  font-style: normal;
  font-weight: normal;
  src: local('NeoSans Bold'), 
  font-url('NeoSans-Bold.woff') format('woff');
  }
  @font-face {
    font-family: 'Avenir ';
    font-style: normal;
    font-weight: normal;
    src: local('Avenir'), 
    font-url('Avenir-Medium-webfont.woff') format('woff');
    }
this is my configuration
and the font assets in app/vendor/fonts/NeoSans-Bold.woff

salochara said over 2 years ago on Using Bootstrap Themes :
Hello everyone !
Hope everyone is healthy and safe. 

I've followed this great tutorial and I'm having a small (though important) issue. My website is not responsive to small devices... it just stays with the desktop layout. 
I've also downloaded the source code of the example and it has the same issue. 
Any leads on how to make it responsive ? Technically it should be automatic because of bootstrap but I can't find what's missing. 
Thanks in advance and stay safe!

David Kimura PRO said over 2 years ago on Using Bootstrap Themes :
  try adding a viewport in the head of your layout

<meta name="viewport" content="width=device-width, initial-scale=1">

salochara said over 2 years ago on Using Bootstrap Themes :
Awesome! Thank you, it works!

Why does this work though ? haha 

kroe761 said about 2 years ago on Using Bootstrap Themes :
Excellent demo!  But, for those who are having problems with javascript after this process, change the top line of sb-admin-2.js (or sb-admin-2.min.js) from:

(function($) {

to this (if using Rails 5/6)
$(document).on('turbolinks:load', function() {

or this (if using Rails <= 4)
$(document).on('page:change', function() {

Anthony Mäkelä said almost 2 years ago on Using Bootstrap Themes :
Any particular reason to add the files inside the vendor folder? Couldn't they be just added to the regular assets?

David Kimura PRO said almost 2 years ago on Using Bootstrap Themes :
  You could add it to the regular assets. I prefer to add any external sources to a separate place. You could put them in a vendor folder within the regular assets. Just having that bit of separation is nice because it's a reminder that we shouldn't ever manually change these files as upgrading to a newer version of the theme would "undo" our changes.

Simon Kiteley PRO said over 1 year ago on Using Bootstrap Themes :
Hi. Are tooltips working for anyone? Any tips.

Douglas Crowder said 10 months ago on Using Bootstrap Themes :
Where do we put the images?  Your video shows the user image, mine does not.

David Kimura PRO said 10 months ago on Using Bootstrap Themes :
What have you tried, and where are the images (asset pipeline, public folder or user uploaded)?

peter.mcleod PRO said 6 months ago on Using Bootstrap Themes :
Hi David, any thoughts about updating this following the release of Rails 7. From what I can see Webpacker is no longer included by default. Thus I don't have a webpacker.yml file etc when I create a new project.

Login to Comment