Skip to content

Commit

Permalink
docs: minor edits
Browse files Browse the repository at this point in the history
  • Loading branch information
dhanushreddy291 committed Dec 15, 2024
1 parent ba2222a commit 3e6b86a
Showing 1 changed file with 18 additions and 16 deletions.
34 changes: 18 additions & 16 deletions content/guides/azure-todo-static-web-app.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -636,58 +636,60 @@ 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:
```json
{
"Values": {
...
"DATABASE_URL": "postgresql://neondb_owner:<your_password>@<your_host>.westus3.azure.neon.tech/neondb?sslmode=require"
"DATABASE_URL": "postgresql://neondb_owner:<your_password>@<your_host>.neon.tech/neondb?sslmode=require"
}
}
```
Replace `<your_password>` and `<your_host>` 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)

Expand All @@ -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.
Expand Down

0 comments on commit 3e6b86a

Please sign in to comment.