`./psh.phar administration:watch` won't detect file changes

gruhn commented 5 years ago

I'm trying to create a custom cms block following this how-to.

I'm using the recommended docker setup.
My Shopware plugin implementation is exactly the same as in the how-to. I copied the code of every file with zero adjustments.
My OS is Ubuntu 18 LTS (but I had the same issue on MacOS).

I'm trying to use ./psh.phar administration:watch to automatically rebuild on file changes. Initially, files are compiled successfully:

(1/2) Starting
> bin/console bundle:dump

     [OK] Dumped plugin configuration.                                                                       

(2/2) Starting
> PROJECT_ROOT=/app APP_ENV=docker PORT=8080 HOST=0.0.0.0 ESLINT_DISABLE=true ENV_FILE=/app/.env npm run --prefix vendor/shopware/platform/src/Administration/Resources/administration/ dev -- http://localhost:8000

    > administration@1.0.0 dev /app/vendor/shopware/platform/src/Administration/Resources/administration
    > node build/dev-server.js "http://localhost:8000"

    # Webpack Plugin Injector: Plugin "Storefront" injected as a new entry point
    # Webpack Plugin Injector: Plugin "CustomCmsBlock" injected as a new entry point
    [HPM] Proxy created: /  ->  http://localhost:8000
    # Compiling Webpack configuration
    Environment: development
    Dev server URI: http://0.0.0.0:8080
    Assets static path: ./static
    Automatically open browser: true

    # Starting hot module reloading dev server
    ℹ ｢wdm｣: wait until bundle finished: 
    ℹ ｢wdm｣: wait until bundle finished: /__webpack_hmr
    (node:621) DeprecationWarning: loaderUtils.parseQuery() received a non-string value which can be problematic, see https://github.com/webpack/loader-utils/issues/56
    parseQuery() will be replaced with getOptions() in the next major version of loader-utils.
     DONE  Compiled successfully in 28254ms7:04:31 PM

    ℹ ｢wdm｣:    3445 modules
    ℹ ｢wdm｣: Compiled successfully.
    Dev server listening at http://0.0.0.0:8080

but when I change files while the dev server is running, it seem like those changes are not being detected.

As soon as I login at http://localhost:8080/admin the dev server prints the following error to the console:

[HPM] Error occurred while trying to proxy request /api/v1/_action/update/check from localhost:8080 to http://localhost:8000 (ECONNRESET) (https://nodejs.org/api/errors.html#errors_common_system_errors)

I'm running the command inside the docker container (by running ./psh.phar docker:ssh first). I'm not sure if this is correct. However, when I run the watch command outside the container, it already fails at the bin/console bundle:dump step:


(1/2) Starting
> bin/console bundle:dump

    In AbstractMySQLDriver.php line 106:

      An exception occurred in driver: could not find driver  

    In PDOConnection.php line 31:

      could not find driver  

    In PDOConnection.php line 27:

      could not find driver  

Execution aborted, a subcommand failed!

keulinho commented 5 years ago

Hey @gruhn,

you have to run the ./psh.phar administration:watch inside your container as you did.

This will start an Hot-Module-Reload server on port 8080. The dev server just serves the administration so there is no need to append /admin to the url, the admin should be directly reachable under http://localhost:8080.

Be sure to run at least an ./psh.phar init, to set up the database inside your container (if you already did so or did run ./psh.phar install you should be fine)

gruhn commented 5 years ago

Hey @keulinho,

thanks for the quick reply.

Ok yes, I should have mentioned, I did ran ./psh.phar install and I installed/activated my custom plugin in the dedicated section of the administration. I also tried running ./psh.phar init by now but the issue persists.

I'm not sure if the:

[HPM] Error occurred while trying to proxy request ...

error is the cause of my issue but it looks like a number of people get the same error in different contexts.

keulinho commented 5 years ago

What happens if you open http://localhost:8080?

THe HPM Error occurs everytime when the Hot Module Reload server is running, but the server that is proxied returns a 500.

If you still get this error you should be able to run http://localhost:8080:build and then check the administration under http://localhost:8000/admin. Check the network tab of the browser console for any non 20x return code, that request should be the underlying problem. And you should find additional information why the request failed.

In your case it seems that there is a problem when shopware checks tries to check for updates.

gruhn commented 5 years ago

When I open http://localhost:8080 I can browse the administration as usual (even without /admin as you said :+1: ). I don't get Network/Console tab errors. The only problem is, once ./psh.phar administration:watch finishes the initial build, subsequent changes are not detected anymore.

I wish I could be more informative but I have really no clue what is going on under the hood.

If you still get this error you should be able to run http://localhost:8080:build

