Tutorial: Publish Azure Static Web Apps with GitLab

Published Feb 21 2022 09:50 PM 3,120 Views
Microsoft

This article demonstrates how to deploy to Azure Static Web Apps using GitLab.

 

In this tutorial, you learn to:

  • Set up an Azure Static Web Apps site for a Vanilla Basic app.
  • Create an GitLab Pipeline to build and publish a static web app via Azure portal.

 

Prerequisites

  • Active Azure account: If you don't have one, you can create an account for free.
  • GitLab project: If you don't have one, you can create a project for free.
  • You’ll need to validate your account with a credit card. This is required to discourage and reduce abuse on GitLab infrastructure.

 

Create a repository in GitLab

  • Navigate to your repository in GitLab Repos.
  • Go to create new project page.
  • Click on Import Project.

 

SachinRathor_0-1645074667272.png

                                                       Creation of new project using import method

 

  • Click on Repo by URL.

 

SachinRathor_1-1645074667278.png

 

 

SachinRathor_2-1645074667287.png

                                                                Importing project using Repo by URL

 

  • Select Create project.

 

Create a static web app

  • Navigate to the Azure portal.
  • Select Create a Resource.
  • Search for Static Web Apps.
  • Select Static Web Apps.
  • Select Create.
  • Create a new static web app with the following values.

 

Setting

Value

Subscription

Your Azure subscription name.

Resource Group

Select an existing group name or create a new one.

Name

Enter myGitLabApp.

Hosting plan type

Select Free.

Region

Select a region closest to you.

Source

Select Other.

 

SachinRathor_3-1645074667295.png

                                                                   Static Web App resource creation

*Note: This is just an example.

 

 

  • Select Review + create
  • Select Create.
  • Once the deployment is successful, select Go to resource.
  • Select Manage deployment token.
  • Copy the deployment token and paste the deployment token value into a text editor for use in another screen.

 

 

SachinRathor_4-1645074667307.png

                                               Copying deployment token from Static Web App resource

 

 

Create the Pipeline Task in GitLab

  • Navigate to the repository in GitLab that was created earlier.
  • Select Settings.
  • Select CI/CD.
  • Select Expand Variable sub-section.

SachinRathor_5-1645074667312.png

 

  • Select Add variable.

 

SachinRathor_6-1645074667318.png

                                        Adding Deployment Token in project CI/CD variable section

 

  • Write DEPLOYMENT_TOKEN in Key section.
  • Copy the deployment token in Value section that you previously pasted into a text editor.
  • Create a new file .gitlab-ci.yml. at the root directory.
  • Copy the following YAML in .gitlab-ci.yml  file and the select commit.

 

 

 

variables:
  API_TOKEN: $DEPLOYMENT_TOKEN
  APP_PATH: '$CI_PROJECT_DIR/src'

deploy:
  stage: deploy
  image: registry.gitlab.com/static-web-apps/azure-static-web-apps-deploy
  script:
    - echo "App deployed successfully."

 

 

 

*Note: $CI_PROJECT_DIR is the full path the repository is cloned to, and where the job runs from.

 

Note:

If you are not using sample app, the values for APP_PATH, API_PATH and OUTPUT_PATH need to change to match the values in your application.

 

                      

Property

Description

Example

Required

APP_PATH

Location of your application code.

Enter $CI_PROJECT_DIR/ if your application source code is at the root of the repository, or $CI_PROJECT_DIR /app if your application code is in a directory called app.

Yes

API_PATH

Location of your Azure Functions code.

Enter $CI_PROJECT_DIR /api if your app code is in a folder called api.

No

OUTPUT_PATH

Location of the build output directory relative to the APP_PATH.

If your application source code is located at $CI_PROJECT_DIR /app, and the build script outputs files to the $CI_PROJECT_DIR /app/build folder, then set $CI_PROJECT_DIR /app/build as the OUTPUT_PATH value.

No

API_TOKEN

API token for deployment

Include API_TOKEN: $DEPLOYMENT_TOKEN

Yes

 

  • Select commit.
  • Once the deployment is successful, navigate to the Azure Static Web Apps Overview which includes links to the deployment configuration. Note how the Source link now points to the GitLab.
  • Select the URL to see your newly deployed website.
 

SachinRathor_7-1645074667321.png

                                                                      URL for newly deployed app

 

Clean up resources

Clean up the resources you deployed by deleting the resource group.

  • From the Azure portal, select Resource group from the left menu.
  • Enter the resource group name in the Filter by name field.
  • Select the resource group name you used in this tutorial.
  • Select Delete resource group from the top menu.

 

Additional Resources

