NPM YARN Scripts - Rebolon/php-sf-flex-webpack-encore-vuejs GitHub Wiki

Usually, when you install a SymfonyX project, the first thing you will do is a composer install command. But when you introduce modern JS application, then you will need to transpile your code. Transpilation is the operation that will take your Javscript code written in Typescript, Ecmascript2015/2006/2017/... and transform it into javascript understandable by your aimed browsers. That really cool because you can use advanced code functionnalities like Template String, inheritance, and more. But which is really, really cool is that you will be able to use libraries like RxJS or any other one and the transpilation process will only take the code of the library that you really use, not all the full library like you are used to do. So your javascript build will be compatible with at least one browser you choose, and it will be lighter than when you embeded all the third part libraries. So you can understand now that to make your project runnig, you have to run 2 commands: one for PHP, and one for Javascript. But in real life, you also need to run command to initialize your database, and to update your database... In fact there is a lot of command you will need to run. This is the role of a Task Manager, and there is a lot of task manager, so which one you should use ? A lot of project recently moved on the ole one MakeFile. Even Symfony for its 4th revision wanted to use MakeFile to run its own commands. But finally they decided used their good one Console component. In Js world, this is the war since around 10 years: bower, grunt, gulp, .... But in fact they already get something helpful for that kind of operation: NPM (or Yarn).

So if you open the package.json of the project you will see a lot of nodes under the scripts section. I decided to use the package.json to manage all the tasks of the project. You could see this like a wrapper to unify various commands. With this system you can declare environment variables under the config section, and use them in the scripts.

Config

Here are the configuration setted in the package.json:

  • php: default is php, so it requires to get a php in your path. But it also allows you to change the path to a different php to test new version, or to use a PHP instance with XDebug (XDebug hardly slow your application, so you don't need to use it everytime).
  • server_host_web: this is the host where the application will run (and also the asset server if you run it with a watch command when you are in development environment)
  • server_port_web: this is the port where the application will run
  • server_port_asset: this is the port where the asset server run
  • test_browser: this is the list of browser used by testcafé to run the e2e tests. You can any compatible browsers with a comma to separate each one: "chrome,chrome:headless,firefox"

Scripts

  • init-project: this is the first command to run when you install the project. This command is also available for windows
    • it will copy the file .env.dist (for symfony) to .env to protect this file of future changes in .env.dist
    • it will run composer install and npm install
    • then it will install the database (depending on the the value of the .env file, sqlite is default)
    • then it will create a javascript config file based on config section of package.json
    • and finally it will build the assets
  • db-init

[TODO finish]