The new Persona Bar in DNN 9 allows writing extensions using a very modern technology stack - Html, JavaScript, CSS and Web APIs. No more web forms here, yay! (rest of DNN continues to use web forms though). You are free to choose any modern JavaScript frameworks such as ReactJS, Knockout, etc. to build the UI. The majority of the core Persona Bar extensions are built using ReactJS.
The goal of this blog is to show how a ReactJS app can be included in your persona bar extension.
Final UI
There is nothing fancy about this extension. Our aim here is to print just "Hello World". Only difference from the previous example is that this text will not come from the Html file, instead it will come from a React app.
Useful Blogs
Before we proceed, you may want to reference these blogs:
-
DNN 9: Persona Bar Architecture
-
DNN 9: Extending the Persona Bar
Prerequisites
In order to build a React App, you must have Node.JS and NPM installed on your development machine. You don't need this on the machine running DNN, this is needed just for development.
This blog seems to document steps to install those: http://blog.teamtreehouse.com/install-node-js-npm-windows
It's best to ensure that both Node and NPM are installed. Run the commands node -v followed by npm -v to get their versions. Here is how the versions should look like:
Sample Code
Before going too far, it's best to download the sample extension source code from Github: https://github.com/ashishpd/Dnn.PersonaBar.Samples/tree/master/02HelloWorld-React
New Folder
There is a new folder in the source code structure - HelloWorld.Web. This folder contains React related code.
Configure MyGet Private Feed
The DNN Corp Engineers have built a lot of common React components to be used in the Persona Bar extensions. These common components are hosted on a cloud service myget. In order to use these components, you must tell NPM about it's location. This can be done by issuing the following command line:
npm config set registry https://www.myget.org/F/dnn-software-private/auth/53bf0254-cdf2-4f2b-9fd6-6a10b0ceaf68/npm/
UPDATE (May 24,2017): Change the above URL to https://www.myget.org/F/dnn-software-public/npm/
After running this command, run another command to ensure that the setting has taken place.
npm config get
Understanding JavaScript Package Dependencies
There is a file named package.json at the root of the HelloWorld.Web folder, which lists name of JavaScript libraries that this React app depends on.
Some of the notable ones are:
-
Babel
-
Less
-
Eslint
-
DNN
-
React
-
Webpack
NPM Install
Once we have downloaded the source code of this extension and ensured that Node and NPM are installed in the environment, configured myget feed, now we need to use the power of NPM to sort out all the dependencies.
Open a command window, navigate to the HelloWorld.Web folder and issue the following command:
npm install
This command will take a long time to run. It creates a new folder node_modules under the folder HelloWorld.Web. This folder will have hundreds of sub-folders. What we just did was downloaded all the dependencies for this JavaScript (React) app.
The two notable folders are:
-
dnn-global-styles
-
dnn-webpack-externals
These folders come from the myget private feed and contains common components developed by DNN and offered to Persona Bar extension developers.
NPM Build
The next step is to build the JavaScript files. We need to issue the following command at the root of HelloWorld.Web folder:
npm run build
This creates a bundled JavaScript file names helloworld-bundle.js under admin\personaBar\scripts\bundles folder. This bundled JavaScript file is responsible for the main UI of your extension. Note: I've already included this file in the source code; you may want to delete it prior to running the above command.
Create Extension Package
Once the bundled JavaScript is created, we now need to create install package for our Persona Bar extension. Simply open the solution file in Visual Studio and compile in Release mode. The install zip file can be found under Website\Install\Module folder. Go ahead and install in DNN. Refresh the page and you will see "Hello World" sub-menu pop-up under Settings menu of the Persona Bar.