DNN Platform Developer Quick Start Step-By-Step

[thabaum]

Developing DNN Platform Quick Start Setup Step-by-Step

(Still work in progress with React Projects)
Summary

This is a quick guide with about 24 steps that enabled me to start developing today. There is more than one way to do all of this, this was what I found to be the most straight forward way to allow myself to do it again quickly if needed without issues. I don't go into detail, but to the point show the steps to get an IDE setup with pictures (worth 1000 words right?) and links to help speed up finding the resources needed to download to get started. Ya, I know 24 steps... its not the download and run with blazing F5, but the most time you will spend is probably downloading and installing if this tutorial is worth anything.

Any issues, corrections, tips or step I left out please feel free to share here in this discussion! Put this to the test. This is for a reference down the road, anyone can freely use this to create a better walkthrough tutorial or video.

I will do my next post on more advanced breakpoints, managing branches and submitting pull requests. If someone wants to put another "Quick Start Step-by-Step" post up similar to this one that would be awesome!

Happy Coding DNN!

Quickly get started helping develop the DNN Platform with the following:

• Youtube Video: Setting up the Tools for DNN Development
  Great walkthrough video with helpful instructions for installing tools to build the DNN Platform. This video is not needed to get through this step-by-step build guide however, some of the steps here provide missing links and this video will walk you through this process most of the way to building the DNN Platform along with even more detailed information. Thank you @valadas
• BUILD DNN
  Links you to all the information here in greater detail. Be sure to try to follow the Pull Request Procedure if you fix a bug or enhance the platform. Thank you @dnncommunity.org
• DNN COMMUNITY DOCS GETTING STARTED HELP
  Answered all my questions the other resources did not to help me get this done. Thank you @dnncommunity.org
• Hyper-V on Windows
  If you wish to install everything into its own environment on a machine you own visit this documentation for help. It will take another Windows License Retail Key to activate each copy of Windows you install in a Hyper-V environment. Cool thing is you can play with some Linux distributions as well! This step-by-step process is not included however you can find some helpful videos and online documentation.

_Before you start or if you get stuck try viewing the resources above. This step-by-step setup guide was created using mainly these resources as needed.

A 24 Step-by-Step Setup Process to Build DNN Platform with Examples

1. Download and Install MS SQL Server

2. Create a folder for storing the DNN developer database.
   Example: C:\DNN\sql

3. Download and Install SQL Management Studio

4. Open SQL Management Studio and create a user.
   Example: DnnUser

5. Next in SQL Management Studio create a database setting the location to be in the DNN developer database folder created in step 2 and then map it to the new user as dbo.
   Example: dnnDB

6. Install IIS by adding the Windows features.
   Refer to dnn tools video link above for more information.
   

7. Download and Install Visual Studio with features needed
   Refer to the DNN Platform tools setup video link above for more information.
   

8. Download and Install Visual Studio Code .
   Use VS Code to quickly and easily create and edit the local files.

9. Download and Install Node.js make sure you use the "LTS" release edition and not the "Current" version.
   You do not need the Chocolat CLI checkbox to build DNN.

10. Open Developer PowerShell for VS in Administrator Mode.
    

11. Run yarn install from PowerShell.

12. Create account if needed and sign into github.com.

13. Fork DNN Repository to your own account.

14. Create short named folder on drive to store DNN Platform source files.
    Example: C:\DNN\src

15. Navigate PowerShell to the folder you created for the DNN Platform source files.

16. run git clone https://github.com/Your-GitHub-User-Name-Here/Dnn.Platform.git
    To download your forked branch repository from GitHub copy the DNN Platform git address from your GitHub repository code page.

17. Create IIS website and folder for hosting DNN website files.
    Example: C:\inetpub\wwwroot\Dnn.Devsite

18. Apply IIS AppPool\Dnn.Devsite user full edit folder permissions to the hosted folder**
    

19. Navigate in PowerShell to the root directory and run the following command: .\Build.ps1
    Dnn uses Cake so visit http://cakebuildbotdevelop.azurewebsites.net/docs/tutorials/powershell-security

20. Run .\Build.ps1 --target=CreateSettings

21. Edit the newly created settings.local.json file in the root directory.

