bodymovin-extension icon indicating copy to clipboard operation
bodymovin-extension copied to clipboard

Published 20 hours ago • verified publisher icon bodymovin

How to get Hot Reload to work

Open Bjorninn1 opened this issue 2 years ago • 3 comments

I was able to get the code running but code changes don't show up until I build the project again, I did the following:

I had node version 12.22.12 installed, not sure if that matters.

  1. Setup AE for debugging extensions (guide)
  2. Installed the CEF client for remote debugging
  3. Installed extension dependencies npm i and also npm audit fix
  4. Installed server dependencies cd bundle/server && npm i and also npm audit fix
  5. Installed gulp npm install --global gulp-cli
  6. Inside gulpfile.js changed the path to my local path: var extensionDestination = "../../../tropi/AppData/Roaming/Adobe/CEP/extensions/bodymovin";
  7. Ran npm run build (from the main folder)
  8. Ran npm run start-dev (from the main folder)
  9. Removed bodymovin from AE since I had the released version installed
  10. Moved the build folder over to extensions folder /Library/Application Support/Adobe/CEP/extensions and renamed the build folder as com.bodymovin.bodymovin
  11. Opened the CEF client and navigated to http://localhost:8092/

But the changes in code don't show up until I repeat steps 7 and 10 to build the code. Any idea how to make hot reloading work? Thank you.

Bjorninn1 avatar Aug 09 '22 20:08 Bjorninn1

I follow this step. The most critical step is to set the path. var extensionDestination = '/Users/jason/Library/Application Support/Adobe/CEP/extensions/com.body.react'; It is absolute path. I set the absolute path. You can see the real-time modified content.

cgeffect avatar Aug 10 '22 07:08 cgeffect

I follow this step. The most critical step is to set the path. var extensionDestination = '/Users/jason/Library/Application Support/Adobe/CEP/extensions/com.body.react'; It is absolute path. I set the absolute path. You can see the real-time modified content.

Thank you. One quick question @cgeffect :

  1. Where do you put the bodymovin-extension-master project you downloaded?

Bjorninn1 avatar Aug 10 '22 16:08 Bjorninn1

Anywhere is OK. in gulpfile.js , as long as the path of (var extensiondestination) is set to the absolute path where Adobe stores the extensions. because every time the NPM command is executed (it should be npm run start-dev), the compiled content will be copied to the specified extensions path

cgeffect avatar Aug 11 '22 02:08 cgeffect