Hello I try to install sylius BootstrapTheme for my project and I have little problem when i try to install this. If need more code or code of other files for find the problem talk me
/themes/BootstrapTheme/webpack.config.js
const Encore = require('#symfony/webpack-encore');
Encore
.setOutputPath('public/bootstrap-theme')
.setPublicPath('/bootstrap-theme')
.addEntry('app', './themes/BootstrapTheme/assets/app.js')
.disableSingleRuntimeChunk()
.cleanupOutputBeforeBuild()
.enableSassLoader()
.enableSourceMaps(!Encore.isProduction())
.enableVersioning(Encore.isProduction());
const config = Encore.getWebpackConfig();
config.name = 'bootstrapTheme';
module.exports = config;
webpack.config.js
const Encore = require('#symfony/webpack-encore');
const bootstrapTheme = require('./themes/BootstrapTheme/webpack.config');
module.exports = [bootstrapTheme];
// Manually configure the runtime environment if not already configured yet by the "encore" command.
// It's useful when you use tools that rely on webpack.config.js file.
if (!Encore.isRuntimeEnvironmentConfigured()) {
Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}
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 your JavaScript imports CSS.
*/
.addEntry('app', './assets/js/app.js')
//.addEntry('page1', './assets/js/page1.js')
//.addEntry('page2', './assets/js/page2.js')
// When enabled, Webpack "splits" your files into smaller pieces for greater optimization.
.splitEntryChunks()
// 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 #babel/preset-env polyfills
.configureBabel(() => {}, {
useBuiltIns: 'usage',
corejs: 3
})
// enables Sass/SCSS support
//.enableSassLoader()
// uncomment if you use TypeScript
//.enableTypeScriptLoader()
// uncomment to get integrity="..." attributes on your script & link tags
// requires WebpackEncoreBundle 1.4 or higher
//.enableIntegrityHashes(Encore.isProduction())
// 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();
but when I when I run yarn encore production I have this error :
Duplicate name "app" passed to addEntry(): entries must be unique.
what I can do for leave this?
The error message is clear Duplicate name "app" passed to addEntry(): entries must be unique..
In your /themes/BootstrapTheme/webpack.config.js you have:
.addEntry('app', './themes/BootstrapTheme/assets/app.js')
And, in your webpack.config.js:
.addEntry('app', './assets/js/app.js')
I'm far from being an expert in Webpack but I believe you could delete the second one, as now you are using BootstrapTheme's one. If you need both the scripts, you could change the name of the entry in your webpack.config.js to something else, like:
.addEntry('someName', './assets/js/app.js')
Then you add your new tag to the twig file:
{% block javascripts %}
{{ encore_entry_script_tags('app') }}
{{ encore_entry_script_tags('someName') }}
//the rest of your js code, if you have
{% endblock %}
Related
Please, can I use Webpack encore with MAMP for build my assets in apps? Because it's activate in my IDE but nothing is display in my site...
I configured webpack encore, it launches correctly without errors in my terminal.
My assets/Images are loading on my site but not my SCSS with "yarn encore dev --watch".
And with "yarn dev-server", my assets/Images don't loading on my site but my SCSS is OK 🙃
I don't understand, please why this difference??
webpack.config.js
const Encore = require('#symfony/webpack-encore');
require("dotenv").config();
// line to add
const BrowserSyncPlugin = require("browser-sync-webpack-plugin"); // line to add
if (!Encore.isRuntimeEnvironmentConfigured()) {
Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}
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 subdirectory deploy
// .setManifestKeyPrefix('http://localhost:8888/portfolio/public/build/')
.copyFiles({
from: './assets/images',
//to: 'images/[path][name].[ext]',
// optional target path, relative to the output dir
// if versioning is enabled, add the file hash too
to: 'images/[path][name].[hash:8].[ext]',
// only copy files matching this pattern
//pattern: /\.(png|jpg|jpeg)$/
})
/*
* ENTRY CONFIG
*
* Each entry will result in one JavaScript file (e.g. app.js)
* and one CSS file (e.g. app.css) if your JavaScript imports CSS.
*/
.addEntry('app', './assets/app.js')
// .addStyleEntry('app', './assets/styles/app.css')
// enables the Symfony UX Stimulus bridge (used in assets/bootstrap.js)
.enableStimulusBridge('./assets/controllers.json')
// When enabled, Webpack "splits" your files into smaller pieces for greater optimization.
.splitEntryChunks()
// 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())
// configure Babel
// .configureBabel((config) => {
// config.plugins.push('#babel/a-babel-plugin');
// })
// enables and configure #babel/preset-env polyfills
.configureBabelPresetEnv((config) => {
config.useBuiltIns = 'usage';
config.corejs = '3.23';
})
// enables Sass/SCSS support
.enableSassLoader()
// uncomment if you use TypeScript
//.enableTypeScriptLoader()
// uncomment if you use React
//.enableReactPreset()
// uncomment to get integrity="..." attributes on your script & link tags
// requires WebpackEncoreBundle 1.4 or higher
//.enableIntegrityHashes(Encore.isProduction())
// uncomment if you're having problems with a jQuery plugin
//.autoProvidejQuery()
// entry to add
.addPlugin(new BrowserSyncPlugin(
{
host: "localhost",
port: 8888,
proxy: process.env.PROXY,
files: [
{
match: ["src/*.php"],
},
{
match: ["templates/*.twig"],
},
{
match: ["assets/*.js"],
},
{
match: ["assets/*.css"],
},
{
match: ["assets/*.jpg"],
},
],
notify: false,
},
{
reload: true,
}
))
;
// fetch the config, then modify it!
const config = Encore.getWebpackConfig();
// add an extension
config.resolve.extensions.push('json');
// export the final config
module.exports = config;
This question already has answers here:
Webpack FOSJsRoutingBundle integration with Symfony Flex and Angular
(2 answers)
Closed 4 years ago.
The issue is that I cannot get FOSJsRoutingBundle to work with Symfony Flex and Webpack.
I've been using this bundle in Symfony 3 for a long time and there's never been an issue but with the introduction of webpack, the setup has become more complex. Unfortunately the documentation for version 2.2 isn't clear.
You can find the current documentation for the bundle here: https://symfony.com/doc/master/bundles/FOSJsRoutingBundle/index.html
As you can see it recommends the following approach for Symfony Flex, so I'm writing this in code/assets/js/fos_js_routes.js:
const routes = require('../../public/js/fos_js_routes.json');
import Routing from '../../vendor/friendsofsymfony/jsrouting-bundle/Resources/public/js/router.js';
Routing.setRoutingData(routes);
with a test route in: code/assets/js/fos_routing_test.js
Routing.generate('test_route');
and then including it in webpack.config.js as:
.addEntry('app_fos_routing', [
'./assets/js/fos_js_router.js'
])
.addEntry('app_fos_generate_routes', [
'./assets/js/fos_routing_test.js'
])
and my code/templates/index.html.twig:
{{ encore_entry_script_tags('app_fos_routing') }}
{{ encore_entry_script_tags('app_fos_generate_routes') }}
However when I implement this webpack creates the following which causes a reference error ReferenceError: Routing is not defined
/***/ "./assets/js/fos_js_router.js":
/*!************************************!*\
!*** ./assets/js/fos_js_router.js ***!
\************************************/
/*! no exports provided */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _vendor_friendsofsymfony_jsrouting_bundle_Resources_public_js_router_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../vendor/friendsofsymfony/jsrouting-bundle/Resources/public/js/router.js */ "./vendor/friendsofsymfony/jsrouting-bundle/Resources/public/js/router.js");
/* harmony import */ var _vendor_friendsofsymfony_jsrouting_bundle_Resources_public_js_router_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_vendor_friendsofsymfony_jsrouting_bundle_Resources_public_js_router_js__WEBPACK_IMPORTED_MODULE_0__);
var routes = __webpack_require__(/*! ../../public/js/fos_js_routes.json */ "./public/js/fos_js_routes.json");
_vendor_friendsofsymfony_jsrouting_bundle_Resources_public_js_router_js__WEBPACK_IMPORTED_MODULE_0___default.a.setRoutingData(routes);
/***/ }),
I had the same issue in my Flex application. Here's the steps I took to make it work:
Download FOSJSRoutingBundle and make sure that the generated file in public/bundles/fosjsrouting/js/router.js looks like this.
Generate your routes with the command fos:js-routing:dump --format=json --target=public/assets/js/fos_js_routes.json
Create a JS file where you'll have to use the generated route.
test.js:
import Routing from '../../../../vendor/friendsofsymfony/jsrouting-bundle/Resources/public/js/router.min.js';
const routes = require('../fos_js_routes.json'); //file with generated routes, created after executing the command above.
Routing.setRoutingData(routes);
Routing.generate('booking_data') //use generated route
//... the rest of your JS code
Make sure that those relative paths are correct.
Add your test.js to your webpack.config.js file:
webpack:
const Encore = require('#symfony/webpack-encore');
Encore
.setOutputPath('public/build')
.setPublicPath('/build')
.setManifestKeyPrefix('')
.splitEntryChunks()
.addEntry('js/test', './public/assets/js/test.js')// JAVASCRIPT
.cleanupOutputBeforeBuild()
.enableBuildNotifications()
.enableSourceMaps(!Encore.isProduction())
.enableVersioning(Encore.isProduction())
.enableSassLoader()
.enablePostCssLoader()
.enableSingleRuntimeChunk()
;
module.exports = Encore.getWebpackConfig();
Add test.js to your template
twig:
{{ encore_entry_script_tags('js/test') }}
This is everything that I have done to make it work.
I suggest to change your import to
const routes = require('../../public/js/fos_js_routes.json');
const Routing = require('../../vendor/friendsofsymfony/jsrouting-bundle/Resources/public/js/router.js');
Routing.setRoutingData(routes);
I'm using TYPO3 version 7.6.14 and I've created an extension for client which has four controllers, four plugins and its pretty big overall. Anyway now I'm required to add option (settings variable) for dynamic or user selected "page id" which is then used to redirect from one plugin to another. There might be better solution for my problem but I'm trying to do something like:
plugin.tx_extname_basket {
view {
# cat=plugin.tx_extname_basket/file; type=string; label=Path to template root (FE)
templateRootPath = EXT:extname/Resources/Private/Templates/
# cat=plugin.tx_extname_basket/file; type=string; label=Path to template partials (FE)
partialRootPath = EXT:extname/Resources/Private/Partials/
# cat=plugin.tx_extname_basket/file; type=string; label=Path to template layouts (FE)
layoutRootPath = EXT:extname/Resources/Private/Layouts/
}
persistence {
# cat=plugin.tx_extname_basket//a; type=string; label=Default storage PID
#storagePid =
}
settings {
# cat=plugin.tx_extname_basket//a; type=int; label=Products Page ID
productsPage =
}
}
Now the problem is that even though I am 100% sure Typoscript is properly included into page where extension is loaded, the variables $this->settings['productsPage'] and in FLUID {settings.productsPage} doesn't work. I cleared whole cache and even tried removing whole typo3temp folder and it still doesn't work. I also tried debugging $this object and it says settings => NULL.
Oh the productsPage is entered in Default Root template under "SETUP" and when browsing Typoscript objects (in administration) I can see the setting set just fine. So I don't think I have invalid TypoScript.
If you have four plugins you have to set this Typoscript settings for each plugin. If your Typoscript above is included correctly, "settings" will only be accessible for the plugin "basket".
Another thing: The comments in your Typoscript seems like those settings are Typoscript constants and not Typoscript setup. In the setup you have to pass those constants to the plugin configuration too. Example:
plugin.tx_extname_basket {
settings {
productsPage = {$plugin.tx_extname_basket.settings.productsPage}
}
}
You also have to pass the other constants for templates etc. to the setup.
I want to add a asset (image) full url (with domain and base) in a twig template when running from a command line (Console Command). It's meant to be sent to email.
The problem is, using absolute_url(asset()) doesn't include the host and base path when running on console.
Also, as specificed in http://symfony.com/doc/current/console/request_context.html, it just works for urls, not for assets.
I've also tried to set the router context when running from console:
$context = $this->getContainer()->get('router')->getContext();
$context->setHost($defaultDomain);
$context->setScheme($scheme);
With no success. Any idea?
To configure the Request Context - which is used by the URL Generator - you can redefine the parameters it uses as default values to change the default host (localhost) and scheme (http)
# app/config/parameters.yml
parameters:
router.request_context.host: example.org
router.request_context.scheme: https
router.request_context.base_url: my/path
http://symfony.com/doc/current/console/request_context.html
#command
/** #var \Twig_Environment $twig */
$twig = $this->getContainer()->get('twig');
die($twig->render('view.html.twig'));
#view.html.twig
{{ absolute_url(asset('images/logo.png')) }}
#output
https://example.org/images/logo.png
In my application, special for this situation with emails, i added global variable into Twig configuration:
# app/config/config.yml
twig:
globals:
site_addr: "%site_addr%"
And setting this variable in parameters.yml
# app/config/parameters.yml
site_addr: https://some.site
And at last, in each email template i used this:
# AppBundle/Resources/views/Emails/layout.html.twig
<img src="{{ site_addr ~ asset('SomeAssetName') }}"/>
You have to define base_urls parameter.
framework:
assets:
base_urls: ['http://localhost:8000']
You can use this solution which doesn't require adding any variable or parameter on config and is the same function that is used by Twig for {{ absolute_url() }}
public function yourAction(AssetsHelper $assetsHelper, HttpFoundationExtension $httpExtension)
{
$assetsPath = $assetsHelper->getUrl('/img/test.jpg');
$assetFullUrl = $httpExtension->generateAbsoluteUrl($assetPath);
}
The complete url of your asset will be on $assetFullUrl
I'm experiencing a strange problem with extbase/fluid extension creation.
I use TYPO3 6.1
I've made an extension with a backend module on my dev server (same configuration/hardware then the prod). The module works perfectly with the path to the template :
myext/Resources/Private/Backend/Templates
myext/Resources/Private/Backend/Layouts
myext/Resources/Private/Backend/Partials
After this, I downloaded my extension's zip in the ext manager and then installer on the prod server. Now I can't use my extension because the module don't find the templates.
I've configured the extension by the same way. The templates are in the right path.
I test to move my folder to the parent level :
myext/Resources/Private/Templates
myext/Resources/Private/Layouts
myext/Resources/Private/Partials
With this it works, but in the module configuration, I specify the right path to the "Backend/" folder.
I wont to move my folder in the Private folder, I want it to run in the Private/Backend folder.
I've included the extension static template to the website root TS template.
Here's the constants :
module.tx_myext {
view {
# cat=module.tx_myext/file; type=string; label=Path to template root (BE)
templateRootPath = EXT:wng_myext/Resources/Private/Backend/Templates/
# cat=module.tx_myext/file; type=string; label=Path to template partials (BE)
partialRootPath = EXT:wng_myext/Resources/Private/Backend/Partials/
# cat=module.tx_myext/file; type=string; label=Path to template layouts (BE)
layoutRootPath = EXT:wng_myext/Resources/Private/Backend/Layouts/
}
persistence {
# cat=module.tx_myext//a; type=string; label=Default storage PID
storagePid =
}
}
And here's the setup :
module.tx_myext {
persistence {
storagePid = {$module.tx_myext.persistence.storagePid}
}
view {
templateRootPath = {$module.tx_myext.view.templateRootPath}
partialRootPath = {$module.tx_myext.view.partialRootPath}
layoutRootPath = {$module.tx_myext.view.layoutRootPath}
}
}
The main problem will be that the typoscript configurations will not get loaded on storage folders or pages without an template in the root path.
Explaination:
typoscript configuration you will set for your extension wether it is in ext_typoscript_setup, an static template or via php it will always need an system record template somewhere in the root of the page. otherwise it will not get rendered - and no path settings for your extbase extensions will happen, so the default layout, template and partial path is set and thats the place the script will look for your stuff.
Default is:
/Private/Resources/Layout/
/Private/Resources/Partials/
/Private/Resources/Templates/#Controllername/#Actionname
if you need to override these for your backendmodule you can work around that problem by injecting the settings for the view directly in your controller.
<?php
namespace VendorKey\ExtensionName\Controller;
class SettingsController extends \TYPO3\CMS\Extbase\Mvc\Controller\ActionController {
/**
* Initializes the controller before invoking an action method.
* #return void
*/
protected function initializeAction() {
$this->setBackendModuleTemplates();
}
/**
* Set Backend Module Templates
* #return void
*/
private function setBackendModuleTemplates(){
$frameworkConfiguration = $this->configurationManager->getConfiguration(\TYPO3\CMS\Extbase\Configuration\ConfigurationManagerInterface::CONFIGURATION_TYPE_FRAMEWORK);
$viewConfiguration = array(
'view' => array(
'templateRootPath' => 'EXT:extension_name/Resources/Private/Templates/Modules/',
'partialRootPath' => 'EXT:extension_name/Resources/Private/Partials/Modules/',
'layoutRootPath' => 'EXT:extension_name/Resources/Private/Layouts/Modules/',
)
);
$this->configurationManager->setConfiguration(array_merge($frameworkConfiguration, $viewConfiguration));
}
/**
* action settings
* #return void
*/
public function settingsAction(){
}
}
i hope this helps
greetz benji
As #benjamin-kott explains, TYPO3's backend modules configurations need to be loaded first. Unfortunately, extension's typoscript files are not automatically loaded by default.
One way of make TYPO3 aware of this typoscript files is creating two files in extension's root folder:
ext_typoscript_constants.txt
<INCLUDE_TYPOSCRIPT: source="FILE:EXT:myext/Configuration/TypoScript/constants.txt">
ext_typoscript_setup.txt
<INCLUDE_TYPOSCRIPT: source="FILE:EXT:myext/Configuration/TypoScript/setup.txt">
(kind of obvious but: you should replace this paths with yours)
After adding this files, you should reinstall the extension to see changes. You can use the TypoScript Object Browser to find out if your setup and constants are being loaded.
Try to clean all caches, even in typo3temp/Core/Cache (or something like that)
I dont realy know ur setup, but normaly you must setup these paths in /Configuration/TypoScript/setup.txt like this
module.tx_yourext {
persistence {
storagePid = {$pid}
}
view {
templateRootPath = {$templateRootPath}
partialRootPath = {$partialRootPath}
layoutRootPath = {$layoutRootPath}
}
}
This configuration does not being used until you add the static template of your extension. Also you should add these lines to the ext_tables.php
if (TYPO3_MODE === 'BE') {
Tx_Extbase_Utility_Extension::registerModule(
$_EXTKEY,
'web', // Main area
'mod1', // Name of the module
'', // Position of the module
array( // Allowed controller action combinations
'Controller' => 'actionName'
),
array( // Additional configuration
'access' => 'user,group',
'icon' => 'EXT:my_ext/ext_icon.gif',
'labels' => 'LLL:EXT:' . $_EXTKEY . '/Resources/Private/Language/locallang_mod.xml',
)
);
}
Although this thread is quite old I want to show you guys my solution for TYPO3 7.6 LTS.
First you need to include your TypoScript files via Template > Edit whole record > Includes.
And in your TypoScript you need to use templateRootPaths.0 instead of templateRootPath:
module.tx_extension {
view {
templateRootPaths.0 = EXT:extension/Resources/Private/Backend/Templates/
partialRootPaths.0 = EXT:extension/Resources/Private/Backend/Partials/
layoutRootPaths.0 = EXT:extension/Resources/Private/Backend/Layouts/
}
}