CODEWITHSUNDEEP
symfony4semantic-ui
MFr
MFr

Reputation: 65

Symfony 4 - correct Semantic UI integration

I want to integrate Semantic UI in my Symfony 4.3 project. I installed with npm:

npm install semantic-ui --save

But is it correct to build the Semantic folder in the root of the Symfony project? 

/semantic (default)

Or must I go to the node_modules semantic folder and run gulp build there? Is there help for me how to implement correct in Symfony?

THX Mike

Upvotes: 0

Views: 941

Answers (1)

Mike Doe
Mike Doe

Reputation: 17576

You are supposed to build all assets: javascripts, stylesheets, images etc… bundle together and put inside the public/ directory (in public/build or public/assets etc…).

For that you need Webpack, it's currently the best bundler out there. The Encore project integrates this very well with Symfony. Check out the documentation on how to manage assets in a Symfony project.

After the deployment on the production, the node_modules directory on the remote server can be safely removed to free up the disk space.

Regarding wiring everything together, create a front directory in the main app. There create your application, eg. app.js in which you load all your javascript files, the Semantic, etc… Using Encore:

Encore
  .setOutputPath('public/build/')
  .setPublicPath('/build')
  .addEntry('app', './front/app')
  // more skipped for brevity

when you build the project, is going to be emitted to the public/build directory by the Webpack.

In your base-template.html.twig including the css is as simple as putting:

{{ encore_entry_link_tags('app') }}

in the head section and:

{{ encore_entry_script_tags('app') }}

just before closing body.

Should you have any questions regarding feel free to post another question. Good luck.

Upvotes: 0

Related Questions