Symfony 4 AdminLTE template not working properly - symfony

I am trying to implement AdminLTE for the AdminCP of my website in Symfony 4. I performed these steps:
Ran composer require kevinpapst/adminlte-bundle ^2.0
Ran cp vendor/kevinpapst/adminlte-bundle/config/packages/admin_lte.yaml config/packages/
Added .addEntry('adminlte', './assets/js/adminlte.js') to webpack.config.js
Modified package.json so it looks like:
This
{
"devDependencies": {
"#fortawesome/fontawesome-free": "~5.1.1",
"#symfony/webpack-encore": "^0.27.0",
"admin-lte": "~2.4.8",
"bootstrap-sass": "^3.3.7",
"bootstrap-select": "^1.13.1",
"daterangepicker": "^3.0.3",
"icheck": "^1.0.2",
"jquery-slimscroll": "^1.3.8",
"bootstrap": "^4.3.1",
"core-js": "^3.0.0",
"jquery": "^3.4.1",
"node-sass": "^4.12.0",
"popper.js": "^1.15.0",
"sass-loader": "^7.0.1",
"webpack-notifier": "^1.6.0"
},
"license": "UNLICENSED",
"private": true,
"scripts": {
"dev-server": "encore dev-server",
"dev": "encore dev",
"watch": "encore dev --watch",
"build": "encore production --progress"
},
"dependencies": {
"startbootstrap-blog-home": "^4.2.1"
}
}
Ran yarn install.
Added assets/js/adminlte.js with require('../../vendor/kevinpapst/adminlte-bundle/Resources/assets/admin-lte');
Ran yarn encore dev
The problem now is, the layout doesn't render properly at all. Like, it has the right text from the layout but it doesn't show the layout properly (see the attached screen).
See the problem with the layout here
The template rendered in my controller function of the route contains only this:
{% extends 'admincp/base.html.twig' %}
The admincp/base.html.twig contains this:
{% extends '#AdminLTE/layout/default-layout.html.twig' %}
{% block stylesheets %}
<link rel="stylesheet" href="{{ asset('build/adminlte.css') }}">
{% endblock %}
{% block javascripts %}
<script src="{{ asset('build/adminlte.js') }}"></script>
{% endblock %}
It doesn't throw an error or anything but it doesn't work either. It requests and gets the CSS and JS correctly.
(in case more information is needed, kindly ask and I'll provide it).

Related

CSS props brought in by the Vuetify framework being duplicated according to browser console

I have an app which uses the Vuetify framework and Laravel.
Here is what the app.blade.php where all vue pages are based to show all of the external stylesheets used. All vue pages are seeing duplicated styles:
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="prevent-horizontal-scroll">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- External stylesheets -->
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<style>
#app {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="app">
<sidebar-background>
#yield('content')
</sidebar-background>
</div>
</body>
<script src="{{ mix('/js/app.js') }}" ></script>
</html>
Example of a blade template which shows the settings page of the app called settings.blade.php based on app.blade.php:
#extends('app')
#section('title', 'Settings')
#section('content')
<div id="app">
<settings-tabs/>
</div>
#endsection
Here is my package.json file to show the versions of all packages and display whether there could be a mismatch between the versions:
{
"private": true,
"scripts": {
"dev": "mix",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"production": "mix --production",
"prod": "mix --production",
"cypress:open": "cypress open",
"postinstall": "patch-package"
},
"devDependencies": {
"#mdi/font": "^5.9.55",
"#vue/test-utils": "^1.2.1",
"browser-sync": "^2.26.14",
"case-sensitive-paths-webpack-plugin": "^2.4.0",
"cross-env": "^7.0.3",
"eslint-config-standard": "^16.0.3",
"eslint-plugin-vue": "^7.11.1",
"laravel-echo": "^1.11.0",
"laravel-mix": "^6.0.24",
"node-sass": "^6.0.1",
"pusher-js": "^7.0.3",
"resolve-url-loader": "^4.0.0",
"sass": "~1.32.13",
"sass-loader": "^12.1.0",
"vue-loader": "^15.9.7",
"vue-template-compiler": "^2.6.14",
"webpack": "^5.40.0"
},
"dependencies": {
"#ag-grid-enterprise/all-modules": "^25.3.0",
"#babel/plugin-proposal-optional-chaining": "^7.14.5",
"#cypress/vue": "^2.2.3",
"#tiptap/core": "^2.0.0-beta.85",
"#tiptap/extension-document": "^2.0.0-beta.12",
"#tiptap/extension-mention": "^2.0.0-beta.61",
"#tiptap/extension-paragraph": "^2.0.0-beta.15",
"#tiptap/extension-text": "^2.0.0-beta.12",
"#tiptap/vue-2": "^2.0.0-beta.39",
"ag-charts-community": "^3.3.0",
"ag-charts-vue": "^3.3.0",
"ag-grid-community": "^25.3.0",
"ag-grid-enterprise": "^25.3.0",
"ag-grid-vue": "^25.3.0",
"axios": "^0.21.1",
"cypress": "^7.6.0",
"interactjs": "^1.10.11",
"lodash": "^4.17.21",
"material-design-icons-iconfont": "^6.1.0",
"patch-package": "^6.4.7",
"tippy.js": "^6.3.1",
"tiptap-commands": "^1.17.1",
"tiptap-extensions": "^1.35.2",
"vue": "^2.6.14",
"vue-class-component": "^7.2.6",
"vue-easy-dnd": "^1.10.2",
"vue-property-decorator": "^8.0.0",
"vuedraggable": "^2.24.3",
"vuetify": "^2.5.5",
"vuetify-loader": "^1.7.2",
"vuex": "^3.6.2",
"yargs": "^17.0.1",
"yargs-parser": "^20.2.9"
},
"babel": {
"presets": [
[
"#babel/preset-env",
{
"targets": {
"esmodules": true
}
}
]
],
"plugins": [
"#babel/plugin-proposal-optional-chaining"
]
}
}
The Vuetify styles are being duplicated (here is what it looks like in the console of any page in the app):
I'm unsure of why they're being duplicated and also where the tag styles are coming from. It doesn't quite make sense to me why also the vuetify.min.css styles are being crossed out. Would you know what might be causing the duplicated styles based on the info above?

Symfony 4 / Webpack Encore : jQuery doesn't work

jQuery doesn't work and I can't use my bootstrap dropdown, custom javascript...
After a npm run dev (or npm run build), app.js file is well created and loads in the browser.
Compilation is done without any error.
I tried to enable .autoProvidejQuery() then npm run dev / npm run build, but nothing changes.
I am using Symfony 4.1.6
Solution found
Change .enableSingleRuntimeChunk() to .disableSingleRuntimeChunk() in webpack.config.js
If you just comment on the line, it works but you have a warning message when you run a npm run dev or npm run build.
package.json
"devDependencies": {
"#symfony/webpack-encore": "^0.22.0",
"bootstrap": "^4.2.1",
"jquery": "^3.3.1",
"popper.js": "^1.14.6",
"webpack-notifier": "^1.6.0"
},
"license": "UNLICENSED",
"private": true,
"scripts": {
"dev-server": "encore dev-server",
"dev": "encore dev",
"watch": "encore dev --watch",
"build": "encore production --progress"
},
"dependencies": {
"node-sass": "^4.11.0",
"sass-loader": "^7.1.0"
}
webpack.config.js
var Encore = require('#symfony/webpack-encore');
Encore
// directory where compiled assets will be stored
.setOutputPath('public/build/')
// public path used by the web server to access the output path
.setPublicPath('/build')
// only needed for CDN's or sub-directory deploy
//.setManifestKeyPrefix('build/')
/*
* ENTRY CONFIG
*
* Add 1 entry for each "page" of your app
* (including one that's included on every page - e.g. "app")
*
* Each entry will result in one JavaScript file (e.g. app.js)
* and one CSS file (e.g. app.css) if you JavaScript imports CSS.
*/
.addEntry('js/app', './assets/js/app.js')
.addEntry('js/ad', './assets/js/ad.js')
.addStyleEntry('css/app', './assets/css/app.scss')
//.addStyleEntry('css/bootstrap', './assets/css/bootstrap.min.css')
// will require an extra script tag for runtime.js
// but, you probably want this, unless you're building a single-page app
.enableSingleRuntimeChunk()
/*
* FEATURE CONFIG
*
* Enable & configure other features below. For a full
* list of features, see:
* https://symfony.com/doc/current/frontend.html#adding-more-features
*/
.cleanupOutputBeforeBuild()
.enableBuildNotifications()
.enableSourceMaps(!Encore.isProduction())
// enables hashed filenames (e.g. app.abc123.css)
.enableVersioning(Encore.isProduction())
// enables Sass/SCSS support
.enableSassLoader()
// uncomment if you use TypeScript
//.enableTypeScriptLoader()
// uncomment if you're having problems with a jQuery plugin
//.autoProvidejQuery()
// uncomment if you use API Platform Admin (composer req api-admin)
//.enableReactPreset()
//.addEntry('admin', './assets/js/admin.js')
;
module.exports = Encore.getWebpackConfig();
app.js
const $ = require('jquery');
global.$ = global.jQuery = $;
require('bootstrap');
base.html.twig
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>SymBNB - {% block title %}Bienvenue !{% endblock %}</title>
<meta name="viewport" content="width=device-width, user-scalable=no">
<link rel="stylesheet" href="{{ asset('build/css/app.css') }}">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.0/css/all.css" integrity="sha384-aOkxzJ5uQz7WBObEZcHvV5JvRW3TUc2rNPA7pe3AwnsUohiw1Vj2Rgx2KSOkF5+h" crossorigin="anonymous">
{# <link rel="stylesheet" href="/css/app.css"> #}
{% block stylesheets %}{% endblock %}
</head>
<body>
{% include 'partials/header.html.twig' %}
{% block body %}{% endblock %}
{% include 'partials/footer.html.twig' %}
{#<script src="/js/jquery.min.js"></script>
<script src="/js/popper.min.js"></script>
<script src="/js/bootstrap.min.js"></script>#}
<script src="{{ asset('build/js/app.js') }}"></script>
{% block javascripts %}{% endblock %}
</body>
</html>
Similar topics:
webpack symfony encore jquery third party plugins
Webpack Encore - $ is not defined
If you have enableSingleRuntimeChunk() in your webpack.config.js you need to add <script src="{{ asset('build/runtime.js') }}"></script> in your base template.
There is a Twig helper encore_entry_script_tags() to handle this automatically.
Solution found
Change .enableSingleRuntimeChunk() to .disableSingleRuntimeChunk() in webpack.config.js
If you just comment on the line, it works but you have a warning message when you run a npm run dev or npm run build.

Angular 2 app not loading in Chrome - Stuck at loading... - Backend written in Java Spring

I am new to angular2 and need help. I am working on an angular2 app whose backend is written in Java Spring. The app worked perfectly before. I did not change any code but now when I load it in chrome , it is stuck at loading... I inspected the console but there is no error. If i try to open it in firefox or safari it loads perfectly but in firefox i am unable to submit a form (maybe compatibility issues?).
The app was written in "angular2": "2.0beta.0-.14" . As Angular2 RC5 has been released so is the code outdated?
Should i have to make changes in the code?
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BMIS</title>
<base href="/">
<!-- Angular JS -->
<!-- 1. Load libraries -->
<!-- IE required polyfills, in this exact order -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="node_modules/angular2/bundles/http.dev.js"></script>
<script src="node_modules/angular2/bundles/router.dev.js"></script>
<!-- 2. Configure SystemJS -->
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js',
}
},
map: {
"angular2-jwt": "node_modules/angular2-jwt/angular2-jwt.js"
}
});
System.import('app/main')
.then(null, console.error.bind(console));
</script>
<!-- Angular JS -->
<!-- Bootstrap -->
<link href="assets/css/bootstrap.min.css" rel="stylesheet" />
<link href="assets/css/custom.css" rel="stylesheet" />
<!-- Bootstrap -->
<!-- Timeline css -->
<link href="assets/css/timeline.min.css" rel="stylesheet" />
<!-- Timeline css -->
<!-- Navigation -->
<link href="assets/css/navbar.css" rel="stylesheet" />
<script src="assets/js/navbar.js" type="text/javascript"></script>
<!-- Navigation -->
<!-- Font Awesome -->
<link rel="stylesheet" href="assets/css/font-awesome.min.css">
<!-- Font Awesome -->
</head>
<body>
<app>Loading...</app>
</body>
</html>
package.json
{
"name": "abcd",
"version": "1.0.0",
"scripts": {
"start": "concurrently \"npm run tsc:w\" \"npm run lite\" ",
"tsc": "tsc",
"tsc:w": "tsc -w",
"lite": "lite-server",
"typings": "typings",
"postinstall": "typings install"
},
"license": "ISC",
"dependencies": {
"angular2": "2.0beta.0-.14",
"es6-promise": "^3.0.2",
"es6-shim": "^0.35.0",
"ng2-radio-group": "0.0.2",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.2",
"systemjs": "0.19.24",
"zone.js": "0.6.10"
},
"devDependencies": {
"concurrently": "^2.0.0",
"lite-server": "^2.1.0",
"typescript": "^1.8.9",
"typings": "^0.7.9"
}
}
You have to follow the upgrade path. First step will be to check the upgrade path to RC1:
http://www.picnet.com.au/blogs/guido/post/2016/05/10/upgrading-from-angular-2-beta-17-to-angular-2-rc1/
Upgrading shouldn't be a problem if you don't have routing
Next thing will be upgrade to RC5. The main breaking changes is bootstrapping using NgModules. Check https://angular.io/docs/ts/latest/cookbook/rc4-to-rc5.html for exact steps.

