From 986716f8ca629bc1342daa5d2bb2c6af3cf2d3d1 Mon Sep 17 00:00:00 2001 From: Dhanush Reddy <29dhanushreddy@gmail.com> Date: Sun, 15 Dec 2024 22:36:35 +0530 Subject: [PATCH] docs: add beginner guide for creating azure static web apps --- content/guides/azure-todo-static-web-app.md | 747 ++++++++++++++++++ .../guides/swa-extensions-to-download.png | Bin 0 -> 130350 bytes .../guides/swa-neon-postgres-env-vars.png | Bin 0 -> 381641 bytes public/docs/guides/swa-todo-app-completed.png | Bin 0 -> 17691 bytes public/docs/guides/swa-todo-app-intial.png | Bin 0 -> 10397 bytes 5 files changed, 747 insertions(+) create mode 100644 content/guides/azure-todo-static-web-app.md create mode 100644 public/docs/guides/swa-extensions-to-download.png create mode 100644 public/docs/guides/swa-neon-postgres-env-vars.png create mode 100644 public/docs/guides/swa-todo-app-completed.png create mode 100644 public/docs/guides/swa-todo-app-intial.png diff --git a/content/guides/azure-todo-static-web-app.md b/content/guides/azure-todo-static-web-app.md new file mode 100644 index 0000000000..475a5aa4ea --- /dev/null +++ b/content/guides/azure-todo-static-web-app.md @@ -0,0 +1,747 @@ +--- +title: Building an Azure Static Web App with Neon +subtitle: A step-by-step guide to creating and deploying static sites using Azure and Neon Postgres +author: dhanush-reddy +enableTableOfContents: true +createdAt: '2024-12-14T00:00:00.000Z' +updatedOn: '2024-12-14T00:00:00.000Z' +--- + +If you've been looking for a modern approach to deploying web applications without managing traditional server infrastructure, Azure Static Web Apps might be exactly what you need. At its core, it's a service optimized for hosting static assets through a global CDN, but its true power lies in the seamless integration with Azure Functions for backend operations. + +What makes Azure Static Web Apps particularly compelling for developers is its built-in CI/CD pipeline powered by GitHub Actions. When you connect your repository, Azure automatically configures the necessary GitHub workflows – push your code and watch as GitHub Actions builds, optimizes, and deploys your entire application across a global network + +In this guide, we'll show you how to build a simple todo application using Azure Static Web Apps. You'll learn the basics of getting your website online and creating your first API endpoint with Azure Functions. By the end of this tutorial, you'll understand how to combine static web content with dynamic features to create a fully functional web application. + +## Prerequisites + +Before we begin, make sure you have: + +- [Node.js](https://nodejs.org/) 18.x or later installed +- [Visual Studio Code](https://code.visualstudio.com/) with the [Azure Static Web Apps](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-azurestaticwebapps) and [Azure Functions](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-azurefunctions) extensions installed +- An [Azure account](https://azure.microsoft.com/free/) with an active subscription +- A [Neon account](https://console.neon.tech/signup) and project +- [Azure Functions Core Tools version 4.x](https://learn.microsoft.com/en-gb/azure/azure-functions/create-first-function-vs-code-node?pivots=nodejs-model-v4#install-or-update-core-tools) + +## Create a Neon Project + +Neon is now available in Azure! You can create serverless Postgres databases that run on Azure infrastructure. To learn more about Neon's Azure launch, check out the [announcement post](/blog/neon-is-coming-to-azure). + +To create Neon project on Azure, follow our [Getting Started with Neon on Azure guide](/guides/neon-azure-integration). + +Once created, save your database connection string, which you'll need to connect to your Neon Postgres database from Azure Functions. + +## Database Schema + +For our todo application, we'll need a simple database schema to store todo items. We'll create a `todos` table with the following fields: + +- `id`: Auto-incrementing unique identifier (Primary Key) +- `text`: Required text field to store the task description +- `completed`: Boolean field with a default value of false to track task completion status + +\*We will be creating the table via Azure Functions later in the guide. + +## Setting up your development environment + +To begin building your Azure Static Web App with Neon Postgres, you'll need to set up your development environment. This involves installing the required tools and configuring your project. + +### Installing required tools + +1. Install the **Azure Static Web Apps** and **Azure Functions** extensions for Visual Studio Code: + + - Open VS Code + - Click the Extensions icon or press `Ctrl+Shift+X` or `Cmd+Shift+X` + - Search for "Azure Static Web Apps" and "Azure Functions" extensions + - Install both of the extensions from Microsoft + + ![Extensions to Download](/docs/guides/swa-extensions-to-download.png) + +2. Install **Azure Functions Core Tools version 4.x**: + + In Visual Studio Code, select `F1` to open the command palette, and then search for and run the command 'Azure Functions: Install or Update Core Tools' and select **Azure Functions v4**. + +3. Install the **Azure Static Web Apps CLI**: + + Open a terminal and run the following command to install the Azure Static Web Apps CLI: + + ```bash + npm install -g @azure/static-web-apps-cli + ``` + + The CLI makes it easy to run your static web app and Azure Functions locally for testing and debugging. + +### Project setup + +With the required Azure tools installed, we can now create a new Azure Static Web App. + +Open a terminal and navigate to the directory where you want to create your project. + +```bash +mkdir swa-todo +cd swa-todo && code . +``` + +## 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. + +Architecture overview: + +- Frontend: A web application built with HTML, CSS, and JavaScript +- Backend: Serverless API endpoints using Azure Functions +- Hosting: Azure Static Web Apps for reliable and scalable web hosting +- Database: Neon serverless Postgres for storing todo data + +Project structure: + +``` +swa-todo/ +├── index.html # The main HTML file for the todo app +├── styles.css # The CSS file for styling the app +└── app.js # The JavaScript file for handling user interactions +└── api/ # Azure Functions backend +``` + +### Building the Frontend + +Create a new file named `index.html` in the root directory of your project and add the following content: + +```html + + +
+ + +3Vm>uv&J}P@)R9>X#2p~K-XOk2W
zRB=h(ZZNkcG*6sA>+A0=szY{sNIipSx8GPd)df9+4)qWAhdci`q%DdSvj0NnAwu0s
zLg8K3`rK&}-P?9DP6$~8okuOs%G`0=!qnN+DLi$mangz-V$JgtY2X$0_uZ?08E@*c
zKr)0E^*PT5udYOJ%I7>-E0E8dhOT(;#PJFF%*Zg29zXPXPl}18Yq3)5{_tPF!L5Y@
zq(#PmKiq!!#TNJ91)UxU)u8-S>2V#x>zOD2RQjy*33K<~4YV-6M{@q#Fev&Fm-I{B
z{Y&nvm7!p^>iqMYbn?mnC9g?kEvGlE=COtI>7A+EcXJ LxmX*ZATk8oXy
zqntG=)74YD)i8nwj{28xxXawgp^X=5 `60ZiqW61ua$51!)Y}5p&k>Ge<)Qjsb>+UNs+9&wQ!lFD%}$f|LWd!3@8i
zOa ojS+
z6v&YKc25MsRfAy;gCd|nin`sI9|l^wf!LYH9AF4@wLd9r2w _ko4n&!s
zI&zd%V^`6sLKb;6+c&)&a;|dyEQn$69vFok(m@$ap_Jb0A^03*5m*mkJvUgg@_NA$
zAB8{9IK#x*>oP37#$5hkp}a2CF3>BgYl78dg8e=cYFjWZhBEr;SPz4z5FP&>-|ll>
znrrOtZ8VC-?Pig*B~1gf^`z=f;=IA`&V^$##?wtKq%~k?^s;^Q3O@@0jQ2=!f!&gP
z4*%$WoZ#@wYT}rn#NxHyZLqNIbpid9he$F7FuVt1b_f<@XDf@HWWiZnuJ
zTBXBkj#vTl+^}2~okk#m+Ot^MIkfgs2uzwh`B&PIx_+Z;rm9og=|`+amCyi+N{!Q$
zIk-E^k}LA2W;gnRZ7f9Ozb^GpY%;8ZoYFmoR8igQzDI>t>361?Gv$lb^LAjXqQ+>d
z-3*>P)ueIsuL_AX*{G$-K{I@z(~iRrqhmPIj+8q|oB@tBR#pAY!xIE$
zR|-BQ<`UtL&s3+z)X|t@GgVbpRE@Qw6t-fJf~&NyI=w`#T!z9UjbDLHq_yW2v(d{k
z=3*6ag7t#0;pRuF)_eR~ImRSo$Qm(lu&lVl+7{m{VsVq{eBt4Sv)Z8?Jy*0)9aZpA
z%I`j0dbkNiE*ulfDy(}q!I2hm6A&I5*i~~l=Eu-weso0>8w{MT=z*+ZHo6vD9)54b
zbfbzXmz#m=AVwy;QWX)Q3=o|(-U?FWAKXZ{8{D7#YQ+n-wRnVc!lZbuCKbb@6GL-1
zh-neF&Na+z1gTo<`!m-MXV)k^kNIQ<#PUtQTrWI89SHVx#aABwdDTgC8k%9UydpH)
z9m{f>O>@{5phzpaEv>BbC?zYrF~a>1vZFla?5O?d)?RahK;E^R9ql)PR
z0jzZSH!%@E+UtkT8y_*`^Z!)0Du~d?yYLl!>Mve}y$hf-b1i{Vg}jC-W1R2m{We!b
z2Z+9tL{5irM6{M&To_%i@4GdJR|R0(f%V~cq2YBK!*(ANm}Y_K^TBT(^2fsZMO!Gt
zS0yZ6@{NPVTOZPBj5}TT@K3Ydsj~-k(yaTGzpz+_wJITuHrH0Y?;5&$;#fz}!=~8l
z`s)|%H_FqCXTK*r=NUTaN%gf7Gu9*So?9^b8EyQ~xxrdLc0?Tu)-E;Z$!%ea++ugT
z-5}AYS%s}AyOer{Z$Ze#Z(TV)zd&+Axz|s~zt3y%^=Vne!Pw94=s5Z6t9FoKfe%3K
zxkj<5N(xB;A~$dMH{{sH8z)FOW9-%6?Zkckin89guy$gpwRSY;tT{zZ?BRnjSEUBa
z=nk7%yJ8qi^EZIK_pmOenZXv-2kbr6^_ijY@vub&M}5<@$G7*{+O5pT*5q9UIk3Bh
z*KTfCiL)feqB&6bB>n!Z1Z9dx-cjDOk<4HZt-C#YS3LYz);&Y~0JDb7*N9nJhuOow
zIP$t9x|RM9{zs?s}ss|$V(
zSah(VN@XvFdwHwV(*h7hDqE&fX$rf^A(gXX7y0>zFu&wZk&)A1%b}NjE^H~&k^~{|
zcJe#RBq#%fM2(&?ilk)G$$yyESER3L;AfVN4w_UJ_#g{Z-MqiH*je&dUN&&zAp-?`
z0yJ1EyS(j418~!t4Pu@*S3n=lQRk~bEdx|*`Nu|lc3v^Au2_R@dFcJk&3}id{qVRc
zi^MO38esRI)0yE`aTo9e*{<$#8F$k!ADKlcV@%j
Y<++gmg`+pmfyQ4WZ)7E=pqs_eQaG%#m1_e$RsSj>#iqMQ=D?
ziQ;S(*rL#gpHp)ivL?sLS5Og;urk
zEVqZ>dCO^tz7!ko=6nLpc^+}y5l(E~7>J^Qe>pj9KdF@ePPq%b3pV`6Dv4EPlM+)y
z0(N(%WRVn*kf^A5GlJSFnZ@Q4an1}QThov}IXQsVA**GVm0#kyp0ICJ(bbMBEXm}3
zejR2sUR4~q`grP}GSgrO95La0IB4KgP+_rvW~>+~ZeCLpVpYXN%e^=t
9N@Y0J6!(a_x0G$QBm
z>}9i=**A?k$8V)Z+X~-8-v9T!N
_mg3vWFH?nm$?7dq`Rr74*3w(X_Q#