Merge pull request #279092 from craigshoemaker/patch-9

[Static Web Apps] Update:  Gitlab tutorial (freshness)

Author: prmerger-automator[bot]

articles/static-web-apps/gitlab.md

@@ -5,7 +5,7 @@ services: static-web-apps
 author: craigshoemaker
 ms.service: static-web-apps
 ms.topic: quickstart
-ms.date: 03/30/2021
+ms.date: 06/24/2024
 ms.author: cshoe
 ---
 
@@ -31,7 +31,9 @@ In this tutorial, you learn to:
 This article uses a GitHub repository as the source to import code into a GitLab repository.
 
 1. Sign in to your GitLab account and go to [https://gitlab.com/projects/new#import_project](https://gitlab.com/projects/new#import_project)
+
 2. Select **Repo by URL**.
+
 3. In the *Git repository URL* box, enter the repository URL for your choice of framework.
 
     # [No Framework](#tab/vanilla-javascript)
@@ -57,17 +59,23 @@ This article uses a GitHub repository as the source to import code into a GitLab
     ---
 
 4. In the *Project slug* box, enter **my-first-static-web-app**.
+
 5. Select **Create project** and wait a moment while your repository is set up.
 
 ## Create a static web app
 
 Now that the repository is created, you can create a static web app from the Azure portal.
 
 1. Go to the [Azure portal](https://portal.azure.com).
+
 1. Select **Create a Resource**.
+
 1. Search for **Static Web Apps**.
+
 1. Select **Static Web Apps**.
+
 1. Select **Create**.
+
 1. In the _Basics_ section, begin by configuring your new app.
 
     | Setting | Value |
@@ -76,38 +84,54 @@ Now that the repository is created, you can create a static web app from the Azu
     | Resource Group | Select the **Create new** link and enter **static-web-apps-gitlab**. |
     | Name | Enter **my-first-static-web-app**. |
     | Plan type | Select **Free**. |
-    | Region for Azure Functions API and staging environments | Select the region closest to you. |
     | Source | Select **Other**. |
 
 1. Select **Review + create**.
+
 1. Select **Create**.
-2. Select **Go to resource**.
-3. Select **Manage deployment token**.
-4. Copy the deployment token value and set it aside in an editor for later use.
-5. Select **Close** on the *Manage deployment token* window.
+
+1. Select **Go to resource**.
+
+1. Select **Manage deployment token**.
+
+1. Copy the deployment token value and set it aside in an editor for later use.
+
+1. Select **Close** on the *Manage deployment token* window.
 
 ## Create the pipeline task in GitLab
 
-Next you add a workflow task responsible for building and deploying your site as you make changes.
+Now that you have your deployment token, you add a workflow task responsible for building and deploying your site as you make changes.
 
 ### Add deployment token
-When following the below steps, make sure that you select * for the environments section. It may appear the default value is all but you need to click the dropdown and manually select *.
+
+When going through the following steps, make sure that you select `*` for the environments section. It may appear the default value is `all`, but you need to select the dropdown and manually choose `*`.
+
 1. Go to the repository in GitLab.
+
 1. Select **Settings**.
+
 1. Select **CI/CD**.
-2. Next to the *Variables* section, select **Expand**.
-3. Select **Add variable**.
-4. In the *Key* box, enter **DEPLOYMENT_TOKEN**.
-5. In the *Value* box, paste in the deployment token value you set aside in a previous step.
-6. Select **Add variable**.
+
+1. Next to the *Variables* section, select **Expand**.
+
+1. Select **Add variable**.
+
+1. In the *Key* box, enter **DEPLOYMENT_TOKEN**.
+
+1. In the *Value* box, paste in the deployment token value you set aside in a previous step.
+
+1. Select **Add variable**.
 
 ### Add file
 
-1. Select the **Repository** menu option.
-1. Select **Files**.
-1. Ensure the *main* branch is selected in the branch drop down at the top.
-1. Press the **plus sign** drop down and select **New file**.
+1. Return to your repository's main screen in GitLab.
+
+1. Select the **Edit** button and choose, **Web IDE**.
+
+1. Ensure the *main* branch is selected in the branch drop down.
+
 1. Create a new file named `.gitlab-ci.yml` at the root of the repository. (Make sure the file extension is `.yml`.)
+
 1. Enter the following YAML into the file.
 
     # [No Framework](#tab/vanilla-javascript)
@@ -197,8 +221,9 @@ When following the below steps, make sure that you select * for the environments
     | `OUTPUT_PATH` | Location of the build output folder 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. | `API_TOKEN: $DEPLOYMENT_TOKEN` | Yes |
 
-2. Select **Commit changes**.
-3. Select the **CI/CD** then **Pipelines** menu items to view the progress of your deployment.
+1. **Commit changes** to the main branch and close the web IDE.
+
+1. Return to your site and select the **Settings** > **CI/CD** > **General Pipelines** menu items to view the progress of your deployment.
 
 Once the deployment is complete, you can view your website.
 
@@ -211,17 +236,22 @@ Before you can go to your new static site, the deployment build must first finis
 The Static Web Apps overview window displays a series of links that help you interact with your web app.
 
 1. Return to your static web app in the Azure portal.
+
 1. Go to the **Overview** window.
-2. Select the link under the *URL* label. Your website loads in a new tab.
+
+1. Select the link under the *URL* label. Your website loads in a new tab.
 
 ## Clean up resources
 
 If you're not going to continue to use this application, you can delete the Azure Static Web Apps instance and all the associated services by removing the resource group.
 
 1. Select the **static-web-apps-gitlab** resource group from the *Overview* section.
-2. Select **Delete resource group** at the top of the resource group *Overview*.
-3. Enter the resource group name **static-web-apps-gitlab** in the *Are you sure you want to delete "static-web-apps-gitlab"?* confirmation dialog.
-4. Select **Delete**.
+
+1. Select **Delete resource group** at the top of the resource group *Overview*.
+
+1. Enter the resource group name **static-web-apps-gitlab** in the *Are you sure you want to delete "static-web-apps-gitlab"?* confirmation dialog.
+
+1. Select **Delete**.
 
 The process to delete the resource group may take a few minutes to complete.