Products

Solutions

Learn More

Partners

Community

Blog

About

DNN Community Blog

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

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:

Node and NPM Versions

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.

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 https://www.myget.org/F/dnn-software-private/auth/53bf0254-cdf2-4f2b-9fd6-6a10b0ceaf68/npm/

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.

Comments

There are currently no comments, be the first to post one.

Comment Form

Only registered users may post comments.

NewsArchives


2sic Daniel Mettler (133)
Aderson Oliveira (15)
Alec Whittington (11)
Alex Shirley (10)
Andrew Nurse (30)
Anthony Glenwright (5)
Antonio Chagoury (28)
Ash Prasad (25)
Ben Schmidt (1)
Benjamin Hermann (25)
Benoit Sarton (9)
Beth Firebaugh (12)
Bill Walker (36)
Bob Kruger (5)
Brian Dukes (2)
Brice Snow (1)
Bruce Chapman (20)
Bryan Andrews (1)
cathal connolly (55)
Charles Nurse (163)
Chris Hammond (203)
Chris Paterra (55)
Clinton Patterson (28)
Cuong Dang (21)
Daniel Bartholomew (2)
Dave Buckner (2)
David Poindexter (3)
David Rodriguez (2)
Doug Howell (11)
Erik van Ballegoij (30)
Ernst Peter Tamminga (74)
Geoff Barlow (7)
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 (270)
John Mitchell (1)
Jon Henning (14)
Jonathan Sheely (4)
Jordan Coopersmith (1)
Joseph Craig (2)
Kan Ma (1)
Keivan Beigi (3)
Ken Grierson (10)
Kevin Schreiner (6)
Leigh Pointer (31)
Lorraine Young (60)
Malik Khan (1)
Matthias Schlomann (15)
Mauricio Márquez (5)
Michael Doxsey (7)
Michael Tobisch (3)
Michael Washington (202)
Mike Horton (19)
Mitchel Sellers (28)
Nathan Rover (3)
Navin V Nagiah (14)
Néstor Sánchez (31)
Nik Kalyani (14)
Peter Donker (52)
Philip Beadle (135)
Philipp Becker (4)
Richard Dumas (22)
Robert J Collins (5)
Roger Selwyn (8)
Ruben Lopez (1)
Ryan Martinez (1)
Salar Golestanian (4)
Sanjay Mehrotra (9)
Scott McCulloch (1)
Scott S (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)
Timo Breumelhof (24)
Tony Henrich (3)
Torsten Weggen (2)
Vicenç Masanas (27)
Vincent Nguyen (3)
Vitaly Kozadayev (6)
Will Morgenweck (37)
Will Strohl (164)
William Severance (5)
DNN Launch Webinar
REGISTER NOW
DNN Launch Webinar
REGISTER NOW
DNN Launch Webinar
REGISTER NOW