New Community Website

Ordinarily, you'd be at the right spot, but we've recently launched a brand new community website... For the community, by the community.

Yay... Take Me to the Community!

The Community Blog is a personal opinion of community members and by no means the official standpoint of DNN Corp or DNN Platform. This is a place to express personal thoughts about DNNPlatform, the community and its ecosystem. Do you have useful information that you would like to share with the DNN Community in a featured article or blog? If so, please contact .

The use of the Community Blog is covered by our Community Blog Guidelines - please read before commenting or posting.

DNN9: Adding a ReactJS App to Persona Bar

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

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:

  1. DNN 9: Persona Bar Architecture

  2. DNN 9: Extending the Persona Bar


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:

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:

Node and NPM Versions

Sample Code

Before going too far, it's best to download the sample extension source code from Github:

New Folder

There is a new folder in the source code structure - HelloWorld.Web. This folder contains React related code.

New Folder

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 

UPDATE (May 24,2017): Change the above URL to

After running this command, run another command to ensure that the setting has taken place.
npm config get

myget feed

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

Package Dependencies

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 Install

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.
NPM Install

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.

  • Published:


Scott Wilkinson
When I install my custom persona bar extension, it can't find the js, html, and css. Devtools says it is trying to look int he Dnn.PersonaBar folder for the html and the Dnn.PersonaBar/scripts for the js. What do I need to do to make it look in the Dnn.PersonaBar/Modules/HelloWorld folder?
Scott Wilkinson Friday, December 30, 2016 10:00 PM (link)
Mikhail K
@Ash, once I try to make "npm install" there is always "401 Unauthorized" error.
Is there any problem with authorization with or I missed smth at my side?
Mikhail K Wednesday, April 12, 2017 9:54 AM (link)
Bluebolt Developers
I am getting the same error as Mikhail. Did something change on the myget registry?
Bluebolt Developers Thursday, May 18, 2017 4:57 PM (link)
Ash Prasad
@Mikhail - Please use this URL instead (blog updated also):
Ash Prasad Wednesday, May 24, 2017 12:52 PM (link)

Comment Form

Only registered users may post comments.


Aderson Oliveira (22)
Alec Whittington (11)
Alessandra Daniels (3)
Alex Shirley (10)
Andrew Hoefling (3)
Andrew Nurse (30)
Andy Tryba (1)
Anthony Glenwright (5)
Antonio Chagoury (28)
Ash Prasad (37)
Ben Schmidt (1)
Benjamin Hermann (25)
Benoit Sarton (9)
Beth Firebaugh (12)
Bill Walker (36)
Bob Kruger (5)
Bogdan Litescu (1)
Brian Dukes (2)
Brice Snow (1)
Bruce Chapman (20)
Bryan Andrews (1)
cathal connolly (55)
Charles Nurse (163)
Chris Hammond (213)
Chris Paterra (55)
Clint Patterson (108)
Cuong Dang (21)
Daniel Bartholomew (2)
Daniel Mettler (181)
Daniel Valadas (48)
Dave Buckner (2)
David Poindexter (12)
David Rodriguez (3)
Dennis Shiao (1)
Doug Howell (11)
Erik van Ballegoij (30)
Ernst Peter Tamminga (80)
Francisco Perez Andres (17)
Geoff Barlow (12)
George Alatrash (12)
Gifford Watkins (3)
Gilles Le Pigocher (3)
Ian Robinson (7)
Israel Martinez (17)
Jan Blomquist (2)
Jan Jonas (3)
Jaspreet Bhatia (1)
Jenni Merrifield (6)
Joe Brinkman (274)
John Mitchell (1)
Jon Henning (14)
Jonathan Sheely (4)
Jordan Coopersmith (1)
Joseph Craig (2)
Kan Ma (1)
Keivan Beigi (3)
Kelly Ford (4)
Ken Grierson (10)
Kevin Schreiner (6)
Leigh Pointer (31)
Lorraine Young (60)
Malik Khan (1)
Matt Rutledge (2)
Matthias Schlomann (16)
Mauricio Márquez (5)
Michael Doxsey (7)
Michael Tobisch (3)
Michael Washington (202)
Miguel Gatmaytan (3)
Mike Horton (19)
Mitchel Sellers (40)
Nathan Rover (3)
Navin V Nagiah (14)
Néstor Sánchez (31)
Nik Kalyani (14)
Oliver Hine (1)
Patricio F. Salinas (1)
Patrick Ryan (1)
Peter Donker (54)
Philip Beadle (135)
Philipp Becker (4)
Richard Dumas (22)
Robert J Collins (5)
Roger Selwyn (8)
Ruben Lopez (1)
Ryan Martinez (1)
Sacha Trauwaen (1)
Salar Golestanian (4)
Sanjay Mehrotra (9)
Scott McCulloch (1)
Scott Schlesier (11)
Scott Wilkinson (3)
Scott Willhite (97)
Sebastian Leupold (80)
Shaun Walker (237)
Shawn Mehaffie (17)
Stefan Cullmann (12)
Stefan Kamphuis (12)
Steve Fabian (31)
Steven Fisher (1)
Tony Henrich (3)
Torsten Weggen (3)
Tycho de Waard (4)
Vicenç Masanas (27)
Vincent Nguyen (3)
Vitaly Kozadayev (6)
Will Morgenweck (40)
Will Strohl (180)
William Severance (5)
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out