How can I leverage the master page folder in this project?

[Ted-A]

I would like to apply a custom masterpage to my site and to the local server when viewing a web part. Do you have any example? Thanks in advance for all your help.

[koltyakov]

Hi @Ted-A,

Thanks for using the generator.

Yes, the masterpage branding is a supported scenario. But it can be not the most straightforward in configuration terms.

Withing the configs in ./config/app.json the branding options should be provided. [Oh, it was really long I ever needed classic branding. ;)]

The masterpage or layout pages sources should be placed as .hbs in sources. They are compiled to .masterpage or .aspx correspondingly.

After the first upload with npm run publish, the metadata for masterpage/layout can be updated if needed manually.

Masterpage can be applied manually or with a task.

[Ted-A]

@koltyakov
Thank you for your quick response. I will follow the steps you outlined here and will reach out if I have further questions.

[clechner77]

When I added a masterpage it took me a bit to figure out how, but it made sense afterwards. Some additional notes if someone else stumbles across this....

APP.JSON

{
  "$schema": "../node_modules/sp-build-tasks/schema/v1/sppp.json",
  "spFolder": "_catalogs/masterpage/custom",
  "distFolder": "./dist",
  "masterpagePath": "masterpage/main.master",
  "masterpageCodeName": "new",
  "platformVersion": "2019",   <- pay attention here.... what you put should be included in your hbs file name
  ...............
}

Create an aspx masterpage exactly like you normally would, but named with the convention above in mind -- [PAGENAME].[MASTERCODENAME].hbs

main.2019.hbs

Save it in the masterpage directory.

Build and deploy. If you update the masterpage, it will update it on your site.