diff --git a/.gitignore b/.gitignore index a67f91e..7fdcc07 100644 --- a/.gitignore +++ b/.gitignore @@ -8,3 +8,10 @@ /var/ /vendor/ ###< symfony/framework-bundle ### + +###> symfony/webpack-encore-bundle ### +/node_modules/ +/public/build/ +npm-debug.log +yarn-error.log +###< symfony/webpack-encore-bundle ### diff --git a/assets/app.js b/assets/app.js new file mode 100644 index 0000000..2b5d790 --- /dev/null +++ b/assets/app.js @@ -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.scss'; + +// start the Stimulus application +import './bootstrap'; diff --git a/assets/bootstrap.js b/assets/bootstrap.js new file mode 100644 index 0000000..58308a6 --- /dev/null +++ b/assets/bootstrap.js @@ -0,0 +1,11 @@ +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?$/ +)); + +// register any custom, 3rd party controllers here +// app.register('some_controller_name', SomeImportedController); diff --git a/assets/controllers.json b/assets/controllers.json new file mode 100644 index 0000000..a1c6e90 --- /dev/null +++ b/assets/controllers.json @@ -0,0 +1,4 @@ +{ + "controllers": [], + "entrypoints": [] +} diff --git a/assets/controllers/hello_controller.js b/assets/controllers/hello_controller.js new file mode 100644 index 0000000..8c79f65 --- /dev/null +++ b/assets/controllers/hello_controller.js @@ -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'; + } +} diff --git a/assets/styles/app.scss b/assets/styles/app.scss new file mode 100644 index 0000000..50dbcb0 --- /dev/null +++ b/assets/styles/app.scss @@ -0,0 +1,7 @@ +// assets/styles/global.scss + +// customize some Bootstrap variables +$primary: darken(#428bca, 20%); + +// the ~ allows you to reference things in node_modules +@import "~bootstrap/scss/bootstrap"; diff --git a/composer.json b/composer.json index 7972615..31511e5 100644 --- a/composer.json +++ b/composer.json @@ -23,6 +23,7 @@ "symfony/security-bundle": "5.2.*", "symfony/twig-bundle": "5.2.*", "symfony/validator": "5.2.*", + "symfony/webpack-encore-bundle": "^1.11", "symfony/yaml": "5.2.*", "symfonycasts/verify-email-bundle": "^1.4", "twig/extra-bundle": "^2.12|^3.0", diff --git a/composer.lock b/composer.lock index b9d1f0f..740b4ce 100644 --- a/composer.lock +++ b/composer.lock @@ -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": "1236cbb4118c7d685399eab1004b7e3c", + "content-hash": "c6de01df386cc0add59c4fb1ed211ddf", "packages": [ { "name": "composer/package-versions-deprecated", @@ -6735,6 +6735,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.5", diff --git a/config/bundles.php b/config/bundles.php index a887ee0..079b827 100644 --- a/config/bundles.php +++ b/config/bundles.php @@ -13,4 +13,5 @@ return [ Symfony\Bundle\DebugBundle\DebugBundle::class => ['dev' => true, 'test' => true], SymfonyCasts\Bundle\VerifyEmail\SymfonyCastsVerifyEmailBundle::class => ['all' => true], EasyCorp\Bundle\EasyAdminBundle\EasyAdminBundle::class => ['all' => true], + Symfony\WebpackEncoreBundle\WebpackEncoreBundle::class => ['all' => true], ]; diff --git a/config/packages/assets.yaml b/config/packages/assets.yaml new file mode 100644 index 0000000..051d36d --- /dev/null +++ b/config/packages/assets.yaml @@ -0,0 +1,3 @@ +framework: + assets: + json_manifest_path: '%kernel.project_dir%/public/build/manifest.json' diff --git a/config/packages/prod/webpack_encore.yaml b/config/packages/prod/webpack_encore.yaml new file mode 100644 index 0000000..d0b3ba8 --- /dev/null +++ b/config/packages/prod/webpack_encore.yaml @@ -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 diff --git a/config/packages/test/webpack_encore.yaml b/config/packages/test/webpack_encore.yaml new file mode 100644 index 0000000..02a7651 --- /dev/null +++ b/config/packages/test/webpack_encore.yaml @@ -0,0 +1,2 @@ +#webpack_encore: +# strict_mode: false diff --git a/config/packages/webpack_encore.yaml b/config/packages/webpack_encore.yaml new file mode 100644 index 0000000..90f1a1d --- /dev/null +++ b/config/packages/webpack_encore.yaml @@ -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 diff --git a/package.json b/package.json new file mode 100644 index 0000000..f8ad835 --- /dev/null +++ b/package.json @@ -0,0 +1,21 @@ +{ + "devDependencies": { + "@symfony/stimulus-bridge": "^2.0.0", + "@symfony/webpack-encore": "^1.0.0", + "bootstrap": "^4.6.0", + "core-js": "^3.0.0", + "regenerator-runtime": "^0.13.2", + "sass": "^1.32.11", + "sass-loader": "^11.0.0", + "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" + } +} diff --git a/symfony.lock b/symfony.lock index ca94afe..20182e3 100644 --- a/symfony.lock +++ b/symfony.lock @@ -440,6 +440,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": "9399a0bfc6ee7a0c019f952bca46d6a6045dd451" + }, + "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.5" }, diff --git a/templates/app/index.html.twig b/templates/app/index.html.twig index 4fb7e9c..ff1c2e5 100644 --- a/templates/app/index.html.twig +++ b/templates/app/index.html.twig @@ -1,14 +1,9 @@ {% extends 'base.html.twig' %} -{% block title %}Hello AppController!{% endblock %} +{% block title %}User{% endblock %} {% block body %} - - -