How do I compile all my .js files into one minified file using grunt?

I'm new to grunt and I need a little help setting it up. I want to use SASS, Compass and compile all my .js files into one minified file.
The site I'm working on is not currently using grunt and I want to set it up to use it. All my .js files are included at the bottom of the page. What do I need to do to change it so that only one minified .js file contains all of the .js files?
At the bottom of my index page I have .js files included like so:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular-route.min.js"></script>
<script src="//code.angularjs.org/1.3.4/angular-sanitize.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap.min.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script src="bower_components/angular-loading-bar/src/loading-bar.js"></script>
<script src="bower_components/angular-promise-tracker/promise-tracker.js"></script>
<script src="bower_components/angular-promise-tracker/promise-tracker-http-interceptor.js"></script>
<script src="js/config.json" type="application/json"></script>
<script src="js/infinite-scroll.js"></script>
<script src="js/hotels.js"></script>
<script src="js/weather.js"></script>
<script src="js/main.js"></script>
My Gruntfile.js looks like this:
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
minified : {
files: {
src: [
'/js/src/**/*.js',
'/js/src/*.js'
],
dest: '/js/min/'
}
},
compass: {
dist: {
options: {
sassDir: 'sass',
cssDir: 'css'
}
}
},
watch: {
css: {
files: '**/*.scss',
tasks: ['compass']
}
}
});
grunt.loadNpmTasks('grunt-contrib-compass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-minified');
grunt.registerTask('default',['watch']);
}
My package.json looks like this:
{
"name": "hoteldemo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "test"
},
"author": "",
"license": "ISC",
"devDependencies": {
"grunt": "^0.4.5",
"grunt-contrib-compass": "^1.0.3",
"grunt-contrib-sass": "^0.9.2",
"grunt-contrib-watch": "^0.6.1"
}
}
You'll probably want to use something like grunt-usemin. It may even be worth your time to explore some of the generators provided by Yeoman since these generally give you the proper grunt scaffolding depending on the technologies you're using.
Using grunt-usemin alone in your project would look something like this:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular-route.min.js"></script>
<script src="//code.angularjs.org/1.3.4/angular-sanitize.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<!-- build:js js/min/app.min.js -->
<script src="bower_components/angular-bootstrap/ui-bootstrap.min.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script src="bower_components/angular-loading-bar/src/loading-bar.js"></script>
<script src="bower_components/angular-promise-tracker/promise-tracker.js"></script>
<script src="bower_components/angular-promise-tracker/promise-tracker-http-interceptor.js"></script>
<script src="js/config.json" type="application/json"></script>
<script src="js/infinite-scroll.js"></script>
<script src="js/hotels.js"></script>
<script src="js/weather.js"></script>
<script src="js/main.js"></script>
<!-- endbuild -->
You'll have to configure a grunt task to do the build for you which will be pretty specific to your setup. Just follow along with the grunt-usemin documentation.

