Context
When you think of low code development, you think of inclusive technology as this introduces a visual approach (drag-drop) to developing software. Low code development empowers a citizen developer to quickly put together custom software solutions and increase focus on high-impact business operations. On the other hand, a code-first developer takes pride in writing code, working with source control - the traditional way of software development. But what happens when code-first developers need to contribute to the same project as citizen developers? Does this imply that either the code-first developers leave their area of comfort (dev environment) and fit into the citizen developer's world of low/no code and vice versa? Absolutely not!
Microsoft introduces you to fusion development, an approach that allows code-first developers to build low code solutions without having to leave their development environments.
Follow along and see how you can edit your power page on visual studio code and have your simple customer facing site live in no time.
What you need.
Step 1: Create your power page, here is a step-by-step guide on how to do so by @Someleze_Diko
Step 2: Install the Power Platform Tools Extension on Visual Studio Code
Switch to VS Code, and on the vertical tab on the left, see 1, click the extension icon and type 'Power Platform Tool' to install the extension. This action will also make the power platform Command Line Interface (CLI), also referred to as pac, available on your terminal.
Once you install the extension, verify that you have the CLI available and get its version by opening a new terminal, Ctrl+Shift+`, then type in the command below
pac
Step 3: Create an authentication profile to connect to your Microsoft Dataverse
Type in the command below, click enter and follow the prompts to sign into your account to create a new authentication profile and connect it to your environment. Give your profile a name and replace the url with your instance url.
#Students can use the M365 developer account to create their own environments
pac auth create --name GivenName --url https://InstanceUrl.crm5.dynamics.com/
To get your instance url, navigate to your power pages environment >> click on the gear/settings) icon (1) >> click on session details (2) >> copy the instance url (3)
Once you do that, you can type in the below command on your terminal to view the website(s) present in the newly added authentication account.
pac paportal list
Tip: You do not have to cram all these commands, if you need help performing a particular action, you literally just ask the terminal of help. Example
If you need to know what you can do as admin, just type pac admin help, and so on
Step 4: Download your power page to your local machine
Type in the below command to download the power page. Specify the website ID and the path to save it (see website Id at previous step - pac portal list)
pac paportal download -- path –- websiteId
Navigate to file explorer and open the downloaded folder in VSCode
Step 5 (Optional) : Let’s now make our files a little more appealing
Click the extensions icon on the left and the select the power platform tools extension (see 1) >> click the ‘Set File Icon Theme’ – blue button (see 2) >> then select the PowerApps Portals Icons (Visual Studio Code)
Having successfully connected to your dataverse environment, downloaded your power page and set the icon theme, next up is to simply edit your site.
Step 6: Edit your power page/site
Navigate to the web page that you would like to edit to see the code.
With your code ready for changes, you would need to have a live view of the updates, and this is all possible without you leaving your editor, by clicking on the preview icon on the far right, see 1 above.
You can now customize your site to meet your preferences on code. I’ve made a few changes on mine.
Step 7: Upload your customized site to power pages
Copy the path to your downloaded folder and type in the below command on your terminal. This action will update the files that you have locally modified to the power pages.
pac paportal upload --path
That's all to be done. Switch back to the power pages site and preview your website to see the updates you've just made.
Congratulations!! You have just edited a power page as a code-first developer while still on your favorite editor.
Happy coding! #FusionDevelopment