The goal of this blog is to show how a ReactJS app can be included in your persona bar extension.
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.
Before we proceed, you may want to reference these blogs:
DNN 9: Persona Bar Architecture
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: 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:
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
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
Some of the notable ones are:
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:
The two notable folders are:
These folders come from the myget private feed and contains common components developed by DNN and offered to Persona Bar extension developers.
npm run build
Create Extension Package