diff --git a/content/guides/azure-todo-static-web-app.md b/content/guides/azure-todo-static-web-app.md index df9776da0d..475a5aa4ea 100644 --- a/content/guides/azure-todo-static-web-app.md +++ b/content/guides/azure-todo-static-web-app.md @@ -81,7 +81,7 @@ mkdir swa-todo cd swa-todo && code . ``` -### Creating the Static Web App +## Creating the Static Web App We'll start by creating the frontend of our todo application. The frontend will be a simple HTML, CSS, and JavaScript application that allows users to add, update, and delete todo items. For the backend, we'll use Azure Functions to handle API requests and interact with the Neon Postgres database. @@ -462,7 +462,7 @@ Press F1 in VS Code to open the command palette and run the command `Azure Stati This will create a new Azure Function in the `api` directory, which will serve as the backend API for our todo application with an api endpoint `/api/todos`. -We will be using the `@neondatabase/serverless` package to connect to the Neon Postgres database. Install the package by running the following command in the `api` directory: +We will be using the [`@neondatabase/serverless`](https://www.npmjs.com/package/@neondatabase/serverless) package to connect to the Neon Postgres database. Install the package by running the following command in the `api` directory: ```bash npm install @neondatabase/serverless @@ -636,36 +636,36 @@ Core Components: Supported Operations: - 1. GET: Retrieves all todos + 1. `GET`: Retrieves all todos - Automatically creates table on first request - Returns array of todo items - 2. POST: Creates new todo + 2. `POST`: Creates new todo - Requires: `text` field - Optional: `completed` status (defaults to false) - Returns: newly created todo - 3. PUT: Updates todo completion status + 3. `PUT`: Updates todo completion status - Requires: `id` and `completed` status - - Returns: updated todo or 404 if not found + - Returns: updated todo or `404` if not found - 4. DELETE: Removes a todo + 4. `DELETE`: Removes a todo - Requires: todo `id` - - Returns: success message or 404 if not found + - Returns: success message or `404` if not found Error Handling: - Input validation for required fields - Database error handling -- Proper HTTP status codes +- Proper `HTTP` status codes - Detailed error messages for debugging - Logging via `context.log` for monitoring -### Local development environment setup +### Adding Neon Postgres connection string Start by configuring the `local.settings.json` in your `api` directory with your Neon database connection string: @@ -673,21 +673,23 @@ Start by configuring the `local.settings.json` in your `api` directory with your { "Values": { ... - "DATABASE_URL": "postgresql://neondb_owner:@.westus3.azure.neon.tech/neondb?sslmode=require" + "DATABASE_URL": "postgresql://neondb_owner:@.neon.tech/neondb?sslmode=require" } } ``` -Replace `` and `` with your Neon database password and host respectively. +Replace the `DATABASE_URL` value with your Neon Postgres connection string which you saved earlier. + +### Testing the Azure Functions locally -Then use Azure Static Web Apps CLI to run both frontend and backend locally: +To test the Azure Functions locally, navigate to the root directory of your project and run the following command: ```bash -cd .. # Navigate back to the root directory +cd .. swa start --api-location api ``` -This will start the Azure Functions backend and serve the static web app locally. You can access the app at `http://localhost:4280` and test the functionality. It should be fully functional, allowing you to add, update, and delete todos. It should look like this: +This will start the Azure Functions backend and serve the static web app locally. You can access the app at [`http://localhost:4280`](http://localhost:4280) and test the functionality. It should be fully functional, allowing you to add, update, and delete todos. It should look like this: ![Todo App Completed](/docs/guides/swa-todo-app-completed.png) @@ -711,7 +713,7 @@ To deploy your Azure Static Web App, follow these steps: Once you connect your repository, Azure automatically sets up a GitHub Actions workflow file in your repository. This workflow handles the build and deployment process whenever you push changes. You can watch your deployment progress in real-time through either the GitHub Actions tab in your repository or the Azure portal. -### Adding Neon Postgres connection string +### Add Environment Variables Now that your Azure Static Web App is deployed, you will need to add the Neon Postgres connection string to the Azure Static Web App environment variables. This will allow your Azure Functions to connect to the Neon Postgres database.