Download the PHP package ssch/typo3-encore without Composer

On this page you can find all versions of the php package ssch/typo3-encore. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.

FAQ

After the download, you have to make one include require_once('vendor/autoload.php');. After that you have to import the classes with use statements.

Example:
If you use only one package a project is not needed. But if you use more then one package, without a project it is not possible to import the classes with use statements.

In general, it is recommended to use always a project to download your libraries. In an application normally there is more than one library needed.
Some PHP packages are not free to download and because of that hosted in private repositories. In this case some credentials are needed to access such packages. Please use the auth.json textarea to insert credentials, if a package is coming from a private repository. You can look here for more information.

  • Some hosting areas are not accessible by a terminal or SSH. Then it is not possible to use Composer.
  • To use Composer is sometimes complicated. Especially for beginners.
  • Composer needs much resources. Sometimes they are not available on a simple webspace.
  • If you are using private repositories you don't need to share your credentials. You can set up everything on our site and then you provide a simple download link to your team member.
  • Simplify your Composer build process. Use our own command line tool to download the vendor folder as binary. This makes your build process faster and you don't need to expose your credentials for private repositories.
Please rate this library. Is it a good library?

Informations about the package typo3-encore

Downloads

TYPO3 integration with Webpack Encore!

This extension allows you to use the splitEntryChunks() feature from Webpack Encore by reading an entrypoints.json file and helping you render all of the dynamic script and link tags needed.

How to use

  1. First of all install Webpack Encore as stated in the documentation. You should really be able to use all of the things described in the documentation. Like Sass-Loader, Vue-Loader etc. These things are completely independent from this little extension.

You can also use the enableVersioning() of files (mostly used only in production context). You can also use the enableIntegrityHashes(). This is taking into account if the files are included.

  1. Define your entry path(s) and the output path (usually your Resource/Public/ folder in your Package extension) in the webpack.config.js

  2. Afterwards set the two TypoScript constants to point to the manifest.json and the entrypoints.json located in the configured output folder

  3. In your Page templates/layout you can then use the ViewHelpers to integrate the CSS- and JS-Files in your website

If you have defined multiple entries you can define the desired entryName in the ViewHelpers

Alternatively you can also include the files via TypoScript

Note the prefix typo3_encore: This is important in order to render the files correctly. You can then use all other known settings to include your files.

You don´t have to care about including it only once. This will not happen during one request cycle unless you want to.

It is also possible to use the inclusion via the prefix typo3_encore in backend specific contexts. For example like so:

HTTP/2 Preloading

All css and javascript files managed by the extension will be added to the AssetRegistry class during rendering. For these assets a Link HTTP header is created, which are the key to optimize the application performance when using HTTP/2 and preloading capabilities of modern web browsers.

Technically this is done by a PSR-15 Middleware.

If you want to add additional files to the AssetRegistry you can use the PreloadViewHelper:

Watch out, the example also uses the AssetViewHelper. The AssetViewHelper behind the scenes makes a look up to the manifest.json file. So you can also leverage the versioning feature provided by Webpack.

Static assets

Sometimes you might need to reference static assets (like image files) directly in your fluid templates. You can use the Encore copyFiles function to instruct Webpack to copy static assets to your output folder (see https://symfony.com/doc/current/frontend/encore/copy-files.html#referencing-image-files-from-a-template).

To reference a static asset file from a fluid template, you can then use the AssetViewHelper to get the file path (including the hash if versioning is enabled).

Note that the AssetViewHelper does not render anything but just returns the path to the file, so you will probably use inline notation to, e.g., display an image:

This way of using the AssetViewHelper is similar to the asset function used in Twig templates with Symfony.

Additional

  1. If you are in production mode and set enableVersioning(true) then you should set the option

  2. Defining Multiple Webpack Configurations (see)

Then you have to define your builds in your TypoScript-Setup:

Finally, you can specify which build to use:

CSS for CKEditor

It is possible to configure encore so that you can use a CSS file for the CKEditor which is generated by webpack and even works with enabled versioning. Two steps are required to do so:

  1. Define an entrypoint for the RTE in your webpack.config.js, e.g.

  2. Add in the CKEditor yaml configuration

Getting Started with Webpack Encore

Although the documentation of Webpack Encore is awesome, i am going to provide a minimalistic how to install the frontend related things. I assume some basic knowledge of modern frontend development.

Install Encore into your project via Yarn or Npm:

First, make sure you install Node.js and also the Yarn or npm package manager.

This command creates or modifies a package.json file and downloads dependencies into a node_modules/ directory. Yarn also creates/updates a yarn.lock (called package-lock.json if you use npm).

You should commit package.json and yarn.lock (or package-lock.json if using npm) to version control, but ignore the node_modules/ folder.

Creating the webpack.config.js File

Next, we are going to create a webpack.config.js file at the root of our project. This is the main config file for both Webpack and Webpack Encore:

Working with typo3/cms-composer-installers 4+ or TYPO3 12

The typo3/cms-composer-installers library takes care of moving TYPO3-specific assets in the right place in Composer-based installations, like copying extensions to typo3conf/ext. Starting with version 4.0 (currently at RC1 stage), the extensions will remain in vendor/vendor_name. The Resources/Public directory of each extension is symlinked from the public/assets directory using hashes. While it is possible to target the symlink, the fact that it is a hash makes it a bit flaky.

The recommendation is to use another build directory, not located inside an extension. As an example, asuming that you use public/build, the configuration in webpack.config.js would be modified as follows:

The TypoScript constants have to be modified accordingly:

If the site base configuration (config/sites/yoursite/config.yaml) is a subdirectory/subpath of your domain, it is required to add your new "build" directory as an additional absolute directory. This can be done in your "Configure Installation-Wide Options" (TYPO3 <= 11: typo3conf/LocalConfiguration.php; TYPO3 >= 12: config/system/settings.php)

The realm of Webpack plugins

Encore already ships with a lot of useful plugins for the daily work. But someday you are gonna get to the point where you need more.

Generating icons and inject them automatically

Install webapp-webpack-plugin and html-webpack-plugin.

In order to inject the html file in the header of your TYPO3 just include the template file:

Generating a svg sprite

Install svg-sprite-loader

Now you have to import all your svg files in your javascript

The extension ships with a SvgViewHelper in order to simplify the usage of svg in fluid.


All versions of typo3-encore with dependencies

PHP Build Version
Package Version
Requires php Version >=7.4
typo3/cms-core Version ^10.4.2 || ^11.5 || ^12.4
symfony/web-link Version ^5.4 || ^6
symfony/asset Version ^5.0 || ^6
ext-dom Version *
typo3/cms-tstemplate Version ^10.4.2 || ^11.5 || ^12.4
webmozart/assert Version ^1.10
Composer command for our command line client (download client) This client runs in each environment. You don't need a specific PHP version etc. The first 20 API calls are free. Standard composer command

The package ssch/typo3-encore contains the following files

Loading the files please wait ....