Implement on rails
Good morning
I bought the Metronic pack to implement it on an EXISTING rail application.
I see that it is much more complicated than it seems. I tried to follow the tutorial, but the "npm run build" does not work. However, I followed step by step.
Then, reading the exchanges, I thought it might be interesting to go through HTML, but despite having copied and pasted the contents of the src folder into my assets folder, it doesn't work if I do a simple test with the star code....
Is there a miracle solution? Because I have already lost more than 3 hours trying to understand, without success....
Thank you
Replies (5)
Hi,
To use the fonts and icons from the Metronic theme, you need to adjust the paths in the style.bundle.css file to point to the correct location. For example, if you copy the fonts folder to public/fonts, you need to change url(../fonts/...) to url(/fonts/...) in the style.bundle.css file. You can also use a custom SASS variable to set the font path, as explained in this article2.
You don’t need to uninstall Bootstrap, since Metronic is based on Bootstrap and uses its components and utilities. However, you may want to avoid importing any Bootstrap files that are already included in the Metronic theme, such as bootstrap.css or bootstrap.bundle.js, to avoid duplication and conflicts.
Hi Quentin,
If you're already working with your own Rails application and wish to integrate Metronic assets without overwriting your existing setup, you might find it more suitable to use the HTML version of Metronic. This way, you can selectively import the required JavaScript and CSS files and integrate them into your Rails application where needed.
To achieve this, you can use the Layout Builder tool available in Metronic. This tool allows you to export specific layout partials, such as headers, footers, and sidebars, which you can then integrate into your Rails application as needed. You can access the Layout Builder here:
Metronic Layout Builder
Regarding a potential issue with the webpack build in the Metronic Rails starterkit, you can try the following workaround: In the file `/starterkit/_keenthemes/tools/webpack.config.js`, set const dev = false; . Please retry with the build. Sorry for the inconvenience.
In case you encounter further challenges, you could also explore using Gulp for the build process, as an alternative to webpack.
If you have any more questions or need assistance, please don't hesitate to ask.
Thank you for your comeback.
I looked a lot last night, and I managed to import the js and scss bundle by following this tutorial https://lukaszmarcinkowski.medium.com/how-to-use-metronic-8-theme-from-themeforest -with-ruby-on-rails-6-application-and-webpack-c2cee18705bf
The step that doesn't work is the following, when I have to do "./bin/webpack-dev-server". I use controllers on my rails app, so I have an app/javascript folder in which I have a controller folder (where I put all the JS files) and an application.js file where I centralize everything. If I put "import './scripts.bundle.js'" there by putting in a "pack" folder, it doesn't work, so I put the file in controllers but suddenly I don't think that will it be well executed?
Another thing, I had to deactivate all my SCSS files that I had so that it approaches your elements at the level of the style. I'm close to it, but the fonts/fonts don't apply (while ALL my css is disabled apart from the style.bundle.css file. Is the tutorial missing a part by not saying a import assets, plugins, etc...
And from the beginning I was working with bootstrap. Should I uninstall it? ("yarn remove bootstrap"?)
If I import everything (which would be the easiest I think), is there a big risk of slowing down the app? (given the length in time of the "yarn" command).
Hi Quentin,
Firstly, please ensure that you have all the prerequisites installed as mentioned in the tutorial. If you encountered an error during the npm run build process, it would be helpful to know what specific error message you received. This will give us a better understanding of what might be causing the issue.
Also, please double-check that you are following the correct documentation URL for your version of Metronic: https://preview.keenthemes.com/rails/metronic/docs/getting-started/build
Regarding copying the contents of the src folder into your assets folder, make sure that you've copied the compiled and processed assets, not just the raw source files. The build tool processes the files and outputs the compiled assets into the assets folder.
If you could provide more details about the error you encountered or any specific issues you're facing, I would be happy to assist you further. We're here to help you, and we'll do our best to guide you through the process and find a solution. Thank you for your patience, and I look forward to helping you resolve this.
Thanks
Hello Faizal
Thank you for your reply.
When I try npm run build, I receive this message :
➜ tools npm run build
> keenthemes@1.0.0 build
> webpack
Source: /home/quentinvandenbulcke/code/Quentinvandenbulcke/rails_demo1/themes/npm_version/html/src
Output: /home/quentinvandenbulcke/code/Quentinvandenbulcke/rails_demo1/themes/npm_version/html/dist/assets
>> Building npm_version bundle...
>> Failed to compile npm_version bundle!
resolve "./../../../themes/npm_version/html/src/sass/plugins.scss" in "/home/quentinvandenbulcke/code/Quentinvandenbulcke/rails_demo1/starterkit/_keenthemes/tools"
using description file: /home/quentinvandenbulcke/code/Quentinvandenbulcke/rails_demo1/starterkit/_keenthemes/tools/package.json (relative path: .)
Field "browser" doesn"t contain a valid alias configuration
No description file found in /home/quentinvandenbulcke/code/Quentinvandenbulcke/rails_demo1/themes/npm_version/html/src/sass or above
no extension
Field "browser" doesn"t contain a valid alias configuration
/home/quentinvandenbulcke/code/Quentinvandenbulcke/rails_demo1/themes/npm_version/html/src/sass/plugins.scss doesn"t exist
.js
Field "browser" doesn"t contain a valid alias configuration
/home/quentinvandenbulcke/code/Quentinvandenbulcke/rails_demo1/themes/npm_version/html/src/sass/plugins.scss.js doesn"t exist
.scss
Field "browser" doesn"t contain a valid alias configuration
/home/quentinvandenbulcke/code/Quentinvandenbulcke/rails_demo1/themes/npm_version/html/src/sass/plugins.scss.scss doesn"t exist
as directory
/home/quentinvandenbulcke/code/Quentinvandenbulcke/rails_demo1/themes/npm_version/html/src/sass/plugins.scss doesn"t exist
ERROR in css/style.bundle
Module not found: Error: Can"t resolve "./../../../themes/npm_version/html/src/sass/plugins.scss" in "/home/quentinvandenbulcke/code/Quentinvandenbulcke/rails_demo1/starterkit/_keenthemes/tools"
ERROR in css/style.bundle
Module not found: Error: Can"t resolve "./../../../themes/npm_version/html/src/sass/style.scss" in "/home/quentinvandenbulcke/code/Quentinvandenbulcke/rails_demo1/starterkit/_keenthemes/tools"
ERROR in js/scripts.bundle
Module not found: Error: Can"t resolve "./../../../themes/npm_version/html/tools/webpack/scripts.js" in "/home/quentinvandenbulcke/code/Quentinvandenbulcke/rails_demo1/starterkit/_keenthemes/tools"
ERROR in unable to locate "/home/quentinvandenbulcke/code/Quentinvandenbulcke/rails_demo1/themes/npm_version/html/src/media" glob
webpack compiled with 4 errorsI confirm you that I well remove "type" : "module"
It's also important to note that I already use my own rails application. So I need to be able to load the assets without overwriting what's existing, is that possible?
And is it possible to select the modules that interest me (ex: the left menu, tables, ...) or once I load the pack, it's all or nothing? (I'm afraid to load a lot of unnecessary things that will slow down the application)
thank you
