johnpapa/shopathome

Stars
132
Rank 274,205 (Top 6 %)
Language
TypeScript
License
MIT License
Created over 4 years ago
Updated about 2 months ago

johnpapa/shopathome

johnpapa

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Choose from Angular, React, Svelte, and Vue applications with an Azure Functions API, that deploys to Azure Static Web Apps

Static Web Apps

This repository contains apps that can be used with as a starting point for some MS Learn Modules. because everyone has their own preference for their JavaScript frameworks/library, you can choose which one you prefer.

The Shop at Home theme is used throughout the app. View it live at https://www.shopathome.dev

Learn how

Learn how to Publish an Angular, React, Svelte, or Vue JavaScript app and API with Azure Static Web Apps

Contents

The apps written in the following JavaScript frameworks/libraries:

Folder	Description	Live Demo
angular-app	Sample Angular app	angular.shopathome.dev
api	Sample Azure Functions app	protected
react-app	Sample React app	react.shopathome.dev
svelte-app	Sample Svelte app	svelte.shopathome.dev
vue-app	Sample Vue app	vue.shopathome.dev

Prerequisites

A GitHub account
Node.js and Git
Visual Studio Code installed
The Static Web Apps extension installed
The SWA CLI installed
The Azure Functions Core Tools installed

Problems or Suggestions

Open an issue here

Resources

Azure Static Web Apps

Learn how to set up local development for Azure Static Web Apps using SWA CLI
- Learn more about SWA CLI
Learn how to Publish an Angular, React, Svelte, or Vue JavaScript app and API with Azure Static Web Apps
Add an API to Azure Static Web Apps
Authentication and authorization
API support in Azure Static Web Apps
Routes
Review pre-production environments
Azure Free Trial

angular-styleguide

Angular Style Guide: A starting point for Angular development teams to provide consistency through good practices.

lite-server

Lightweight node server

ng-demos

variety of angular demos

vscode-peacock

Subtly change the color of your Visual Studio Code workspace. 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.

angular-ngrx-data

Angular with ngRx and experimental ngrx-data helper

generator-hottowel

Yo generator that creates an Angular app via HotTowel

angular-tour-of-heroes

Angular - Tour of Heroes - The Next Step after Getting Started

vscode-angular-snippets

Angular Snippets for VS Code

gulp-patterns

Playground for Gulp Recipes

HotTowel-Angular

HotTowel with Angular (for NuGet)

ngrx-data-lab

Sample app that can be expanded to use ngrx-data

pwa-angular

vue-getting-started

This project is seen in demos including the Pluralsight course "Vue: Getting Started" to help represent a fundamental app written with Vue. The heroes and villains theme is used throughout the app.

heroes-angular

Tour of Heroes app written with Angular

vscode-winteriscoming

Dark theme with fun and bright foreground colors

pluralsight-gulp

Starter Code for Pluralsight Course "JavaScript Build Automation with Gulp.js"

angular-event-view-cli

Angular Demo with a Little bit of a lot of features

vue-typescript

Vue.js with TypeScript (OLD - in process of updating)

hottowel-angular-typescript

As seen at //Build 2015 presented by Erich Gamma, Chris Dias and John Papa.

heroes-vue

Tour of Heroes app written with Vue

HotTowel

John Papa's ASP.NET MVC SPA Template (Durandal)

heroes-react

Tour of Heroes app written with React

vscode-angular-essentials

PluralsightSpaJumpStartFinal

Source code for the SPA JumpStart Pluralsight course at http://jpapa.me/spajsps

hello-worlds

Hello world apps for angular, react, svelte, and vue

heroes-angular-serverless

TypeScript Node/Express 👉TypeScript Serverless ➕Angular

angular2-force

ngConf 2016 live coding demo

vscode-cloak

Cloak allows you to hide/show environment keys, to avoid accidentally sharing them with everyone who sees your screen.

angular-preload-and-interceptors

angular-first-look-examples

angular first look for pluralsight

angular-first-look-hosted

Hosted Code from Pluralsight Course "Angular First Look"

angular-cosmosdb

Cosmos DB, Express.js, Angular, and Node.js app

CodeCamper

pluralsight-vscode-samples

VS Code samples for Pluralsight course on Code

docker-angular-cli

Dockerfile and image for node plus angular CLI

awesome-angular-workshop

Angular: The Awesome Parts - Workshop

angular.breeze.storagewip

Save Work in Progress to Local Storage for Angular and Breeze apps

Pluralsight-CC-Angular-Breeze-Extra

Supporting files for the Pluralsight "SPA with Angular and Breeze" course by John Papa.

node-hello

Hello World for Node.js

one-with-angular

node-ts

Simple Node app Written with TypeScript

http-interceptors

The Web apps in this monorepo make HTTP requests and require uniform consistency in how they are executed and handled. This monorepo demonstrates the same app written with Angular and with Svelte. Each app uses HTTP interceptors. The Angular app uses HttpClient and its interceptors while the Svelte app uses Axios and its interceptors.

angular-what-if

vikings

express-to-functions

TypeScript Node/Express 👉TypeScript Serverless ➕ Angular

vue-guide

Super Simple Vue Samples

ngrx-demo

ng-patterns-testing

typescript-async

Creating Asynchronous Code with TypeScript

vscode-angular1-snippets

vscode-angular1-snippets

vscode-pwa

VS Code Extension for PWA Tools

angular-lazy-load-demo

Lazy loading Angular components

github-templates

angular-2-first-look-launcher

heroes-svelte

Tour of Heroes app written with Svelte

kis-requirejs-demo

Keep It Simple RequireJS Demo. Shows simple demo of require.js before and after

heroes-node-api

node api for the heroes apps

heroes-vue-node-api

As seen in Vue Conf 2019

toastr-bower

toastr's bower repo

star-wars-api

vue-workshop

Vue Fundamentals Workshops

vue-simple

This project was created to help represent a fundamental app written with Vue. The heroes and villains theme is used throughout the app.

typescript-fundamentals

vscode-read-time

vue-intro

Vue.js app using Vue's CLI

angular-rxjs-shared-examples

serverless-thank-you

Say thank you to everyone who takes the time to create and discus or a pull request in your Github repository, using Azure Functions

swa-workshop

cloud-coding-with-codespaces

Live demo using Angular, github.dev, codespaces, copilot, azure static web apps, and devcontainers

vscode-azure-functions-tools

Azure Functions Tools for VS Code - DEPRECATED

vue-cli-preset-all-javascript

Vue CLI Preset for All JavaScript Prompts

vscode-presenter-pro

vue-ts

simple repro of master details with vue 3, composition api, and typescript

ios-play

security-strategy-essentials

telekinesis

johnpapa

house-bot

Home automation with AI, LUIS, Serverless

first-serverless-api

Create your first serverless API endpoints with Azure Functions

innersource

Angular-NuGet

NuGet Repo for Angular Packages

angular-expiring-http-cache

ng-ai-hackathon

starwars-ios

one-with-angular-api

shopping-for-codespaces

typescript-hello-world

Simple hello world project for running TypeScript with Node.js

svelte-intro

glimpse.toastr

react-book-repo

pluralsight-ng-testing

pluralsight-ng-testing

skills-copilot-codespaces-vscode

My clone repository

dotfiles

aggregator-app

serverless function with api aggregator with azure

.github

vscode-import-bug

referencing https://github.com/microsoft/TypeScript/issues/35591