# Getting Started

## _Setting up the web project_

This document covers preparing your environment and project for running the Web Project for local debugging. There are a few manual steps that must be taken before "F5-ing" the project will work.

These steps should be easy to follow along with, but, if you have any questions, just let us know in the Homebase Slack channel!

### Environment

Setting up the environment is pretty simple. Just check these off the list as you go!

- [ ] Update visual studio with all major updates
- [ ] Install the Microsoft Azure SDK (normally this is done when installing Visual Studio, but you can grab it here as well if you missed it: https://azure.microsoft.com/en-us/downloads/)
- [ ] Install the Azure Storage Emulator - https://go.microsoft.com/fwlink/?linkid=717179&clcid=0x409
- [ ] Install Node.js (defaults should work, if you have issues interacting with node from Windows Terminal or PowerShell let someone on the team know and we can help you re-install it) - https://nodejs.org/en/download/

### Project

The web project is a standard .NET Core 3.1 application that uses MVC routing and, views, and controllers. JavaScript and CSS is compiled using webpack. We'll cover getting your local branch setup, restoring NPM packages, and using webpack in this section.

- [ ] Navigate to TFS and create a new branch under the feat folder (if you are new to these tools, we'll work on them with you)
- [ ] In visual studio, connect to TFS and clone the project to a local directory
- [ ] Create a new local branch from the remote branch created above


- [ ] Open a Windows Terminal or Powershell window.
- [ ] You may run into down the road with execution policy. Our development machines are in a secure environment and local scripts should be ran deliberately. As a result, you can update your execution policy now to avoid headaches later by using this command now before continuing: `Set-ExecutionPolicy RemoteSigned`
- [ ] Change the working directory with the `cd {path}` command to the folder path for Milyli.License.WebApp (mine is under `C:\source\homebase\src\License\Milyli.License.WebApp`)
- [ ] Type `npm install`. This will install all of the packages used by the project.


The project has a webpack config already set up and ready to go. In general, when launching the project you can run the watch script which will automatically rebuild your javascript for you whenever you save any .js file imported into /js/index.js.

To test this out, you can type `npm run watch`. This will build both the `/dist/site.js` and `/dist/site.css` files in dev mod and start observing changes to your javascript.

Both of these files are in `wwwroot` which you can read more about in the [Microsoft documentation](https://docs.microsoft.com/en-us/aspnet/core/fundamentals/static-files?view=aspnetcore-5.0).

There are two other commands in the webpack script:

`npm run build` - This builds the site.js and site.css in dev mode.
`npm run production` - This builds the site.js and site.css in production mode. The produced files are minified.

Finally the last thing we need to do is add a local appsettings.json specific to your machine.

- [ ] Navigate to the root project folder for Milyli.License.WebApp (mine is under `C:\source\homebase\src\License\Milyli.License.WebApp`)
- [ ] Create a new file named `appsettings.[YOUR COMPUTER NAME].json`
- [ ] Copy the following json into file

{
	"PrivateKeyXml": "[COPY THE VALUE FROM appsettings.andrew-pc.json]",	
	"AzureAd": {
		"ClientId": "[COPY THE VALUE FROM appsettings.json]",
		"Tenant": "[COPY THE VALUE FROM appsettings.json]",
		"AadInstance": "https://login.microsoftonline.com/{0}", // This is the public instance of Azure AD
		"PostLogoutRedirectUri": "http://localhost:14705/"
	},
	"ConnectionStrings": {
		"LicenseManagerConnection": "Server=(localdb)\\mssqllocaldb;Database=LicenseManager;Trusted_Connection=True;MultipleActiveResultSets=true",
		"BlackoutUsageConnection": "Server=(localdb)\\mssqllocaldb;Database=BlackoutUsage;Trusted_Connection=True;MultipleActiveResultSets=true",
		"StorageConnection": "UseDevelopmentStorage=true;"
	},
	"Logging": {
		"IncludeScopes": false,
		"LogLevel": {
			"Default": "Debug",
			"System": "Information",
			"Microsoft": "Information"
		}
	}
}

### Running the Project

Homebase uses EF Core to interact with persistent storage (mostly the SQL Database). You can learn more about Entity Framework here: https://docs.microsoft.com/en-us/ef/core/.

Entity Framework has the ability to generate upgrades for the database using a built in function called migrations. These migrations also help us create the database for the first time if it doesn't exist and Homebsae takes advantage of this.

To generate the databases we have to run the project for the first time.

- [ ] Start the Azure emulator by running it on your development machine


- [ ] At the top of the browser, you should see dropdowns for `Debug | Any CPU | Project`, in the project dropdown, select `Milyli.LicenseManager.WebApp`


To make starting the project easier, we'll self host the project with Kestrel instead of IISExpress.

To the right of the button with the `play` icon, is a dropdown. Click this button and select `Milyli.LicenseManager.WebApp`.


Finally, click on the `play` button or press `F5` and the project will launch in your default browser.

While the project is launching, it is going to automatically run the migrations mentioned above creating two empty databases based on the project schema `BlackoutUsage` and `LicenseManager`.

After the migration has run you'll be greeted with this screen.


We'll cover getting test data in the next step.

### Test Data

The best way to get test data is to restore backups from production. Send a request to the Homebase slack channel for `.bacpac` files from production. The databases created by Homebase will be in your [(localdb)](https://docs.microsoft.com/en-us/sql/database-engine/configure-windows/sql-server-express-localdb?view=sql-server-ver15).

After someone gets you these backups, you can follow the guide below for restoring them with SSMS ([SQL Server Management Studio](https://docs.microsoft.com/en-us/sql/ssms/download-sql-server-management-studio-ssms?view=sql-server-ver15)).

- [Importing a bacpac file in SQL using SSMS](https://www.sqlshack.com/importing-a-bacpac-file-for-a-sql-database-using-ssms/)

Make sure to connect to `(localdb)\mssqllocaldb` using Windows Credentials to restore the backups. After restoring the backups, we'll want to switch these to being the ones the app uses. The easiest way to do this is to rename the empty ones to something else (I use `BlackoutUsage_old` and `LicenseManager_old`). Then, rename the restored backups to `BlackoutUsage` and `LicenseManager`.


Launch the project again and you should see a bunch of data now!