microsoft/static-web-apps-gallery-code-samples

A community showcase of projects built with Azure Static Web Apps 🎉 Visit: https://microsoft.github.io/static-web-apps-gallery-code-samples/

Azure Static Web Apps Gallery

Welcome to the Azure Static Web Apps Gallery - a showcase of awesome projects built by community, and deployed to the Azure Static Web Apps service.

---

🔥 | Add Your Project

Want to have your project listed in the gallery?

• Review the Contributing Guidelines.
• Fork the repository and create a branch for your addition
• Follow this Pull Request Checklist.

---

📝 | Technologies Showcased

The table showcases technologies for which projects were added - click the technology to visit the section showcasing all its projects. If a project has a demo URL, the IsLive column shows if that is still active (last-checked: Apr 18, 2022)

Technology	Project	Is Live
Angular	Catsify: A cat names generator	✅
	ngxtools: Angular Package Registry	✅
	angular-swa-auth library demo	✅
Docusaurus	Docusaurus Starter	✅
Hugo	ngVikings 2020 Conference	✅
Scully	PWA Blog	✅
Svelte	Shop at Home	✅
Vanilla HTML/JS/CSS	SWAG Demo: A Positive Thought For Your Day	✅
	Nitrooo landing page	✅
	Hexa CLI Landing Page	✅
	VS Code Can Do That	✅
VuePress	Nitro Workshop	✅
	Peacock for Visual Studio Code Documentation	✅
	Cognitive Search Static Apps Demo	✅

---

💻 | Projects (By Technology)

Angular

Catsify: A cat names generator

Catsify is a simple and creative app that allows you to find a unique name for your lovely cat. What's interesting about this app is that the names generator is all written in Rust and compiled to WASM; and the API is exposed through a Node.js Azure Function.

• Link to the project: HERE
• GitHub repo: HERE

Stacks Used: angular, typescript, azure static web apps, rust, web assembly, nodejs, azure functions

---

Docusaurus

Docusaurus Starter

A simple starter template for creating documentation website using the Docusaurus framework.

Stacks Used: reactjs, azure static web apps

• Link to the project: HERE
• GitHub repo: HERE
• Author: @sumitkharche01

---

Gatsby

---

Hugo

ngVikings 2020: A free online conference for Angular developers

ngVikings is a non-profit, non-commercial, 100% community-driven event comprised of many Nordic Angular groups with more than 6500 active members in total.

• ngVikings site
• ngVikings repo

Stacks Used: hugo, azure static web apps, workbox

---

Mongoose

Azure Static Web Apps and Mongoose Starter Kit

Mongoose is the most popular ODM (object document mapper) for Node.js. This basic starter includes the necessary code and steps to create Azure Static Web Apps with Cosmos DB and Mongoose. No front-end framework is used, allowing you to update the site as needed.

Stacks Used: mongoose, cosmos db, azure static web apps

• **Mongoose Starter Kit repo
• **Author: GeekTrainer

---

React.js

---

PWA Blog

News and articles about Progressive Web Apps.

• Progressive web apps information
• Progressive web apps repo

Stacks Used: angular, scully, azure static web apps, workbox, pwa

---

Svelte

Shop at Home

"Shop at Home" is a sample app which is written in four variations: Angular, React, Svelte and Vue. It is shown in the Build 2020 video presentation.

• Shop at Home demo
• Shop at Home repo

Stacks Used: svelte, react, angular, nodejs, azure static web apps

---

Vanilla HTML JavaScript CSS

Azure SWAG Demo: A Positive Thought For Your Day

This is a simple barebone demo for Azure SWAG (Static Web Apps on GitHub). You can use it as a template for your own apps.

• SWAG demo
• SWAG repo

Stacks Used: html, javascript, nodejs, azure static web apps

---

Nitrooo landing page

Nitro is a heavily opinionated template for building Serverless applications with NestJS, the fastest-growing NodeJS framework in the world by github stars.

• Nitrooo project
• Nitrooo repo

Stacks Used: javascript, css, html

---

Hexa CLI Landing Page

Hexa is the ultimate companion for the Azure CLI. It allows you to seamlessly configure, setup and deploy to different Azure services such as Resource Groups, Storage accounts, Hosting, Azure Functions and Databases (CosmosDB and Table Storage) and more.

• Hexa project
• Hexa repo

Stacks Used: html, css, javascript

---

Vue.js

VS Code Can Do That

All the best things about VS Code that nobody ever bothered to show you.

• VS Code Can Do That demo
• VS Code Can Do That repo

Stacks Used: vuejs, azure static web apps

---

VuePress

Nitro Workshop

Online workshop built with Vuepress to learn how to build a backend using NestJS. This is a practical workshop where you'll learn "hands-on" by iteratively building an application from scratch using NestJS and Azure.

• Nitro workshop
• Nitro workshop repo

Stacks Used: vuepress, azure static web apps, nodejs, nestjs

---

Peacock for Visual Studio Code Documentation

Peacock is a Visual Studio Code extension with 700,000+ installations. It subtly changes the color of your Visual Studio Code workspace. This is ideal when you have multiple VS Code instances, use VS Live Share, or use VS Code's Remote features, and you want to quickly identify your editor.

• Peacock Documentation
• GitHub repo for Peacock Documentation
• Install the Peacock Extension

Stacks Used: vuepress, azure static web apps, nodejs

---

Cognitive Search Static Apps Demo

A sample faceted search user experience implementation for your Azure Cognitive Search index. Similar to the official demo app, but a bit more modern. Fork the repo, deploy it to your Static Web Apps instance, connect it to your Cognitive Search index with a set of config settings, optionally configure authN/authZ - and you get a fully functioning search UI, with facet filters and geovisualization. The live demo is pointed to the official Azure Cognitive Search Sample Data - Repository index, and you can start with the same. Feel free to use as a template for your own implementations.

• Lively Sand demo
• Lively Sand repo
• Author: @tino_scale_tone

Stacks Used: react, nodejs, azure static web apps, azure functions

static-web-apps-gallery-code-samples's Issues

Some of the sample project deployments are failing

Below projects demo sites error:

• xLayers demo
• Angular AppStore demo
• Angular AppStore demo
• Meme4Fun project

We can update them or remove them from the samples.

Use JSON instead of README

Since we are planning to build a landing page or a website with all these awesome submissions, it think we should switch from storing these submissions in the readme format, and use a structured JSON file. This will make building the website much easier since we would only need to update and redeploy this JSON file.

I suggest the following format:

[{
  "title": "example",
  "link": "https://...",
  "repository": "https://github.com/...",
  "description": "example description",
  "technologies": ["angular", "vue", "react"],
  "screenshots": ["./media/example.png"],
  "authors": [{
    "name": "example",
    "twitter": "@example",
    "github": "@example",
  }]
}]

@glaucia86 @burkeholland @johnpapa WDYT?