Issues while configuring

Bounteous-Inc / aem-webpack-example

Best practice for setting up Webpack in AEM.

MIT License

80 stars 22 forks source link

Issues while configuring #5

Closed viveksachdeva closed 6 years ago

viveksachdeva commented 7 years ago

I followed the instructions mentioned in the README. Still not able to get it to work. From the video, it seems that we are checking page from file system rather than AEM instance. Is that right?

My expectation was that any page/component running on AEM would auto-reload when I make change to the html file like it is happening in the video

kevinweber commented 7 years ago

Hi, yes, you're right, the configuration doesn't support auto-reloading of the browser (known as Browser Sync), and it also doesn't automatically push changes into AEM (AEM Sync). It only watches file changes to run the Webpack bundling process. Browser Sync and AEM Sync don't work by default. There are various ways to implement it, and I found that different people and projects have different preferences, so I didn't want to make it part of the project by default.

Here are a few options you can check out:

Webpack plugin on NPM https://www.npmjs.com/package/aem-sync-webpack-plugin
AEM Brackets extension https://docs.adobe.com/docs/en/aem/6-3/develop/dev-tools/aem-brackets.html?wcmmode=disabled
AEM Front (developed by me) combines AEM Sync with Browser Sync https://kevinw.de/aem-front/

viveksachdeva commented 7 years ago

Thanks for superquick @kevinweber. If this project it not pushing to AEM and no browser sync.. and it seems that I have to statically include JS/CSS in the HTML, why is this called aem-weback-example.. Other than the folder structure, what other thing is AEM like..?

kevinweber commented 7 years ago

Valid question. Let's discuss this. We just published a blog post describing some concepts we thought about when setting up Webpack in AEM. The post answers a few questions that are implemented in AEM Webpack Example, namely:

Where to put the Webpack configuration in AEM? Here we also suggest three ways for using those output files. One of those ways suggests the use of AEM's clientlibs (as opposed to referencing the bundled JS/CSS file in HTML directly/statically).
How to run Webpack using Maven? That's AEM-specific because most Webpack projects are not part of a project that uses Maven.
Where to put JavaScript files? That's AEM-specific as well because it considers Adobe's component-based project structure.

Read the post: http://www.infielddigital.com/blog/webpack-in-aem/

What other ways do you imagine for integrating Webpack into AEM?

TheBubbleDuck commented 7 years ago

One thing to keep in mind is how AEM deals with some of the "reserved words" so using webpack to make bundles (that might use require and default syntax) might cause issues. JS Bundling in general using require/imports mess up the js.txt usage. How are you guys handling that?

kevinweber commented 7 years ago

@Aourin I'm not sure what you mean by that. We haven't had issues with clientlibs related to Webpack. Can you give an example and explain how you are handling this?