Skip to content

Commit

Permalink
workshop
Browse files Browse the repository at this point in the history
  • Loading branch information
cyz committed Aug 7, 2023
1 parent a0f6da8 commit ec384e5
Show file tree
Hide file tree
Showing 5 changed files with 91 additions and 0 deletions.
1 change: 1 addition & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,7 @@ Welcome to the [Next Generation Team's Workshop Library](presentation.pptx), bui
2️⃣ | [Get Started with Django](./full/django-get-started/README.md) | Christopher Harrison | 1-1.5 hours | Build a web app with Django | [🎥](https://youtu.be/H3dDiVNY_ks) | Python, [Get started with Django](https://docs.microsoft.com/learn/modules/django-get-started/?WT.mc_id=academic-56601-chrhar)|
2️⃣ | [Build a Mood Journal Progressive Web App](./full/mood-journal-progressive-web-app/README.md) | Beth Pan | 1.5 hours | Build a Mood Journal for Mental Health as a Progressively-Enhanced Web app | [🎥](https://youtu.be/12THeQreSQ0) | JavaScript|
2️⃣ | [Build an API with Data API Builder for your Static Web Apps](./full/smart-shopping-planner-app/README.md) | Julia Muiruri | 1 hour | Smart Shopping Planner is a React project, that uses an Azure SQL database and uses Data API Builder to provide REST endpoints to connect to the database. | [🎥](https://youtu.be/9N1Z9KPbeEY) | JavaScript, Data API Builder (Static Web Apps database connections)|
2️⃣ | [Exploring Contoso Real Estate project with Codespaces and Azure Static Web Apps](./short/explore-art-rest-api/README.md) | Cynthia Zanoni and Glaucia Lemos | 1 hour | This workshop introduces Contoso Real Estate, a JavaScript project that showcases a composite architecture for scalable web solutions. You will learn how to set up your development environment using Codespaces and Azure Static Web Apps CLI, and how to deploy the project to Azure Static Web Apps. | 🎥 (*comming soon*) | JavaScript, Codespaces, Azure Static Web Apps |

---
<details>
Expand Down
60 changes: 60 additions & 0 deletions full/exploring-contoso-real-estate-codespaces-aswa-cli/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
# Exploring Contoso Real Estate project with Codespaces and Azure Static Web Apps

_Execute Contoso Real Estate on Codespaces and deploy to Azure Static Web Apps._

## About Contoso Real Estate

[Contoso Real Estate](https://github.com/Azure-Samples/contoso-real-estate) is an open source JavaScript reference project that features a composite architecture with eight key scenarios targeted at companies looking for robust and scalable solutions.

The project demonstrates best development practices such as the use of monorepo (to coordinate multiple teams and projects), devcontainers (for Codespaces), integrated documentation (to make code easier to explore), micro-frontends, and much more.

![Contoso Real Estate](./images/gif-portal-contoso.gif)

## 📚 About this workshop
- **Duration:** 60 minutes
- **Slides:** [slides](./slides.pptx)

### ⭐️ Learning objectives

- Understand the composable architecture that is used in the Contoso Real Estate project
- Experience GitHub Codespaces as a development environment
- Understand how to use Azure Static Web Apps CLI to run and deploy the Contoso Real Estate project

### ✅ Prerequisites

To follow this workshop, you will need some basic programming knowledge and access to some tools:

- Azure account: [Azure Free Trial](https://azure.microsoft.com/free/?WT.mc_id=academic-101248-cyzanon) or [Azure for Students](https://azure.microsoft.com/free/students/?WT.mc_id=academic-101248-cyzanon)
- [GitHub account](https://github.com/?WT.mc_id=academic-101248-cyzanon)
- [JavaScript](https://learn.microsoft.com/shows/beginners-series-to-javascript/?WT.mc_id=academic-101248-cyzanon)
- [Node](https://learn.microsoft.com/shows/beginners-series-to-nodejs/?WT.mc_id=academic-101248-cyzanon)
- [TypeScript](https://www.typescriptlang.org/?WT.mc_id=academic-101248-cyzanon)
- [Angular](https://angular.io/)

> Students can claim the GitHub Student Developer Pack at [GitHub Student Developer Pack — GitHub Education](https://aka.ms/Copilot4Students). This offer includes access to Codespaces, GitHub Copilot, Azure for Students, and other benefits. If you are not a student, you can use [GitHub Codespaces](https://docs.github.com/en/codespaces/?WT.mc_id=academic-101248-cyzanon) for 60 free hours per month.
## GitHub Codespaces

Using Codespaces, you get [Visual Studio Code](https://visualstudio.microsoft.com/?WT.mc_id=academic-80067-sagibbon) in the cloud, using a ["development container"](https://containers.dev/). Like a locally running version of [Visual Studio Code](https://visualstudio.microsoft.com/?WT.mc_id=academic-80067-sagibbon), the cloud version also allows you to install extensions and use a terminal.

You can also configure your development container to run a specific runtime and have it boot up with your favorite extensions.

## 🏃 Deploy in Azure Static Web Apps

[Azure Static Web Apps](https://azure.microsoft.com/products/app-service/static/?WT.mc_id=academic-101248-cyzanon) is Microsoft's hosting solution for static sites (or sites that are rendered in the user's browser, not on a server) through Azure. This service provides additional opportunities to expand your site through Azure Functions, authentication, staging versions and more.

This workshop includes the setup needed for you to deploy **free** to [Azure Static Web Apps](https://azure.microsoft.com/products/app-service/static/?WT.mc_id=academic-101248-cyzanon).


## 📚 Resources

* [🎥 Codespaces Tutorial](https://aka.ms/CodespacesVideoTutorial)
* [Codespaces](https://github.com/features/codespaces)
* [GitHub Codespaces docs overview](https://docs.github.com/codespaces/overview)
* [Use dev containers locally with VS Code and Docker](https://github.com/microsoft/vscode-remote-try-node#vs-code-dev-containers)

## 🔎 Feedback

Be sure to give [feedback about this workshop](https://forms.office.com/r/MdhJWMZthR/?WT.mc_id=academic-80067-sagibbon)!

[Code of Conduct](../../CODE_OF_CONDUCT.md)
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@

# JavaScript Portfolio Site with GitHub Codespaces

## Workshop Source

https://github.com/microsoft/codespaces-project-template-js

## Stage 1: Desired Results

Students will be skilled on how to use Codespaces through using a template project to deploy their own portfolio web application in React.

Includes:

* Utilizing Codespaces for development, using only web browser
* Learn web development
* Deploy to GitHub Pages
* Deploy to Azure Static Web Apps

## Stage 2: Evidence

Students will have a customized and deployed portfolio web application they can continue to use to highlight their contributions as they complete additional projects.

## Stage 3: Learning Plan

* Create own repository from template repository
* Launch project within Codespaces
* Customize site to their information within Codespaces
* Run the web application within their Codespace
* Deploy web application (portfolio site) to Azure Static Web Apps or GitHub pages
* Browse the deployed app in a browser

0 comments on commit ec384e5

Please sign in to comment.