how to make yo angular load bootstrap theme css

yo angular install bootstrap files all fine. The index.html file looks like this at the moment:
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css(.) styles/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<!-- endbower -->
<!-- endbuild -->
<!-- build:css(.tmp) styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->
This doesn't include bootstrap.theme.css file.
What is the recommended way of adding this? Do I manually go in there and add it?
The correct way to do it is override you bower.json file to load bootstrap dependencies, and then run grunt wiredep
The bower.json would look like this:
{
"name": "frontend",
"version": "0.0.0",
"dependencies": {
"angular": "^1.3.0",
"json3": "^3.3.0",
"es5-shim": "^4.0.0",
"bootstrap": "^3.2.0",
"angular-cookies": "^1.3.0",
"angular-route": "^1.3.0",
"angular-local-storage": "~0.1.5",
"raty": "~2.7.0",
"kineticjs": "~5.1.0"
},
"devDependencies": {
"angular-mocks": "~1.3.0",
"angular-scenario": "~1.3.0"
},
"appPath": "app",
"overrides": {
"bootstrap": {
"main": [
"less/bootstrap.less",
"dist/css/bootstrap.css",
"dist/css/bootstrap-theme.css",
"dist/js/bootstrap.js",
"dist/fonts/glyphicons-halflings-regular.eot",
"dist/fonts/glyphicons-halflings-regular.svg",
"dist/fonts/glyphicons-halflings-regular.ttf",
"dist/fonts/glyphicons-halflings-regular.woff"
]
}
}
}
Source: https://github.com/yeoman/generator-angular/issues/965#issuecomment-68548259
Do the following
bower install bootstrap-css --save
Add it manually below the other .css include if it's locally available on your system (e.g. in bower_components/).
If the file is not locally available I'd add it right above the <!-- Place favicon.ico ... --> otherwise it might break your grunt build and/or grunt serve because of bower trying to minify the file.
The same goes with Google Font imports, place them above the <!-- Place favicon.ico ... --> otherwise bower will try to minify it (under htmlmin options in Gruntfile.js).
Here you can read some more about the subject.

Resources