You mean running ./psh.phar administration:build right? The command runs successfully (see output below). When I open http://localhost:8000/admin I also get no errors in the Network/Console tab. Updates to my custom plugin files seem to be applied too. I could live with constantly running this command if it wouldn't take 1.5 minutes to finish.

Starting Execution of 'administration:build' ('/app/dev-ops/administration/actions/build.sh')

(1/3) Starting
> bin/console bundle:dump

     [OK] Dumped plugin configuration.                                                                                      

(2/3) Starting
> PROJECT_ROOT=/app npm run --prefix vendor/shopware/platform/src/Administration/Resources/administration/ build

    > administration@1.0.0 build /app/vendor/shopware/platform/src/Administration/Resources/administration
    > node build/build.js

    # Webpack Plugin Injector: Plugin "Storefront" injected as a new entry point
    # Webpack Plugin Injector: Plugin "CustomCmsBlock" injected as a new entry point
    Building project for production...
    (node:266) DeprecationWarning: loaderUtils.parseQuery() received a non-string value which can be problematic, see https://github.com/webpack/loader-utils/issues/56
    parseQuery() will be replaced with getOptions() in the next major version of loader-utils.
    Hash: 87085257f0b549af4447
    Version: webpack 4.38.0
    Time: 80493ms
    Built at: 11/08/2019 9:52:03 PM
                                                   Asset        Size            Chunks                    Chunk Names
                          7bd2f0fd09a99e0054cd.worker.js    57.8 KiB                    [emitted]         
                                      static/css/app.css     535 KiB               app  [emitted]  [big]  app
                         static/css/custom-cms-block.css   231 bytes  custom-cms-block  [emitted]         custom-cms-block
                               static/css/storefront.css    9.37 KiB        storefront  [emitted]         storefront
                             static/css/vendors-node.css    15.2 KiB      vendors-node  [emitted]         vendors-node
               static/fixtures/sw-login-background-2.png     501 KiB                    [emitted]  [big]  
                 static/fixtures/sw-login-background.png     501 KiB                    [emitted]  [big]  
                       static/fixtures/sw-test-image.png    3.87 KiB                    [emitted]         
         static/img/cms/default_preview_product_list.jpg    5.47 KiB                    [emitted]         
                 static/img/cms/preview_camera_large.jpg     149 KiB                    [emitted]         
                 static/img/cms/preview_camera_small.jpg      20 KiB                    [emitted]         
                static/img/cms/preview_glasses_large.jpg    87.9 KiB                    [emitted]         
                static/img/cms/preview_glasses_small.jpg    15.7 KiB                    [emitted]         
          static/img/cms/preview_landingpage_default.png    84.9 KiB                    [emitted]         
          static/img/cms/preview_landingpage_sidebar.png      77 KiB                    [emitted]         
               static/img/cms/preview_mountain_large.jpg     314 KiB                    [emitted]  [big]  
               static/img/cms/preview_mountain_small.jpg    38.4 KiB                    [emitted]         
                 static/img/cms/preview_page_default.png     4.6 KiB                    [emitted]         
                 static/img/cms/preview_page_sidebar.png    6.29 KiB                    [emitted]         
                  static/img/cms/preview_plant_large.jpg     134 KiB                    [emitted]         
                  static/img/cms/preview_plant_small.jpg    5.48 KiB                    [emitted]         
       static/img/cms/preview_product_detail_default.png    17.3 KiB                    [emitted]         
       static/img/cms/preview_product_detail_sidebar.png    19.8 KiB                    [emitted]         
         static/img/cms/preview_product_list_default.png    55.1 KiB                    [emitted]         
         static/img/cms/preview_product_list_sidebar.png    49.7 KiB                    [emitted]         
                        static/img/cms/preview_vimeo.jpg    16.2 KiB                    [emitted]         
                      static/img/cms/preview_youtube.jpg    17.1 KiB                    [emitted]         
                           static/img/cms/vimeo-icon.png    3.66 KiB                    [emitted]         
                         static/img/cms/youtube-icon.png    42.5 KiB                    [emitted]         
                           static/img/dashboard-logo.svg    3.52 KiB                    [emitted]         
        static/img/empty-states/costumer-empty-state.svg     1.3 KiB                    [emitted]         
       static/img/empty-states/marketing-empty-state.svg    2.03 KiB                    [emitted]         
           static/img/empty-states/media-empty-state.svg   743 bytes                    [emitted]         
           static/img/empty-states/order-empty-state.svg    1.27 KiB                    [emitted]         
        static/img/empty-states/products-empty-state.svg   723 bytes                    [emitted]         
        static/img/empty-states/settings-empty-state.svg    7.17 KiB                    [emitted]         
                                    static/img/error.svg    27.6 KiB                    [emitted]         
           static/img/favicon/android-chrome-192x192.png    1.45 KiB                    [emitted]         
           static/img/favicon/android-chrome-256x256.png     1.9 KiB                    [emitted]         
                 static/img/favicon/apple-touch-icon.png    1.29 KiB                    [emitted]         
                    static/img/favicon/favicon-16x16.png   392 bytes                    [emitted]         
                    static/img/favicon/favicon-32x32.png   502 bytes                    [emitted]         
                          static/img/favicon/favicon.ico    14.7 KiB                    [emitted]         
      static/img/favicon/modules/icon-module-content.png  1000 bytes                    [emitted]         
    static/img/favicon/modules/icon-module-customers.png   682 bytes                    [emitted]         
    static/img/favicon/modules/icon-module-dashboard.png   656 bytes                    [emitted]         
    static/img/favicon/modules/icon-module-marketing.png   435 bytes                    [emitted]         
       static/img/favicon/modules/icon-module-orders.png   425 bytes                    [emitted]         
     static/img/favicon/modules/icon-module-products.png   397 bytes                    [emitted]         
     static/img/favicon/modules/icon-module-settings.png   610 bytes                    [emitted]         
                   static/img/favicon/mstile-150x150.png    1.15 KiB                    [emitted]         
                static/img/first-run-wizard/demodata.svg    55.4 KiB                    [emitted]         
        static/img/first-run-wizard/shopware-account.svg    60.2 KiB                    [emitted]         
                 static/img/first-run-wizard/welcome.svg    78.4 KiB                    [emitted]         
                   static/img/migration-illustration.svg     333 KiB                    [emitted]  [big]  
                     static/img/paypal-official-logo.svg    9.81 KiB                    [emitted]         
                    static/img/plugin-manager--login.png    71.7 KiB                    [emitted]         
                      static/img/sw-login-background.png     501 KiB                    [emitted]  [big]  
              static/img/theme/default_theme_preview.jpg    6.96 KiB                    [emitted]         
                                        static/js/app.js    3.68 MiB               app  [emitted]  [big]  app
                                    static/js/commons.js     151 KiB           commons  [emitted]         commons
                           static/js/custom-cms-block.js     153 KiB  custom-cms-block  [emitted]         custom-cms-block
                                    static/js/runtime.js    1.45 KiB           runtime  [emitted]         runtime
                                 static/js/storefront.js    83.5 KiB        storefront  [emitted]         storefront
                               static/js/vendors-node.js     1.3 MiB      vendors-node  [emitted]  [big]  vendors-node
    Entrypoint commons [big] = static/js/runtime.js static/css/vendors-node.css static/js/vendors-node.js static/js/commons.js
    Entrypoint app [big] = static/js/runtime.js static/css/vendors-node.css static/js/vendors-node.js static/css/app.css static/js/app.js
    Entrypoint storefront [big] = static/js/runtime.js static/css/vendors-node.css static/js/vendors-node.js static/css/storefront.css static/js/storefront.js
    Entrypoint custom-cms-block [big] = static/js/runtime.js static/css/vendors-node.css static/js/vendors-node.js static/css/custom-cms-block.css static/js/custom-cms-block.js
      Build complete.

    ┌──────────────────────────────────────────────┐
    │           npm update check failed            │
    │     Try running with sudo or get access      │
    │     to the local update config store via     │
    │ sudo chown -R $USER:$(id -gn $USER) /.config │
    └──────────────────────────────────────────────┘

