{"id":39562,"date":"2020-06-10T06:00:18","date_gmt":"2020-06-10T13:00:18","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/premier-developer\/?p=39562"},"modified":"2020-06-02T08:40:18","modified_gmt":"2020-06-02T15:40:18","slug":"maintain-projects-with-different-sharepoint-framework-versions-using-azure-container-registry","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/premier-developer\/maintain-projects-with-different-sharepoint-framework-versions-using-azure-container-registry\/","title":{"rendered":"Maintain projects with different SharePoint Framework versions using Azure Container Registry"},"content":{"rendered":"<p>In this post, App Dev Manager <a href=\"https:\/\/www.linkedin.com\/in\/nplanchart\/?locale=en_US\">Norberto Planchart<\/a> demonstrates how to create and consume Docker containers for SPFx projects using Azure Container Registry.<\/p>\n<hr \/>\n<p>SharePoint Framework (SPFx) is growing rapidly, which is good because in each version it gives us more and more features and functionality. But, on the other hand, it creates a problem for us when we must maintain our &#8220;old&#8221; projects that are already in production. Due to time constraints, we don&#8217;t always have the option to migrate to the latest version.<\/p>\n<p>If we must make a minor change, the ideal is to keep the project in its version, but surely our development environment is already in a higher version. In the past, the solution would be to have a virtual machine for each version that we maintain. But now we have containers, here is where Azure Container Register (ACR) will help us.<\/p>\n<p>ACR is a managed Docker registry service based on the open source Docker Registry 2.0. ACR is the ideal choice if we want to have standard images for all of our developers, shared images with our continuous integration (CI) processes, and manage everything from a single platform and provider.<\/p>\n<p>In this article we are going to see how to create and consume images to our SPFx projects.<\/p>\n<h3>Prerequisites:<\/h3>\n<h4>Azure:<\/h4>\n<ul>\n<li>An Azure account. If you do not have you can create one with the following link: <a href=\"https:\/\/azure.microsoft.com\/en-us\/free\">https:\/\/azure.microsoft.com\/en-us\/free<\/a><\/li>\n<\/ul>\n<h4>Developers machine:<\/h4>\n<ul>\n<li>Azure Command-Line Interface (Azure CLI): <a href=\"https:\/\/docs.microsoft.com\/en-us\/cli\/azure\/install-azure-cli?view=azure-cli-latest\">https:\/\/docs.microsoft.com\/en-us\/cli\/azure\/install-azure-cli?view=azure-cli-latest<\/a><\/li>\n<li>Visual Studio Code: <a href=\"https:\/\/code.visualstudio.com\/\">https:\/\/code.visualstudio.com\/<\/a><\/li>\n<li>Docker Desktop: <a href=\"https:\/\/docs.docker.com\/desktop\/\">https:\/\/docs.docker.com\/desktop\/<\/a><\/li>\n<\/ul>\n<h3>Create an Azure Container Register:<\/h3>\n<ul>\n<li>Login into Azure<\/li>\n<\/ul>\n<p style=\"padding-left: 40px;\"><em>az login<\/em><\/p>\n<ul>\n<li>Create tags and variables<\/li>\n<\/ul>\n<p style=\"padding-left: 40px;\"><em>$tags = @{&#8220;Departament&#8221;=&#8221;IT&#8221;; &#8221; Environment&#8221;=&#8221;Dev&#8221;}<\/em><\/p>\n<p style=\"padding-left: 40px;\"><em>$ResourceGroup_Name = &#8220;rgSharePoint&#8221;<\/em><\/p>\n<p style=\"padding-left: 40px;\"><em>$AzureContainerRegistry_Name = &#8220;acrSharePoint&#8221;<\/em><\/p>\n<ul>\n<li>Create a resourse group if need<\/li>\n<\/ul>\n<p style=\"padding-left: 40px;\"><em>az group create &#8211;name $ResourceGroup_Name &#8211;location westus &#8211;tags $tags<\/em><\/p>\n<ul>\n<li>Create an Azure Container Register<\/li>\n<\/ul>\n<p style=\"padding-left: 40px;\"><em>az acr create -g $ResourceGroup_Name -n $AzureContainerRegistry_Name &#8211;sku Basic &#8211;admin-enabled<\/em><\/p>\n<p><img decoding=\"async\" width=\"1249\" height=\"1007\" class=\"wp-image-39563\" src=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/06\/word-image-6.png\" srcset=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/06\/word-image-6.png 1249w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/06\/word-image-6-300x242.png 300w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/06\/word-image-6-1024x826.png 1024w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/06\/word-image-6-768x619.png 768w\" sizes=\"(max-width: 1249px) 100vw, 1249px\" \/><\/p>\n<h3>Build images and publish to ACR:<\/h3>\n<ul>\n<li>Images version 1.10.0 tag as V1.10.0<\/li>\n<\/ul>\n<p style=\"padding-left: 40px;\"><em>cd C:\\Code\\DockerFile\\SPFx\\V1.10.0<\/em><\/p>\n<p style=\"padding-left: 40px;\"><em>az acr build &#8211;image spfx:latest &#8211;registry $AzureContainerRegistry_Name &#8211;file .\\SPFxV1.10.0.Dockerfile .<\/em><\/p>\n<ul>\n<li>Images version 1.10.0 tag as latest<\/li>\n<\/ul>\n<p style=\"padding-left: 40px;\"><em>cd C:\\Code\\DockerFile\\SPFx\\V1.10.0<\/em><\/p>\n<p style=\"padding-left: 40px;\"><em>az acr build &#8211;image spfx:latest &#8211;registry $AzureContainerRegistry_Name &#8211;file .\\SPFxV1.10.0.Dockerfile .<\/em><\/p>\n<ul>\n<li>Images version 1.10.0 tag as V1.9.1<\/li>\n<\/ul>\n<p style=\"padding-left: 40px;\"><em>cd C:\\Code\\DockerFile\\SPFx\\V1.9.1<\/em><\/p>\n<p style=\"padding-left: 40px;\"><em>az acr build &#8211;image spfx:1.9.1&#8211;registry $AzureContainerRegistry_Name &#8211;file .\\SPFxV1.9.1.Dockerfile .<\/em><\/p>\n<p>Note: You can use the <a href=\"https:\/\/github.com\/waldekmastykarz\">Waldek Mastykarz<\/a> docker imagen listed in the references.<\/p>\n<p><img decoding=\"async\" width=\"1377\" height=\"82\" class=\"wp-image-39564\" src=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/06\/word-image-7.png\" srcset=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/06\/word-image-7.png 1377w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/06\/word-image-7-300x18.png 300w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/06\/word-image-7-1024x61.png 1024w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/06\/word-image-7-768x46.png 768w\" sizes=\"(max-width: 1377px) 100vw, 1377px\" \/><\/p>\n<p>Here the result in the Azure Portal:<\/p>\n<p><img decoding=\"async\" width=\"1451\" height=\"442\" class=\"wp-image-39565\" src=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/06\/word-image-8.png\" srcset=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/06\/word-image-8.png 1451w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/06\/word-image-8-300x91.png 300w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/06\/word-image-8-1024x312.png 1024w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/06\/word-image-8-768x234.png 768w\" sizes=\"(max-width: 1451px) 100vw, 1451px\" \/><\/p>\n<p>With these commands we get the login server and password to use later:<\/p>\n<p><em>az acr show &#8211;name $AzureContainerRegistry_Name &#8211;query loginServer<\/em><\/p>\n<p><em>$password = az acr credential show -n $AzureContainerRegistry_Name &#8211;query &#8220;passwords[0].value&#8221; -o tsv<\/em><\/p>\n<h3>Testing on a dev machine:<\/h3>\n<ul>\n<li>Log in to an Azure Container Registry<\/li>\n<\/ul>\n<p style=\"padding-left: 40px;\"><em>az acr login &#8211;name &#8220;acrSharePoint&#8221; &#8211;password &#8220;UMpSoqcR=CzKAVfWX1PWwJs38RjQsjmk&#8221; &#8211;username &#8220;acrSharePoint&#8221;<\/em><\/p>\n<p><img decoding=\"async\" width=\"730\" height=\"125\" class=\"wp-image-39566\" src=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/06\/word-image-9.png\" srcset=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/06\/word-image-9.png 730w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/06\/word-image-9-300x51.png 300w\" sizes=\"(max-width: 730px) 100vw, 730px\" \/><\/p>\n<ul>\n<li>Create and start a container<\/li>\n<\/ul>\n<p style=\"padding-left: 40px;\"><em>docker run -it &#8211;rm &#8211;name spfx-helloworld1.10.0 -v C:\/Code\/Projects\/SPFx\/V1.10.0:\/usr\/app\/spfx -p 5432:5432 -p 4321:4321 -p 35729:35729 acrsharepoint.azurecr.io\/spfx:1.10.0<\/em><\/p>\n<p><img decoding=\"async\" width=\"731\" height=\"68\" class=\"wp-image-39567\" src=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/06\/word-image-10.png\" srcset=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/06\/word-image-10.png 731w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/06\/word-image-10-300x28.png 300w\" sizes=\"(max-width: 731px) 100vw, 731px\" \/><\/p>\n<p>For example, we can create a new project in this version.<\/p>\n<p><img decoding=\"async\" width=\"731\" height=\"334\" class=\"wp-image-39568\" src=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/06\/word-image-11.png\" srcset=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/06\/word-image-11.png 731w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/06\/word-image-11-300x137.png 300w\" sizes=\"(max-width: 731px) 100vw, 731px\" \/><\/p>\n<h3>References:<\/h3>\n<ul>\n<li>PnP Webcast &#8211; Using Docker in SharePoint Framework development: <a href=\"https:\/\/www.youtube.com\/watch?time_continue=1&amp;v=S9mkUrJ_v6c&amp;feature=emb_logo\">https:\/\/www.youtube.com\/watch?time_continue=1&amp;v=S9mkUrJ_v6c&amp;feature=emb_logo<\/a><\/li>\n<li>Docker images for working with SharePoint Framework:<\/li>\n<\/ul>\n<p style=\"padding-left: 40px;\"><a href=\"https:\/\/github.com\/waldekmastykarz\/docker-spfx\">https:\/\/github.com\/waldekmastykarz\/docker-spfx<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Azure Container Registry (ACR) is a managed Docker registry service based on the open source Docker Registry 2.0. ACR is the ideal choice if you want to have standard images for all of our developers, shared images with our continuous integration (CI) processes, and manage everything from a single platform and provider.<\/p>\n","protected":false},"author":582,"featured_media":39568,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[25,8745],"tags":[97,29,335],"class_list":["post-39562","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-azure","category-sharepoint","tag-azure-container-registry","tag-docker","tag-sharepoint"],"acf":[],"blog_post_summary":"<p>Azure Container Registry (ACR) is a managed Docker registry service based on the open source Docker Registry 2.0. ACR is the ideal choice if you want to have standard images for all of our developers, shared images with our continuous integration (CI) processes, and manage everything from a single platform and provider.<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/posts\/39562","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/users\/582"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/comments?post=39562"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/posts\/39562\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/media\/39568"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/media?parent=39562"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/categories?post=39562"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/tags?post=39562"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}