2 Comments
%3CLINGO-SUB%20id%3D%22lingo-sub-3176762%22%20slang%3D%22en-US%22%3ETutorial%3A%20Publish%20Azure%20Static%20Web%20Apps%20with%20GitLab%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-3176762%22%20slang%3D%22en-US%22%3E%3CH2%20id%3D%22toc-hId-365191286%22%20id%3D%22toc-hId-365934140%22%20id%3D%22toc-hId-365934140%22%20id%3D%22toc-hId-365934140%22%20id%3D%22toc-hId-365934140%22%20id%3D%22toc-hId-365934140%22%3E%3CSTRONG%3EThis%20article%20demonstrates%20how%20to%20deploy%20to%26nbsp%3B%3C%2FSTRONG%3E%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fazure%2Fstatic-web-apps%2Foverview%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3E%3CSTRONG%3EAzure%20Static%20Web%20Apps%3C%2FSTRONG%3E%3C%2FA%3E%3CSTRONG%3E%26nbsp%3Busing%20%3C%2FSTRONG%3E%3CA%20href%3D%22https%3A%2F%2Fabout.gitlab.com%2Fstages-devops-lifecycle%2Fcontinuous-integration%2F%22%20target%3D%22_blank%22%20rel%3D%22noopener%20nofollow%20noreferrer%22%3E%3CSTRONG%3EGitLab%3C%2FSTRONG%3E%3C%2FA%3E.%3C%2FH2%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EIn%20this%20tutorial%2C%20you%20learn%20to%3A%3C%2FP%3E%0A%3CUL%3E%0A%3CLI%3ESet%20up%20an%20Azure%20Static%20Web%20Apps%20site%20for%20a%20%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2Fstaticwebdev%2Fvanilla-basic%2F%22%20target%3D%22_self%22%20rel%3D%22noopener%20noreferrer%22%3EVanilla%20Basic%3C%2FA%3E%20app.%3C%2FLI%3E%0A%3CLI%3ECreate%20an%20GitLab%20Pipeline%20to%20build%20and%20publish%20a%20static%20web%20app%20via%20Azure%20portal.%3C%2FLI%3E%0A%3C%2FUL%3E%0A%3CP%3E%3CEM%3E%26nbsp%3B%3C%2FEM%3E%3C%2FP%3E%0A%3CH3%20id%3D%22toc-hId-1055752760%22%20id%3D%22toc-hId-1056495614%22%20id%3D%22toc-hId-1056495614%22%20id%3D%22toc-hId-1056495614%22%20id%3D%22toc-hId-1056495614%22%20id%3D%22toc-hId-1056495614%22%3E%3CSTRONG%3EPrerequisites%3C%2FSTRONG%3E%3C%2FH3%3E%0A%3CUL%3E%0A%3CLI%3EActive%20Azure%20account%3A%26nbsp%3BIf%20you%20don't%20have%20one%2C%20you%20can%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Fazure.microsoft.com%2Ffree%2F%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3Ecreate%20an%20account%20for%20free%3C%2FA%3E.%3C%2FLI%3E%0A%3CLI%3EGitLab%20project%3A%26nbsp%3BIf%20you%20don't%20have%20one%2C%20you%20can%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Fgitlab.com%2Fdashboard%2Fprojects%22%20target%3D%22_blank%22%20rel%3D%22noopener%20nofollow%20noreferrer%22%3Ecreate%20a%20project%20for%20free%3C%2FA%3E.%3C%2FLI%3E%0A%3CLI%3EYou%E2%80%99ll%20need%20to%20validate%20your%20account%20with%20a%20credit%20card.%20This%20is%20required%20to%20discourage%20and%20reduce%20abuse%20on%20GitLab%20infrastructure.%3C%2FLI%3E%0A%3C%2FUL%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CH3%20id%3D%22toc-hId--751701703%22%20id%3D%22toc-hId--750958849%22%20id%3D%22toc-hId--750958849%22%20id%3D%22toc-hId--750958849%22%20id%3D%22toc-hId--750958849%22%20id%3D%22toc-hId--750958849%22%3E%3CSTRONG%3ECreate%20a%20repository%20in%20GitLab%3C%2FSTRONG%3E%3C%2FH3%3E%0A%3CUL%3E%0A%3CLI%3ENavigate%20to%20your%20repository%20in%20GitLab%20Repos.%3C%2FLI%3E%0A%3CLI%3EGo%20to%20create%20new%20project%20page.%3C%2FLI%3E%0A%3CLI%3EClick%20on%20%3CSTRONG%3EImport%20Project%3C%2FSTRONG%3E.%3C%2FLI%3E%0A%3C%2FUL%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22SachinRathor_0-1645074667272.png%22%20style%3D%22width%3A%20780px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F348941i758867C2A1A813D5%2Fimage-dimensions%2F780x410%3Fv%3Dv2%22%20width%3D%22780%22%20height%3D%22410%22%20role%3D%22button%22%20title%3D%22SachinRathor_0-1645074667272.png%22%20alt%3D%22SachinRathor_0-1645074667272.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%3CFONT%20color%3D%22%237928A1%22%3ECreation%20of%20new%20project%20using%20import%20method%3C%2FFONT%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CUL%3E%0A%3CLI%3EClick%20on%20%3CSTRONG%3ERepo%20by%20URL.%3C%2FSTRONG%3E%3C%2FLI%3E%0A%3C%2FUL%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22SachinRathor_1-1645074667278.png%22%20style%3D%22width%3A%20781px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F348940i7CC9567568564BEB%2Fimage-dimensions%2F781x141%3Fv%3Dv2%22%20width%3D%22781%22%20height%3D%22141%22%20role%3D%22button%22%20title%3D%22SachinRathor_1-1645074667278.png%22%20alt%3D%22SachinRathor_1-1645074667278.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CUL%3E%0A%3CLI%3EIn%26nbsp%3B%3CSTRONG%3EGit%20repository%20URL%3C%2FSTRONG%3E%2C%20enter%26nbsp%3B%E2%80%9C%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2Fstaticwebdev%2Fvanilla-basic.git%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3Ehttps%3A%2F%2Fgithub.com%2Fstaticwebdev%2Fvanilla-basic.git%3C%2FA%3E%E2%80%9D.%3C%2FLI%3E%0A%3C%2FUL%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22SachinRathor_2-1645074667287.png%22%20style%3D%22width%3A%20780px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F348942i8DD53AD03131D633%2Fimage-dimensions%2F780x887%3Fv%3Dv2%22%20width%3D%22780%22%20height%3D%22887%22%20role%3D%22button%22%20title%3D%22SachinRathor_2-1645074667287.png%22%20alt%3D%22SachinRathor_2-1645074667287.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%26nbsp%3B%3CFONT%20color%3D%22%237928A1%22%3EImporting%20project%20using%20Repo%20by%20URL%3C%2FFONT%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CUL%3E%0A%3CLI%3ESelect%20%3CSTRONG%3ECreate%20project%3C%2FSTRONG%3E.%3C%2FLI%3E%0A%3C%2FUL%3E%0A%3CH3%20id%3D%22toc-hId-1735811130%22%20id%3D%22toc-hId-1736553984%22%20id%3D%22toc-hId-1736553984%22%20id%3D%22toc-hId-1736553984%22%20id%3D%22toc-hId-1736553984%22%20id%3D%22toc-hId-1736553984%22%3E%26nbsp%3B%3C%2FH3%3E%0A%3CH3%20id%3D%22toc-hId--71643333%22%20id%3D%22toc-hId--70900479%22%20id%3D%22toc-hId--70900479%22%20id%3D%22toc-hId--70900479%22%20id%3D%22toc-hId--70900479%22%20id%3D%22toc-hId--70900479%22%3E%3CSTRONG%3ECreate%20a%20static%20web%20app%3C%2FSTRONG%3E%3C%2FH3%3E%0A%3CUL%3E%0A%3CLI%3ENavigate%20to%20the%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Fportal.azure.com%2F%22%20target%3D%22_blank%22%20rel%3D%22noopener%20nofollow%20noreferrer%22%3EAzure%20portal%3C%2FA%3E.%3C%2FLI%3E%0A%3CLI%3ESelect%26nbsp%3BCreate%20a%20Resource.%3C%2FLI%3E%0A%3CLI%3ESearch%20for%26nbsp%3BStatic%20Web%20Apps.%3C%2FLI%3E%0A%3CLI%3ESelect%26nbsp%3BStatic%20Web%20Apps.%3C%2FLI%3E%0A%3CLI%3ESelect%26nbsp%3BCreate.%3C%2FLI%3E%0A%3CLI%3ECreate%20a%20new%20static%20web%20app%20with%20the%20following%20values.%3C%2FLI%3E%0A%3C%2FUL%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CTABLE%3E%0A%3CTBODY%3E%0A%3CTR%3E%0A%3CTD%20width%3D%22135%22%3E%3CP%3E%3CSTRONG%3ESetting%3C%2FSTRONG%3E%3C%2FP%3E%0A%3C%2FTD%3E%0A%3CTD%20width%3D%22340%22%3E%3CP%3E%3CSTRONG%3EValue%3C%2FSTRONG%3E%3C%2FP%3E%0A%3C%2FTD%3E%0A%3C%2FTR%3E%0A%3CTR%3E%0A%3CTD%20width%3D%22135%22%3E%3CP%3ESubscription%3C%2FP%3E%0A%3C%2FTD%3E%0A%3CTD%20width%3D%22340%22%3E%3CP%3EYour%20Azure%20subscription%20name.%3C%2FP%3E%0A%3C%2FTD%3E%0A%3C%2FTR%3E%0A%3CTR%3E%0A%3CTD%20width%3D%22135%22%3E%3CP%3EResource%20Group%3C%2FP%3E%0A%3C%2FTD%3E%0A%3CTD%20width%3D%22347%22%3E%3CP%3ESelect%20an%20existing%20group%20name%20or%20create%20a%20new%20one.%3C%2FP%3E%0A%3C%2FTD%3E%0A%3C%2FTR%3E%0A%3CTR%3E%0A%3CTD%20width%3D%22135%22%3E%3CP%3EName%3C%2FP%3E%0A%3C%2FTD%3E%0A%3CTD%20width%3D%22340%22%3E%3CP%3EEnter%26nbsp%3BmyGitLabApp.%3C%2FP%3E%0A%3C%2FTD%3E%0A%3C%2FTR%3E%0A%3CTR%3E%0A%3CTD%20width%3D%22137%22%3E%3CP%3EHosting%20plan%20type%3C%2FP%3E%0A%3C%2FTD%3E%0A%3CTD%20width%3D%22339%22%3E%3CP%3ESelect%26nbsp%3BFree.%3C%2FP%3E%0A%3C%2FTD%3E%0A%3C%2FTR%3E%0A%3CTR%3E%0A%3CTD%20width%3D%22135%22%3E%3CP%3ERegion%3C%2FP%3E%0A%3C%2FTD%3E%0A%3CTD%20width%3D%22340%22%3E%3CP%3ESelect%20a%20region%20closest%20to%20you.%3C%2FP%3E%0A%3C%2FTD%3E%0A%3C%2FTR%3E%0A%3CTR%3E%0A%3CTD%20width%3D%22135%22%3E%3CP%3ESource%3C%2FP%3E%0A%3C%2FTD%3E%0A%3CTD%20width%3D%22340%22%3E%3CP%3ESelect%26nbsp%3BOther.%3C%2FP%3E%0A%3C%2FTD%3E%0A%3C%2FTR%3E%0A%3C%2FTBODY%3E%0A%3C%2FTABLE%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22SachinRathor_3-1645074667295.png%22%20style%3D%22width%3A%20780px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F348944i7DB5DAFF525F7621%2Fimage-dimensions%2F780x860%3Fv%3Dv2%22%20width%3D%22780%22%20height%3D%22860%22%20role%3D%22button%22%20title%3D%22SachinRathor_3-1645074667295.png%22%20alt%3D%22SachinRathor_3-1645074667295.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%3CFONT%20color%3D%22%237928A1%22%3EStatic%20Web%20App%20resource%20creation%3C%2FFONT%3E%3C%2FP%3E%0A%3CP%3E%3CSTRONG%3E*Note%3C%2FSTRONG%3E%3A%20This%20is%20just%20an%20example.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CUL%3E%0A%3CLI%3ESelect%26nbsp%3B%3CSTRONG%3EReview%20%2B%20create%3C%2FSTRONG%3E%3C%2FLI%3E%0A%3CLI%3ESelect%26nbsp%3B%3CSTRONG%3ECreate%3C%2FSTRONG%3E.%3C%2FLI%3E%0A%3CLI%3EOnce%20the%20deployment%20is%20successful%2C%20select%26nbsp%3B%3CSTRONG%3EGo%20to%20resource%3C%2FSTRONG%3E.%3C%2FLI%3E%0A%3CLI%3ESelect%26nbsp%3B%3CSTRONG%3EManage%20deployment%20token%3C%2FSTRONG%3E.%3C%2FLI%3E%0A%3CLI%3ECopy%20the%26nbsp%3B%3CSTRONG%3Edeployment%20token%3C%2FSTRONG%3E%26nbsp%3Band%20paste%20the%20deployment%20token%20value%20into%20a%20text%20editor%20for%20use%20in%20another%20screen.%3C%2FLI%3E%0A%3C%2FUL%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22SachinRathor_4-1645074667307.png%22%20style%3D%22width%3A%20781px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F348945i9B44BE8483BD0588%2Fimage-dimensions%2F781x360%3Fv%3Dv2%22%20width%3D%22781%22%20height%3D%22360%22%20role%3D%22button%22%20title%3D%22SachinRathor_4-1645074667307.png%22%20alt%3D%22SachinRathor_4-1645074667307.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%3CEM%3E%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%3C%2FEM%3E%3CFONT%20color%3D%22%237928A1%22%3ECopying%20deployment%20token%20from%20Static%20Web%20App%20resource%3C%2FFONT%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CH3%20id%3D%22toc-hId--1879097796%22%20id%3D%22toc-hId--1878354942%22%20id%3D%22toc-hId--1878354942%22%20id%3D%22toc-hId--1878354942%22%20id%3D%22toc-hId--1878354942%22%20id%3D%22toc-hId--1878354942%22%3E%3CSTRONG%3ECreate%20the%20Pipeline%20Task%20in%20GitLab%3C%2FSTRONG%3E%3C%2FH3%3E%0A%3CUL%3E%0A%3CLI%3ENavigate%20to%20the%20repository%20in%20GitLab%20that%20was%20created%20earlier.%3C%2FLI%3E%0A%3CLI%3ESelect%20%3CSTRONG%3ESettings%3C%2FSTRONG%3E.%3C%2FLI%3E%0A%3CLI%3ESelect%20%3CSTRONG%3ECI%2FCD%3C%2FSTRONG%3E.%3C%2FLI%3E%0A%3CLI%3ESelect%20%3CSTRONG%3EExpand%3C%2FSTRONG%3E%20Variable%20sub-section.%3C%2FLI%3E%0A%3C%2FUL%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22SachinRathor_5-1645074667312.png%22%20style%3D%22width%3A%20780px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F348943i8C3A740495BA58D5%2Fimage-dimensions%2F780x141%3Fv%3Dv2%22%20width%3D%22780%22%20height%3D%22141%22%20role%3D%22button%22%20title%3D%22SachinRathor_5-1645074667312.png%22%20alt%3D%22SachinRathor_5-1645074667312.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CUL%3E%0A%3CLI%3ESelect%20%3CSTRONG%3EAdd%20variable%3C%2FSTRONG%3E.%3C%2FLI%3E%0A%3C%2FUL%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22SachinRathor_6-1645074667318.png%22%20style%3D%22width%3A%20779px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F348947i9BD72CD175D49844%2Fimage-dimensions%2F779x533%3Fv%3Dv2%22%20width%3D%22779%22%20height%3D%22533%22%20role%3D%22button%22%20title%3D%22SachinRathor_6-1645074667318.png%22%20alt%3D%22SachinRathor_6-1645074667318.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%26nbsp%3B%3CFONT%20color%3D%22%237928A1%22%3EAdding%20Deployment%20Token%20in%20project%20CI%2FCD%20variable%20section%3C%2FFONT%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CUL%3E%0A%3CLI%3EWrite%20%3CSTRONG%3EDEPLOYMENT_TOKEN%3C%2FSTRONG%3E%20in%20%3CSTRONG%3EKey%3C%2FSTRONG%3E%20section.%3C%2FLI%3E%0A%3CLI%3ECopy%20the%20deployment%20token%20in%20%3CSTRONG%3EValue%3C%2FSTRONG%3E%20section%20that%20you%20previously%20pasted%20into%20a%20text%20editor.%3C%2FLI%3E%0A%3CLI%3ECreate%20a%20new%20file%20%3CSTRONG%3E.gitlab-ci.yml%3C%2FSTRONG%3E.%20at%20the%20root%20directory.%3C%2FLI%3E%0A%3CLI%3ECopy%20the%20following%20YAML%20in%20%3CSTRONG%3E.gitlab-ci.yml%3C%2FSTRONG%3E%26nbsp%3B%20file%20and%20the%20select%20commit.%3C%2FLI%3E%0A%3C%2FUL%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CPRE%20class%3D%22lia-code-sample%20language-yaml%22%3E%3CCODE%3Evariables%3A%0A%20%20API_TOKEN%3A%20%24DEPLOYMENT_TOKEN%0A%20%20APP_PATH%3A%20'%24CI_PROJECT_DIR%2Fsrc'%0A%0Adeploy%3A%0A%20%20stage%3A%20deploy%0A%20%20image%3A%20registry.gitlab.com%2Fstatic-web-apps%2Fazure-static-web-apps-deploy%0A%20%20script%3A%0A%20%20%20%20-%20echo%20%22App%20deployed%20successfully.%22%3C%2FCODE%3E%3C%2FPRE%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CPRE%3E*%3CSTRONG%3ENote%3C%2FSTRONG%3E%3A%20%24CI_PROJECT_DIR%20is%20the%20full%20path%20the%20repository%20is%20cloned%20to%2C%20and%20where%20the%20job%20runs%20from.%3C%2FPRE%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CCODE%20class%3D%22highlighter-rouge%22%3ENote%3A%3C%2FCODE%3E%3C%2FP%3E%0A%3CPRE%3EIf%20you%20are%20not%20using%20sample%20app%2C%20the%20values%20for%20APP_PATH%2C%20API_PATH%20and%20OUTPUT_PATH%20need%20to%20change%20to%20match%20the%20values%20in%20your%20application.%3C%2FPRE%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%20%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%3C%2FP%3E%0A%3CTABLE%20width%3D%22668%22%3E%0A%3CTBODY%3E%0A%3CTR%3E%0A%3CTD%20width%3D%22158%22%3E%3CP%3E%3CSTRONG%3EProperty%3C%2FSTRONG%3E%3C%2FP%3E%0A%3C%2FTD%3E%0A%3CTD%20width%3D%22160%22%3E%3CP%3E%3CSTRONG%3EDescription%3C%2FSTRONG%3E%3C%2FP%3E%0A%3C%2FTD%3E%0A%3CTD%20width%3D%22204%22%3E%3CP%3E%3CSTRONG%3EExample%3C%2FSTRONG%3E%3C%2FP%3E%0A%3C%2FTD%3E%0A%3CTD%20width%3D%22146%22%3E%3CP%3E%3CSTRONG%3ERequired%3C%2FSTRONG%3E%3C%2FP%3E%0A%3C%2FTD%3E%0A%3C%2FTR%3E%0A%3CTR%3E%0A%3CTD%20width%3D%22158%22%3E%3CP%3E%3CSTRONG%3EAPP_PATH%3C%2FSTRONG%3E%3C%2FP%3E%0A%3C%2FTD%3E%0A%3CTD%20width%3D%22160%22%3E%3CP%3ELocation%20of%20your%20application%20code.%3C%2FP%3E%0A%3C%2FTD%3E%0A%3CTD%20width%3D%22204%22%3E%3CP%3EEnter%26nbsp%3B%3CSTRONG%3E%24CI_PROJECT_DIR%2F%3C%2FSTRONG%3E%26nbsp%3Bif%20your%20application%20source%20code%20is%20at%20the%20root%20of%20the%20repository%2C%20or%26nbsp%3B%3CSTRONG%3E%24CI_PROJECT_DIR%20%2Fapp%3C%2FSTRONG%3E%26nbsp%3Bif%20your%20application%20code%20is%20in%20a%20directory%20called%26nbsp%3Bapp.%3C%2FP%3E%0A%3C%2FTD%3E%0A%3CTD%20width%3D%22146%22%3E%3CP%3EYes%3C%2FP%3E%0A%3C%2FTD%3E%0A%3C%2FTR%3E%0A%3CTR%3E%0A%3CTD%20width%3D%22158%22%3E%3CP%3E%3CSTRONG%3EAPI_PATH%3C%2FSTRONG%3E%3C%2FP%3E%0A%3C%2FTD%3E%0A%3CTD%20width%3D%22160%22%3E%3CP%3ELocation%20of%20your%20Azure%20Functions%20code.%3C%2FP%3E%0A%3C%2FTD%3E%0A%3CTD%20width%3D%22204%22%3E%3CP%3EEnter%26nbsp%3B%3CSTRONG%3E%24CI_PROJECT_DIR%20%2Fapi%3C%2FSTRONG%3E%26nbsp%3Bif%20your%20app%20code%20is%20in%20a%20folder%20called%26nbsp%3Bapi.%3C%2FP%3E%0A%3C%2FTD%3E%0A%3CTD%20width%3D%22146%22%3E%3CP%3ENo%3C%2FP%3E%0A%3C%2FTD%3E%0A%3C%2FTR%3E%0A%3CTR%3E%0A%3CTD%20width%3D%22158%22%3E%3CP%3E%3CSTRONG%3EOUTPUT_PATH%3C%2FSTRONG%3E%3C%2FP%3E%0A%3C%2FTD%3E%0A%3CTD%20width%3D%22160%22%3E%3CP%3ELocation%20of%20the%20build%20output%20directory%20relative%20to%20the%26nbsp%3BAPP_PATH.%3C%2FP%3E%0A%3C%2FTD%3E%0A%3CTD%20width%3D%22204%22%3E%3CP%3EIf%20your%20application%20source%20code%20is%20located%20at%26nbsp%3B%3CSTRONG%3E%24CI_PROJECT_DIR%20%2Fapp%3C%2FSTRONG%3E%2C%20and%20the%20build%20script%20outputs%20files%20to%20the%26nbsp%3B%3CSTRONG%3E%24CI_PROJECT_DIR%20%2Fapp%2Fbuild%3C%2FSTRONG%3E%26nbsp%3Bfolder%2C%20then%20set%26nbsp%3Bbuild%26nbsp%3Bas%20the%26nbsp%3B%3CSTRONG%3EOUTPUT_PATH%3C%2FSTRONG%3E%26nbsp%3Bvalue.%3C%2FP%3E%0A%3C%2FTD%3E%0A%3CTD%20width%3D%22146%22%3E%3CP%3ENo%3C%2FP%3E%0A%3C%2FTD%3E%0A%3C%2FTR%3E%0A%3CTR%3E%0A%3CTD%3E%3CP%3E%3CSTRONG%3EAPI_TOKEN%3C%2FSTRONG%3E%3C%2FP%3E%0A%3C%2FTD%3E%0A%3CTD%3E%3CP%3EAPI%20token%20for%20deployment%3C%2FP%3E%0A%3C%2FTD%3E%0A%3CTD%3E%3CP%3EInclude%20%3CSTRONG%3EAPI_TOKEN%3A%20%24DEPLOYMENT_TOKEN%3C%2FSTRONG%3E%3C%2FP%3E%0A%3C%2FTD%3E%0A%3CTD%3E%3CP%3EYes%3C%2FP%3E%0A%3C%2FTD%3E%0A%3C%2FTR%3E%0A%3C%2FTBODY%3E%0A%3C%2FTABLE%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CUL%3E%0A%3CLI%3ESelect%20%3CSTRONG%3Ecommit%3C%2FSTRONG%3E.%3C%2FLI%3E%0A%3CLI%3EOnce%20the%20deployment%20is%20successful%2C%20navigate%20to%20the%20Azure%20Static%20Web%20Apps%26nbsp%3BOverview%26nbsp%3Bwhich%20includes%20links%20to%20the%20deployment%20configuration.%20Note%20how%20the%26nbsp%3BSource%26nbsp%3Blink%20now%20points%20to%20the%20GitLab.%3C%2FLI%3E%0A%3CLI%3ESelect%20the%20%3CSTRONG%3EURL%3C%2FSTRONG%3E%20to%20see%20your%20newly%20deployed%20website.%3C%2FLI%3E%0A%3C%2FUL%3E%0A%3CDIV%20id%3D%22tinyMceEditorSachinRathor_9%22%20class%3D%22mceNonEditable%20lia-copypaste-placeholder%22%3E%26nbsp%3B%3C%2FDIV%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22SachinRathor_7-1645074667321.png%22%20style%3D%22width%3A%20781px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F348946i5D84EA317292D402%2Fimage-dimensions%2F781x141%3Fv%3Dv2%22%20width%3D%22781%22%20height%3D%22141%22%20role%3D%22button%22%20title%3D%22SachinRathor_7-1645074667321.png%22%20alt%3D%22SachinRathor_7-1645074667321.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%26nbsp%3B%3CFONT%20color%3D%22%237928A1%22%3EURL%20for%20newly%20deployed%20app%3C%2FFONT%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CH3%20id%3D%22toc-hId-608415037%22%20id%3D%22toc-hId-609157891%22%20id%3D%22toc-hId-609157891%22%20id%3D%22toc-hId-609157891%22%20id%3D%22toc-hId-609157891%22%20id%3D%22toc-hId-609157891%22%3E%3CSTRONG%3EClean%20up%20resources%3C%2FSTRONG%3E%3C%2FH3%3E%0A%3CP%3EClean%20up%20the%20resources%20you%20deployed%20by%20deleting%20the%20resource%20group.%3C%2FP%3E%0A%3CUL%3E%0A%3CLI%3EFrom%20the%20Azure%20portal%2C%20select%26nbsp%3B%3CSTRONG%3EResource%20group%3C%2FSTRONG%3E%26nbsp%3Bfrom%20the%20left%20menu.%3C%2FLI%3E%0A%3CLI%3EEnter%20the%20resource%20group%20name%20in%20the%26nbsp%3B%3CSTRONG%3EFilter%20by%20name%3C%2FSTRONG%3E%26nbsp%3Bfield.%3C%2FLI%3E%0A%3CLI%3ESelect%20the%20resource%20group%20name%20you%20used%20in%20this%20tutorial.%3C%2FLI%3E%0A%3CLI%3ESelect%26nbsp%3B%3CSTRONG%3EDelete%20resource%20group%3C%2FSTRONG%3E%26nbsp%3Bfrom%20the%20top%20menu.%3C%2FLI%3E%0A%3C%2FUL%3E%0A%3CH3%20id%3D%22toc-hId--1199039426%22%20id%3D%22toc-hId--1198296572%22%20id%3D%22toc-hId--1198296572%22%20id%3D%22toc-hId--1198296572%22%20id%3D%22toc-hId--1198296572%22%20id%3D%22toc-hId--1198296572%22%3E%26nbsp%3B%3C%2FH3%3E%0A%3CH3%20id%3D%22toc-hId-1288473407%22%20id%3D%22toc-hId-1289216261%22%20id%3D%22toc-hId-1289216261%22%20id%3D%22toc-hId-1289216261%22%20id%3D%22toc-hId-1289216261%22%20id%3D%22toc-hId-1289216261%22%3E%3CSTRONG%3EAdditional%20Resources%3C%2FSTRONG%3E%3C%2FH3%3E%0A%3CUL%3E%0A%3CLI%3EIf%20you%20need%20help%20getting%20started%20with%20Pipelines%2C%20see%20%3CA%20href%3D%22https%3A%2F%2Fdocs.gitlab.com%2Fee%2Fci%2Fyaml%2Fgitlab_ci_yaml.html%22%20target%3D%22_blank%22%20rel%3D%22noopener%20nofollow%20noreferrer%22%3ECreate%20your%20first%20pipeline%3C%2FA%3E.%3C%2FLI%3E%0A%3CLI%3EIf%20you%20need%20reference%20to%20help%20you%20with%20writing%20pipeline%2C%20see%20Reference%20for%20%3CA%20href%3D%22https%3A%2F%2Fdocs.gitlab.com%2Fee%2Fci%2Fyaml%2F%22%20target%3D%22_self%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%3E.gitlab-ci-yml%3C%2FA%3E%26nbsp%3Bfile.%3C%2FLI%3E%0A%3C%2FUL%3E%3C%2FLINGO-BODY%3E%3CLINGO-TEASER%20id%3D%22lingo-teaser-3176762%22%20slang%3D%22en-US%22%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-TEASER%3E%3CLINGO-LABS%20id%3D%22lingo-labs-3176762%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EAzure%20App%20Service%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-3271369%22%20slang%3D%22en-US%22%3ERe%3A%20Tutorial%3A%20Publish%20Azure%20Static%20Web%20Apps%20with%20GitLab%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-3271369%22%20slang%3D%22en-US%22%3E%3CP%3Ehi%2C%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F1292590%22%20target%3D%22_blank%22%3E%40SachinRathor%3C%2FA%3E%26nbsp%3Bdefinition%20of%20OUTPUT_PATH%20looks%20confusing.%20Would%20you%20mind%20rewording%20it.%20Please%20share%20if%20you%20any%20information%20on%20docker%20image%20you%20have%20used%20here.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-3271394%22%20slang%3D%22en-US%22%3ERe%3A%20Tutorial%3A%20Publish%20Azure%20Static%20Web%20Apps%20with%20GitLab%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-3271394%22%20slang%3D%22en-US%22%3E%3CP%3EHi%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F1347897%22%20target%3D%22_blank%22%3E%40rswaroopc%3C%2FA%3E%2C%3C%2FP%3E%0A%3CP%3E%3CBR%20%2F%3EThank%20You%20for%20your%20valuable%20suggestion.%3CBR%20%2F%3E%3CBR%20%2F%3EI've%20updated%20the%20Article.%20I%20hope%20current%20version%20answers%20your%20query.%3CBR%20%2F%3E%3CBR%20%2F%3ERegarding%20docker%20image%20i.e.%26nbsp%3B%3CSTRONG%3E%E2%80%9Cregistry.gitlab.com%2Fstatic-web-apps%2Fazure-static-web-apps-deploy%E2%80%9D%3C%2FSTRONG%3E%20image%2C%20it%26nbsp%3Bis%20composed%20using%20%3CSTRONG%3Edocker-in-docker(dind)%3C%2FSTRONG%3E%20service.%3CBR%20%2F%3EImage%20used%20in%20this%20service%20can%20be%20accessed%20only%20by%20the%20organization%20members.%20If%20you%20still%20have%20any%20concern%20regarding%20that%20image%2C%20I'll%20raise%20your%20request%20to%20higher%20authorities.%3CBR%20%2F%3E%3CBR%20%2F%3EThanks!%3CBR%20%2F%3ESachin%20Rathor%3C%2FP%3E%3C%2FLINGO-BODY%3E
Co-Authors
Version history
Last update:
‎Mar 30 2022 05:21 AM
Updated by: