README

What is this repository for?

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:

• npm
• rollup

How do I get set up?

• 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

Sitecore setup

• 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

Result

• 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.