I tried to integrate Twitter Bootstrap 3.2 on my Symfony 2.3 project.
Just found Tutorials for Bootstrap 3.0 with leafo/lessphp , but this is not supported anymore and in addition it is not working for Bootstrap 3.2 . I found nothing similar to leafo/lessphp that supports the latest Bootstrap version.
Is there any way to integrate Bootstrap 3.2 on a Symfony 2.3 project ?
Regards
symfony 2.6 Simple install and update via composer. It is just for fonts,css,js.
composer.json
"require": {
"twbs/bootstrap": "~3.3"
}
"post-install-cmd": [
"php -r \"if (!file_exists('web/bundles/bootstrap/')){ symlink(__DIR__.'/vendor/twbs/bootstrap/dist', 'web/bundles/bootstrap');}\""
]
"post-update-cmd": [
"php -r \"if (!file_exists('web/bundles/bootstrap/')){ symlink(__DIR__.'/vendor/twbs/bootstrap/dist', 'web/bundles/bootstrap');}\""
]
base.html.twig
<link href="{{ asset('bundles/bootstrap/css/bootstrap.min.css') }}" rel="stylesheet"/>
<script src="{{ asset('bundles/bootstrap/js/bootstrap.min.js') }}"></script>
Then run command in web root
composer update twbs/*
It depends from what do you mean by integrating: if you mean just including the CSS and JS files, just download them,include them in your assets folder and require them from you templates.
If you want to have control over the way the LESS/SASSS source is generated, you may be interested on this bundle [which did magically show up as the first result after googling for "symfony bootstrap"].
You have just to include CSS and JS files in twig file like this :
<link rel="stylesheet" href="{{asset('bundles/bundleName/css/bootstrap.css')}}">
<script src="{{ asset('bundles/bundleName/js/bootstrap.min.js') }}" ></script>
Sorry for being unclear.
I'm using composer and config.yml to load the files.
I also took a look yesterday at the bundle (first result), but for bootstrap 3.0 there was an easy way to configure, so i asked myself if there was also an easy way to do it with bootstrap 3.2.
I don't want to include the js and css files manually, want to let this be done by composer / Symfony.
This was the way it worked with bootstrap 3.0:
http://mossco.co.uk/symfony-2/symfony-2-and-bootstrap-3-assetic-config-and-base-html-template-file/
As the less is not supported / developed anymore, it doesnt work for 3.2 bootstrap.
Hope the question is now clearly enough. If theres any approach without the bundle you'd really help me.
If this is the easiest and most reliable way: https://github.com/braincrafted/bootstrap-bundle
i will use that bundle.
Related
I'm new to laravel and I'm using laravel 5.6 but the problem is when I run auth:make command it execute and display some login field and register field. My question is why front end desing is not working after running auth:make command in laravel. I have uploaded image it shows only html content but front-end desing is not showing.
Go to :
app/resources/views/auth/layouts/app.blade.php.
find this (line 20 probably):
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
and replace it with this:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
it works for me laravel 8.x.
https://laravel.com/docs/5.6/frontend
While Laravel does not dictate which JavaScript or CSS pre-processors you use, it does provide a basic starting point using Bootstrap and Vue that will be helpful for many applications. By default, Laravel uses NPM to install both of these frontend packages.
So if you want to use default "front end design" (bootstrap) that comes default by Laravel, and want to use method that Laravel recommends(npm) than you must follow the documentation above.
Did you install node and npm then run the following commands in your laravel root directory ?
npm install
npm run dev
These commands compile related javascript and scss/css files and build your front end.
Also following are some other documents about this subject :
Installation of Node & npm :
https://www.digitalocean.com/community/tutorials/how-to-install-node-js-on-ubuntu-16-04
https://nodejs.org/en/
https://www.npmjs.com
Laravel Mix And the Front-end :
https://laracasts.com/series/laravel-from-scratch-2017/episodes/14?autoplay=true
I'm a web newbie programmer,
I'm trying to learn from home to make my own web.
I have notions of php, html, js and css.
But I've found something that is not how to solve.
I'm trying to use Composer to manage Bootstrap. I installed Composer and I have run this line of code
composer require twbs/bootstrap
that has dropped a folder with files.
I do not understand is how I make html links to find the js and css files, you should do indicating the full path?
vendor / twbs / bootstrap / dist / js / bootstrap.js
Excuse me if the question is stupid but I do not know how I should continue.
Amd excuse my English, I'm learning too but by now I use google translate
You could use a post update command in the composer.json file:
"scripts": {
"post-update-cmd": [
"rm -rf public/bootstrap",
"cp -R vendor/twbs/bootstrap/dist public/bootstrap"
]
}
And then just include the javascript- and css-files like this:
<script type="text/javascript" src="{{ ROOT_URL }}bootstrap/js/bootstrap.min.js"></script>
<link href="{{ ROOT_URL }}bootstrap/css/bootstrap.min.css" rel="stylesheet">
Yes, Composer downloads the dependencies by default into the vendor folder. So Bootstrap will also land in the vendor folder, which is not the correct place to reference it or include it.
composer require twbs/bootstrap ➔ vendor/twbs/bootstrap/dist/js/bootstrap.js
Your next step would be to write a little helper script to copy the Boostrap files you need, into your public/assets folder. You could copy the complete dist folder including sub-folders (vendor\twbs\bootstrap\dist) into public or public\assets.
Please overwrite existing files, e.g. if a file exists remove it, then copy it. This allows to easily update the files, when you need to update the Bootstrap vendor package again.
Of course, you could also just copy the files manually or create a symlink. It depends.
That gives you the following directory structure:
public
\- assets
|- css
|- js
\- fonts
\- index.html
When the Boostrap assets are copied you can start to include them, in your index.html or template (assets\js\bootstrap.min.js, etc.).
Referencing: https://stackoverflow.com/a/34423601/1163786 which shows also other solutions to this problem, e.g. fxp/composer-asset-plugin, bower, grunt.
Unless you need customization inside bootstrap (e.g. building scss), the most simple solution is relying on a CDN (as a bonus, you get super-fast caching of assets)
So, simply call your assets like so:
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
Composer is a super-excellent tool for backend dependencies, but not the best one for frontend.
If you want to have the files in your server, and you don't want to use npm, grunt or another frontend library manager, you can simply download the files listed in Massimiliano's answer and put them inside your js/css folders:
First download these files (updated to the most recent Bootstrap 3 version):
http://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
http://code.jquery.com/jquery-2.2.4.min.js
http://netdna.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js
And put them in these folders (starting from the root of your project):
public/css/bootstrap.min.css
public/js/jquery-2.2.4.min.js
public/js/bootstrap.min.js
Now, you want to be able to call them in the blade templates for your views. It's simple: just add <link> and <script> tags as normal for any css/js file, adding the following to your blade template:
<link href="{{ url('css/bootstrap.min.css') }}" rel="stylesheet" type="text/css" />
<script src="{{ url('js/jquery-2.2.4.min.js')}}"></script>
<script src="{{ url('js/bootstrap.min.js')}}"></script>
P.s.: if you see the console, it shows something as the following error message:
Source map error: request failed with status 404
Resource URL: http://localhost:8000/css/bootstrap.min.css
Source Map URL: bootstrap.min.css.map
This will not affect the style of your page, and you can simply ignore this message, or remove a line from the bootstrap file as the answers to this question suggest. This answer explain a bit more.
My Symfony2 project has a composer.json file which references the CKEditor package:
"require": {
...
"ckeditor/ckeditor": "4.4.*"
},
When I include the main Javascript file in my Twig view:
{% javascripts
'../vendor/ckeditor/ckeditor/ckeditor.js'
%}
<script src="{{ asset(asset_url) }}"></script>
{% endjavascripts %}
it renders a script path with the following URL:
http://myproject.local/app_dev.php/js/1c365ca_ckeditor_2.js"
This would be fine if it was a standalone Javascript file, but ckeditor.js is unable to reference its many other dependencies in the vendor/ckeditor directory. Even if I explicitly included them all with assetic, I'd be unable to update their relative paths so that they could be seen by ckeditor.
I'm sure this issue applies with all large Javascript libraries. How is this normally approached?
I had exactly the same problem and I think assetic is not the best tool when dealing with third party standalone libraries, which are not integrated in bundles.
So I found a workaround by creating a symboling link to ckeditor vendor directory in the web directory of my symfony project:
cd web
ln -s ../vendor/ckeditor/ckeditor/ ./ckeditor
Then in my twig template I call the CKeditor script like this:
<script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
<script type="text/javascript">
// Change CKeditor basepath configuration
CKEDITOR.basePath = "/ckeditor/";
// Replace the <textarea id="editor1"> with a CKEditor
// instance, using default configuration.
CKEDITOR.replace( 'editor1' );
</script>
Have a look on the CKEditor bundle : Github - Packagist
This bundle is an integration of CKEditor for Symfony.
You can insert CKEditor area in your form.
I know this is a very basic question and I'm pretty puzzled that I couldn't find a good answer for that.
Let's say I installed twbs/bootstrap package with Composer, so it lands in its proper vendor/twbs/bootstrap/ directory. Now, what do I need to do to make it actually useful, i.e. copy the bootstrap/dist/ folder containing css/js files to the web/ folder?
Is there any (semi)intelligent 'Symfonic' way to handle this or should I a) copy/update the needed files manually, b) setup e.g. a grunt copy task for that?
I'm using Symfony 2.6 on Windows 7 if that matters.
You can only install repositories that are symfony2 bundles. In case of https://github.com/twbs/bootstrap, it isn't.
You'll have to find another bundle for symfony2 doing the same, like this one for instance: https://github.com/braincrafted/bootstrap-bundle
And as explained in their doc like almost if every bundle doc, here is how you install this bundle (the procedure is the same for the majority of them):
Installation
BraincraftedBootstrapBundle should be installed using Composer:
{
"require": {
"braincrafted/bootstrap-bundle": "~2.0"
}
}
part about Bootstrap and jQuery sniped, not directly relevant to hoiw install a bundle, go read it in the doc.
Then add the bundle to your AppKernel.php:
# app/AppKernel.php
class AppKernel extends Kernel
{
public function registerBundles()
{
$bundles = array(
// ...
new Braincrafted\Bundle\BootstrapBundle\BraincraftedBootstrapBundle(),
);
// ...
}
}
BraincraftedBootstrapBundle highly recommends you to use Assetic for
managing assets. If you do use Assetic for managing your assets, you
should now run the dump command.
php app/console assetic:dump
for posterity :
just added in my assetic config under config.yaml:
assetic:
assets:
bootstrap_css:
inputs:
- "%kernel.root_dir%/../vendor/twbs/bootstrap/dist/css/bootstrap.min.css"
filters:
- cssrewrite
output: bundles/twbs/bootstrap.css
just added after in my base.html.twig template, anywhere in the header :
<link rel="stylesheet" href="{{ asset('bundles/twbs/bootstrap.css') }}" media="screen" />
Do the trick,don't know if it's 'state of the art', but it work.
thanks to http://www.tutodidacte.com/symfony2-installer-bootstrap
As always, the official docs hold the answer: http://symfony.com/doc/current/cookbook/bundles/installation.html
I download the ckeditor and would like to integrate that in my website which is built using Symfony 2.5, reading from the documentation it seems that all third party code should go inside the vendordirectory but then what? is that all? if i put all ckeditor code inside the vendor directory then what about the js files? dont they go inside a view? I have been searching online for a solution to this and most of them seem to be pointing towards using a bundle available online which i would like to avoid and leave that as my last resort.
I have used ckeditor before with custom php and this is my first time with symfony framework, I know we are supposed to create a textarea and assign it an id or a class but what i am looking for is steps before this, for example
1) Add ckeditor to vendor
2) add it to auto load or something
3) ...
I will really appreciate if someone can direct me on how to do it?
I am not sure if this is the right way to do it but this is what worked for me.
I ended up copying the ckeditor files inside bundle/Resources/public/js
Install the assets by running the command php app/console assets:install
In your twig file add the <script src="{{ asset('bundles/blog/js/ckeditor.js') }}"></script> (please make sure to change this to your bundle name)
Assign class ckeditor to your textarea field, this is how I did it {{ form_widget(form.description, { 'attr': {'class': 'ckeditor'} }) }}
and I can see the editor on my screen
If anyone else has a better idea (other than using a bundle) I would love to hear from them
Baigs answer will work, but a problem arises when you use CKEditor in different bundles, as you will be coping the whole source directory as an asset for each bundle.
Another solution is to use "egeloen/ckeditor-bundle": "~2.0", in your composer.
You can then create a ckeditor input field in your Form and reference that in your twig file.
You can also create a ckeditor element as per the CKeditor manual in your twig page directly via javascript.
<script src="/bundles/ivoryckeditor/ckeditor.js"></script>
....
<textarea id="editor1"></textarea>
...
<script>
CKEDITOR.replace('editor1');
</script>
Note that custom plugins can be pain, the plugin needs to be stored in the project web directory, but this gets deleted everytime you update composer and dump assets. My solution to this was to create a project scriptHandler which is run with composer and copies the source files into the web public directory on update.
Like mark wrote you could use IvoryCKEditorBundle
http://symfony.com/doc/master/bundles/IvoryCKEditorBundle/installation.html
Once installed, if you want to add plugins you can use the configurations like below:
ivory_ck_editor:
default_config: default
plugins:
block:
path: "/bundles/mybundle/js/ckeditor/plugins/block/"
filename: "plugin.js
.....
configs:
default:
extraPlugins: "block"
....
toolbars:
configs:
default: ["Block"]
In my case I have a Symfony bundle called MyBundle. In Resources/public/js I have my js files.
When I load the assets, my files are pushed to the web folder /bundles/mybundle/js.
In the configuration I tell the IvoryCKEditorBundle to look for a new plugin files in that folder.
After in my default configuration, I enable my new ckeditor plugin.
And in the last line I add the new plugin to the toolbar.