Migrate Existing Power Pages Websites to Bootstrap 5
Migrate Existing Power Pages Websites to Bootstrap 5
Microsoft Power Pages now supports Bootstrap 5, providing improved responsiveness, modern UI capabilities, enhanced accessibility, and better performance. Existing websites built on Bootstrap 3 can be migrated using the Microsoft Power Platform CLI migration tools.
Why Upgrade to Bootstrap 5?
Bootstrap 5 introduces significant improvements over Bootstrap 3, including modern components, improved grid systems, reduced dependencies, and enhanced mobile responsiveness.
- Modern responsive design.
- Improved performance.
- Enhanced accessibility support.
- Updated UI components.
- Long-term Microsoft support.
- Better developer experience.
Prerequisites
Before starting the migration process, ensure the following requirements are completed:
- Install Microsoft Power Platform CLI version 1.28.2 or later.
- Enable SVG file support in environment settings.
- Create a duplicate Bootstrap 3 website for comparison and rollback purposes.
- Verify access permissions to the Power Pages environment.
- Install Visual Studio Code for reviewing migration changes.
Download the Website Folder
Use the Power Platform CLI to download the existing website before migration.
Step 1: Authenticate
pac auth create -u [Dataverse URL]
Step 2: List Available Sites
pac pages list
Note the Website ID of the site you want to migrate.
Step 3: Download the Website
pac pages download --path [PATH] -id [WebSiteId]
This command downloads all website metadata and files into the specified local folder.
Run the Bootstrap Migration Tool
After downloading the website, execute the Bootstrap migration command.
pac pages bootstrap-migrate -p "WebsiteFolderPath"
The migration tool creates a new folder containing the Bootstrap 5 version of the website.
Tip: Keep the original Bootstrap 3 version unchanged so you can compare both versions during testing.Review Migration Changes
After the migration completes, review all generated changes before deployment.
- Open the Bootstrap 5 folder in Visual Studio Code.
- Open the Command Palette using Ctrl + Shift + P.
- Run the Bootstrap Diff command.
- Review highlighted differences between Bootstrap 3 and Bootstrap 5 files.
- Validate custom CSS and JavaScript compatibility.
Upload the Migrated Website
Once validation is complete, upload the migrated Bootstrap 5 website.
pac pages upload --path [Folder-location]
Example:
pac pages upload --path C:\pac-portals\downloads\custom-portal\
After the upload completes, the website will run using Bootstrap 5 components and styling.
Validate the Migration
Compare the migrated Bootstrap 5 website against the original Bootstrap 3 version.
- Verify page layouts.
- Test responsive behavior.
- Validate forms and lists.
- Check custom JavaScript functionality.
- Review navigation and menus.
- Confirm styling consistency.
Clear Website Cache
After uploading the migrated website, clear the Power Pages cache to ensure the latest files are loaded.
- Clear server-side cache.
- Clear browser cache.
- Reload the website.
- Validate all pages again.
Bootstrap 3 vs Bootstrap 5
| Feature | Bootstrap 3 | Bootstrap 5 |
|---|---|---|
| Grid System | Legacy | Enhanced |
| Mobile Support | Basic | Advanced |
| jQuery Dependency | Required | Removed |
| Accessibility | Limited | Improved |
| Components | Older Components | Modern Components |
Best Practices
- Create backups before migration.
- Test all customizations thoroughly.
- Review Bootstrap class changes.
- Validate responsive layouts.
- Keep the original Bootstrap 3 site for comparison.
- Perform migration in a non-production environment first.
Summary
Migrating Power Pages websites to Bootstrap 5 provides improved performance, responsiveness, accessibility, and modern UI capabilities. By using the Power Platform CLI migration tools and following best practices, organizations can successfully modernize their websites while minimizing risks during the upgrade process.