Skip to content

Latest commit

 

History

History
146 lines (117 loc) · 5.53 KB

index.md

File metadata and controls

146 lines (117 loc) · 5.53 KB

Deploying Timekeeper to a dependent branch

A dependent branch is a branch of Timekeeper using own branding (colors, logos etc) and living in its own Static Web App instance, but using the common Storage, Azure Functions and Azure SignalR service instances.

If you are looking to deploy a completely independent version of Timekeeper (using its own instance of Storage, Azure Functions and Azure SignalR service), please check this page.

Preparing the new branch

  1. Clone or fork this repo.
    1. If you already have this repo cloned or forked locally, make sure that you have the latest by either pulling from origin (local clone) or fetch upstream (local fork).
  2. Checkout the main branch.
  3. Create a new branch. In this document we will refer to it as your-new-branch.
  4. With the new branch checked out, open Client\wwwroot\appsettings.json.
  5. Replace the GUID under BranchId with a new one.
  6. Open Client\wwwroot\appsettings.Development.json.
  7. Replace the GUID under BranchId with a new one.
  8. Replace Client\wwwroot\images\header-logo.png with a new logo.
  9. Open Client\wwwroot\css\branch.css.
  10. Edit the CSS styles.
  11. Open Client\Model\Branding.cs.
  12. Edit the properties.

Setting the authorization

If you want the branch to be protected by roles, you need to set it up as follows:

  1. In Client\Model\Branding.cs, set MustAuthorize to true.
  2. Open Client\wwwroot\routes.json.
  3. Modify the json as follows:
{
  "routes": [
    {
      "route": "/api/*",
      "allowedRoles": [ "host" ]
    },
    {
      "route": "/*",
      "serve": "/index.html",
      "statusCode": 200
    }
  ]
}

Checking the changes

If you want to verify your changes, you can run the new branch locally. Follow the steps described in Running the app locally.

Preparing the new Azure Static Web Apps instance

Once you are satisfied with your changes, you can prepare the code for automated deployment into a new Azure Static Web App instance.

  1. Commit all your changes and push the new branch to the repo.
  2. Go to the Azure portal.
  3. Create a new Static Web App instance with the following settings:
    1. Create a new resource group.
    2. Enter the app name.
    3. Select the hosting plan you need.
    4. Select the region.
    5. Select GitHub under Deployment details.
    6. Click on Sign in with GitHub.
    7. Authorize Azure Static Web Apps to access your GitHub account.
    8. After you are authorized, select the organization into which your repo is located.
    9. Select the repository.
    10. Select the branch you just pushed.
    11. Under Build Presets, select Blazor.
    12. Leave App location, Api location and Output location to the defaults.
    13. Click Review and create.
    14. Click Create.
    15. Wait until the deployment is complete.
    16. Switch to the Timekeeper repo's actions.
    17. Wait until the action successfully completes.

Configuring the Static Web App instance

  1. Navigate to the new Static Web App instance in the Azure portal.
  2. Open the Application Insights tab.
    1. Set Enable Application Insights to Yes.
    2. Leave the other options as is.
    3. Click on Save.
  3. Open the Configuration tab.
    1. Set AzureSignalRConnectionString to the connection string for the Azure SignalR service instance.
    2. Set AzureStorage to the connection string for the Storage account.
  4. Save the configuration.

To obtain the connection strings, contact [email protected].

Setting a custom domain (optional)

  1. Configure the custom domain with your domain name provider.
    1. Add a CNAME record.
    2. Point the CNAME record to the Static Web App's domain.
  2. Go back to the Static web app instance.
  3. Click the Custom domain tab.
  4. Click Add.
  5. Enter the custom domain you just configured.
  6. Click Next.
  7. Click Add.

It can take a few minutes for the configuration to come through.

Setting the roles

If you decided to protect your branch, follow the steps to configure the roles:

  1. Open the Role management tab.
  2. Invite the hosts as needed.
    1. Click on Invite.
    2. Select GitHub or Twitter as Authentication provider.
    3. Enter the new host's handle or username.
    4. Leave the domain as is.
    5. Set the Role to host.
    6. Set the expiration time as needed.
    7. Click on Generate.
    8. Copy the link and send to the new host so he can log in and register.

Setting CORS

The last step is setting up CORS in the Azure Functions instance.

  1. Open the Overview tab.
  2. Copy the URL.
  3. Open the Azure Functions application.
  4. Open the CORS tab.
  5. Add the URL you just copied.
  6. Save.

At this point the application should run fine.

Additional configuration (optional)

Optionally you can change the following settings:

  • Change the name of the GitHub action that was generated for your Static Web App instance to follow the conventions of the other actions.
  • Change the name of the GitHub token used by this action.
    • Go to the Azure Static Web App in the portal.
    • Select Manage deployment token.
    • Copy the token.
    • Go to GitHub action secrets
    • Create a New repository secret named SWA_TOKEN_[YOUR_BRANCH].
    • Paste the token you copied.
    • Click Add secret.
    • Update the token name in the GitHub action (in 2 locations).
    • Remove the old token from the secrets.