(3/3) Starting
> bin/console assets:install

     Installing assets as hard copies.

     --- ---------------- ---------------- 
          Bundle           Method / Error  
     --- ---------------- ---------------- 
      ✔   Framework        copy            
      ✔   Administration   copy            
      ✔   Storefront       copy            
      ✔   CustomCmsBlock   copy            
     --- ---------------- ---------------- 

     ! [NOTE] Some assets were installed via copy. If you make changes to these assets you have to run this command again.  

     [OK] All assets were successfully installed.                                                                           

Duration: 1m 27s
All commands successfully executed!

jleifeld commented 5 years ago

Can you try the following:

Start the watcher
Login into your administration with http://localhost:8080
Go to the dasboard (You should be there automatically)
Open this file in your Editor: platform/src/Administration/Resources/administration/src/module/sw-dashboard/page/sw-dashboard-index/sw-dashboard-index.html.twig
Change this line (11) to <h1>Hot Module Relaoding works</h1>
Check if the administration changes

gruhn commented 4 years ago

I followed these steps and I don't see the changes :(

(To make sure I edited the right file, I restarted the watcher and the initial build compiled the changes correctly)

jleifeld commented 4 years ago

Do you have other projects which are using the webpack-dev-server? If yes, do they work?

I think it could be a global problem or a webpack problem because we use the webpack-dev-server which should recognizes the files and restart the compilation

