Latest Posts

Working with Git in portal projects

Posted on by Rishan Solutions

Loading

Working with Git for Power Pages (previously part of PowerApps Portals) projects allows you to efficiently manage, version, and collaborate on customizations, configurations, and portal development. As Power Pages often involve both content management (web pages, forms, etc.) and custom code (JavaScript, CSS, themes), Git provides an ideal solution for tracking changes, enabling team collaboration, and automating deployments.

This guide will walk you through setting up and using Git for managing your Power Pages projects, integrating with Power Platform CLI, and establishing best practices for source control.

1. Setting Up Git for Power Pages Projects

Before you begin, ensure that you have a Git repository set up for your Power Pages project. You can use services like GitHub, GitLab, or Azure Repos for version control.

Steps to Set Up:

  1. Create a Git Repository:
    • On platforms like GitHub or GitLab, create a new repository specifically for your Power Pages portal project.
    • If using Azure Repos, create a repository within Azure DevOps.
  2. Clone the Repository:
    • After creating the repository, clone it to your local machine where you’ll work on your portal project.
    git clone https://github.com/yourusername/power-pages-project.git
  3. Install Power Platform CLI: The Power Platform CLI (pac) is essential for interacting with Power Pages portals. You can use it to download and upload portal content to your Git repository.
    • Install Power Platform CLI from Microsoft’s official page.
    • Once installed, you can interact with the Power Pages portal using the CLI, allowing you to download portal data (web files, forms, pages, etc.) and commit them to your Git repository.
    bashCopyEditpac --version

2. Downloading Power Pages Data Using Power Platform CLI

The first step in managing your portal project with Git is to download the portal’s configuration and content from Power Pages. This involves downloading your portal’s resources (web pages, forms, themes, etc.) into a local directory that is tracked by Git.

Steps to Download Portal Data:

  1. Authenticate and Connect to the Environment: To interact with the portal, authenticate with your Power Platform environment using the pac auth command:
    pac auth create --url https://<your-environment-url> --username <your-username> --password <your-password>
  2. Download Portal Data: Use the pac portal download command to retrieve the portal data and save it into a specific directory in your local Git repository. This will include web pages, web files (HTML, JavaScript, CSS), configurations, and customizations.
    pac portal download --portalUrl https://<your-portal-url> --path ./power-pages
    • Replace <your-portal-url> with the URL of your portal.
    • Replace ./power-pages with the relative path to the directory where you want to store the downloaded files.
  3. Review the Downloaded Files: After downloading, navigate to the directory where the portal files were saved. You’ll notice several folders and files representing different portal components:
    • Web Files (CSS, JS, images)
    • Web Pages (HTML templates)
    • Site Settings
    • Customizations

3. Making Changes and Committing to Git

Now that you have downloaded your portal data, you can start making changes locally (e.g., update web pages, modify CSS, add new JavaScript). Once the changes are made, you’ll need to commit them to the Git repository.

Steps to Make Changes:

  1. Edit Files:
    • Use your favorite code editor (e.g., Visual Studio Code) to make changes to the downloaded files.
    • You can modify the HTML, CSS, JavaScript, and other content files according to the requirements of your portal.
  2. Track Changes in Git:
    • Once changes are made, use the following Git commands to track and commit them.
    bashCopyEditgit add . This adds all modified and new files to the staging area.
  3. Commit Changes:
    • After adding files, commit the changes with a meaningful message.
    bashCopyEditgit commit -m "Updated homepage layout and added custom JavaScript for form validation"
  4. Push Changes to Remote Repository:
    • After committing changes locally, push them to the remote Git repository.
    bashCopyEditgit push origin main This pushes the changes to the remote main branch on GitHub, GitLab, or Azure Repos.

4. Uploading Changes Back to Power Pages

Once you’ve made and committed changes to your Git repository, the next step is to upload those changes back to Power Pages to apply them to your live portal.

Steps to Upload Changes:

  1. Upload Changes Using Power Platform CLI: After pushing the changes to your Git repository, use the pac portal push command to upload the updated portal files back to Power Pages. bashCopyEditpac portal push --portalUrl https://<your-portal-url> --path ./power-pages
    • This command uploads the local files from the specified path back to the portal.
  2. Review the Portal:
    • After uploading the changes, refresh your portal (in the browser) to ensure that the updates are applied successfully. Test for layout changes, custom functionality, and integration with other services.

5. Branching Strategy for Power Pages Projects

When working in a team, it’s important to have a clear branching strategy to avoid conflicts and manage different stages of development (e.g., development, testing, production).

Recommended Branching Strategy:

  1. Main Branch:
    • This branch represents the stable, production-ready version of the portal.
  2. Development Branch:
    • A shared branch for ongoing development where new features and bug fixes are integrated. Developers can branch off from here for specific features.
  3. Feature Branches:
    • Create feature-specific branches for individual tasks. Each developer or team working on a specific functionality (e.g., adding a new form or theme) should create their own branch.
    bashCopyEditgit checkout -b feature/contact-form
  4. Release Branches:
    • Before deploying changes to production, create a release branch. This allows for testing and final adjustments without affecting the main branch.
    bashCopyEditgit checkout -b release/v1.0
  5. Hotfix Branches:
    • For urgent fixes, create hotfix branches from the main branch.
    git checkout -b hotfix/login-error

6. Using CI/CD for Power Pages Deployment

For more advanced scenarios, consider setting up Continuous Integration (CI) and Continuous Deployment (CD) pipelines. This ensures that changes made to the repository are automatically deployed to your test or production environments.

Steps to Implement CI/CD:

  1. Configure Azure DevOps or GitHub Actions:
    • Use tools like Azure DevOps Pipelines or GitHub Actions to automate the process of downloading, updating, and uploading portal files.
  2. Set Up a Build Pipeline:
    • Create a pipeline to automatically download Power Pages data from your Power Platform environment when changes are committed to the repository.
  3. Set Up Deployment Pipeline:
    • Create a deployment pipeline that triggers when code is merged to specific branches (e.g., main or release). The pipeline should automatically upload the changes to the portal.

7. Best Practices for Source Control with Power Pages

  1. Use Descriptive Commit Messages: Write clear and concise commit messages to describe the changes you’ve made. This helps team members understand the history of changes.
  2. Commit Frequently: Regularly commit small changes to avoid large, difficult-to-manage commits.
  3. Collaborate via Pull Requests: Use pull requests to review code changes and ensure that only tested, approved changes make it to the main branch.
  4. Use Tags for Releases: Tag releases to mark stable versions of the portal. This makes it easier to roll back to a previous version if necessary.
  5. Avoid Storing Sensitive Information: Ensure sensitive data like API keys and credentials are not stored in the Git repository. Use environment variables or a secrets manager.

Leave a Reply

Your email address will not be published. Required fields are marked *