installing webpack-encore and yarn in node container
This commit is contained in:
parent
0fdd876bc4
commit
4ecc506693
11
README.md
11
README.md
|
|
@ -91,3 +91,14 @@ Disclaimer: This project has been generated on phpdocker.io
|
|||
* See migration file: `cat migrations/Version20210218160541.php `
|
||||
* Migrate: `bin/console doctrine:migrations:migrate`
|
||||
* Control migrations: `bin/console doctrine:migrations:status`
|
||||
|
||||
## Yarn
|
||||
|
||||
* installation de webpack-encore: `composer require symfony/webpack-encore-bundle`
|
||||
* pour finir il faut installer et lancer yarn:
|
||||
* un script bash `docker-node.sh` lancera node dans un conteneur quand on a besoin de yarn:
|
||||
* au premier lancement du container node:14, j'initialise la mise en place:
|
||||
* `npm install yarn`
|
||||
* `npm install --force`
|
||||
* puis je lance (ce qu'il faudra faire à chaque fois):
|
||||
* `yarn encore dev-server`
|
||||
|
|
|
|||
|
|
@ -9,3 +9,10 @@
|
|||
/var/
|
||||
/vendor/
|
||||
###< symfony/framework-bundle ###
|
||||
|
||||
###> symfony/webpack-encore-bundle ###
|
||||
/node_modules/
|
||||
/public/build/
|
||||
npm-debug.log
|
||||
yarn-error.log
|
||||
###< symfony/webpack-encore-bundle ###
|
||||
|
|
|
|||
|
|
@ -0,0 +1,12 @@
|
|||
/*
|
||||
* Welcome to your app's main JavaScript file!
|
||||
*
|
||||
* We recommend including the built version of this JavaScript file
|
||||
* (and its CSS file) in your base layout (base.html.twig).
|
||||
*/
|
||||
|
||||
// any CSS you import will output into a single css file (app.css in this case)
|
||||
import './styles/app.css';
|
||||
|
||||
// start the Stimulus application
|
||||
import './bootstrap';
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
import { startStimulusApp } from '@symfony/stimulus-bridge';
|
||||
|
||||
// Registers Stimulus controllers from controllers.json and in the controllers/ directory
|
||||
export const app = startStimulusApp(require.context(
|
||||
'@symfony/stimulus-bridge/lazy-controller-loader!./controllers',
|
||||
true,
|
||||
/\.(j|t)sx?$/
|
||||
));
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
{
|
||||
"controllers": [],
|
||||
"entrypoints": []
|
||||
}
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
import { Controller } from 'stimulus';
|
||||
|
||||
/*
|
||||
* This is an example Stimulus controller!
|
||||
*
|
||||
* Any element with a data-controller="hello" attribute will cause
|
||||
* this controller to be executed. The name "hello" comes from the filename:
|
||||
* hello_controller.js -> "hello"
|
||||
*
|
||||
* Delete this file or adapt it for your use!
|
||||
*/
|
||||
export default class extends Controller {
|
||||
connect() {
|
||||
this.element.textContent = 'Hello Stimulus! Edit me in assets/controllers/hello_controller.js';
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
body {
|
||||
background-color: lightgray;
|
||||
}
|
||||
|
|
@ -22,6 +22,7 @@
|
|||
"symfony/security-csrf": "5.2.*",
|
||||
"symfony/twig-bundle": "^5.2",
|
||||
"symfony/validator": "5.2.*",
|
||||
"symfony/webpack-encore-bundle": "^1.11",
|
||||
"symfony/yaml": "5.2.*",
|
||||
"twig/extra-bundle": "^2.12|^3.0",
|
||||
"twig/twig": "^2.12|^3.0"
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
"Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
|
||||
"This file is @generated automatically"
|
||||
],
|
||||
"content-hash": "cc2d8037ef234c3c17856f349a2f9334",
|
||||
"content-hash": "076c81b80080dde56989d8db082ce703",
|
||||
"packages": [
|
||||
{
|
||||
"name": "composer/package-versions-deprecated",
|
||||
|
|
@ -2018,6 +2018,75 @@
|
|||
},
|
||||
"time": "2021-02-16T10:59:31+00:00"
|
||||
},
|
||||
{
|
||||
"name": "symfony/asset",
|
||||
"version": "v5.2.3",
|
||||
"source": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/symfony/asset.git",
|
||||
"reference": "54a42aa50f9359d1184bf7e954521b45ca3d5828"
|
||||
},
|
||||
"dist": {
|
||||
"type": "zip",
|
||||
"url": "https://api.github.com/repos/symfony/asset/zipball/54a42aa50f9359d1184bf7e954521b45ca3d5828",
|
||||
"reference": "54a42aa50f9359d1184bf7e954521b45ca3d5828",
|
||||
"shasum": ""
|
||||
},
|
||||
"require": {
|
||||
"php": ">=7.2.5"
|
||||
},
|
||||
"require-dev": {
|
||||
"symfony/http-client": "^4.4|^5.0",
|
||||
"symfony/http-foundation": "^4.4|^5.0",
|
||||
"symfony/http-kernel": "^4.4|^5.0"
|
||||
},
|
||||
"suggest": {
|
||||
"symfony/http-foundation": ""
|
||||
},
|
||||
"type": "library",
|
||||
"autoload": {
|
||||
"psr-4": {
|
||||
"Symfony\\Component\\Asset\\": ""
|
||||
},
|
||||
"exclude-from-classmap": [
|
||||
"/Tests/"
|
||||
]
|
||||
},
|
||||
"notification-url": "https://packagist.org/downloads/",
|
||||
"license": [
|
||||
"MIT"
|
||||
],
|
||||
"authors": [
|
||||
{
|
||||
"name": "Fabien Potencier",
|
||||
"email": "fabien@symfony.com"
|
||||
},
|
||||
{
|
||||
"name": "Symfony Community",
|
||||
"homepage": "https://symfony.com/contributors"
|
||||
}
|
||||
],
|
||||
"description": "Manages URL generation and versioning of web assets such as CSS stylesheets, JavaScript files and image files",
|
||||
"homepage": "https://symfony.com",
|
||||
"support": {
|
||||
"source": "https://github.com/symfony/asset/tree/v5.2.3"
|
||||
},
|
||||
"funding": [
|
||||
{
|
||||
"url": "https://symfony.com/sponsor",
|
||||
"type": "custom"
|
||||
},
|
||||
{
|
||||
"url": "https://github.com/fabpot",
|
||||
"type": "github"
|
||||
},
|
||||
{
|
||||
"url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
|
||||
"type": "tidelift"
|
||||
}
|
||||
],
|
||||
"time": "2021-01-27T10:01:46+00:00"
|
||||
},
|
||||
{
|
||||
"name": "symfony/cache",
|
||||
"version": "v5.2.3",
|
||||
|
|
@ -5649,6 +5718,77 @@
|
|||
],
|
||||
"time": "2021-01-27T10:01:46+00:00"
|
||||
},
|
||||
{
|
||||
"name": "symfony/webpack-encore-bundle",
|
||||
"version": "v1.11.1",
|
||||
"source": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/symfony/webpack-encore-bundle.git",
|
||||
"reference": "395b60a549ded8e7f77f0d551815d7555e2d9eb0"
|
||||
},
|
||||
"dist": {
|
||||
"type": "zip",
|
||||
"url": "https://api.github.com/repos/symfony/webpack-encore-bundle/zipball/395b60a549ded8e7f77f0d551815d7555e2d9eb0",
|
||||
"reference": "395b60a549ded8e7f77f0d551815d7555e2d9eb0",
|
||||
"shasum": ""
|
||||
},
|
||||
"require": {
|
||||
"php": ">=7.1.3",
|
||||
"symfony/asset": "^4.4 || ^5.0",
|
||||
"symfony/config": "^4.4 || ^5.0",
|
||||
"symfony/dependency-injection": "^4.4 || ^5.0",
|
||||
"symfony/http-kernel": "^4.4 || ^5.0",
|
||||
"symfony/service-contracts": "^1.0 || ^2.0"
|
||||
},
|
||||
"require-dev": {
|
||||
"symfony/framework-bundle": "^4.4 || ^5.0",
|
||||
"symfony/phpunit-bridge": "^4.4 || ^5.0",
|
||||
"symfony/twig-bundle": "^4.4 || ^5.0",
|
||||
"symfony/web-link": "^4.4 || ^5.0"
|
||||
},
|
||||
"type": "symfony-bundle",
|
||||
"extra": {
|
||||
"thanks": {
|
||||
"name": "symfony/webpack-encore",
|
||||
"url": "https://github.com/symfony/webpack-encore"
|
||||
}
|
||||
},
|
||||
"autoload": {
|
||||
"psr-4": {
|
||||
"Symfony\\WebpackEncoreBundle\\": "src"
|
||||
}
|
||||
},
|
||||
"notification-url": "https://packagist.org/downloads/",
|
||||
"license": [
|
||||
"MIT"
|
||||
],
|
||||
"authors": [
|
||||
{
|
||||
"name": "Symfony Community",
|
||||
"homepage": "https://symfony.com/contributors"
|
||||
}
|
||||
],
|
||||
"description": "Integration with your Symfony app & Webpack Encore!",
|
||||
"support": {
|
||||
"issues": "https://github.com/symfony/webpack-encore-bundle/issues",
|
||||
"source": "https://github.com/symfony/webpack-encore-bundle/tree/v1.11.1"
|
||||
},
|
||||
"funding": [
|
||||
{
|
||||
"url": "https://symfony.com/sponsor",
|
||||
"type": "custom"
|
||||
},
|
||||
{
|
||||
"url": "https://github.com/fabpot",
|
||||
"type": "github"
|
||||
},
|
||||
{
|
||||
"url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
|
||||
"type": "tidelift"
|
||||
}
|
||||
],
|
||||
"time": "2021-02-17T13:45:51+00:00"
|
||||
},
|
||||
{
|
||||
"name": "symfony/yaml",
|
||||
"version": "v5.2.3",
|
||||
|
|
|
|||
|
|
@ -9,4 +9,5 @@ return [
|
|||
Doctrine\Bundle\DoctrineBundle\DoctrineBundle::class => ['all' => true],
|
||||
Doctrine\Bundle\MigrationsBundle\DoctrineMigrationsBundle::class => ['all' => true],
|
||||
Symfony\Bundle\MakerBundle\MakerBundle::class => ['dev' => true],
|
||||
Symfony\WebpackEncoreBundle\WebpackEncoreBundle::class => ['all' => true],
|
||||
];
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
framework:
|
||||
assets:
|
||||
json_manifest_path: '%kernel.project_dir%/public/build/manifest.json'
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
#webpack_encore:
|
||||
# Cache the entrypoints.json (rebuild Symfony's cache when entrypoints.json changes)
|
||||
# Available in version 1.2
|
||||
#cache: true
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
#webpack_encore:
|
||||
# strict_mode: false
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
webpack_encore:
|
||||
# The path where Encore is building the assets - i.e. Encore.setOutputPath()
|
||||
output_path: '%kernel.project_dir%/public/build'
|
||||
# If multiple builds are defined (as shown below), you can disable the default build:
|
||||
# output_path: false
|
||||
|
||||
# Set attributes that will be rendered on all script and link tags
|
||||
script_attributes:
|
||||
defer: true
|
||||
# link_attributes:
|
||||
|
||||
# If using Encore.enableIntegrityHashes() and need the crossorigin attribute (default: false, or use 'anonymous' or 'use-credentials')
|
||||
# crossorigin: 'anonymous'
|
||||
|
||||
# Preload all rendered script and link tags automatically via the HTTP/2 Link header
|
||||
# preload: true
|
||||
|
||||
# Throw an exception if the entrypoints.json file is missing or an entry is missing from the data
|
||||
# strict_mode: false
|
||||
|
||||
# If you have multiple builds:
|
||||
# builds:
|
||||
# pass "frontend" as the 3rg arg to the Twig functions
|
||||
# {{ encore_entry_script_tags('entry1', null, 'frontend') }}
|
||||
|
||||
# frontend: '%kernel.project_dir%/public/frontend/build'
|
||||
|
||||
# Cache the entrypoints.json (rebuild Symfony's cache when entrypoints.json changes)
|
||||
# Put in config/packages/prod/webpack_encore.yaml
|
||||
# cache: true
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,21 @@
|
|||
{
|
||||
"devDependencies": {
|
||||
"@symfony/stimulus-bridge": "^2.0.0",
|
||||
"@symfony/webpack-encore": "^1.0.0",
|
||||
"core-js": "^3.0.0",
|
||||
"regenerator-runtime": "^0.13.2",
|
||||
"stimulus": "^2.0.0",
|
||||
"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": {
|
||||
"yarn": "^1.22.10"
|
||||
}
|
||||
}
|
||||
|
|
@ -117,6 +117,9 @@
|
|||
"config/packages/sensio_framework_extra.yaml"
|
||||
]
|
||||
},
|
||||
"symfony/asset": {
|
||||
"version": "v5.2.3"
|
||||
},
|
||||
"symfony/cache": {
|
||||
"version": "v5.2.3"
|
||||
},
|
||||
|
|
@ -342,6 +345,28 @@
|
|||
"config/routes/dev/web_profiler.yaml"
|
||||
]
|
||||
},
|
||||
"symfony/webpack-encore-bundle": {
|
||||
"version": "1.9",
|
||||
"recipe": {
|
||||
"repo": "github.com/symfony/recipes",
|
||||
"branch": "master",
|
||||
"version": "1.9",
|
||||
"ref": "34a82422147bc632dec0db2676bf27aaaa582ba0"
|
||||
},
|
||||
"files": [
|
||||
"assets/app.js",
|
||||
"assets/bootstrap.js",
|
||||
"assets/controllers.json",
|
||||
"assets/controllers/hello_controller.js",
|
||||
"assets/styles/app.css",
|
||||
"config/packages/assets.yaml",
|
||||
"config/packages/prod/webpack_encore.yaml",
|
||||
"config/packages/test/webpack_encore.yaml",
|
||||
"config/packages/webpack_encore.yaml",
|
||||
"package.json",
|
||||
"webpack.config.js"
|
||||
]
|
||||
},
|
||||
"symfony/yaml": {
|
||||
"version": "v5.2.3"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -3,14 +3,13 @@
|
|||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>{% block title %}Welcome!{% endblock %}</title>
|
||||
{# Run `composer require symfony/webpack-encore-bundle`
|
||||
and uncomment the following Encore helpers to start using Symfony UX #}
|
||||
|
||||
{% block stylesheets %}
|
||||
{#{{ encore_entry_link_tags('app') }}#}
|
||||
{{ encore_entry_link_tags('app') }}
|
||||
{% endblock %}
|
||||
|
||||
{% block javascripts %}
|
||||
{#{{ encore_entry_script_tags('app') }}#}
|
||||
{{ encore_entry_script_tags('app') }}
|
||||
{% endblock %}
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,75 @@
|
|||
const Encore = require('@symfony/webpack-encore');
|
||||
|
||||
// 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
|
||||
*
|
||||
* 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')
|
||||
|
||||
// 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())
|
||||
|
||||
.configureBabel((config) => {
|
||||
config.plugins.push('@babel/plugin-proposal-class-properties');
|
||||
})
|
||||
|
||||
// enables @babel/preset-env polyfills
|
||||
.configureBabelPresetEnv((config) => {
|
||||
config.useBuiltIns = 'usage';
|
||||
config.corejs = 3;
|
||||
})
|
||||
|
||||
// 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()
|
||||
;
|
||||
|
||||
module.exports = Encore.getWebpackConfig();
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
#!/bin/bash
|
||||
|
||||
# Ce script permet de lancer node dans un conteneur docker séparé,
|
||||
# afin de disposer des outils comme yarn (paquet npm)
|
||||
|
||||
# exécute toujours dans le répertoire `php`
|
||||
cd $(dirname $0)
|
||||
|
||||
# la commande exécutée dans le conteneur
|
||||
if [ $# -eq 0 ]; then
|
||||
cmd=bash
|
||||
else
|
||||
cmd="${@}"
|
||||
fi
|
||||
|
||||
# le conteneur node monte le dossier de l'application
|
||||
docker run --rm -it \
|
||||
--user "$(id -u):$(id -g)" \
|
||||
--volume "${PWD}/app:/app" \
|
||||
--workdir "/app" \
|
||||
--env "YARN_CACHE_FOLDER=/app/.yarncache" \
|
||||
node:14 ${cmd}
|
||||
Loading…
Reference in New Issue