gruhn commented 4 years ago

Yes I have other projects where webpack-dev-server recognizes file changes even when the files are mounted as a docker volume. Checkout this minimal demo:

https://github.com/gruhn/demo-webpack-hmr-docker

It's using Vue CLIs Instant Prototyping feature which is using webpack-dev-server under the hood.

Steps to run the demo:

clone the linked repository
run docker-compose up
open http://localhost:8080
edit src/App.vue

On my system file changes are instantly visible. No reload required.

pantrtxp commented 4 years ago

Hi @gruhn,

please check if your platform is symlinked correctly. go to sw6root/vendor/shopware and run ls -la. You should get platform -> ../../platform If you dont please recreate this symlink

gruhn commented 4 years ago

It looks correct:

☁  shopware [master] ls -al
total 8
drwxr-xr-x  2 westwerk docker 4096 Okt 31 18:08 .
drwxr-xr-x 62 westwerk docker 4096 Nov  5 15:21 ..
lrwxrwxrwx  1 westwerk docker   14 Okt 31 18:08 platform -> ../../platform

However, I just went through the hole installation procedure again:

clone development repo
clone platform repo
...

and now the dev sever DOES react to changes in

platform/src/Administration/Resources/app/administration/src/module/sw-dashboard/page/sw-dashboard-index/sw-dashboard-index.html.twig

now!

I wanted to check if its working with custom plugins too but now I have trouble installing plugins again.

I noticed the directory structure of platform has changed since my last clone and custom plugins seem to be affected:

custom/plugins/CustomCmsBlock/src/Resources/app/administration/src/module/sw-cms/blocks/text-image/image-text-reversed

is now the appropriate path, instead of:

custom/plugins/CustomCmsBlock/src/Resources/administration/module/sw-cms/blocks/text-image/image-text-reversed

So I assumed the problem is that I copied the plugin folder from the previous shopware instance. Thus, I cloned the demo plugin directly into custom/plugins:

git clone git@github.com:shopware/swag-docs-custom-cms-block.git CustomCmsBlock

Now, I tried to install the plugin with ./psh.phar but it looks like the sub-command for installing plugins is gone:

I have no name!@8507ede49faf:/app$ ./psh.phar plugin:install --activate CustomCmsBlock

###################

SHOPWARE Developer Version

       _
      | |
   ___| |__   ___  _ ____      ____ _ _ __ ___
  / __| '_ \ / _ \| '_ \ \ /\ / / _` | '__/ _ \
  \__ \ | | | (_) | |_) \ V  V / (_| | | |  __/
  |___/_| |_|\___/| .__/ \_/\_/ \__,_|_|  \___|
                  | |
                  |_|

Using .psh.yaml.dist 

Script with name plugin:install not found

I installed and activated the plugin over the dashboard instead. When I open the layout editor under Shopping Experiences, I'm back to the original situation:

by restarting the dev server changes are applied
changes while the dev server is running, are ignored
BUT changes to sw-dashboard-index.html.twig are still successfully hot-reloaded

keulinho commented 4 years ago

The plugin commands are part of the symfony console application, so bin/console plugin:install would be the correct way to install plugins.

The psh stuff is just a helper to execute shell scribts that are found in the dev-ops folder of the development template. If you are not sure you can always try just ./psh.phar or bin/console and both commands should print a list of commands that you can run from them.

gruhn commented 4 years ago

Hey, can you report any updates on this issue?

I was hoping Shopware 6.1 might resolve this problem so I went through all the setup steps again:

# 1) get a fresh copy of Shopware
git clone git@github.com:shopware/development.git

# 2)
./psh.phar docker:start

# 3)
./psh.phar docker:ssh

# 4) now inside the container
./psh.phar install

# 5) clone the source of the "Custom CMS Blocks HowTo" directly into the plugin directory: 
git clone git@github.com:shopware/swag-docs-custom-cms-block.git custom/plugins/CustomCmsBlocks

# 6) install/activate the plugin via the dashboard

# 7) start the dev server back inside the container:
./psh.phar administation:watch

# 8) edit ./custom/plugins/CustomCmsBlocks/src/Resources/app/administration/src/module/sw-cms/blocks/text-image/image-text-reversed/preview/sw-cms-preview-image-text-reversed.html.twig

However, my issue still persists and the dev server wont react to file changes.

gruhn commented 4 years ago

Went through all the steps again with the final version. Now it works!

shopware / development

`./psh.phar administration:watch` won't detect file changes #61