Portals Development Workflow

[TylerBurnett]

Hello, 

We are a dev team that has migrated from common dev workflows like react, angular etc to this platform to see if it can tailor to our needs in a pilot project. 

At the moment, its getting difficult to continue to develop as a set of three developers since we are constantly overwriting each others styles and templates by simply developing at the same time. As well as the simple fact that developing/ testing in portals is tedious. In many normal development workflows (like react, angular etc.) there Is there a development server that spins up locally from which you can develop code on your own branch without interfering with others work. Is this possible in Power Apps Portals?

We've noticed that you have a CLI in preview which we plan to implement soon, but this CLI as a dev pipeline would actually cause more issues as it would hard overwrite all files in the portal. Which would make multiple branch development in source control very difficult, since changes would be constantly overwritten no matter what section of the code you are working on.

[ragavanrajan]

Hi @TylerBurnett 

I am from the same background and we have switched to the portal. Maybe I can share our experience how we are successfully utilising it so far. 

1. We have a team of developers where tasks will be assigned in each sprints. 

2. Normally, if we take a page, the design and its functional tasks will be assigned to one person. So others don't touch their page. 

3. You can plan in the same way, where they have a dedicated page to work for the cycle. 

4. Currently, we are utilizing  "Portal studio helper" by @OOlashyn. The good part about this vscode extension is you will have full freedom of viewing HTML, CSS and JS pages in VSCODE. Once we did our dev then we upload it back to the portal.  I personally like it a lot because of the convenience and background experience from open source. 

5. On the other hand, DevOps pipeline is released recently along with CLI. Arpit has created an article to configure the DevOps pipeline. It will be useful. 

https://arpitpowerguide.com/2021/12/15/powerapps-portals-build-tools-automate-portal-deployment/ 

Hope it helps. 
------------

If you like this post, give it a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users to find it.

[chleverenz]

Hi @TylerBurnett ,

we also do it like @ragavanrajan mentioned. Nevertheless its sometimes hard to split up the work like that.

I have no idea about the costs, but you could provision another dataverse and add a portal. You could then share

the code via git and use for example branching and everybody works on his/hers version and deploys it directly to her own instance.

You just have to provision a portal, upoload the existing portal via the cli tool and use the just uploaded portal.

For really heavy developement in react/vue/elm/knockout/.. (you name it 🙂 ) i usually have some mockdata, which i use to build up my stuff and test it locally in the usual environments. Having a draft version i then integrate it into the existing code.

Another good experience was to use "inheritance" in portals. You might have noticed, that liquid supports {% extends %} as a keyword. You could design a hosting page and get diffrent content from diffrent templates. If you do so, you could easily split up work for diffrent blocks of the page. Also {% include %} is very helpful in this approach. This splits up your work in smaller pieces.

So, hopefully this did not produce too much fog in all heads,

  Christian 

[TylerBurnett]

This is also what we're doing (separating work between pages and functionality), unfortunately this would also mean we have create a temp style sheet for each page we develop on to remove issues. It can be considered a method of doing this. But another issue is that we use the source code version of bootstrap from which we compile into CSS from source LESS. 

Ideally a way of previewing these pages locally and developing locally is what we would like.

[ragavanrajan]

Hi @TylerBurnett 

You can use the vscode extension by Oolashyn which I have mentioned in the post. In addition, as @chleverenz mentioned, you can spin up dev environment and develop it locally. 

Hope it helps.

------------

If you like this post, give it a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users to find it.

[chleverenz]

@TylerBurnett : for compiling bootstrap and not using theming i would like to give 100 thumbs up 🙂

[eugenevanstaden]

@TylerBurnett 

Not much tooling will solve this - only discipline will.

I manage a large team that only develop Portal solutions - it takes time to work out what works within your team. 

On custom script development for example, we never build any javascript in EntityForm, Lists or in Web templates. These are all developed, built, packed and added as webfile as either part of our local development process or during the build in pipeline. Same for CSS.

Liquid templates will be the main issue in terms of having multiple people working on them - again discipline will be the key and who works on what.