Symfony sample

<p align="center"> [](https://scrutinizer-ci.com/g/Rebolon/php-sf-flex-webpack-encore-vuejs/badges/quality-score.png?b=master) [](https://deepscan.io/dashboard#view=project&tid=2301&pid=3192&bid=26485) [](https://snyk.io/test/github/rebolon/php-sf-flex-webpack-encore-vuejs?targetFile=package.json) [](https://app.fossa.io/projects/git%2Bgithub.com%2FRebolon%2Fphp-sf-flex-webpack-encore-vuejs?ref=badge_shield) [](https://app.fossa.io/projects/git%2Bgithub.com%2FRebolon%2Fphp-sf-flex-webpack-encore-vuejs?ref=badge_shield) </p>

requirements

• You need PHP (7.4+), composer, node (15+ is better) npm or yarn and @angular/cli package installed globally

• You also need to configure your php with curl and openssl

• You have to setup the certificates download pem file, put it somewhere on your system and set your php.ini with those values:

  • curl.cainfo = PATH_TO_YOUR_CERTIFICATE/cacert.pe
  • openssl.cafile = PATH_TO_YOUR_CERTIFICATE/cacert.pem

You can run the app with a PHP Built_in server (all npm command relys on it), but some features may not work finely. In fact, Api-platform package rely on some HTTP SERVER features that are not implemented by the PHP Built-in server. So the api indexes like /api/index.json, /api/index.jsonld or /api/index.html will just return a 404 Not Found. There is also the react-admin app generated by the Api-platform that will not work because it relies on api json index.

To run the tests:

• you may need to download the chrome webdriver with the same version as your own Chrome. Here is the dowload page : https://chromedriver.chromium.org/downloads and then you can specify the Panther webdriver path in a .env.test.local (copied from .env.test) on the row PANTHER_CHROME_DRIVER_BINARY=
• you also have to build the assets (npm run build) because some functional tests relies on real web page, so assets must be available

explanation

This application has been realized to get a sample front app with sf4+ & vuejs but it also shows basic controllers with what most developpers do : basic controller, controller with twig, http call to external API, logging, API... We will try to not use front manipulation outside of VueJS (the sample with twig are really basic and won't use form per example) Here is how it has been created:

• composer create-project symfony/skeleton sf-flex-encore-vuejs
• cd sf-flex-encore-vuejs
• composer req encore annotations twig api jwt-auth symfony/http-client profiler log doctrine-migrations admin webonyx/graphql-php
• composer require --dev doctrine/doctrine-fixtures-bundle phpunit/phpunit symfony/dom-crawler symfony/browser-kit symfony/css-selector security-checker roave/security-advisories:dev-master symfony/maker-bundle
• yarn add vue vue-router quasar-framework quasar-extras vuelidate vue-apollo@next graphql apollo-client apollo-link apollo-link-http apollo-link-error apollo-cache-inmemory graphql-tag react react-dom prop-types axios rxjs @devexpress/dx-react-core @devexpress/dx-react-grid
• yarn add --dev vue-loader vue-template-compiler vue-router react-loader babel-preset-env babel-preset-react sass-loader node-sass bootstrap@4.0.0 jasmine karma karma-jasmine karma-spec-reporter karma-junit-reporter karma-webpack karma-chrome-launcher offline-plugin rxjs-tslint
• yarn install

Then some php controllers has been created on following routes :

• / : DefaultController with the menu to navigate throught different controllers
• /demo/simple : SimpleController with route config in routes.yaml and logger injection with autowiring
• /demo/hello/:name : HelloController with route config in annotations and twig template
• /demo/http : HttpController to show how to call external API from your controller
• /demo/login/standard/secured : LoginController for standard login by Symfony
• /demo/login/jwt/authenticate : Lexik Jwt bundle entry point to process the login check Don't forget the header Content-type: application/json or the application will always return this error no controller found for /api/login_check
• /demo/login/json/authenticate : LoginJsonController for json login with JS applications but in stateful context
• /demo/login/jwt/frontend: LoginJwtController for jwt login with JS applications in a stateless context
• /demo/vuejs : VuejsController with route config in annotations and VueJS app with specific js/css import
• /demo/quasar : QuasarController like VuejsController but with the Quasar framework for UX components
• /demo/form/quasar-vuejs : [Work in progress] authentification with javascript, and a full web application with vuejs and api-platform(rest/graphql)
• /demo/form/devxpress-angular : Angular7 demo with DevXpress UI components (Datagrid and a Wizard sample with local storage and a sumup zone)
• /demo/form/devxpress-vuejs : VueJS demo with DevXpress UI components (Datagrid)
• /api : access ApiPlatform api doc (you need to be authentified: from POST HTTP call or from the frontend /demo/form if you want to play with it: only book entity is configured to be accessed with ROLE_USER)
• /api/graphql : access ApiPlatform GraphQL implementation
• /admin : the react admin provided by api platform package (more info here https://api-platform.com/docs/admin/getting-started) : take care, we forced version 0.6.2 because 0.6.3 has an issue with authentication
• /ezadmin : use the easy admin bundle to allow a comparison between fullstack PHP and PHP/VueJS

And then we followed the documentation here from api platform to create the Admin React tool. We just proceed to some adjustments:

• we kept only src folder and moved its content at the root of /assets/js/api-platform-admin-react
• we added the authClient like they did on the documentation
• on main component componentWillMount() we just do a first fecth on /token to retreive a valid csrf_token for next api calls

But, Vuejs, ReactJS and Angular together ? with Symfony4, WTF ??? Yes it can seems completely stupid to use all this technologies together, but don't forget one thing : this is a POC ! The aim is not to help you to mix all those techs, but just to help you to use some of them finely. The biggest problem in my case is the dependancy management : all those JS libraries may need the same deps but in different version... For instance it seems to be ok, but i think that in future it could be a real brain-teaser.

configuration

You can change the php executable (if you want to use a php version with xdebug, or just another version of php) using package.json in the config section. Default php uses the one in path if exists. You can also change the web server port and the asset server port in the same config section.

    "config": {
        "php": "php",
        "server_port_web": "80",
        "server_port_asset": "8080",
        "test_browser": "chrome:headless,firefox"
    },

The test_browser section represent all the browsers you want to use with the Panther testing tool (we previously used testcafe, but it changes toot much and results was not so satisfying).

components

• flex: new symfony system to make web dev life easier ; it works with recipes
• vuejs: top js framework to build SPA, or just widget on classic page
• quasar: UX component library based on VueJS
• encore: symfony solution to wrap webpack config and, once again, make your life simpler
• offline-plugin: webpack plugin to manage offline assets
• annotations: use annotations everywhere in your PHP code
• twig: symfony template solution, useless if you don't want to render template with symfony, but usefull to be able to use assets twig helper with webpack encore
• api: api-platform to build REST/GraphQL api (instead of fosrestbundle). For GraphQL you just need one more package from webonyx
• react: js framework used here by api-platform for their react admin component, it's built on top of https://marmelab.com/admin-on-rest
• @devexpress: UX components library for Angular, React, VueJS or VanillaJS, with commercial licence and also an open-source free under some conditions
• symfony/http-client: a cool new library to do http call from http (delivered by Symfony in 2019 !)
• doctrine-migrations: based on Doctrine ORM, it make it easy to change your db during a project life
• doctrine-fixture: also based on Doctrine to help you to add fixtures in your DB (for your tests or for project init)
• ocramius/proxy-manager: i don't directly need it, in fact it's doctrine migrations that needs it. But since the release 2.2, it requires PHP7.2.* and i want this project to be compliant with 7.1 so i force the version of this package until i decide to be only compliant PHP7.2
• admin: easy admin component to build quick backend with auto form
• profiler: for debugging purpose
• log: a logger for symfony
• maker-bundle: a bundle that i have not enough used. It will help you to manage your entities,