You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: articles/static-web-apps/add-mongoose.md
+35-35Lines changed: 35 additions & 35 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -35,21 +35,21 @@ Sign in to the [Azure portal](https://portal.azure.com).
35
35
Begin by creating a [Cosmos DB serverless](../cosmos-db/serverless.md) account. By using a serverless account, you only pay for the resources as they are used and avoid needing to create a full infrastructure.
36
36
37
37
1. Navigate to [https://portal.azure.com](https://portal.azure.com)
38
-
2.Click**Create a resource**
38
+
2.Select**Create a resource**
39
39
3. Enter **Azure Cosmos DB** in the search box
40
-
4.Click**Azure Cosmos DB**
41
-
5.Click**Create**
40
+
4.Select**Azure Cosmos DB**
41
+
5.Select**Create**
42
42
6. If prompted, under **Azure Cosmos DB API for MongoDB** select **Create**
43
43
7. Configure your Azure Cosmos DB Account with the following information
44
44
- Subscription: Choose the subscription you wish to use
45
-
- Resource: Click**Create new**, and set the name to **aswa-mongoose**
45
+
- Resource: Select**Create new**, and set the name to **aswa-mongoose**
46
46
- Account name: A unique value is required
47
47
- Location: **West US 2**
48
48
- Capacity mode: **Serverless (preview)**
49
49
- Version: **4.0**
50
50
:::image type="content" source="media/add-mongoose/cosmos-db.png" alt-text="Create new Cosmos DB instance":::
51
-
8.Click**Review + create**
52
-
9.Click**Create**
51
+
8.Select**Review + create**
52
+
9.Select**Create**
53
53
54
54
The creation process will take a few minutes. Later steps will return to the database to gather the connection string.
55
55
@@ -60,19 +60,19 @@ This tutorial uses a GitHub template repository to help you create your applicat
60
60
1. Navigate to the [starter template](https://github.com/login?return_to=/staticwebdev/mongoose-starter/generate)
61
61
2. Choose the **owner** (if using an organization other than your main account)
62
62
3. Name your repository **aswa-mongoose-tutorial**
63
-
4.Click**Create repository from template**
63
+
4.Select**Create repository from template**
64
64
5. Return to the [Azure portal](https://portal.azure.com)
65
-
6.Click**Create a resource**
65
+
6.Select**Create a resource**
66
66
7. Type **static web app** in the search box
67
67
8. Select **Static Web App**
68
-
9.Click**Create**
68
+
9.Select**Create**
69
69
10. Configure your Azure Static Web App with the following information
70
70
- Subscription: Choose the same subscription as before
71
71
- Resource group: Select **aswa-mongoose**
72
72
- Name: **aswa-mongoose-tutorial**
73
73
- Region: **West US 2**
74
-
-Click**Sign in with GitHub**
75
-
-Click**Authorize** if prompted to allow Azure Static Web Apps to create the GitHub Action to enable deployment
74
+
-Select**Sign in with GitHub**
75
+
-Select**Authorize** if prompted to allow Azure Static Web Apps to create the GitHub Action to enable deployment
76
76
- Organization: Your GitHub account name
77
77
- Repository: **aswa-mongoose-tutorial**
78
78
- Branch: **main**
@@ -81,43 +81,43 @@ This tutorial uses a GitHub template repository to help you create your applicat
81
81
- Api location: **api**
82
82
- Output location: **build**
83
83
:::image type="content" source="media/add-mongoose/azure-static-web-apps.png" alt-text="Completed Azure Static Web Apps form":::
84
-
11.Click**Review and create**
85
-
12.Click**Create**
86
-
13. The creation process takes a few moments; click on**Go to resource** once the static web app is provisioned
84
+
11.Select**Review and create**
85
+
12.Select**Create**
86
+
13. The creation process takes a few moments; select**Go to resource** once the static web app is provisioned
87
87
88
88
## Configure database connection string
89
89
90
90
In order to allow the web app to communicate with the database, the database connection string is stored as an [Application Setting](application-settings.md). Setting values are accessible in Node.js using the `process.env` object.
91
91
92
-
1.Click**Home** in the upper left corner of the Azure portal (or navigate back to [https://portal.azure.com](https://portal.azure.com))
93
-
2.Click**Resource groups**
94
-
3.Click**aswa-mongoose**
95
-
4.Click the name of your database account - it will have a type of **Azure Cosmos DB API for Mongo DB**
96
-
5. Under **Settings**click**Connection String**
92
+
1.Select**Home** in the upper left corner of the Azure portal (or navigate back to [https://portal.azure.com](https://portal.azure.com))
93
+
2.Select**Resource groups**
94
+
3.Select**aswa-mongoose**
95
+
4.Select the name of your database account - it will have a type of **Azure Cosmos DB API for Mongo DB**
96
+
5. Under **Settings**select**Connection String**
97
97
6. Copy the connection string listed under **PRIMARY CONNECTION STRING**
98
-
7. In the breadcrumbs, click**aswa-mongoose**
99
-
8.Click**aswa-mongoose-tutorial** to return to the website instance
100
-
9. Under **Settings**click**Configuration**
101
-
10.Click**Add** and create a new Application Setting with the following values
98
+
7. In the breadcrumbs, select**aswa-mongoose**
99
+
8.Select**aswa-mongoose-tutorial** to return to the website instance
100
+
9. Under **Settings**select**Configuration**
101
+
10.Select**Add** and create a new Application Setting with the following values
102
102
- Name: **AZURE_COSMOS_CONNECTION_STRING**
103
103
- Value: \<Paste the connection string you copied earlier\>
104
-
11.Click**OK**
105
-
12.Click**Add** and create a new Application Setting with the following values for name of the database
104
+
11.Select**OK**
105
+
12.Select**Add** and create a new Application Setting with the following values for name of the database
106
106
- Name: **AZURE_COSMOS_DATABASE_NAME**
107
107
- Value: **todo**
108
-
13.Click**Save**
108
+
13.Select**Save**
109
109
110
110
## Navigate to your site
111
111
112
112
You can now explore the static web app.
113
113
114
-
1.Click**Overview**
115
-
1.Click the URL displayed in the upper right
114
+
1.Select**Overview**
115
+
1.Select the URL displayed in the upper right
116
116
1. It will look similar to `https://calm-pond-05fcdb.azurestaticapps.net`
117
-
1.Click**Please login to see your list of tasks**
118
-
1.Click**Grant consent** to access the application
117
+
1.Select**Please login to see your list of tasks**
118
+
1.Select**Grant consent** to access the application
119
119
1. Create a new lists by typing a name into the textbox labeled **create new list** and selecting **Save**
120
-
1. Create a new task by typing in a title in the textbox labled**create new item** and selecting **Save**
120
+
1. Create a new task by typing in a title in the textbox labeled**create new item** and selecting **Save**
121
121
1. Confirm the task is displayed (it may take a moment)
122
122
1. Mark the task as complete by **selecting the check**; the task will be moved to the **Done items** section of the page
123
123
1.**Refresh the page** to confirm a database is being used
@@ -128,11 +128,11 @@ If you're not going to continue to use this application, delete
128
128
the resource group with the following steps:
129
129
130
130
1. Return to the [Azure portal](https://portal.azure.com)
0 commit comments