Example:

	{
	  "WebsitePath": "C:\\inetpub\\wwwroot\\Dnn.Devsite",
	  "WebsiteUrl": "Dnn.Devsite",
	  "SaConnectionString": "server=(local);Trusted_Connection=True;",
	  "DnnConnectionString": "Server=(local);Database=dnnDB;uid=dnnUser;pwd=secretDBpassword;",
	  "DbOwner": "dbo",
	  "ObjectQualifier": "",
	  "DnnDatabaseName": "dnnDB",
	  "DnnSqlUsername": "dnnUser",
	  "DatabasePath": "C:\\DNN\\sql",
	  "Version": "auto"
	}

22. You can use virtually any website address you like for the web browser to point to your machine by editing your system HOST file located in C:\Windows\System32\drivers\etc folder to add a loopback address.
    example: 127.0.0.1 Dnn.Devsite

23. Create a file named DNN_Platform.local.build in the project root folder and edit the WebsitePath to point to the DNN website directory created earlier for IIS. In this step-by-step example guide it will point here C:\inetpub\wwwroot\Dnn.Devsite.
    Example:

<Project ToolsVersion="4.0" DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
  <PropertyGroup>
    <WebsitePath Condition=" '$(Configuration)|$(Platform)' == 'Debug|AnyCPU' ">C:\inetpub\wwwroot\Dnn.Devsite</WebsitePath>
  </PropertyGroup>
</Project>

• Use PowerShell to run the following script: .\Build.ps1 --target=ResetDevSite
  This (re)creates the database and pushes fresh copies of website files to the configured folders using the settings.local.json and DNN_Platform.local.build files for (re)build configuration settings.

24. You can now access this website address http://dnn.devsite or the loopback address created earlier with a web browser on your developer machine.
    Chrome is preferred by most developers, but sites should work and be tested also with Edge, Safari and Firefox along with any device emulators you want compatible.

Once things get configured properly you can start developing and click REBUILD in Visual Studio to push DNN Platform file changes to your website directory and test changes.

For React Projects (PersonaBar for example)

• Run yarn watch --scope site_settings in the root directory for changes to be rebuilt continuously
• Disable Caching in browser
• Works on DNN Platform app modules that have a package.json file (IE a node build)

[valadas]

This is awesome, but if you could submit a PR to https://github.com/dnnsoftware/Dnn.Platform/blob/develop/.github/BUILD.md with the missing tips and tricks, it would be even better as this is our usual goto piece of documentation for developers.

[thabaum]

I am running a few tests, rebuilding making sure all issues are covered. I found one more step I would like to add with creating the database and user mapping.

I did not do this thinking the build script might create this for me. It made the database but did not map the user to the database. The user was already created but I figure it wont create a user or a database. I had to see what it would do so I can add this info as well. This was sort of a work in progress to cover it all. It looked like it could be helpful and I know we could use some more support for the project so I decided to share.

I will fine tune this, like I said any suggestions to add to this. I will just keep going and make it a long file showing everything I can explain if that helps. It would help me :)

I was wanting to ask if we can break it down into another section or two. This is what I would like to cover.

• Building DNN Platform
• Debugging DNN Platform using breakpoints
• Managing branches within visual studio and git
• Creating SPA and Razor PersonaBar and Modules updating DNN existing along the way if possible and showing how to do it all the way to submitting a pull request solution that gets accepted by the community.

Before I get too crazy, I want to fix a few bugs on my to do list and get more familiar with things. I will create some help docs along the way for here and for dnn docs as desired.

[thabaum]

OK one question I could not answer except for myself.

What is recommended for Set-ExecutionPolicy?

I set mine to unrestricted so I could run the build.ps1 script file.

PS> Set-ExecutionPolicy -ExecutionPolicy unRestricted

I have this in my notes as a snag.

[valadas]

This is mainly because of Cake so I would go with http://cakebuildbotdevelop.azurewebsites.net/docs/tutorials/powershell-security

[thabaum]

More info I will try to add and explain as I see fit to the future PR if needed.

New question now that I got hits fired up to where I can fix things and see results as I do it other than js css and html stuff I was wondering about yarn

For React Projects (PersonaBar for example)

Run yarn watch --scope site_settings in the root directory for changes to be rebuilt continuously
Disable Caching in browser

Would the Journal or social groups modules be able to utilize this? I would really love them utilizing signalR. But regardless of that dream, I could use something that needs some maintenance love and uses React in the project. This way I can expand on the build page in respect to this area if needed for new blood or someone trying to pick it up again after not being around it for a while and would like to contribute.

[valadas]

No, this only works on modules that have a package.json file (IE a node build).

[thabaum]

I was wondering what was going to be the tell all. Thank you. Another something to add later.

#4091 hoping to help here now. Looks like a lot to go around.