如何调整/使用为网站制作的模板以适应 Symfony？

Question

I'm working on a Symfony project/website (beginner level) and I'm planning on using a template (this one https://github.com/ColorlibHQ/AdminLTE ) made with HTML/CSS/JS and a lot of JQuery plugins. Now, I know how to use Twig templates and wanted to adapt that design to my website, but I'm facing a couple of problems and don't know how to do it:

• That template has a package.json file with the dependencies that the template needs to run. (Bootstrap, FontAwesome, Datatables.net, Sweetalerts, etc.) How do I install those dependencies with their exact versions on my project? Until now I've always used composer to install Symfony dependencies to my project, but can I use npm as well? Can I just copy the dependencies from the template's package.json to mine and perform npm install?

• After installing those dependencies, how will my folder structure be? (My project has the basic structure of any Symfony app, following the official docs) All new plugins installed will go inside the node-modules folder?

• I'm still researching how the Webencore files work, will I need to use require() to import all of the plugins that my website will need after installing them? I guess I would need to do the same for the CSS.

Here's a screenshot of my Symfony project structure and my package.json file after installing Webencore.:

I'm sorry if the question doesn't make a lot of sense or if I'm asking for too much. Or maybe my idea/plan is wrong.

Answer 1

I'm not an expert as well but i will try to help you.

Composer works for Symfony bundles (composer.json) but here you should use yarn or npm to install your packages (package.json).

First install Yarn: https://classic.yarnpkg.com/en/docs/install/#windows-stable

and i think just "yarn" in your line command should work to install it after.

Also install Webpack encore if it's not done yet: https://symfony.com/doc/current/frontend.html

Then install your package by doing: yarn add admin-lte@^3.0

All the necessary files will be downloaded into the node modules and will live here.

Do the same for bootstrap, sweet alert and all the packages you need (search for the package name on google).

In your App.js you can do something like this to use a package (new javascript version):

import $ from 'jquery';
import 'bootstrap';
import 'bootstrap-datepicker';

and do the same for every package you need in your App.js import is for new javascript version, and require for the old one.

I hope it helps a bit:)