This repository contains the demo files created in tutorial: A Quick-Start Guide to Using Node to Bundle JavaScript Modules for Sitecore This tutorial is aimed at Sitecore/.NET developers who are new to the node universe. We will build Sitecore renderings that use JavaScript modules, and learn how to get started with the following frameworks:
- Install a vanilla instance of Sitecore (I'm using verion 8.2 update 6 right now, but the specific version doesn't really matter for this demo)
- Copy contents of repo into the root of your sitecore installation (The directory that contains the /Data and /Website folders)
- Run these commands
$ npm install
$ ./node_modules/.bin/rollup -c
This generates the file /Website/js/bundle.min.js
- Create an MVC Layout item - point it to the
/Website/Views/Layouts/MainLayout.cshtml
file from this repo - Create a new View Rendering item called "User Greeting" - point it to the
/Website/Views/Sitecore/UserGreeting.cshtml
file from this repo - Create a new View Rendering item called "Website Visit" - point it to the
/Website/Views/Sitecore/WebsiteVisit.cshtml
file from this repo - Create a Placeholder Settings item that permits our View Renderings to be inserted into the "main" placeholder
- Create a new template called "Node Page" which uses the custom MVC Layout
- Insert an instance of "Node Page" into the content tree under "Home"
- Use Experience Editor or Presentation Details to insert the two custom renderings into the page's "main" placeholder
- The "Node Page" in Sitecore pulls in the generated bundle.min.js and the renderings on this page use our custom JavaScript modules.
- The dependencies of our JavaScript modules are managed for us by npm
- Eventthough we have dozens on packages downloaded to our /node_packages directory, only the ones used by the renderings are loaded on the front-end.