double webpack config in symfony demo starterkit project, why ? how to add/import metronic to a fresh new symfony project ?
So I just downloaded the metronic demo starterkit symfony version.
I noticed that following the steps in the guide (https://preview.keenthemes.com/symfony/metronic/docs/getting-started), you need to run/build a new webpack configuration inside the assets folder of the same project. Is it normal ?
go here:
cd starterkit/_keenthemes/tools
then run
yarn install
This will generate a new node_module in this folder, but we have already also the webpack config in the root of the project (webpack.config.js, package.json, node_modules).
at the end we will have two files for each of the main "assets files" (webpack.config.js, package.json, node_modules) in different places.
also If I have already a symfony project and I want to add to it metronic, what are all the steps to do?
can you make (or pass a link) a full complete guide/video with all the step/details to follow, please?
curiosity:
there are some projects in progress to add some sort of command line to install/add metronic to the project ?
Something like: yarn install metronic --license xxxxxxxx
PS.
- I tried to check also Laravel (that i don't know), but the project structure is different so, please don't suggest it, because I will not understand it, sorry my bad.
- please if you can, add symfony as tag in this support area, so for us is easier to search the questions, and we can help each other <3
Thanks for your time ! I love your product it's amazing and sorry for my English hahah :-)
Replies (5)
Hi Diego,
Thank you for your message and your questions regarding the Metronic demo starterkit for Symfony. I understand that you have some concerns about the webpack configuration and the duplication of files.
Regarding the webpack configuration, it is normal to have a separate webpack configuration inside the assets folder of the project. This allows you to customize and build the assets specific to the Metronic theme. The root-level webpack configuration (webpack.config.js) is the default configuration for Symfony.
As for the duplication of files (webpack.config.js, package.json, node_modules), the ones located in the starterkit/assets/_keenthemes folder are specifically for the core assets of Keenthemes. If you need to customize the existing assets or add additional ones, you can use the build tools provided in that folder.
When you build the assets from the starterkit/assets/_keenthemes folder, it will generate the bundled assets, which can be found in the starterkit/public/assets folder. These bundled assets are optimized and ready to be used in your Symfony project.
Once the assets are built and located in the public/assets folder, you can include them in your Symfony templates or layouts to utilize the Metronic theme components and styles.
Regarding your curiosity about a command line installation for Metronic, currently, there is no specific command-line tool for installing or adding Metronic to a project. The installation process involves copying the assets and configuring the build tools manually.
Unfortunately, we do not have a video tutorial available at the moment. However, the provided guide ( https://preview.keenthemes.com/symfony/metronic/docs/getting-started ) should provide detailed steps and instructions for integrating Metronic with Symfony.
If you have any further questions or need additional assistance, please don't hesitate to ask.
Thanks
Thanks for your answer !
You're welcome! If you have any more questions or need further assistance, feel free to ask.
An update for the interested one + some bugs to report:
imagine having a fresh new symfony project.
1. you install webpack encore, install yarn then build (we are in the project root)composer require symfony/webpack-encore-bundleyarn install && yarn dev
2. now download symfony package from keen website
<a>https://devs.keenthemes.com/metronic/symfony/demo1/download</a>
3. now we copy what we need, from what we have just downloaded, into our project
- copy the twig.yaml file
- copy the routes.yaml file
- copy the services.yaml file
- copy the _keenthemes folder in your assets folder
- copy the templates folder
- copy the controllers folder
- (optional) rename the Service folder in Helpers
- (optional) then rename it everywhere, just search this
use App\Service\ThemeHelper;and replace it withuse App\Helpers\ThemeHelper; - (if you use webpack instead of gulp) remove this line from the package.json file here root/assets/_keenthemes/tools
"type": "module",(line ~9) - (important bug!) fix this line from the webpack.config.js file here root/assets/_keenthemes/tools
old line: (line ~16)let rootPath = path.resolve(__dirname, '../..');new line:let rootPath = path.resolve(__dirname, '../../..'); - (important bug!) fix this line from the webpack.config.js file here root/assets/_keenthemes/tools
old line: (line ~16)const srcPath = rootPath + '/_keenthemes/src' + themePath;new line:const srcPath = rootPath + '/assets/_keenthemes/src' + themePath; - add these lines to the .gitignore file:
/assets/_keenthemes/tools/node_modules//public/assets/
now we install
move to this folder
cd root/assets/_keenthemes/tools folder of your projectinstall:
yarn install(still in same folder)
build:
npm run build(! Remember yarn install it won't work here)now you should be able to have metronic installed.
symfony server:startHi Diego,
Thank you for reporting the bugs. We appreciate your contribution to improving the installation process of Metronic in Symfony projects. We will thoroughly investigate the issues you mentioned and work on providing the necessary fixes. Your feedback helps us ensure a better experience for all users. If you have any further questions or encounter any other issues, please don't hesitate to reach out.
Thank you again!
