├── .DS_Store ├── .github ├── ISSUE_TEMPLATE │ ├── ---this-month-in-swa--community-submission.md │ └── ---website-platform--fixes-and-functionality.md └── workflows │ ├── azure-static-web-apps-lively-tree-0c3a7d80f.yml │ ├── deploy.yml │ ├── playwright-onDemand.yml │ ├── playwright-scheduled.yml │ └── test-deploy.yml ├── .gitignore ├── README.md ├── SETUP.md └── www ├── .gitignore ├── README.md ├── babel.config.js ├── blog-roundup ├── 2022-08-31-thismonth │ ├── devto.png │ └── index.md ├── 2022-09-28-thismonth │ └── index.md ├── 2022-10-26-thismonth │ ├── index.md │ └── studentsummit.png ├── 2022-11-30-thismonth │ └── index.md ├── 2023-01-23-thismonth │ └── index.md ├── 2023-02-22-thismonth │ └── index.md ├── 2023-03-20-thismonth │ ├── index.md │ └── swa-database-connections.png ├── 2023-07-27-thismonth │ ├── index.md │ └── swa-database-connections.png └── authors.yml ├── blog ├── 2022-04-30.md ├── 2022-05-01.md ├── 2022-05-02.md ├── 2022-05-03.md ├── 2022-05-04.md ├── 2022-05-05.md ├── 2022-05-06.md ├── 2022-05-07.md ├── 2022-05-08.md ├── 2022-05-09.md ├── 2022-05-10.md ├── 2022-05-11.md ├── 2022-05-12.md ├── 2022-05-13.md ├── 2022-05-14.md ├── 2022-05-15.md ├── 2022-05-16.md ├── 2022-05-17.md ├── 2022-05-18.md ├── 2022-05-19.md ├── 2022-05-20.md ├── 2022-05-21.md ├── 2022-05-22.md ├── 2022-05-23.md ├── 2022-05-24.md ├── 2022-05-25.md ├── 2022-05-26.md ├── 2022-05-27.md ├── 2022-05-28.md ├── 2022-05-29.md ├── 2022-05-30.md ├── 2022-05-31.md ├── 2022-08-31-thismonth │ ├── devto.png │ └── index.md ├── 2022-09-28-thismonth │ └── index.md ├── 2022-10-26-thismonth │ ├── index.md │ └── studentsummit.png ├── 2022-11-30-thismonth │ └── index.md ├── 2023-01-23-thismonth │ └── index.md └── authors.yml ├── docusaurus.config.js ├── package-lock.json ├── package.json ├── playwright.config.ts ├── sidebars.js ├── src ├── components │ ├── HomepageFeatures │ │ ├── index.js │ │ └── styles.module.css │ └── ListRowCard │ │ ├── index.js │ │ └── styles.module.css ├── css │ └── custom.css └── pages │ ├── collections │ ├── dab.md │ ├── index.js │ └── styles.module.css │ ├── contribute.md │ ├── index.js │ ├── index.module.css │ ├── resources.md │ ├── roadmap.md │ ├── roundup.md │ └── showcase.md ├── static ├── .nojekyll ├── img │ ├── collections │ │ └── dab │ │ │ ├── dab-walkthrough.gif │ │ │ ├── swa-dab-launch.png │ │ │ ├── swa-database-connections.png │ │ │ └── swa-sverdle.png │ ├── favicon.ico │ ├── png │ │ ├── contoso-sketchnote.png │ │ ├── logo-light.png │ │ ├── roundup │ │ │ ├── apr.png │ │ │ ├── aug.png │ │ │ ├── blank.png │ │ │ ├── dec.png │ │ │ ├── feb.png │ │ │ ├── jan.png │ │ │ ├── jul.png │ │ │ ├── jun.png │ │ │ ├── mar.png │ │ │ ├── may.png │ │ │ ├── nov.png │ │ │ ├── oct.png │ │ │ ├── sep.png │ │ │ ├── template.png │ │ │ ├── tmis-banner.png │ │ │ └── tmis-links.png │ │ ├── swa-showcase.png │ │ ├── swanniversary.png │ │ ├── this-month.png │ │ ├── week1-roadmap.png │ │ ├── week2-roadmap.png │ │ ├── week3-roadmap.png │ │ └── week4-roadmap.png │ ├── series │ │ ├── 01-banner.png │ │ ├── 01-swa-overview.png │ │ ├── 01-ten-things.png │ │ ├── 02-banner-glaucia.png │ │ ├── 02-banner.png │ │ ├── 02-vanillajs-start.png │ │ ├── 03-banner.png │ │ ├── 03-may4.png │ │ ├── 04-banner.png │ │ ├── 05-banner.png │ │ ├── 06-banner.png │ │ ├── 07-banner.png │ │ ├── 08-astro.jpeg │ │ ├── 08-banner.png │ │ ├── 09-banner.png │ │ ├── 09-snowpack.png │ │ ├── 10-banner.png │ │ ├── 10-olympic.png │ │ ├── 10-ombromanie.png │ │ ├── 10-posedance.png │ │ ├── 10-spacequest.png │ │ ├── 11-banner.png │ │ ├── 11-blog.png │ │ ├── 11-commit.png │ │ ├── 11-docs.png │ │ ├── 11-extension.png │ │ ├── 11-landing.png │ │ ├── 11-markdown.png │ │ ├── 11-reload.png │ │ ├── 11-swa-1.png │ │ ├── 11-swa-2.png │ │ ├── 11-swa-3.png │ │ ├── 11-swa-4.png │ │ ├── 11-swa-5.png │ │ ├── 11-swa-browse.png │ │ ├── 11-swa-created.png │ │ ├── 11-swa-dark.png │ │ ├── 11-swa-deployed.png │ │ ├── 11-swa-light.png │ │ ├── 11-swa-plus.png │ │ ├── 11-swa-sidebar.png │ │ ├── 11-vscode.png │ │ ├── 12-banner.png │ │ ├── 12-swa-fritz.png │ │ ├── 12-swa-quickstart.png │ │ ├── 12-swa-wordpress.png │ │ ├── 13-banner.png │ │ ├── 13-pwa-30days.jpg │ │ ├── 13-pwa-starter.png │ │ ├── 14-banner.png │ │ ├── 14-codelabs.png │ │ ├── 14-recipeme.png │ │ ├── 14-simona-stickers.png │ │ ├── 15-banner.png │ │ ├── 15-extensions.png │ │ ├── 16-banner.png │ │ ├── 16-playwright.jpg │ │ ├── 17-banner.png │ │ ├── 18-banner.png │ │ ├── 19-banner.jpeg │ │ ├── 19-banner.png │ │ ├── 19-cli-banner-1.jpeg │ │ ├── 19-cli-banner-2.jpeg │ │ ├── 19-init.png │ │ ├── 20-banner.png │ │ ├── 21-banner.png │ │ ├── 22-banner.png │ │ ├── 23-banner.png │ │ ├── 24-banner.png │ │ ├── 25-banner.png │ │ ├── 26-banner.png │ │ ├── 27-banner.png │ │ ├── 28-banner.png │ │ ├── 29-banner.png │ │ ├── 30Days.png │ │ ├── banner-kickoff.png │ │ ├── banner.png │ │ ├── roadmap.png │ │ ├── series-people.png │ │ ├── w3d4 │ │ │ ├── alttext.png │ │ │ ├── colorpicker.png │ │ │ ├── contrastratiolines.gif │ │ │ ├── cssissue.png │ │ │ ├── detachedelements-memory.png │ │ │ ├── detachedelements.png │ │ │ ├── firstrun.png │ │ │ ├── install.png │ │ │ ├── launchjson.png │ │ │ ├── mirror.png │ │ │ ├── perftool.png │ │ │ └── sourceorder.png │ │ ├── w4d1 │ │ │ ├── SWAF5.png │ │ │ ├── swaF1.png │ │ │ ├── swaF3.png │ │ │ ├── swaF4.png │ │ │ └── swaF6.png │ │ ├── w4d2 │ │ │ ├── azure-search-diagram.svg │ │ │ ├── cognitive-search-enabled-book-website.png │ │ │ └── visual-studio-code-search-extension-view-docs.png │ │ ├── w4d3 │ │ │ ├── kliptok-architecture-simplified.png │ │ │ ├── kliptok-dashboard.png │ │ │ └── kliptok-site.png │ │ └── w4d6 │ │ │ ├── ACSSWA001.jpg │ │ │ ├── ACSSWA002.jpg │ │ │ ├── ACSSWA003.jpg │ │ │ └── ACSSWA004.jpg │ ├── svg │ │ ├── landing-action.svg │ │ ├── landing-anniversary.svg │ │ ├── landing-blocks.svg │ │ ├── landing-calendar.svg │ │ ├── landing-devtools.svg │ │ ├── landing-roundup.svg │ │ ├── landing-showcase.svg │ │ ├── landing-tips.svg │ │ ├── logo-30days.svg │ │ ├── logo-swa.svg │ │ └── logo.svg │ └── tutorial │ │ ├── docsVersionDropdown.png │ │ └── localeDropdown.png └── orig │ ├── week1-roadmap.png │ ├── week2-roadmap.png │ ├── week3-roadmap.png │ └── week4-roadmap.png └── tests ├── Test.README.md └── playwright.spec.ts /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/.DS_Store -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/---this-month-in-swa--community-submission.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: "\U0001F5D3 This Month In SWA: Community Submission" 3 | about: Submit an article, code sample or event to our Monthly Roundup post 4 | title: 'This Month In: Community' 5 | labels: ThisMonthIn - Community 6 | assignees: '' 7 | 8 | --- 9 | 10 | ## Requirements 11 | * Submission ("resource") must have a title, _active_ link and description 12 | * You must be an author or someone authorized to submit the resource for consideration 13 | * Submission must be related to Azure Static Web Apps and related technologies 14 | * Submission adheres to Code of Conduct (no offensive language, non-inclusive narratives) 15 | * Submission resource can be an article, a project (repo), or an event (meetup or conference) 16 | 17 | ## Process 18 | * Fill in the sections below and submit the issue 19 | * Track issue to know when it gets scheduled - might not always be in the next roundup 20 | 21 | --- 22 | 23 | ## Resource Title 24 | (Title we should use when referencing it in the roundup) 25 | 26 | ## Resource Link 27 | (Active or working link to the resource where currently hosted - blog, repo etc.) 28 | 29 | ## Resource Description 30 | (1-2 sentences describing what it is so we can amplify in the right context) 31 | 32 | ## Submitter Name and Github Profile 33 | (Who we attribute in our roundup post) 34 | 35 | ## (Optional) Your Twitter profile 36 | (May be used to tag you only if we tweet the roundup post containing your submission) 37 | 38 | ## (Optional) Expiry Date 39 | (Ensures we prioritize sharing resource before it expires - e.g., deadline for event registrations) 40 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/---website-platform--fixes-and-functionality.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: "⚙️ Website Platform: Fixes and Functionality" 3 | about: Use for issues related to fixing or enhancing website UI/UX 4 | title: "[Platform Update] " 5 | labels: '' 6 | assignees: nitya 7 | 8 | --- 9 | 10 | Describe task - then add relevant label (P0 - P4) 11 | -------------------------------------------------------------------------------- /.github/workflows/azure-static-web-apps-lively-tree-0c3a7d80f.yml: -------------------------------------------------------------------------------- 1 | name: Azure Static Web Apps CI/CD 2 | 3 | on: 4 | push: 5 | branches: 6 | - main 7 | pull_request: 8 | types: [opened, synchronize, reopened, closed] 9 | branches: 10 | - main 11 | 12 | jobs: 13 | build_and_deploy_job: 14 | if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed') 15 | runs-on: ubuntu-latest 16 | name: Build and Deploy Job 17 | steps: 18 | - uses: actions/checkout@v2 19 | with: 20 | submodules: true 21 | - name: Build And Deploy 22 | id: builddeploy 23 | uses: Azure/static-web-apps-deploy@v1 24 | with: 25 | azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_LIVELY_TREE_0C3A7D80F }} 26 | repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments) 27 | action: "upload" 28 | ###### Repository/Build Configurations - These values can be configured to match your app requirements. ###### 29 | # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig 30 | app_location: "/www/" # App source code path 31 | api_location: "api" # Api source code path - optional 32 | output_location: "build" # Built app content directory - optional 33 | ###### End of Repository/Build Configurations ###### 34 | 35 | close_pull_request_job: 36 | if: github.event_name == 'pull_request' && github.event.action == 'closed' 37 | runs-on: ubuntu-latest 38 | name: Close Pull Request Job 39 | steps: 40 | - name: Close Pull Request 41 | id: closepullrequest 42 | uses: Azure/static-web-apps-deploy@v1 43 | with: 44 | azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_LIVELY_TREE_0C3A7D80F }} 45 | action: "close" 46 | -------------------------------------------------------------------------------- /.github/workflows/deploy.yml: -------------------------------------------------------------------------------- 1 | name: Deploy to GitHub Pages 2 | 3 | on: 4 | push: 5 | branches: [main] 6 | paths: [www/**] 7 | 8 | jobs: 9 | deploy: 10 | name: Deploy to GitHub Pages 11 | runs-on: ubuntu-latest 12 | steps: 13 | - uses: actions/checkout@v2 14 | - uses: actions/setup-node@v2 15 | with: 16 | node-version: 14.x 17 | cache: npm 18 | cache-dependency-path: www/package-lock.json 19 | - name: Build website 20 | working-directory: www 21 | run: | 22 | npm ci 23 | npm run build 24 | 25 | # Popular action to deploy to GitHub Pages: 26 | # Docs: https://github.com/peaceiris/actions-gh-pages#%EF%B8%8F-docusaurus 27 | - name: Deploy to GitHub Pages 28 | uses: peaceiris/actions-gh-pages@v3 29 | with: 30 | github_token: ${{ secrets.GITHUB_TOKEN }} 31 | # Build output to publish to the `gh-pages` branch: 32 | publish_dir: ./www/build 33 | # Assign commit authorship to the official GH-Actions bot for deploys to `gh-pages` branch: 34 | # https://github.com/actions/checkout/issues/13#issuecomment-724415212 35 | # The GH actions bot is used by default if you didn't specify the two fields. 36 | # You can swap them out with your own user credentials. 37 | user_name: github-actions[bot] 38 | user_email: 41898282+github-actions[bot]@users.noreply.github.com -------------------------------------------------------------------------------- /.github/workflows/playwright-onDemand.yml: -------------------------------------------------------------------------------- 1 | 2 | # This is a basic workflow to help you get started with Actions 3 | 4 | name: Playwright tests 5 | 6 | # Controls when the workflow will run 7 | on: 8 | # Triggers the workflow on push or pull request events but only for the "main" branch 9 | push: 10 | branches: [ "main" ] 11 | pull_request: 12 | branches: [ "main" ] 13 | schedule: 14 | # nightly 15 | - cron: '0 0 * * *' 16 | 17 | # Allows you to run this workflow manually from the Actions tab 18 | workflow_dispatch: 19 | 20 | defaults: 21 | run: 22 | working-directory: www 23 | 24 | # A workflow run is made up of one or more jobs that can run sequentially or in parallel 25 | jobs: 26 | test: 27 | # Runs on an ubuntu runner 28 | runs-on: ubuntu-latest 29 | 30 | strategy: 31 | matrix: 32 | node-version: [14.x, 16.x, 18.x] 33 | # See supported Node.js release schedule at https://nodejs.org/en/about/releases/ 34 | 35 | steps: 36 | - uses: actions/checkout@v3 37 | - uses: actions/setup-node@v3 38 | - name: Install dependencies 39 | run: npm ci 40 | - name: Install Playwright 41 | run: npx playwright install --with-deps 42 | - name: Install Docusaurus 43 | run: npm install -g docusaurus 44 | - name: Build Project 45 | run: npm run build 46 | - name: Run your tests 47 | run: npm run playwright_test 48 | - name: Get current date 49 | id: date 50 | run: echo "::set-output name=date::$(date +'%Y-%m-%d')" 51 | - name: Upload HTML report as Artifact 52 | uses: actions/upload-artifact@v2 53 | if: always() 54 | with: 55 | name: onDemand 56 | path: pw-report/ 57 | 58 | storeReports: 59 | name: Store reports 60 | if: ${{ always() }} 61 | needs: test 62 | runs-on: ubuntu-latest 63 | steps: 64 | - name: Download all workflow run artifacts 65 | uses: actions/download-artifact@v3 66 | id: download 67 | - name: Publish to external repo 68 | if: always() 69 | uses: peaceiris/actions-gh-pages@v3.7.3 70 | with: 71 | external_repository: mspnp/intern-js-pipeline 72 | publish_branch: gh-pages 73 | personal_token: ${{ secrets.TEST_HARNESS_PAT_TOKEN }} 74 | publish_dir: ${{steps.download.outputs.download-path}} 75 | destination_dir: test-reports/${{ github.repository }} 76 | keep_files: true 77 | user_name: "github-actions[bot]" 78 | user_email: "github-actions[bot]@users.noreply.github.com" 79 | 80 | notify-dashboard: 81 | name: Notify Dashboard 82 | if: ${{ always() }} 83 | needs: [test, storeReports] 84 | # The type of runner that the job will run on 85 | runs-on: ubuntu-latest 86 | 87 | # Steps represent a sequence of tasks that will be executed as part of the job 88 | steps: 89 | # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it 90 | - uses: actions/checkout@v3 91 | 92 | # Runs a single command using the runners shell 93 | - name: Notify docusaurus repo 94 | env: 95 | GITHUB_TOKEN: ${{ secrets.TEST_HARNESS_PAT_TOKEN }} 96 | run: | 97 | gh api repos/mspnp/intern-js-pipeline/dispatches \ 98 | --raw-field event_type=rebuild-site 99 | -------------------------------------------------------------------------------- /.github/workflows/playwright-scheduled.yml: -------------------------------------------------------------------------------- 1 | name: Scheduled Playwright tests 2 | 3 | # Controls when the workflow will run 4 | on: 5 | # Triggers the workflow nightly 6 | schedule: 7 | # nightly 8 | - cron: '0 0 * * *' 9 | 10 | defaults: 11 | run: 12 | working-directory: www 13 | 14 | # A workflow run is made up of one or more jobs that can run sequentially or in parallel 15 | jobs: 16 | test: 17 | # Runs on an ubuntu runner 18 | runs-on: ubuntu-latest 19 | 20 | strategy: 21 | matrix: 22 | node-version: [14.x, 16.x, 18.x] 23 | # See supported Node.js release schedule at https://nodejs.org/en/about/releases/ 24 | 25 | steps: 26 | - uses: actions/checkout@v3 27 | - uses: actions/setup-node@v3 28 | - name: Install dependencies 29 | run: npm ci 30 | - name: Install Playwright 31 | run: npx playwright install --with-deps 32 | - name: Install Docusaurus 33 | run: npm install -g docusaurus 34 | - name: Build Project 35 | run: npm run build 36 | - name: Run your tests 37 | run: npm run playwright_test 38 | - name: Get current date 39 | id: date 40 | run: echo "::set-output name=date::$(date +'%Y-%m-%d')" 41 | - name: Upload HTML report as Artifact 42 | uses: actions/upload-artifact@v2 43 | if: always() 44 | with: 45 | name: ${{ steps.date.outputs.date }} 46 | path: pw-report/ 47 | 48 | storeReports: 49 | name: Store reports 50 | if: ${{ always() }} 51 | needs: test 52 | runs-on: ubuntu-latest 53 | steps: 54 | - name: Download all workflow run artifacts 55 | uses: actions/download-artifact@v3 56 | id: download 57 | - name: Publish to external repo 58 | if: always() 59 | uses: peaceiris/actions-gh-pages@v3.7.3 60 | with: 61 | external_repository: mspnp/intern-js-pipeline 62 | publish_branch: gh-pages 63 | personal_token: ${{ secrets.TEST_HARNESS_PAT_TOKEN }} 64 | publish_dir: ${{steps.download.outputs.download-path}} 65 | destination_dir: test-reports/${{ github.repository }} 66 | keep_files: true 67 | user_name: "github-actions[bot]" 68 | user_email: "github-actions[bot]@users.noreply.github.com" 69 | 70 | notify-dashboard: 71 | name: Notify Dashboard 72 | if: ${{ always() }} 73 | needs: [test, storeReports] 74 | # The type of runner that the job will run on 75 | runs-on: ubuntu-latest 76 | 77 | # Steps represent a sequence of tasks that will be executed as part of the job 78 | steps: 79 | # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it 80 | - uses: actions/checkout@v3 81 | 82 | # Runs a single command using the runners shell 83 | - name: Notify dashboard repo 84 | env: 85 | GITHUB_TOKEN: ${{ secrets.TEST_HARNESS_PAT_TOKEN }} 86 | run: | 87 | gh api repos/mspnp/intern-js-pipeline/dispatches \ 88 | --raw-field event_type=rebuild-site -------------------------------------------------------------------------------- /.github/workflows/test-deploy.yml: -------------------------------------------------------------------------------- 1 | name: Test deployment 2 | 3 | on: 4 | pull_request: 5 | branches: [main] 6 | paths: [www/**] 7 | 8 | jobs: 9 | test-deploy: 10 | name: Test deployment 11 | runs-on: ubuntu-latest 12 | steps: 13 | - uses: actions/checkout@v2 14 | - uses: actions/setup-node@v2 15 | with: 16 | node-version: 14.x 17 | cache: npm 18 | cache-dependency-path: www/package-lock.json 19 | - name: Test build 20 | working-directory: www 21 | run: | 22 | npm ci 23 | npm run build -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Dependencies 2 | /node_modules 3 | 4 | # Production 5 | /build 6 | 7 | # Generated files 8 | .docusaurus 9 | .cache-loader 10 | 11 | # Misc 12 | .DS_Store 13 | .env.local 14 | .env.development.local 15 | .env.test.local 16 | .env.production.local 17 | .vscode/ 18 | 19 | npm-debug.log* 20 | yarn-debug.log* 21 | yarn-error.log* -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 30DaysOfSWA - A Learning Journey 2 | 3 | Deployed on [Azure Static Web Apps](https://aka.ms/swa) 4 | 5 | Welcome to #30DaysOfSWA - a project to give beginners and experienced developers a tour of [Azure Static Web Apps](https://docs.microsoft.com/azure/static-web-apps/overview) from core concepts to usage examples, developer tools and best practices. 6 | 7 | [![Azure Static Web Apps CI/CD](https://github.com/staticwebdev/30DaysOfSWA/actions/workflows/azure-static-web-apps-lively-tree-0c3a7d80f.yml/badge.svg)](https://github.com/staticwebdev/30DaysOfSWA/actions/workflows/azure-static-web-apps-lively-tree-0c3a7d80f.yml) 8 | 9 | ![30DaysOfSWA Logo](www/static/img/svg/logo.svg) 10 | 11 | Visit our [Website](https://aka.ms/30DaysOfSWA) to view the content and learn more about the contributors and objectives for this project. 12 | 13 | --- 14 | 15 | _Look [Under The Hood](SETUP.md) to see how the site was built with [Docusaurus](https://docusaurus.io)._ 16 | -------------------------------------------------------------------------------- /SETUP.md: -------------------------------------------------------------------------------- 1 | # Under The Hood 2 | 3 | This is a [Docusaurus-powered](https://docusaurus.io) site to host tutorials and blog posts that can support #30Days learning journeys. Here are the steps used to setup this site and configure it for automated build-deploy workflows. 4 | 5 | 6 | 7 | --- 8 | 9 | ## 1. Setup & Validate Site 10 | 11 | | Command | Description | 12 | |:--- |:--- | 13 | | `npx create-docusaurus@latest www classic` | Scaffold **a new** classic docusaurus site in www/ folder | 14 | | `cd www; npm install` | Work with an **existing** docusaurus site scaffolded in www/ folder | 15 | | `cd www; npx docusaurus start` | Validate setup with local preview (and hot reload) | 16 | | `cd www; npm run build` | Build production-ready site (in _build/_ folder by default) | 17 | | `cd www; npm run serve` | Preview production-ready site on local device | 18 | | | | 19 | 20 |
21 | 22 | ## 2. Customize Site Contents 23 | 24 | | Action | Outcome | 25 | |:--- |:--- | 26 | | Add `hello.md` under `www/src/pages/` | Creates a standalone web page accessible at path `/hello`| 27 | | Add `hello.md` under `www/docs/` | Creates a tutorial page (with prev/next navigation and sidebar) accessible at path `/docs/hello`| 28 | | Add `hello.md` under `www/docs/basics/` | Creates a tutorial collection accessible at path `/docs/basics` with `/docs/basics/hello` as first step.| 29 | | Add `2022-01-17-hello.md` under `www/blog` | Creates a blog post timestamped `January 17, 2021` accessible under `/blog/hello`, with blog index at `blog/` | 30 | | Edit site settings in `www/docusaurus.config.js` | Customize [various parameters](https://docusaurus.io/docs/configuration) for site metadata, deployment, themes, plugins and more. | 31 | | Edit docs sidebar settings in `www/sidebars.js` | Customize [sidebar configuration](https://docusaurus.io/docs/sidebar/items) or learn to use auto-generated versions more effectively. | 32 | | Update [styling and layout](https://docusaurus.io/docs/next/styling-layout) and validate for light & dark theme | Use [colorbox.io](https://colorbox.io/) and [guide](https://justtheskills.com/colorbox/) to define color palette. Create [style variables](https://docusaurus.io/docs/next/styling-layout#styling-your-site-with-infima) to update `custom.css` (based on the [infima](https://infima.dev/) styling framework) | 33 | | Add [supported plugins](https://docusaurus.io/docs/api/plugins) for enhanced content or behaviors | Default plugins used are [plugin-content-docs](https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-content-docs) (for `docs/` pages) , [plugin-content-blog](https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-content-blog) (for `blog/`) and [plugin-content-pages](https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-content-pages) for default pages. Check out [plugin-sitemap](https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-sitemap), [plugin-ideal-image](https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-ideal-image) and [plugin-pwa](https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-pwa) for other useful features. | 34 | | | | 35 | 36 |
37 | 38 | ## 3. Deploy to GitHub Pages 39 | 40 | | Action | Description | 41 | |:--- |:--- | 42 | | [Modify docusaurus.config.js](https://docusaurus.io/docs/deployment#docusaurusconfigjs-settings) | Add `organizationName`=user, `projectName`=repo, `deploymentBranch`=gh-pages properties.
Updated `url` property to relevant github.io version for now | 43 | | [Configure publishing source for GitHub Pages](https://docs.github.com/en/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site)| Do an initial manual deploy using `GIT_USER= GIT_PASS= npm run deploy` to setup the GitHub Pages branch. Generate [Personal Tokens](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token) if needed. Validate deploy by visiting [https://staticwebdev.github.io/30DaysOfSWA/](https://staticwebdev.github.io/30DaysOfSWA) - then automate deploy using GitHub Actions.| 44 | | | | 45 | | | | 46 | 47 |
48 | 49 | ## 4. Automate with GitHub Actions 50 | 51 | | Action | Description | 52 | |:--- |:--- | 53 | | [Setup GitHub Actions for auto-deploy](https://docusaurus.io/docs/deployment#triggering-deployment-with-github-actions) | We want this to auto-deploy build to gh-pages when new commit is made to `main/`. Follow the directions for "Same" repo - add `deploy.yml` and `test-deploy.yml` to `.github/workflows` -- commit changes! I used `www/**` for paths) and `npm` for build) | 54 | | [Visit Actions Dashboard](https://github.com/nitya/docusaurus-demo/actions) | Commits should trigger action - verify that build/deploy works. | 55 | | | | 56 | 57 | 58 |
59 | -------------------------------------------------------------------------------- /www/.gitignore: -------------------------------------------------------------------------------- 1 | # Dependencies 2 | /node_modules 3 | 4 | # Production 5 | /build 6 | 7 | # Generated files 8 | .docusaurus 9 | .cache-loader 10 | 11 | # Misc 12 | .DS_Store 13 | .env.local 14 | .env.development.local 15 | .env.test.local 16 | .env.production.local 17 | ./vscode 18 | 19 | npm-debug.log* 20 | yarn-debug.log* 21 | yarn-error.log* 22 | /test-results/ 23 | /playwright-report/ 24 | /playwright/.cache/ 25 | -------------------------------------------------------------------------------- /www/README.md: -------------------------------------------------------------------------------- 1 | # Website 2 | 3 | This website is built using [Docusaurus 2](https://docusaurus.io/), a modern static website generator. Icons are in SVG format from Microsoft [IconCloud](https://iconcloud.design/) and customized to theme colors with CSS. 4 | 5 | ### Installation 6 | 7 | ``` 8 | $ yarn 9 | ``` 10 | 11 | ### Local Development 12 | 13 | ``` 14 | $ yarn start 15 | ``` 16 | 17 | This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server. 18 | 19 | ### Build 20 | 21 | ``` 22 | $ yarn build 23 | ``` 24 | 25 | This command generates static content into the `build` directory and can be served using any static contents hosting service. 26 | 27 | ### Deployment 28 | 29 | Using SSH: 30 | 31 | ``` 32 | $ USE_SSH=true yarn deploy 33 | ``` 34 | 35 | Not using SSH: 36 | 37 | ``` 38 | $ GIT_USER= yarn deploy 39 | ``` 40 | 41 | If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch. 42 | -------------------------------------------------------------------------------- /www/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [require.resolve('@docusaurus/core/lib/babel/preset')], 3 | }; 4 | -------------------------------------------------------------------------------- /www/blog-roundup/2022-08-31-thismonth/devto.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/blog-roundup/2022-08-31-thismonth/devto.png -------------------------------------------------------------------------------- /www/blog-roundup/2022-08-31-thismonth/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | slug: roundup-2022-aug 3 | title: "2022 | August" 4 | authors: [reshmi, nitya, sara] 5 | tags: [swa, thismonth, aug] 6 | draft: false 7 | --- 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | It's here!! Our first roundup of **This Month in SWA** 🎉 22 | 23 | :::info ABOUT THE ROUNDUP 24 | 25 | The roundup is traditionally published **on the last Monday of each month** - just ahead of the [**Azure Static Web Apps Community Standup**](https://www.youtube.com/playlist?list=PLI7iePan8aH7Yo8vo288dAULgjyCCCcEJ) held on the last Wednesday of each month. Catch up on all the news and announcements in one friendly blog post, then join the livestream for interactive discussions, demos and more. 26 | 27 | * Want to make sure you don't miss the next roundup? **Subscribe to the feed**. 28 | * Want to contribute items for roundup? [**Submit this custom issue**](https://github.com/staticwebdev/30DaysOfSWA/issues/new?assignees=&labels=ThisMonthIn+-+Community&template=---this-month-in-swa--community-submission.md&title=This+Month+In%3A+Community). 29 | * Want to catch up on past posts? [**Browse past editions.**](/roundup#roundups-archive) 30 | * Want to catch up on past livestreams? [**Watch standup recordings**](https://aka.ms/swa/community/standups) 31 | 32 | And don't forget to contribute _your_ updates for inclusion in the next issue! 33 | 34 | ::: 35 | --- 36 | 37 | ![](../../static/img/png/roundup/aug.png) 38 | 39 | --- 40 | 41 | ## Product News 42 | 43 | _This section covers recent news or announcements from the product team. Read on to learn the latest news from the world of Azure Static Web Apps!_ 44 | 45 | * **Jun 22** | [Azure SWA now supports more API options](https://azure.microsoft.com/en-us/updates/public-preview-new-api-backend-options-in-azure-static-web-apps/)
You can now link Azure App Service, Azure Container Apps, and Azure API Management services seamlessly to your SWA's API endpoint. Read the [docs](https://docs.microsoft.com/en-us/azure/static-web-apps/apis-overview) and explore the [sample walkthrough](https://techcommunity.microsoft.com/t5/apps-on-azure-blog/new-api-backend-options-in-azure-static-web-apps/ba-p/3516882) to learn more. 46 | 47 | * **Jun 8** | [Static Web Apps CLI is generally available](https://azure.microsoft.com/en-us/updates/static-web-apps-cli-now-available/).
The v1.0 release was launched in late May, adding new commands like `swa init`, `swa login` and `swa deploy` to create an all-in-1 tool for local SWA development. [_Explore the documentation here_](https://azure.github.io/static-web-apps-cli/) 48 | 49 | Don't forget to bookmark the [**Azure Updates**](https://azure.microsoft.com/en-us/updates/?query=static%20web%20apps) page to get updates at any time. 50 | 51 | --- 52 | 53 | ## Dev Resources 54 | 55 | _This section covers content, events and code samples from Microsoft authors. Check them out for relevant learning resources and best practices._ 56 | 57 | * **Aug 3** | `dev.to` - [**Deploy Azure Static Web Apps using Python**](https://dev.to/azure/deploy-azure-static-web-apps-using-python-1hn7) by _Jay Miller_. Are you a Python developer interested in exploring Azure Static Web Apps? In this post, Jay walks you through configuring and deploying your first Python SWA from VS Code. 58 | 59 | * **Jul 22** | `TechCommunity` - [**Host your website on Azure Static Web Apps for free**](https://techcommunity.microsoft.com/t5/educator-developer-blog/host-your-website-on-azure-static-web-apps-for-free/ba-p/3579709?WT.mc_id=academic-74011-sagibbon) by _Julia Muiruri_. Students looking to get started with Azure, create your Azure for Students account and deploy your first website within minutes! 60 | 61 | * **Jul 20** | `dev.to` -[**Taking a SWA DevOps Pipeline to the next level**](https://dev.to/azure/taking-a-swa-devops-pipeline-to-the-next-level-5co3) by _Aaron Powell_. We know SWA works seamlessly with GitHub Actions to automate the default build-deploy workflow. What if you need a more complex custom CI/CD pipeline? This article walks you through one such example. 62 | 63 | --- 64 | 65 | ## Community Buzz 66 | 67 | :::info AUTHORED BY DEVS LIKE YOU! 68 | _This section highlights content from our amazing developer community - submitted directly, or published to the relevant tag in sites like Tech Community and dev.to._ 69 | ::: 70 | 71 | * **Jul 19** | `techcommunity.com` - [**Azure Adventure – A RPG game to test student’s Azure practical skills**](https://techcommunity.microsoft.com/t5/educator-developer-blog/azure-adventure-a-rpg-game-to-test-student-s-azure-practical/ba-p/3576331?WT.mc_id=academic-74011-sagibbon) by _Wong Cyrus, Dept Information Technology of the Hong Kong Institute of Vocational Education_. Azure Adventure is an open source HTML5 RPG game that builds on top of the latest version of Azure Automatic Grading Engine, utilizing SWA. 72 | 73 | --- 74 | 75 | ## Upcoming Events 76 | 77 | _This section highlights in-person or online events that are likely to feature Azure Static Web Apps content or developer conversations - links to CFPs or registration links are welcome!_ 78 | 79 | * **Sep 1-30, 2022** | [Serverless September](https://aka.ms/serverless-september) - explore Serverless on Azure 80 | * **Oct 7, 2022** | [Microsoft Student Summit](https://developer.microsoft.com/en-us/reactor/overview/student-summit-2022/) - virtual event held globally 81 | * **Oct 12-14, 2022** | [Microsoft Ignite](https://ignite.microsoft.com/en-US/home) - in-person (Seattle) and online 82 | 83 | --- 84 | 85 | ## Did You Know? 86 | 87 | _Each month, we hope to turn the spotlight on one key resource or person that is worth knowing about, in the context of Azure Static Web Apps._ 88 | 89 | :::info 🌟 SPOTLIGHT ON: DEV.TO 90 | [Dev.to](https://dev.to) is an inclusive community of software developers where you can publish content and have conversations on technology in collaborative and learning-driven ways. 91 | 92 | * Explore the [**#staticwebapps**](https://dev.to/t/staticwebapps) tag - to browse ~100 articles on SWA. 93 | * Leave comments or reactions - to provide valued feedback! 94 | * Create [**a tagged post**](https://dev.to/new/staticwebapps) - to share your own learnings. 95 | ::: 96 | 97 | Here's a snapshot of what that tag profile looks like! **Follow** the tag to get articles in your dev.to feed - or [subscribe to the feed](https://dev.to/feed/tag/staticwebapps) from your favorite RSS reader. 98 | 99 | > ![dev.to #staticwebapps page](./devto.png) 100 | 101 | That's all we had for this roundup! Tell us what you think about this new format for a monthly summary! And don't forget to send us _your_ contributions. 102 | 103 | --- 104 | 105 | ## 🚨 | Call For Content 106 | 107 | :::tip Next Roundup: Sep 28, 2022 108 | Submissions welcome till Sep 25, 2022. 109 | 110 | * Did you author an article, create a SWA application or sample? 111 | * Are you organizing an event with a SWA-related session? 112 | * Are you a student who just created your first SWA app or blog post? 113 | 114 | Submit the details [**using this custom issue**](https://github.com/staticwebdev/30DaysOfSWA/issues/new?assignees=&labels=ThisMonthIn+-+Community&template=---this-month-in-swa--community-submission.md&title=This+Month+In%3A+Community) as soon as possible. We can't wait to share your contributions! 115 | ::: 116 | -------------------------------------------------------------------------------- /www/blog-roundup/2022-10-26-thismonth/studentsummit.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/blog-roundup/2022-10-26-thismonth/studentsummit.png -------------------------------------------------------------------------------- /www/blog-roundup/2023-03-20-thismonth/swa-database-connections.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/blog-roundup/2023-03-20-thismonth/swa-database-connections.png -------------------------------------------------------------------------------- /www/blog-roundup/2023-07-27-thismonth/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | slug: roundup-2023-jul 3 | title: "2023 | July" 4 | authors: [nitya, sara, thomas, matt, dina] 5 | tags: [swa, thismonth, mar] 6 | draft: false 7 | --- 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | :::info WELCOME TO THIS MONTH'S NEWSLETTER 22 | 23 | We round up the latest news, product announcements, content and community highlights – in one compact post. Missed an episode or post? We have you covered! 24 | - View the blog archives: **https://aka.ms/swa/thismonth** 25 | - View the livestream replays: **https://aka.ms/swa/community/standups** 26 | - Subscribe to the blog feed: **https://aka.ms/swa/thismonth/rss.xml** 27 | 28 | We love our community and want to hear from you!! 29 | - Want to contribute resource links? [**Submit this custom issue**](https://github.com/staticwebdev/30DaysOfSWA/issues/new?assignees=&labels=ThisMonthIn+-+Community&template=---this-month-in-swa--community-submission.md&title=This+Month+In%3A+Community). 30 | - Want to chat with us? [**Join the monthly standup live**](https://aka.ms/swa/community/standups) 31 | ::: 32 | --- 33 | 34 | ## Community Standup 35 | 36 | The Community Standups livestream happens on the last Thursday of each month. Join us for the next one on **Jul 27, 2023** for some interactive demo and discussions. This month we’ll walk through adding backend functionality to your single-page app using Azure Functions. Check out the video archives for more exciting demos and guests! 37 | 38 | > Join us **live @9am PST / 12pm EST / 5pm GMT** or catch up on the replay later. 39 | 40 | 41 | --- 42 | 43 | ## Monthly Roundup 44 | 45 | ![](../../static/img/png/roundup/tmis-links.png) 46 | 47 | Let's start with **Community Highlights** 48 | 49 | ### Community: Blogs 50 | 51 | - [Azure Static Web Apps, Next.js and Azure DevOps (Japanese)](https://zenn.dev/yusu29/articles/azuredevops_staticapps_next) - `Jul 5` 52 | - [Use preview environments for testing SWA](https://techcommunity.microsoft.com/t5/apps-on-azure-blog/use-preview-environment-for-test-in-static-web-app/ba-p/3870476) – `Jul 11`` 53 | - [Deploying with SWA is even faster with new HTML preset](https://techcommunity.microsoft.com/t5/educator-developer-blog/deploying-with-azure-static-apps-is-even-faster-with-the-new/ba-p/3872796) – `Jul 17`` 54 | 55 | ### Community: Videos 56 | 57 | - [Build & Deploy SWA (Angular, Azure Functions, ALM & DevOps)](https://www.youtube.com/watch?v=TNA2T62Xqtc) - `July`` 58 | - [Azure Static Web Apps with Blazor and .NET (NDC Oslo)](https://www.youtube.com/watch?v=r3IKpPe36nY) - `July` 59 | - [Burke Learns Blazor](https://www.youtube.com/watch?v=JdlYnylzFqM) – `June`` 60 | - [Connect your SWA to Azure Databases using REST or GraphQL](https://www.youtube.com/watch?v=gCrBSSOezSQ) - `June`` 61 | 62 | ### Community: Events 63 | 64 | - [Hack Together: The JavaScript On Azure Global Hack](https://developer.microsoft.com/en-us/reactor/series/S-1173/) - Join students, beginners and experienced developers worldwide for this 2-week virtual hack experience on a learning journey to build enterprise-grade applications like the Contoso Real Estate app above. Aug 16-Aug 31. 65 | - [Azure Static Web Apps Community Standup](https://www.youtube.com/watch?v=fZljYaqGPy0&list=PLI7iePan8aH4AiiQ6UejZ4lxmbK3QX4Dy&index=6) – joins us for the latest news, interactive demos and discussions on Azure Static Web Apps. Livestreamed on YouTube. Jul 27. 66 | 67 | --- 68 | 69 | ## Spotlight On .. 70 | 71 | _Each month, we hope to turn the spotlight on one key resource or person that is worth knowing about, in the context of Azure Static Web Apps._ 72 | 73 | :::info 🌟 SPOTLIGHT ON: CONTOSO REAL ESTATE APP REFERENCE SAMPLE 74 | 75 | Did you know we released an [open-source enterprise-grade application](https://aka.ms/contoso-real-estate-github) at Microsoft Build that showcases a composable architecture using technologies like Azure Static Web Apps, Azure Functions, Azure Cosmos DB and more? 76 | 77 | ![](https://techcommunity.microsoft.com/t5/image/serverpage/image-id/472260i73D150FAF1149769/image-size/large?v=v2&px=999) 78 | ::: 79 | 80 | If you missed attending that session, we have some resources for you to explore on your own. 81 | 82 | ### Architecture 83 | 84 | ![Contoso Reference Architecture](https://techcommunity.microsoft.com/t5/image/serverpage/image-id/485315i8026FF8814B1B393/image-size/large?v=v2&px=999) 85 | 86 | ### Teaser Video 87 | Get a sneak peek at what you will build 88 | 89 | 90 | ### Illustrated Guide 91 | 92 | Want to get a sense of why we built the application, and what you will learn? Here's a visual overview. You can view or download a [**hi-res version of the image**](https://github.com/SketchTheDocs/cloud-skills/blob/main/gallery/MSBuild-2023-ContosoRealEstate.png) for a closer look. 93 | 94 | ![](../../static/img/png/contoso-sketchnote.png) 95 | 96 | ### 🚨 | Call To Action! 97 | 98 | - Read the [launch announcement](https://techcommunity.microsoft.com/t5/apps-on-azure-blog/announcing-contoso-real-estate-javascript-composable-application/ba-p/3827097) post. 99 | - Fork the [open-source repo](https://aka.ms/contoso-real-estate-github?source=techcommunity) and explore it! (Give us a star if you like it!) 100 | - Join a [live coding series](https://www.youtube.com/playlist?list=PLb2HQ45KP0Wu6g_B-QJrvWOe8RdNCmio2) exploring the codebase for refactoring (Portuguese) 101 | 102 | And keep an eye on the [Microsoft Learn](https://learn.microsoft.com/en-us/azure/developer/javascript/composable-cloud-contoso-real-estate) documentation site for more updates. -------------------------------------------------------------------------------- /www/blog-roundup/2023-07-27-thismonth/swa-database-connections.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/blog-roundup/2023-07-27-thismonth/swa-database-connections.png -------------------------------------------------------------------------------- /www/blog-roundup/authors.yml: -------------------------------------------------------------------------------- 1 | nitya: 2 | name: Nitya Narasimhan 3 | title: Senior Cloud Advocate @Microsoft 4 | url: https://twitter.com/nitya 5 | image_url: https://github.com/nitya.png 6 | 7 | sara: 8 | name: Sara Gibbons 9 | title: Next Gen Experiences Advocate @Microsoft 10 | url: https://github.com/saragibby 11 | image_url: https://github.com/saragibby.png 12 | 13 | reshmi: 14 | name: Reshmi Sriram 15 | title: PM, Static Web Apps @Microsoft 16 | url: https://github.com/Reshmi-Sriram 17 | image_url: https://github.com/Reshmi-Sriram.png 18 | 19 | dina: 20 | name: Dina Berry 21 | title: Senior Content Developer @Microsoft 22 | url: https://github.com/diberry 23 | image_url: https://github.com/diberry.png 24 | 25 | thomas: 26 | name: Thomas Gauvin 27 | title: PM, Static Web Apps @Microsoft 28 | url: https://github.com/thomasgauvin 29 | image_url: https://github.com/thomasgauvin.png 30 | 31 | matt: 32 | name: Matt Hernandez 33 | title: PM, Static Web Apps @Microsoft 34 | url: https://github.com/fiveisprime 35 | image_url: https://github.com/fiveisprime.png 36 | 37 | -------------------------------------------------------------------------------- /www/blog/2022-04-30.md: -------------------------------------------------------------------------------- 1 | --- 2 | slug: swanniversary 3 | title: "It's the SWA-anniversary!!" 4 | authors: [reshmi, nitya] 5 | tags: [swa, 30days, event] 6 | draft: false 7 | --- 8 | 9 | ![](../static/img/png/swanniversary.png) 10 | 11 | :::info SWA ANNIVERSARY SCHEDULE & SPEAKERS 12 | View the latest Schedule & Speaker Lineup at [https://aka.ms/swaanniversary](https://aka.ms/swaanniversary) 13 | ::: 14 | 15 | 16 | --- 17 | 18 | 19 | On May 12, 2021, the [Azure Static Web Apps](https://docs.microsoft.com/azure/static-web-apps/overview?WT.mc_id=30daysofswa-61155-cxall) service hit a significant milestone - [becoming generally available](https://azure.microsoft.com/en-us/updates/azure-static-web-apps-is-now-generally-available/?WT.mc_id=30daysofswa-61155-cxall) with support for many of the popular [front-end frameworks and static site generators](https://docs.microsoft.com/en-us/azure/static-web-apps/front-end-frameworks) used for modern web app development. 20 | 21 | On May 12, 2022, Azure Static Web Apps will make the first-year anniversary of that milestone - making this the perfect time to look back on all the progress made, and look ahead to what's in store next. 22 | 23 | 24 | ## Celebrate with #SWAanniversary 25 | 26 | On May 19, 2022, join us live on [Learn TV](https://docs.microsoft.com/en-us/learn/tv/?WT.mc_id=30daysofswa-61155-cxall) for a 2-hour celebration with some of our favorite speakers and guests from both Microsoft and the larger developer community. Can you tell we're excited for this birthday? 27 | 28 | 29 | 30 | Check out [the Event page](https://docs.microsoft.com/en-us/events/learntv/swa-anniversary-may-2022/?WT.mc_id=30daysofswa-61155-cxall) to learn more about the speakers and topics on the agenda. Add the event to your calendar, and join us live - or bookmark this page and revisit it for links to relevant resources and video replays. 31 | 32 | 33 | ## Learn with #30DaysOfSWA 34 | 35 | But there's more! _Are you new to Azure Static Web Apps?_ Do you want to get a beginner-friendly tour of the core concepts, usage examples, developer tools, and best practices involved in building and deploy modern web applications with this service? 36 | 37 | **You're in luck!** 38 | 39 | Watch this space for an update on a new content series that will help you jumpstart that learning journey! Throughout the month of May, we'll bring together a diverse group of technologists to share short articles with resources and insights on a curated tour of Static Web Apps - taking you from **code to scale**. 40 | 41 | ![The #30DaysOfSWA logo](../static/img/png/logo-light.png) 42 | 43 | 44 | ## How Can You Participate? 45 | 46 | Some actions you can take today to get ready for a fun month of learning: 47 | 48 | * Bookmark this Series page or [**Subscribe to the RSS feed**](https://aka.ms/30DaysOfSWA/rss) 49 | * Follow the [**#staticwebapps tag on dev.to**](https://dev.to/t/staticwebapps) - and consider making a post there! 50 | * Introduce yourself on [**our Discussions Forum**](https://github.com/orgs/staticwebdev/discussions/categories/-30daysofswa) - tell us what you hope to learn! 51 | 52 | 53 | ## Self-Study Resources 54 | 55 | Our goal is to help make this a beginner-friendly learning journey into Azure Static Web Apps. We hope we inspire you to keep going beyond #30Days - and wanted to share resources to motivate you to keep going. Here are three links to bookmark: 56 | 57 | * The [**Resources**](/resources) page - will be updated with links related to each article in the series, all through May! Use this to explore detours and deep dives. 58 | * The [**Microsoft Learn Path**](https://docs.microsoft.com/en-us/learn/paths/azure-static-web-apps/?WT.mc_id=30daysofswa-61155-cxall) - teaches you how to build your first Static Web Apps powered experience - with React, Angular, Vue and Blazor coding options. 59 | * The [**#30DaysOfSWA Collection**](https://docs.microsoft.com/en-us/users/nityan/collections/7d2ws6zd1mxmp6?WT.mc_id=30daysofswa-61155-cxall) - a Microsoft-specific collection of resources (from documentation to videos and code samples) that I will continue to update. 60 | -------------------------------------------------------------------------------- /www/blog/2022-05-01.md: -------------------------------------------------------------------------------- 1 | --- 2 | slug: kickoff 3 | title: "Kickoff #30DaysOfSWA!" 4 | authors: [nitya, reshmi, simona, glaucia, anthony,joseph, mitali, michail] 5 | tags: [swa, 30days] 6 | draft: false 7 | --- 8 | 9 | Welcome to the first day of **#30DaysOfSWA**!! 10 | 11 | Thank you for joining us on this fun and functional tour of **Azure Static Web Apps**. Whether you're new to the technology, or an experienced user, we hope there's something that interests and motivates you to keep going. 12 | 13 | ![](../static/img/series/banner-kickoff.png) 14 | 15 | ## Hello #30DaysOfSWA 16 | 17 | Simply put, it's a month-long series of blog posts that provides you a curated and structured tour through the universe of [Azure Static Web Apps](https://docs.microsoft.com/en-us/azure/static-web-apps/overview?WT.mc_id=30daysofswa-61155-cxall). 18 | 19 | * Each article will be 5 mins or less in reading time 20 | * Each ends with an activity to help reinforce the learning 21 | * Articles will follow a structured roadmap over 4 weeks 22 | 23 | We've organized the journey into four stages, each building on the previous one in a way that mimics the developer experience with any new technology: 24 | * **Week 1:** Focus on Core Concepts, learning terminology and getting setup. 25 | * **Week 2:** Focus on Usage Examples with quickstarts & front-end technologies. 26 | * **Week 3:** Focus on Dev Tools to develop, debug, test, and deploy, the SWA! 27 | * **Week 4:** Focus on Best Practices, from services to end-to-end experiences. 28 | 29 | ## Week 1 Roadmap 30 | 31 | We are kicking off week 1 with a focus on **Core Concepts** to get you familiar with the high-level architecture, fundamental components and basic terminology for Azure Static Web Apps. Want a sneak peek at the topics? Here's a visual guide to help you! 32 | 33 | ![Visual sketchnote of roadmap](../static/img/png/week1-roadmap.png) 34 | 35 | **By the end of week 1 you should know**: 36 | * What Azure Static Web Apps is, and its benefits 37 | * How to get started building SWA or using it for your existing apps 38 | * How to go serverless, adding API capability with Azure Functions 39 | * How to configure SWA - from app behavior to build process 40 | * How to secure SWA - from user authentication to role-based authorization 41 | * How to preview SWA - on pull requests or test branches 42 | * How to deploy SWA - using different code sources, or CI/CD options 43 | 44 | By the end of the week you should be familiar with SWA terminology and developer workflows - and be ready to explore usage scenarios with various front-end frameworks or static site generators! 45 | 46 | ## Take The Journey 47 | 48 | They say it takes 30 days to make a habit. It's our hope that doing short bursts of reading and activity with Azure Static Web Apps on a daily basis, will lead to better learning and development habits in general. 49 | 50 | We want to make it easy for you to participate - here are options to follow along: 51 | * Bookmark [this site](https://aka.ms/30DaysofSWA) and visit daily 52 | * Subscribe to the [RSS Feed](https://aka.ms/30DaysOfSWA/rss) in your favorite Feed Reader 53 | * Visit the [dev.to Series Page](https://dev.to/nitya/series/17901) and like, comment on, or bookmark, the posts. 54 | 55 | Want to really get the most from this? Try the exercises each day, and take a moment on a weekly basis, to write a blog post or capture your own notes on what your main takeaways were. As a fan of [visual storytelling](https://twitter.com/sketchthedocs) I know that writing things down helps improve your understanding and recall of the material! 56 | 57 | ## Provide Us Feedback 58 | 59 | **We want to make this useful and beginner-friendly!** So if you have comments or questions that can help us improve this content, please drop us a note in our [Discussions](https://github.com/orgs/staticwebdev/discussions/categories/-30daysofswa) board! 60 | 61 | 62 | ## Meet The Authors 63 | 64 | Articles are written by a multi-disciplinary team of contributors from across Microsoft and the community - including members of the Static Web Apps product group and Microsoft Developer Relations. 65 | 66 | ![Banner with people](../static/img/series/series-people.png) 67 | 68 | We'll keep this page updated on a daily basis, to reflect the latest author whose post was published. We'll kick things off with the authors of this post. 69 | * **Nitya Narasimhan**, Senior Cloud Advocate @Microsoft 70 | * **Reshmi Sriram**, Static Web Apps PM @Microsoft 71 | * **Simona Cotin**, Principal PM @Microsoft 72 | * **Glaucia Lemos**, JS Cloud Advocate @Microsoft 73 | * **Anthony Chu**, Senior Product PM @Microsoft 74 | * **Joseph Lin** Software Engineer @Microsoft, 75 | * **Mitali Karmarkar**, Software Engineer @Microsoft 76 | * **Michail Shaposhnikov**, Software Engineer @Microsoft 77 | * **Chris Noring**, Senior Cloud Advocate @Microsoft 78 | * **Jen Looper**, Principal Cloud Advocate @Microsoft 79 | * _to be updated daily ..._ 80 | 81 | Each post will identify the authors by name, and link to a relevant online profile. This series is a labor of love, so if you like a post - show that author some love by providing feedback or saying hello on their identified profile! 82 | 83 | --- 84 | 85 | ## Let's Get Started! 86 | 87 | I think that's all you need to know for now! Hope your're as excited as we are. Check back for the next post and ... **#LetsDoThis** !! 88 | 89 | ![](../static/img/svg/logo.svg) -------------------------------------------------------------------------------- /www/blog/2022-05-02.md: -------------------------------------------------------------------------------- 1 | --- 2 | slug: introducing-swa 3 | title: "#01: Introducing SWA" 4 | authors: [simona, nitya] 5 | tags: [swa, 30days, core-concepts] 6 | draft: false 7 | --- 8 | 9 | Welcome to `Week 1, Day 1` of **#30DaysOfSWA**!! 10 | 11 | This week, we'll focus on the **Core Concepts** behind Azure Static Web Apps, starting with an introduction to SWA and continuing on to building, enhancing, and deploying, your SWA for users to experience. Let's get started today by _Introducing Static Web Apps_. 12 | 13 | 14 | ## What We'll Cover 15 | * What is Azure Static Web Apps? 16 | * How is it architected? 17 | * Where can I use it? 18 | * 10 Key Features to know 19 | * **Exercise:** Explore SWA Examples! 20 | * **Resource:** [Static Web Apps Overview](https://docs.microsoft.com/en-us/azure/static-web-apps/overview) 21 | 22 | ![](../static/img/series/01-banner.png) 23 | 24 | ## What is Azure SWA? 25 | 26 | [Azure Static Web Apps](https://docs.microsoft.com/en-us/azure/static-web-apps/overview) is a cloud-based service that **automatically** builds and deploys full-stack web apps to Azure **directly from your code repository**. The service works with popular code sources like GitHub, GitLab and BitBucket by default. Look for the _Deploying SWA_ post later this week where we walk through the details here. 27 | 28 | The benefit to you as a developer is that it **simplifies your developer experience**. Just commit changes to your application source code into the repository and step back. The SWA service monitors the codebase for changes, automatically rebuilding and redeploying your app to the hosted endpoint. Look for a _Previewing SWA_ post later this week where we'll talk about built-in support for previewing apps in non-main branches, or in pull requests, that make it easier to manage apps with multiple contributors. 29 | 30 | Prefer a 5-minute video overview? We have you covered! 31 | 32 | 33 | 34 | ## How is it Architected? 35 | 36 | Static Web Apps can be built using popular front-end frameworks including React, Angular, Vue, Svelte, or Blazor. These apps typically consist of a collection of **static content assets** (HTML, JS, CSS and media files) coupled with a **dynamic API endpoint** to handle client interactions in real time. 37 | 38 | Traditional web application deployments use a _single web server_ to serve both the static assets and the API endpoint. This can make scaling these services sub-optimal in terms of global availability and runtime costs. 39 | 40 | With Static Web Apps, we **separate static assets from API endpoints**, allowing each to be scaled using the technology best equipped to do this in a cost-effective manner. 41 | * Static assets get served from geographically-distributed content servers worldwide, distributing the load and speeding up access to users nearby. 42 | * API endpoints are hosted using a [serverless architecture](https://docs.microsoft.com/en-us/azure/azure-functions/functions-overview), spinning up compute resources (to execute functions) only as needed, in response to trigger events. 43 | 44 | This architecture - with static content servers, serverless backends, and automated CI/CD workflows - simplifies your development workflow **allowing you to focus your attention on the application logic and user experience** components of your modern web application. 45 | 46 | 47 | ![](../static/img/series/01-swa-overview.png) 48 | 49 | ## Where can I use it? 50 | 51 | That's a great question!! You can use Static Web Apps to: 52 | * Build modern web apps with front-end frameworks (like Angular, React, Vue etc.) 53 | * Publish static web sites (using Gatsby, Hugo, Astro, Docusaurus, VuePress etc.) 54 | * Deploy web apps with frameworks like Next.js and Nuxt.js. 55 | 56 | You can [**configure your existing application**](https://docs.microsoft.com/en-us/azure/static-web-apps/front-end-frameworks) to use Azure Static Web Apps using an IDE like VS Code, or using Command-line tools (like Azure CLI and SWA CLI), or through the browser (using the Azure Portal). Look for two posts later this week that dive into this in detail: 57 | * _Building SWA_ (tomorrow) on getting started with using SWA in your app. 58 | * _Configuring SWA_ (later) on customizing app behaviors and build process. 59 | 60 | But wait - there's one more thing. 61 | 62 | **Keep an eye out for an announcement later in the series** where we'll be debuting a new [Community Showcase](/showcase) page - here's a sneak preview. You can filter it to see examples from popular front-end technologies, select "open source" to see the repository for inspiration - **and consider adding your own project** at the end of your journey! 63 | 64 | ![](../static/img/png/swa-showcase.png) 65 | 66 | 67 | ## 10 Things To Know! 68 | 69 | We've talked about what SWA is, how it's architected, and where you can use it. But what are the key features that make it powerful? [**Read the Documentation**](https://docs.microsoft.com/en-us/azure/static-web-apps/overview#key-features) for the detailed list - or scan the visual guide below for a summary! 70 | 71 | ![](../static/img/series/01-ten-things.png) 72 | 73 | 74 | 75 | ## Exercise: 76 | 77 | That was a lot to digest right? It helps to see some of these ideas in action. So here's two things you can do before we dive into the quickstart tomorrow: 78 | 79 | * Visit the [Showcase Gallery](https://github.com/microsoft/static-web-apps-gallery-code-samples) repository to see some examples of SWA in Action. 80 | * Follow the [#staticwebapps](https://dev.to/t/staticwebapps) tag to see community-posted articles on usage. -------------------------------------------------------------------------------- /www/blog/2022-05-08.md: -------------------------------------------------------------------------------- 1 | --- 2 | slug: deploying-swa 3 | title: "#07: Deploying SWA" 4 | authors: [reshmi] 5 | tags: [swa, 30days, core-concepts] 6 | draft: false 7 | --- 8 | 9 | Welcome to `Week 1, Day 7` of **#30DaysOfSWA**!! 10 | 11 | You made it this far! Give yourself a pat on your back already! 😊 12 | 13 | By now, we have learnt what Static Web Apps is, and how to build, add APIs and configure the application. We’ve also deployed a couple of fun apps as a tribute to Star Wars! But we’ve so far explored deploying using the Github Actions path. 14 | * What if we want some other CI/CD tool? 15 | * What if our project resides safely in an Azure DevOps repository? 16 | * What if we don’t want a CI/CD solution AT ALL? 17 | 18 | Fear not! Because today we’re gonna explore other ways of deploying a Static Web App on Azure 😊 19 | 20 | 21 | ## What We'll Cover 22 | * Deploy With Azure DevOps 23 | * Deploy From GitLab and BitBucket 24 | * Deploy Using ARM Template 25 | * **Exercise**: Explore the [ARM Tools VS Code Extension](https://docs.microsoft.com/en-us/azure/azure-resource-manager/templates/quickstart-create-templates-use-visual-studio-code?tabs=CLI) 26 | 27 | ![](../static/img/series/07-banner.png) 28 | 29 | 30 | ## Deploy with Azure DevOps 31 | 32 | Deploying using Azure pipelines CI/CD has never been easier! 33 | 34 | Static Web Apps supports projects which are stored in Azure repos and helps in creating a smooth CI/CD pipeline to automatically trigger the changes on every commit to the main branch. What more? With the latest changes checked in for Azure DevOps, we can now [set up the azure pipeline via Portal with a single click](https://docs.microsoft.com/en-us/azure/static-web-apps/get-started-portal?tabs=vanilla-javascript&pivots=azure-devops)! Here’s a quick video demonstrating how to use DevOps as a pipeline, as well as touching on the numerous other enhancements brought in off-late, such as stable staging environments, password protected websites, build and deploy split, and lots more! 😊 35 | 36 | 37 | 38 | 39 | 40 | ## Deploy via GitLab and BitBucket 41 | 42 | But what if we wanted a third-party Provider? Static Web Apps as of today [officially supports](https://azure.microsoft.com/en-us/updates/public-preview-static-web-apps-now-supports-gitlab-and-bitbucket-for-cicd/) CI/CD pipelines from GitLab and BitBucket! We just have to follow a few simple steps as discussed in the documentation for both [GitLab](https://docs.microsoft.com/en-us/azure/static-web-apps/gitlab?tabs=vanilla-javascript) and [BitBucket](https://docs.microsoft.com/en-us/azure/static-web-apps/bitbucket?tabs=vanilla-javascript), and voila! We’ll have a beautifully configured pipeline which takes care of the automatic trigger on commits for us. Isn’t this beautiful? 😊 43 | 44 | 45 | ## Deploy using ARM Template 46 | 47 | For the CLI lovers out there, we can also deploy in Static Web Apps [using ARM Templates](https://docs.microsoft.com/en-us/azure/static-web-apps/publish-azure-resource-manager?tabs=azure-cli)! The ARM - or [Azure Resource Manager Template](https://docs.microsoft.com/en-us/azure/azure-resource-manager/templates/overview) - is used in preparing the workflow template. On deploying the ARM Template to Azure Static Web Apps, it triggers the Github Actions, which further takes care of our CI/CD needs. Do check out the exercise later in the blog for a quick hands-on using ARM Templates! 48 | 49 | 50 | But what about .. **deploying without a CI/CD??** 51 | 52 | Suppose we want a one-time deployment solution? Or we don’t want to depend on a CI/CD tool at all! No worries! We have you covered! Wonder how that is supported? Stay tuned to the #30DaysOfSWA series and **discover the new upcoming features** to enable this! 😉 <3<3 53 | 54 | 55 | ## Resources 56 | 57 | Now that we’ve explored the alternatives we have, let’s go have some fun with it!! Here are a few quickstarts you can try out! 58 | 59 | 1. [Deploy using BitBucket](https://aka.ms/swabitbucketsupport) 60 | 2. [Deploy using GitLab](https://aka.ms/swagitlabsupport) 61 | 3. [Deploy using Azure DevOps and Portal Quickstart](https://aka.ms/static-web-apps-publish-devops) 62 | 4. [Use an ARM template quickstart](https://docs.microsoft.com/en-us/azure/static-web-apps/publish-azure-resource-manager?tabs=azure-cli) 63 | 64 | 65 | 66 | -------------------------------------------------------------------------------- /www/blog/2022-05-09.md: -------------------------------------------------------------------------------- 1 | --- 2 | slug: build-with-astro 3 | title: "#08: Build A Blog - with Astro" 4 | authors: [glaucia] 5 | tags: [swa, 30days, usage-examples, astro] 6 | draft: false 7 | --- 8 | 9 | Welcome to `Week 2, Day 1` of **#30DaysOfSWA**!! 10 | 11 | In Week 1 we covered core concepts for Azure Static Web Apps - from development to API-enablement, security, configuraton and deployment. 12 | 13 | Today, we kick off Week 2 with a focus on seeing SWA in action - using popular web development frameworks and static site generators to build and deploy different kinds of applications. We kick things off with a look at [Astro](https://astro.build) - a modern static site generator with a BYOF ("Bring your own framework") approach. 14 | 15 | 16 | ## What We'll Cover 17 | * What is a static site generator? 18 | * What is Astro? 19 | * Build & Deploy a Personal Blog with Astro 20 | * **Exercise:** Try the tutorial to deploy **your** personal blog! 21 | 22 | ![Build a Blog with Astro + SWA](../static/img/series/08-banner.png) 23 | 24 | ## Static Site Generators 25 | 26 | The term "static site generators" (SSG) refers to tools that automatically build static webpages for you, populating a chosen template with your custom content or data. The code generation is transparent to you, making it possible for even non-developers to setup custom static websites quickly. 27 | 28 | Static site generation is a growing trend for fast, flexible website creation. But it requires an external service to handle hosting and build/deploy workflows. **This is where Azure Static Web Apps comes in!** Check out the [SWA documentation](https://docs.microsoft.com/en-us/azure/static-web-apps/publish-gatsby) for tutorials featuring popular SSGs like Hugo, Jekyll and Gatsby. We'll explore some other examples later this week. 29 | 30 | ## Hello, Astro! 31 | 32 | Today's post will however focus on [Astro](https://astro.build/blog/introducing-astro), one of the [rising stars of JavaScript](https://risingstars.js.org/2021/en#section-ssg) in the _Static Sites_ category. Astro is a static site builder that works _like an SSG_ but with some [novel features](https://astro.build/blog/introducing-astro) that set it apart. 33 | * Bring your own framework (React, Vue, Svelte, web components) 34 | * Compose your website using that framework's UI components 35 | * Astro now renders a fully-static (all HTML, no JavaScript) website 36 | 37 | Astro emphasizes **fast performance** with **less JavaScript** - and takes a [partial hydration](https://www.patterns.dev/posts/progressive-hydration/) approach that allows it to load the minimal required amount of JavaScript, if and when absolutely necessary. Here's a quick overview of Astro. 38 | 39 | 40 | 41 | 42 | ## Astro + SWA 43 | 44 | In **[today's tutorial](https://dev.to/azure/building-applications-with-astro-build-azure-static-web-apps-cli-a20)**, we walk through the steps required to: 45 | * create an astro-powered blog (using [this template](https://github.com/glaucia86/astro-swa-demo) 46 | * test it locally using the Azure Static Web Apps CLI (`swa`) 47 | * deploy it using the [Visual Studio Code Extenstion for SWA](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-azurestaticwebapps) 48 | 49 | The end result will look like this. 50 | ![Personal Blog with Astro](../static/img/series/08-astro.jpeg) 51 | 52 | Here are the key links to know: 53 | * Visit **[this page](https://dev.to/azure/building-applications-with-astro-build-azure-static-web-apps-cli-a20)** for the step-by-step tutorial. 54 | * Check **[this repository](tttps://github.com/glaucia86/astro-swa-demo)** for the source code (demo app template) 55 | * **[See this site](https://yellow-grass-008f2c710.azurestaticapps.net/)** for the deployed version of the app. 56 | 57 | Then check back tomorrow for a new usage example and tutorial - this time, with a focus on React - as we continue to explore Azure Static Web Apps in action! 58 | 59 | 60 | ## Exercise 61 | 62 | Here are a couple of options to try, to get more hands-on experience: 63 | 64 | * Clone the [template project](https://github.com/glaucia86/astro-swa-demo.git) and follow the [tutorial](https://dev.to/azure/building-applications-with-astro-build-azure-static-web-apps-cli-a20) to build and deploy **your** personal blog. 65 | * Visit the [Astro Themes](https://astro.build/themes/) page and try using a different starter project, then deploying it to Azure Static Web Apps. 66 | 67 | 68 | ## Resources 69 | 70 | Check out these other tutorials using more traditional static site generators: 71 | * Publish a [Gatsby site](https://docs.microsoft.com/en-us/azure/static-web-apps/publish-gatsby) to Azure Static Web Apps 72 | * Publish a [Hugo site](https://docs.microsoft.com/en-us/azure/static-web-apps/publish-hugo) to Azure Static Web Apps 73 | * Publish a [Jekyll site](https://docs.microsoft.com/en-us/azure/static-web-apps/publish-jekyll) to Azure Static Web Apps 74 | * Publish a [VuePress site](https://docs.microsoft.com/en-us/azure/static-web-apps/publish-vuepress) to Azure Static Web Apps -------------------------------------------------------------------------------- /www/blog/2022-05-10.md: -------------------------------------------------------------------------------- 1 | --- 2 | slug: build-with-react 3 | title: "#09: Manage Inventory - with React" 4 | authors: [chris] 5 | tags: [swa, 30days, usage-examples, react] 6 | draft: false 7 | --- 8 | 9 | Welcome to `Week 2, Day 2` of **#30DaysOfSWA**!! 10 | 11 | Yesterday we looked at using a static site builder (namely [Astro](https://astro.build)) to create a personal blog and host it with Azure Static Web Apps. Over the next two days, we switch gears and look at using Azure Static Web Apps with some popular _front-end frameworks_ - starting today with [React](https://reactjs.org/). 12 | 13 | ## What We'll Cover 14 | * Why Learn React? 15 | * React + SWA: Quickstart 16 | * Build: Inventory Management App 17 | * **Exercise:** Build & Deploy a basic React SWA. 18 | 19 | ![](../static/img/series/09-banner.png) 20 | 21 | 22 | ## Why Learn React? 23 | 24 | React describes itself as [a JavaScript library for building user interfaces](https://reactjs.org/) that targets single-page application (SPA) development with a declarative and component-based approach. Today, it's one of the most popular technologies used for web development, leading the [2021 rising stars of JavaScript](https://reactjs.org/) section for front-end frameworks. Whether you're new to web development, or an experienced developer, it's a technology worth learning. 25 | 26 | New to React? Here are a couple of resources: 27 | * [Official Tutorial: Intro to React](https://reactjs.org/tutorial/tutorial.html) 28 | * [Creating your first web apps with React](https://docs.microsoft.com/en-us/learn/paths/react/) - on Microsoft Learn 29 | * [Web Dev For Beginners](https://github.com/microsoft/Web-Dev-For-Beginners) - project-based curriculum 30 | 31 | ` 32 | ## SWA Quickstart 33 | 34 | Once you have a simple React application scaffolded, configuring it to use Azure Static Web Apps is easy. In week 1, we covered the three different approaches (using Visual Studio Code, using Azure Portal, using Azure CLI) to build and deploy a vanillaJS app. 35 | 36 | Want to try building and deploying a basic React starter app? The Azure Static Web Apps documentation has **Quickstarts** to help! 37 | 38 | The following tutorials use the [react-basic](https://github.com/staticwebdev/react-basic) starter template bootstrapped using [create-react-app](https://github.com/facebook/create-react-app). Pick an option based on your preferred development environment: 39 | * SWA Quickstart: [Using Visual Studio Code](https://docs.microsoft.com/en-us/azure/static-web-apps/getting-started?tabs=react) 40 | * SWA Quickstart: [Using Azure CLI](https://docs.microsoft.com/en-us/azure/static-web-apps/get-started-cli?tabs=react) 41 | * SWA Quickstart: [Using Azure Portal](https://docs.microsoft.com/en-us/azure/static-web-apps/get-started-portal?tabs=react&pivots=azure-devops) 42 | 43 | This should help you setup and validate the basic tooling required for developing Azure Static Web Apps. Now, let's think about building something a little more functional! 44 | 45 | 46 | ## Inventory Mgmt 47 | 48 | Today, I'm publishing the first of a _multi-part tutorial_ on how you can build an inventory management app with Azure Static Web Apps and React. 49 | 50 | [**Read Part 1 of the Tutorial Here**](https://dev.to/azure/build-an-inventory-management-app-with-azure-static-web-apps-with-react-part-1-2l2e): 51 | > In this series, I'll take you from the very beginning on generating a React app and deploying it within 5 minutes. In the upcoming parts, I'll keep building on the same app, and add things like backend and other things. 52 | 53 | ![Banner image from dev.to article](../static/img/series/09-snowpack.png) 54 | 55 | In this tutorial you'll learn about: 56 | * Options to scaffold your React App 57 | * Use the `Snowpack` option to scaffold your project 58 | * Use VS Code to configure & deploy the app to SWA. 59 | 60 | Check out the [deployed SWA](https://happy-wave-036ec970f.1.azurestaticapps.net/) at this stage of the tutorial. In the next part of the series, we'll improve UI and add routing support. 61 | 62 | [**Revisit this series page tomorrow**](https://dev.to/azure/build-an-inventory-management-app-with-azure-static-web-apps-with-react-part-1-2l2e) to continue with the tutorial. 63 | 64 | ## Exercise: Try It! 65 | 66 | This is the perfect time to make sure you have your development environment setup and ready to follow along. Try the quickstart option, then follow along with the tutorial series. 67 | 68 | 69 | ## Resources 70 | 71 | Here are the key resources we shared in this article: 72 | * SWA Quickstart: [Using Visual Studio Code](https://docs.microsoft.com/en-us/azure/static-web-apps/getting-started?tabs=react) 73 | * SWA Quickstart: [Using Azure CLI](https://docs.microsoft.com/en-us/azure/static-web-apps/get-started-cli?tabs=react) 74 | * SWA Quickstart: [Using Azure Portal](https://docs.microsoft.com/en-us/azure/static-web-apps/get-started-portal?tabs=react&pivots=azure-devops) 75 | * [Official Tutorial: Intro to React](https://reactjs.org/tutorial/tutorial.html) 76 | * [Creating your first web apps with React](https://docs.microsoft.com/en-us/learn/paths/react/) - on Microsoft Learn 77 | * [Web Dev For Beginners](https://github.com/microsoft/Web-Dev-For-Beginners) - project-based curriculum -------------------------------------------------------------------------------- /www/blog/2022-05-11.md: -------------------------------------------------------------------------------- 1 | --- 2 | slug: build-with-vuejs 3 | title: "#10: Get Creative - with Vue.js" 4 | authors: [jen] 5 | tags: [swa, 30days, usage-examples] 6 | draft: false 7 | --- 8 | 9 | Welcome to `Week 2, Day 3` of **#30DaysOfSWA**!! 10 | 11 | Vuelievers, rejoice! Today we'll explore several examples of how you can build a Static Web App with [the Vue.js framework](https://vuejs.org/) 12 | 13 | In this article, I'll give several examples of sites I've created using Vue and [VuePress](https://vuepress.vuejs.org/), a popular way to build static sites with Vue. I'll also walk through a game engine we created in VuePress that you can deploy as a SWA, and touch on the use of [Vite.js](https://vitejs.dev/), a lightning-fast toolkit you can use to build all types of applications, built by the masterminds behind the Vue.js projects. 14 | 15 | ## What We'll Cover 16 | Let's explore some creative application usage examples: 17 | 18 | * **PoseDance:** with PlayFab 19 | * **Ombromanie:** with TensorFlow.js 20 | * **Olympic App**: with Vite.js 21 | * **Azure Mysteries**: a static Game Engine 22 | * **Exercise**: Build a game with VuePress, deploy to SWA! 23 | 24 | ![](../static/img/series/10-banner.png) 25 | 26 | In this article, I'll describe the following projects, which are more fully explained on their README files in their respective repositories. 27 | The first apps I'd like to showcase are PoseDance and Ombromanie. Both were developed as conference talks and have become interesting case studies in how to use TensorFlow.js in web apps, specifically focusing on body poses and hand poses for innovative user experiences. 28 | 29 | ## 1. PoseDance 30 | 31 | ![PoseDance](../static/img/series/10-posedance.png) 32 | 33 | PoseDance is your friendly TikTok trainer: watch a TikTok dance video, learn the dance, then enter a side-by-side view of the original dance with a 'skeleton' imposed on it to the left, with your own video on the right. Try to make your body poses match that of the dancer, and win a high score! 34 | 35 | PoseDance offers a full view of SWA capabilities, including an API buildout so that the user can login and save their high scores. To save scores, it also uses [PlayFab](https://playfab.com/) in the backend. In addition this repo has a Code Tour! 36 | 37 | [Code Tour](https://marketplace.visualstudio.com/items?itemName=vsls-contrib.codetour) is a neat little Visual Studio Code extension that, if installed locally, will allow you to walk through the codebase in a guided manner, to learn the rationale behind code architecture. Install that extension in VS Code and give it a try! 38 | 39 | **Explore: PoseDance** 40 | * Watch the [video](https://www.dropbox.com/s/ccog8uz0tzk10mv/posedance.mp4?dl=0) about the making of PoseDance. 41 | * Walk through the conference [slides](https://github.com/jlooper/posedance/blob/master/posedance.pptx). 42 | * Explore the [codebase](https://github.com/jlooper/posedance) 43 | * Visit the [deployed site]( https://wonderful-ocean-007be220f.1.azurestaticapps.net/) and _Dance with us!_ 44 | 45 | 46 | 47 | ## 2. Ombromanie 48 | 49 | ![Ombromanie](../static/img/series/10-ombromanie.png) 50 | 51 | Ombromanie is a demo I built for a different conference talk that was described as _"un peu OVNI"_ ("a little UFO-like"). In this demo, mimic the hand shadows that you used to make using just a candle and a dark room, to freak out and entertain your siblings. 52 | 53 | Like PoseDance, this app is also built using Vue.js, and leverages TensorFlow.js and bodyposing - this time focusing on hand poses, which are actually more complex than body poses, as there are more bendable joints in play. 54 | 55 | Use the Ombromanie app to record a video of your special hand shadow story, coupled with voice-to-text transcription of your story, and then share it. 56 | 57 | **Explore: Ombromanie** 58 | 59 | * Read the [blogpost](https://dev.to/azure/ombromanie-creating-hand-shadow-stories-with-azure-speech-and-tensorflow-js-handposes-3cln) 60 | * Watch the conference [talk](https://www.youtube.com/watch?v=8Aow0rkp1Lw&ab_channel=MTGFrance) 61 | * Walkthrough the conference [slides](https://github.com/jlooper/ombromanie/blob/main/ombromanie.pptx) 62 | * Visit the [deployed SWA](https://brave-river-00627910f.1.azurestaticapps.net/) and _Create Hand Shadow Stories!_ 63 | 64 | 65 | 66 | ## 3. 2021 Olympics 67 | 68 | ![Olympic App](../static/img/series/10-olympic.png) 69 | 70 | For the [Microsoft Build](https://mybuild.microsoft.com/) conference in 2021, I wanted to demonstrate how to use Vite.js to build a simple 'card flipping' app. Since it was close to the Summer Olympics, I featured all the Olympic sports in this interesting interface. Building with Vite is similar to building with Vue, although the location of the files is different. _But deployment as a SWA is just as straightforward._ 71 | 72 | **Explore: Olympics App** 73 | 74 | * Visit the [deployed SWA](https://kind-mushroom-0f7f4200f.1.azurestaticapps.net/) to see it in action. 75 | * Watch this [video](https://www.youtube.com/watch?v=Xpl-KukvEmM&ab_channel=MicrosoftDeveloper) and build the app with me! 76 | * Explore the [source](https://github.com/jlooper/olympic-app ) and build it yourself! 77 | 78 | To build it, start on the student branch and build up the app following the video instructions, or just look at the entire complete codebase. 79 | 80 | 81 | ## 4. Azure Mysteries 82 | 83 | Finally, and something really different, I'd like you to meet **SpaceQuest**, a game engine that I developed with inspiration and help from my colleague [Chris Noring](https://github.com/softchris). SpaceQuest is a game engine you can use to build your own games, and deploy as a SWA, in the tradition of text-based point and click adventure games. 84 | 85 | ![SpaceQuest](../static/img/series/10-spacequest.png) 86 | 87 | We used this engine as the core to build the **Azure Maya Mystery** and the **Azure Space Mystery** experiences, all deployed as SWAs to great acclaim. Learn more about these adventures here: 88 | 89 | **Explore: Azure Maya Mystery** 90 | 91 | * [Introducing Azure Maya Mystery](https://dev.to/azure/unraveling-the-azure-maya-mystery-and-building-a-world-4pp2) 92 | * [The Making of Azure Maya Mystery](https://dev.to/azure/azure-maya-mystery-the-inner-workings-of-a-static-web-app-hkp) 93 | * [The Mysterious Cenote](https://dev.to/azure/azure-maya-mystery-part-ii-the-mysterious-cenote-3j57) 94 | * [Ascent to the Summit](https://dev.to/azure/azure-maya-mystery-part-iii-ascent-to-the-summit-41hi) 95 | 96 | **Explore: Azure Space Mystery** 97 | * [Introducing Azure Space Mystery](https://dev.to/azure/blast-off-with-azure-advocates-presenting-the-azure-space-mystery-mdd) 98 | 99 | SpaceQuest had a very special purpose, other than being the seed code of the mysteries, however. We used it in a series of workshops with Autistic students to teach them how to build their own games, in partnership with the National Museum of Computing at Bletchley Park. 100 | 101 | * Learn about [this work](https://dev.to/azure/making-games-with-autistic-students-a-partnership-between-the-national-museum-of-computing-track-org-and-azure-advocates-3c1e). It was a tremendous honor to work with these talented students! 102 | * Try the [deployed SWA](https://zealous-mushroom-04674420f.1.azurestaticapps.net/) 103 | * Explore the [source](https://github.com/jlooper/static-game-engine) 104 | 105 | Then build a mystery of your own by forking the codebase and building up your storyline - and share it with us! 106 | 107 | 108 | ## Resources 109 | 1. [Vue.js](https://vuejs.org/) - The Progressive JavaScript Framework 110 | 2. [Vite](https://vitejs.dev/) - Next Generation Frontend Tooling 111 | 3. [VuePress](https://vuepress.vuejs.org) - Vue-powered Static Site Generator 112 | 4. [Get Started with Vue](https://docs.microsoft.com/en-us/learn/modules/vue-get-started/) - on Microsoft Learn 113 | 5. [Publish a Vue App with Azure Static Web Apps](https://docs.microsoft.com/en-us/learn/modules/publish-app-service-static-web-app-api/) - on Microsoft Learn 114 | 6. [Tutorial: Publish a VuePress Site to SWA](https://docs.microsoft.com/en-us/azure/static-web-apps/publish-vuepress) -------------------------------------------------------------------------------- /www/blog/2022-05-13.md: -------------------------------------------------------------------------------- 1 | --- 2 | slug: build-with-blazor 3 | title: "#12: Headless CMS & Blazor SWA" 4 | authors: [justin, jeff] 5 | tags: [swa, 30days, usage-examples, blazor] 6 | draft: false 7 | --- 8 | 9 | Welcome to `Week 2, Day 5` of **#30DaysOfSWA**!! 10 | 11 | Over the last few days we've been exploring JavaScript-based frameworks for building web apps. Today, we switch our attention to our amazing .NET community and talk about building Static Web Apps with [Blazor](http://blazor.net) 12 | 13 | ## What We'll Cover 14 | * Introduction: Blazor WebAssembly 15 | * Quickstart: Simple Blazor SWA 16 | * Advanced: Blazor SWA + Wordpress CMS 17 | * **Exercise**: Remix Fritz's Hat Collection! 18 | 19 | ![](../static/img/series/12-banner.png) 20 | 21 | 22 | ## Blazor WebAssembly 23 | 24 | When we think about web applications, we typically think of developing with JavaScript, HTML, and CSS. In fact, many of you reading this series may identify yourselves as JavaScript developers when discussing modern web apps. 25 | 26 | What if I told you that was not always the case? What if you could **write web applications in C#**, running in a .NET runtime inside the browser! Turns out you can - thanks to [Blazor](https://blazor.net). 27 | 28 | **What is Blazor?** 29 | 30 | Blazor is a [framework for building interactive client-side web UI with .NET](https://docs.microsoft.com/en-us/aspnet/core/blazor). Developers can build interactive web applications using C# (instead of JavaScript) - and extend experiences to hybrid desktop and mobile apps with .NET capabilities. 31 | 32 | **What is Web Assembly?** 33 | 34 | Running .NET code inside web browsers is made possible by [WebAssembly](https://webassembly.org/)(`wasm`) - a binary instruction format and open web standard that is designed as a _portable compilation target_ for programming languages. It provides a sandboxed runtime that can be implemented _inside_ JavaScript virtual machines (like those in modern web browsers) to support web apps. 35 | 36 | **How does Blazor WebAssembly Work?** 37 | 38 | [Blazor WebAssembly](https://docs.microsoft.com/en-us/aspnet/core/blazor/) is a framework for building single page app (SPA) that works with all modern web browsers, including mobile versions. Blazor apps are written using [Razor](https://docs.microsoft.com/en-us/aspnet/core/blazor/components/?view=aspnetcore-6.0) components in a .NET runtime. The .NET code is then executed via WebAssembly in the browser's JavaScript sandbox. WebAssembly uses JavaScript interoperability to get full access to browser features. Learn how [Blazor web apps work](https://docs.microsoft.com/en-us/aspnet/core/blazor/). 39 | 40 | ![](https://docs.microsoft.com/en-us/aspnet/core/blazor/index/_static/blazor-webassembly.png?view=aspnetcore-6.0) 41 | 42 | ## Simple Blazor SWA 43 | 44 | Want to learn how you can deploy a simple Blazor application to Azure Static Web Apps? We have you covered! Follow [this tutorial](https://docs.microsoft.com/en-us/azure/static-web-apps/deploy-blazor) to learn how to deploy an **existing Blazor app** to Azure Static Web Apps. 45 | 46 | The end result will look something like this - a single page Blazor web application that displays weather data _returned from a serverless API_ - beginning with [this starter app](https://github.com/login?return_to=/staticwebdev/blazor-starter/generate), 47 | 48 | ![Quickstart demo](../static/img/series/12-swa-quickstart.png) 49 | 50 | 51 | --- 52 | 53 | ## Blazor SWA and Wordpress 54 | 55 | Want to try a more complex example? Check out [this advanced tutorial](https://dev.to/azure/blazor-webassembly-for-headless-cms-on-azure-static-web-apps-412c) (from Justin Yoo). Here's a brief introduction: 56 | 57 | > One of the most popular scenarios to build a static website is to run a blog site for myself or my organisation. WordPress is the most popular service for this purpose. Now, you want to migrate your WordPress blog site to a static website, but it doesn't look easy. 58 | 59 | > What if you still want to use the WordPress site to write content but only want to refresh the UI outside the site? What if you can even use C# for it through Blazor WebAssembly? You are now able to use the existing WordPress site as the data source of truth and build a UI in a separate instance with your preferred method. Does that sound attractive? 60 | 61 | Join Justin as he walks through the steps required to: 62 | * use the serviced Wordpress instance as a headless CMS 63 | * build the Blazor WebAssembly app using Wordpress 64 | * host the completed app on Azure Static Web Apps 65 | 66 | The end result issomething like this. 67 | **[Read the blog post behind this!!](https://dev.to/azure/blazor-webassembly-for-headless-cms-on-azure-static-web-apps-412c)**. 68 | 69 | ![Final demo](../static/img/series/12-swa-wordpress.png) 70 | 71 | --- 72 | 73 | ## Exercise: Remix Fritz's Hats! 74 | 75 | Hopefully you're ready to try something fun that will reinforce what you learned today. 76 | 77 | **Say Hello to (Jeff) Fritz's Really Cool Hats** 78 | 79 | [Fritz's Really Cool Hats](https://hats.csharpfritz.com/) is an open-source static web site built with Blazor WebAssembly, incorporating C# Azure Functions and Azure Storage, and deployed using Azure Static Web Apps. The project was created by **Jeff Fritz** - the face behind many Twitch livestreams and the popular [Beginners Series To Blazor](https://docs.microsoft.com/en-us/shows/beginners-series-to-blazor/). 80 | 81 | [**Visit The Deployed Site**](https://hats.csharpfritz.com/) 82 | 83 | ![Hats demo](../static/img/series/12-swa-fritz.png) 84 | 85 | For this exercise: 86 | 87 | * [Fork the repository](https://github.com/csharpfritz/Fritz.HatCollection) and clone it locally. 88 | * Open project in Visual Studio - press F5 to launch (app and api). 89 | * Configure [your Azure Storage account](https://github.com/csharpfritz/Fritz.HatCollection#data-storage) to add your own images 90 | * Use the [quickstart](https://aka.ms/blazor-swa/quickstart) to deploy to Azure Static Web Apps. 91 | 92 | Explore the source and the GitHub Actions files in the original repository to understand how the app is structured. Then share your deployed project with us by tagging a tweet with #30DaysOfSWA. 93 | 94 | --- 95 | 96 | ## Resources 97 | 98 | Here are some resources to get you started with your Blazor journey into 99 | 100 | * [Blazor: Build Client Web Apps With C#](https://blazor.net) 101 | * [Beginner's Series to: Blazor](https://docs.microsoft.com/en-us/shows/beginners-series-to-blazor/) 102 | * [Tutorial: Build a Static Web App with Blazor](https://docs.microsoft.com/en-us/azure/static-web-apps/deploy-blazor) 103 | * [Fritz.HatCollection - Source](https://github.com/csharpfritz/Fritz.HatCollection), Jeff Fritz 104 | * [Headless CMS Example - Source](https://github.com/justinyoo/blazor-wasm-azfunc-aswa), Justin Yoo -------------------------------------------------------------------------------- /www/blog/2022-05-20.md: -------------------------------------------------------------------------------- 1 | --- 2 | slug: devtools-swacli-develop 3 | title: "#19: Develop with SWA CLI" 4 | authors: [yohan] 5 | tags: [swa, 30days, dev-tools] 6 | draft: false 7 | --- 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | Welcome to `Week 3, Day 5` of **#30DaysOfSWA**!! 22 | 23 | We're past the halfway mark in "Dev Tools" week! We looked at developer tools to help provision Azure resources, automate cross-browser testing, streamline CI/CD, and debug/audit your SWA for performance and accessibility. But what about **local development** - something to help me go from _start_ (project creation & configuration) to _finish_ (build & deploy) in **one tool**? Let's say hello to the [Azure Static Web Apps CLI](https://aka.ms/30DaysOfSWA/swa-cli). 24 | 25 | :::info What We'll Cover 26 | * `swa` - One command to rule them all! 27 | * Creating the configuration 28 | * Building your project 29 | * Running your app locally 30 | * **Exercise**: Use the new `swa` CLI to build and run a starter app! 31 | ::: 32 | 33 | ![](../static/img/series/19-banner.png) 34 | 35 | 36 | You may have missed it, but the [new Azure Static Web Apps CLI](https://github.com/Azure/static-web-apps-cli) is now available! 37 | 38 | 39 | It would take a whole post to describe all the changes and new features, but here are some of the highlights. With the new `init`, `build`, `start` and `deploy` commands, the complete developement cycle of your app is now available *in a single tool*, directly from the command line. 40 | 41 | 42 | ![](../static/img/series/19-cli-banner-1.jpeg) 43 | 44 | To get started, make sur you have a recent [Node.js](https://nodejs.org) version installed (>14) and type this command in your terminal: 45 | 46 | ```sh 47 | npm i -g @azure/static-web-apps-cli 48 | ``` 49 | 50 | We'll now have a look at the new commands and the most important features. 51 | 52 | :::note 53 | If you've never heard of Static Web Apps (or SWA for short), it's a web app hosting service provided by Azure, offering streamlined full-stack development with many built-in features like authentication, customizable routing, serverless functions and more. It also has a great [free tier](https://azure.microsoft.com/free/?WT.mc_id=javascript-0000-yolasors) 😉 54 | ::: 55 | 56 | ## `swa` 57 | 58 | As the new CLI introduces a gazillion new options, it must quite a steep learning curve to get started? Quite the opposite! 59 | 60 | Every command starts with `swa`, and now it might also be the only thing you'll need. 61 | 62 | ```sh 63 | # yes, that's all you need to type 64 | swa 65 | ``` 66 | 67 | This command is a macro shorcut for `swa init`, `swa build`, `swa login` and `swa deploy`. We'll get to the details of all these commands in a bit, the most important thing here is that `swa` is the only command you need to know to configure a new project for use with Static Web Apps, build it and deploy it. You don't have to worry about any options or flags, just type `swa` and you'll be on your way. 68 | 69 | 70 | ## Creating the configuration 71 | 72 | The first of the new commands is `swa init`. This commands with detect your project configuration and the frameworks you're using to suggest a configuration for you, so you won't have to read through [the shiny new docs](https://azure.github.io/static-web-apps-cli/) to figure out what options you need. 73 | 74 | ![swa init command screenshot](../static/img/series/19-init.png) 75 | 76 | After asking a name for your project configuration, you can validate or edit the detected project settings. Once finished, it will create a `swa-cli.config.json` file in the current folder with your settings. You can commit this file in your project repository so everyone from your team can use it. 77 | 78 | 79 | ## Building your project 80 | 81 | After the configuration is created, you're all set to use other commands without having to bother with any options or flags. 82 | 83 | Whether you need to build your front-end app, your API, or both, the `swa build` command will do the job. It also takes care of installing your NPM dependencies (if needed) detecting if you're using npm, Yarn or PNPM with your project. 84 | 85 | 86 | ## Running your app locally 87 | 88 | Historically, being able to run your app locally was the first feature of the SWA CLI. Of course it's still there, and `swa start` allows you to emulate the SWA runtime environment, along with the routing, authentication features and API. A few changes were made to improve the developer experience, and of course bugs were fixed to more closely match the real SWA runtime. 89 | 90 | Previously, if you were using an API, you had to install [Functions Core Tools](https://docs.microsoft.com/azure/azure-functions/functions-run-local?tabs=v4%2Cwindows%2Ccsharp%2Cportal%2Cbash&WT.mc_id=javascript-0000-yolasors#publish) and make sure to match the tools version with the Node.js version you're using, but now the whole process is automated for you. If you don't have the tools installed or if the wrong version is installed, you don't have to worry about it: it will be automatically installed for you when needed. 91 | 92 | 93 | ## Next steps 94 | 95 | With these new commands, you can already setup your project, build it and test it locally. Using `swa start` is also great for debugging your app and API in a live running environment. Once you're happy with the result, you can deploy it to Azure, and that's what we'll explore in the next post. 96 | 97 | In the meantime, you can also head to [the new docs website](https://azure.github.io/static-web-apps-cli/) to learn more about the new features and how to use them. 98 | 99 | 100 | ## Tell us your feedback! 101 | 102 | We're also [here on dev.to](https://dev.to/azure/get-started-with-the-new-azure-static-web-apps-cli-mm3) to listen and help as much as we can! 🙂 103 | 104 | Please tell us your experience, your difficulties, your questions, and what features you would like to see in the next versions of the SWA CLI. 105 | 106 | ## Resources 107 | 108 | Want to see the Static Web Apps CLI in action? The tool became generally available yesterday, launching at the [Azure Static Web Apps Anniversary](https://aka.ms/swaanniversary). Watch the segment to see the SWA CLI in action. 109 | 110 | -------------------------------------------------------------------------------- /www/blog/2022-05-22.md: -------------------------------------------------------------------------------- 1 | --- 2 | slug: devtools-vscode 3 | title: "#21: Develop With VSCode" 4 | authors: [alex] 5 | tags: [swa, 30days, dev-tools] 6 | draft: false 7 | --- 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | Welcome to `Week 3, Day 7` of **#30DaysOfSWA**!! 23 | 24 | This week has been all about the SWA developer tools. To conclude the week, we'll show how the [Azure Static Web Apps extension for VS Code](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-azurestaticwebapps) can make using all of these awesome tools easier! 25 | 26 | 27 | :::info WHAT WE'LL COVER TODAY 28 | * Debugging with VS Code 29 | * Easily add an API endpoint 30 | * Debug API and Frontend simultaneously 31 | * **Resource(s):** [Azure Static Web Apps Quickstart: With VS Code](https://docs.microsoft.com/en-us/azure/static-web-apps/getting-started?tabs=vanilla-javascript) 32 | ::: 33 | 34 | ![](../static/img/series/21-banner.png) 35 | 36 | 37 | ## Prerequisites 🛠️ 38 | 39 | 1. **Google Chrome installed** - we make use of the debugger 40 | 41 | 2. **Azure Static Web Apps extension for VS Code** - [View on Marketplace](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-azurestaticwebapps) 42 | 43 | 3. **Azure Static Web Apps CLI** - [View on GitHub](https://github.com/Azure/static-web-apps-cli) 44 | 45 | ``` 46 | npm install -g @azure/static-web-apps-cli@latest 47 | ``` 48 | 49 | ## 1. Getting started 🟢 50 | 51 | 1. Clone one of these repositories, and open it up in VS Code 52 | 53 | 54 | | Framework | Repository | 55 | |---|---| 56 | Angular | https://github.com/staticwebdev/angular-basic 57 | React | https://github.com/staticwebdev/react-basic 58 | Svelte | https://github.com/staticwebdev/svelte-basic 59 | 60 | 2. Run `npm install` 61 | 62 | ![Running npm install in VS Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c00m73mzlt49kkwl4iiw.png) 63 | > Theme: [Cobalt2 Theme Official by Wes Bos](https://marketplace.visualstudio.com/items?itemName=wesbos.theme-cobalt2) 64 | 65 | ## 2. Run and debug 🐞 66 | 67 | ![Show automatic debug configurations](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pahznac0f8cjqt8haifb.png) 68 | 69 | 1. Go to the "Run and Debug" view 70 | 2. Click "Show all automatic debug configurations." 71 | 2. In the dropdown, select "Azure Static Web Apps..." 72 | 3. Select the app you want to debug 73 | 74 | This will start the Azure Static Web Apps CLI in the VS Code terminal, and launch the Chrome debugger on `http://localhost:4280`. 75 | 76 | Now you can set and hit breakpoints in your frontend code. 77 | 78 | ![Set breakpoints](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aprutdzi9opkbegdnf2p.png) 79 | 80 | ## 3. Add API route ⚡️ 81 | 82 | Azure Static Web Apps has integrated API support provided by Azure Functions. In order to add and debug an API route, we must install some Azure Functions tools. 83 | 84 | 1. **Azure Functions extension for VS Code** - [Install from Marketplace](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-azurefunctions) 85 | 86 | 2. **Azure Functions Core Tools** - [View on GitHub](https://github.com/Azure/azure-functions-core-tools) 87 | 88 | ``` 89 | npm i -g azure-functions-core-tools@4 --unsafe-perm true 90 | ``` 91 | 92 | Now, you can add an API route to your app using the command palette (press `F1`) and searching "Create HTTP Function". 93 | 94 | ![Add HTTP Function](https://user-images.githubusercontent.com/12476526/169424449-3a10a9a0-025f-4fa3-b15f-294846fb0291.png) 95 | 96 | Select a language (I chose JavaScript), then name your Function (I put "hello"). And then an API route will be created for you that you can make requests to at `/api/hello`. 97 | 98 | ![API route](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/emd9wo9q26m51aboyydd.png) 99 | 100 | ## 4. Debug app & API ✨ 101 | 102 | We can debug our API routes and our frontend app simultaneously in VS Code. 103 | 104 | Select the "SWA: Run ..." debug configuration and click the green "Run and debug" button. 105 | 106 | ![Run and debug](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/234k0e1p9jzmtyeeli56.png) 107 | 108 | VS Code will now run your Functions API routes and your frontend. When it's all started, a Chrome window will open at `http://localhost:4280`. 109 | 110 | Set a breakpoint in your Function endpoint. 111 | 112 | ![Function endpoint breakpoint](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/89kolpnqbsrqysh661ep.png) 113 | 114 | Go to `http://localhost:4280/api/hello` in the Chrome window to hit the breakpoint. 115 | 116 | ![Hitting an API breakpoint](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2q8zt9j70wz4dr5h3mcm.png) 117 | 118 | ## 5. Next steps 🏃‍♀️ 119 | 120 | Now that you got your static web app running locally, you can [deploy your static web app to Azure for free](https://docs.microsoft.com/en-us/azure/static-web-apps/getting-started?tabs=react). 121 | 122 | ## Troubleshooting 🔍 123 | 124 | If you're having issues, please check out the [troubleshooting section in our wiki](https://github.com/microsoft/vscode-azurestaticwebapps/wiki/Guide:-Debugging-a-Static-Web-App-with-VS-Code#troubleshooting-). 125 | 126 | ## Resources 🔗 127 | 128 | * [Azure Static Web Apps documentation](https://docs.microsoft.com/en-us/azure/static-web-apps/) 129 | * [Azure Static Web Apps CLI](https://github.com/Azure/static-web-apps-cli) 130 | * [Azure Static Web Apps extension for VS Code](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-azurestaticwebapps) 131 | 132 | ## Next Week 133 | 134 | This marks the end of Week 3 of #30DaysOfSWA, with a focus on `Developer Tools`. Want a visual recap of what we covered .. here you go!! To recap: 135 | * We provisioned Azure resources - using the Azure Portal and Azure CLI 136 | * We added automated, cross-browser, e2e testing - using Playwright 137 | * We built multi-stage deployment pipelines - using Azure DevOps 138 | * We debugged and audited perf & accessibility - using Edge DevTools on VSCode 139 | * We got unified local development and cloud deployment - using SWA CLI 140 | * We explored rich extensions and seamless CLI interactions - using VS Code 141 | 142 | ![Week 3 Visual Roadmap](../static/img/png/week3-roadmap.png) 143 | 144 | So what do we have planned for next week? 145 | 146 | We've already covered core concepts, usage examples and developer tools -- so that leaves: **Best Practices!** Join us for the final week of #30DaysOfSWA where we define the end-to-end developer experience, explore various Azure Service integrations to enhance your SWA, dive into a cool case study, and end with a `Tips & Tricks` series that brings you back full circle to development. 147 | 148 | Thanks for sticking with us on this journey! -------------------------------------------------------------------------------- /www/blog/2022-05-27.md: -------------------------------------------------------------------------------- 1 | --- 2 | slug: practices-byo-functions 3 | title: "#26: Azure Functions & SWA" 4 | authors: [craig] 5 | tags: [swa, 30days, best-practices] 6 | draft: false 7 | --- 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | Welcome to `Week 4, Day 5` of **#30DaysOfSWA**!! 21 | 22 | All week, we'll explore end-to-end development workflows with Azure Static Web Apps as one component that is integrated with other services to deliver an enhanced modern web application experience. 23 | 24 | The default Azure Static Web Apps architecture separates the web application into two components: static assets (served from global content distribution services) and dynamic API endpoints (implemented using serverless architectures). In our [API-enabling SWA](blog/deploying-swa) post, we focused on **Managed Functions**, where the Azure Static Web Apps service configures and manages your Azure Functions Deployment. 25 | 26 | Today, we'll explore the other option **Bring Your Own Functions** - where you can use pre-existing (or independently developed) Azure Functions applications and manage their deployment separately. 27 | 28 | 29 | ## What We'll Cover 30 | * What is "Bring Your Own Functions" (BYOF)? 31 | * Benefits of BYOF over Managed Functions 32 | * Switching from Managed Functions to BYOF 33 | * **Resources**: Building Serverless apps with Azure Functions 34 | * **Exercise**: Complete [this learning module](https://docs.microsoft.com/en-us/learn/modules/automatic-update-of-a-webapp-using-azure-functions-and-signalr/), add real-time updates to your SWA! 35 | 36 | ![](../static/img/series/26-banner.png) 37 | 38 | ## What does "Bring Your Own Functions" (BYOF) mean? 39 | 40 | In our [API-enabling SWA](blog/deploying-swa) post, we mentioned that the Azure Static Web App can implement Serverless API using Azure Functions in two ways: 41 | 42 | * **Managed Functions** - where the Azure Static Web Apps service configures and manages your Azure Functions deployment. 43 | * **Bring Your Own Functions** - where you use a pre-existing Azure Functions application and manage the deployment yourself. 44 | 45 | The second option means that you build and deploy a serverless application using Azure Functions that exists _independent_ of your Azure Static Web App deployment. These applications can make use of the [full Azure Functions feature set](https://docs.microsoft.com/en-us/azure/azure-functions/functions-overview) without any of the limitations imposed for Managed Functions in SWA. All you need to do is **configure** the Static Web App service to use this new serverless API endpoint. 46 | 47 | 48 | ## Why "Bring Your Own Functions"? 49 | 50 | Bring Your Own Functions is a power feature of Azure Static Web Apps that lets you link existing Functions apps and allows you to **avoid the restrictions of Managed Functions**. This means you can: 51 | 52 | * Implement and run functions in any language using **[custom handlers](https://docs.microsoft.com/azure/azure-functions/functions-custom-handlers)**. 53 | * Use **[triggers and bindings](https://docs.microsoft.com/azure/azure-functions/functions-triggers-bindings?tabs=csharp)** to create complex workflows with ease. 54 | * Implement **[Durable Functions](https://docs.microsoft.com/azure/azure-functions/durable/durable-functions-overview?tabs=csharp)** that remain stateful in serverless contexts. 55 | * Use any other Azure Functions features and adopt **[best practices](https://docs.microsoft.com/en-us/azure/azure-functions/functions-best-practices?tabs=csharp)**. 56 | 57 | These kinds of capabilities become critical when you deploy real-world applications at scale. Note that Azure Static Web Apps has two hosting plans: free and standard where the Free tier supports only Managed Functions. To take advantage of the power of "Bring Your Own Functions" you need to be on the standard plan. 58 | 59 | 60 | ## Linking an existing Functions app 61 | 62 | 63 | Using an existing Functions app in Static Web Apps is easy - **all your have to do is link the two apps together**. Once you create the link, then a Functions app published under the following URL: 64 | 65 | ``` 66 | https://my-functions-app.azurewebsites.net/api/data 67 | ``` 68 | 69 | ...is now also available under the `api` route in your static web app. 70 | 71 | For instance: 72 | 73 | ``` 74 | https://red-sea-123.azurestaticapps.net/api/data 75 | ``` 76 | 77 | Linking an existing Functions app is a two step process: (1) Update the [staticwebapp.config.json](https://docs.microsoft.com/azure/static-web-apps/configuration) file, and (2) Link the apps via the Azure portal. 78 | 79 | ### 1. Update the configuration 80 | 81 | Edit your site's `staticwebapp.config.json` file to make these changes: 82 | 83 | * Set the `api_location` value to an empty string (`""`) 84 | 85 | ### 2. Link apps via the Azure portal 86 | 87 | Navigate to your static web app in the Azure portal and make these changes: 88 | 89 | * Click on **Functions** in the *Settings* menu 90 | * Click **Production** in the *Environment* dropdown 91 | * Click **Link to Function app** next to the *Functions type* dropdown 92 | * Select your subscription from the *Subscription* dropdown 93 | * Select your Functions app name from the *Function App* dropdown 94 | * Click the **Link** button 95 | 96 | Now your Functions app is linked to your website and is available under the `api` route for your Static Web App! 97 | 98 | ## Resources 99 | 100 | ### 1. Overview 101 | Are you new to the whole idea of serverless applications and a Functions-based backend? Watch this video overview of Azure Functions - then check out the [developer guide](https://docs.microsoft.com/en-us/azure/azure-functions/functions-reference?tabs=blob). 102 | 103 | 104 | 105 | ### 2. Quickstart 106 | 107 | Want to get a quickstart with Azure Functions? You can code your functions in C#, Java, JavaScript, PowerShell, Python, TypeScript and more (e.g., Go, Rust). For example, you can create JavaScript Functions apps in the following ways: 108 | * [Using Visual Studio Code](https://docs.microsoft.com/en-us/azure/azure-functions/create-first-function-vs-code-node) 109 | * [Using Commandline Tools](https://docs.microsoft.com/en-us/azure/azure-functions/create-first-function-cli-node?tabs=azure-cli%2Cbrowser) 110 | * [Using an ARM Template](https://docs.microsoft.com/en-us/azure/azure-functions/functions-create-first-function-resource-manager?tabs=visual-studio-code%2Cazure-cli) = JSON configuration file 111 | 112 | ### 3. Learning Path 113 | 114 | Want a more comprehensive tour of Azure Functions features and capabilities, with hands-on modules? Try the [Create Serverless Applications](https://docs.microsoft.com/en-us/learn/paths/create-serverless-applications/) learning path. It has 11 modules covering both core concepts and usage examples. 115 | 116 | 117 | ## Exercise 118 | Complete [this learning module](https://docs.microsoft.com/en-us/learn/modules/automatic-update-of-a-webapp-using-azure-functions-and-signalr/)to learn how to use Azure SignalR to get real-time updates to your app using Azure Functions. _Then put that learning to use by updating one of your existing SWA projects to use this capability_. -------------------------------------------------------------------------------- /www/blog/2022-05-31.md: -------------------------------------------------------------------------------- 1 | --- 2 | slug: 30days-showcase 3 | title: "#30: The Road Ahead!" 4 | authors: [nitya] 5 | tags: [swa, 30days] 6 | draft: true 7 | --- 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | Welcome to `The Last Day!` of **#30DaysOfSWA**!! 22 | 23 | Here's how you can keep going.. 24 | 25 | 26 | ## What We'll Cover 27 | * 28 | * 29 | * 30 | * **Exercise** 31 | * **Resource(s):** 32 | 33 | ![](../static/img/series/banner.png) 34 | -------------------------------------------------------------------------------- /www/blog/2022-08-31-thismonth/devto.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/blog/2022-08-31-thismonth/devto.png -------------------------------------------------------------------------------- /www/blog/2022-08-31-thismonth/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | slug: roundup-2022-aug 3 | title: "SWA Roundup: Aug 2022" 4 | authors: [reshmi, nitya, sara] 5 | tags: [swa, thismonth, aug] 6 | draft: false 7 | --- 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | It's here!! Our first roundup of **This Month in SWA** 🎉 22 | 23 | Each month, on the last Wednesday, we'll publish a roundup of Azure Static Web Apps product news, events, and content updates on this blog. Over time, we hope to make it your one-stop destination to catch up on all the exciting things happening in the SWA ecosystem, in one friendly post. 24 | 25 | * Want to make sure you don't miss it? **Subscribe to the feed**. 26 | * Want to contribute items for roundup? [**Submit this custom issue**](https://github.com/staticwebdev/30DaysOfSWA/issues/new?assignees=&labels=ThisMonthIn+-+Community&template=---this-month-in-swa--community-submission.md&title=This+Month+In%3A+Community). 27 | * Want to catch up on past posts? [**Browse past editions.**](/thismonth#view-past-editions) 28 | 29 | --- 30 | 31 | ![](../../static/img/png/roundup/aug.png) 32 | 33 | --- 34 | 35 | ## Product News 36 | 37 | _This section covers recent news or announcements from the product team. Read on to learn the latest news from the world of Azure Static Web Apps!_ 38 | 39 | * **Jun 22** | [Azure SWA now supports more API options](https://azure.microsoft.com/en-us/updates/public-preview-new-api-backend-options-in-azure-static-web-apps/)
You can now link Azure App Service, Azure Container Apps, and Azure API Management services seamlessly to your SWA's API endpoint. Read the [docs](https://docs.microsoft.com/en-us/azure/static-web-apps/apis-overview) and explore the [sample walkthrough](https://techcommunity.microsoft.com/t5/apps-on-azure-blog/new-api-backend-options-in-azure-static-web-apps/ba-p/3516882) to learn more. 40 | 41 | * **Jun 8** | [Static Web Apps CLI is generally available](https://azure.microsoft.com/en-us/updates/static-web-apps-cli-now-available/).
The v1.0 release was launched in late May, adding new commands like `swa init`, `swa login` and `swa deploy` to create an all-in-1 tool for local SWA development. [_Explore the documentation here_](https://azure.github.io/static-web-apps-cli/) 42 | 43 | Don't forget to bookmark the [**Azure Updates**](https://azure.microsoft.com/en-us/updates/?query=static%20web%20apps) page to get updates at any time. 44 | 45 | --- 46 | 47 | ## Dev Resources 48 | 49 | _This section covers content, events and code samples from Microsoft authors. Check them out for relevant learning resources and best practices._ 50 | 51 | * **Aug 3** | `dev.to` - [**Deploy Azure Static Web Apps using Python**](https://dev.to/azure/deploy-azure-static-web-apps-using-python-1hn7) by _Jay Miller_. Are you a Python developer interested in exploring Azure Static Web Apps? In this post, Jay walks you through configuring and deploying your first Python SWA from VS Code. 52 | 53 | * **Jul 22** | `TechCommunity` - [**Host your website on Azure Static Web Apps for free**](https://techcommunity.microsoft.com/t5/educator-developer-blog/host-your-website-on-azure-static-web-apps-for-free/ba-p/3579709?WT.mc_id=academic-74011-sagibbon) by _Julia Muiruri_. Students looking to get started with Azure, create your Azure for Students account and deploy your first website within minutes! 54 | 55 | * **Jul 20** | `dev.to` -[**Taking a SWA DevOps Pipeline to the next level**](https://dev.to/azure/taking-a-swa-devops-pipeline-to-the-next-level-5co3) by _Aaron Powell_. We know SWA works seamlessly with GitHub Actions to automate the default build-deploy workflow. What if you need a more complex custom CI/CD pipeline? This article walks you through one such example. 56 | 57 | --- 58 | 59 | ## Community Buzz 60 | 61 | :::info AUTHORED BY DEVS LIKE YOU! 62 | _This section highlights content from our amazing developer community - submitted directly, or published to the relevant tag in sites like Tech Community and dev.to._ 63 | ::: 64 | 65 | * **Jul 19** | `techcommunity.com` - [**Azure Adventure – A RPG game to test student’s Azure practical skills**](https://techcommunity.microsoft.com/t5/educator-developer-blog/azure-adventure-a-rpg-game-to-test-student-s-azure-practical/ba-p/3576331?WT.mc_id=academic-74011-sagibbon) by _Wong Cyrus, Dept Information Technology of the Hong Kong Institute of Vocational Education_. Azure Adventure is an open source HTML5 RPG game that builds on top of the latest version of Azure Automatic Grading Engine, utilizing SWA. 66 | 67 | --- 68 | 69 | ## Upcoming Events 70 | 71 | _This section highlights in-person or online events that are likely to feature Azure Static Web Apps content or developer conversations - links to CFPs or registration links are welcome!_ 72 | 73 | * **Sep 1-30, 2022** | [Serverless September](https://aka.ms/serverless-september) - explore Serverless on Azure 74 | * **Oct 7, 2022** | [Microsoft Student Summit](https://developer.microsoft.com/en-us/reactor/overview/student-summit-2022/) - virtual event held globally 75 | * **Oct 12-14, 2022** | [Microsoft Ignite](https://ignite.microsoft.com/en-US/home) - in-person (Seattle) and online 76 | 77 | --- 78 | 79 | ## Did You Know? 80 | 81 | _Each month, we hope to turn the spotlight on one key resource or person that is worth knowing about, in the context of Azure Static Web Apps._ 82 | 83 | :::info 🌟 SPOTLIGHT ON: DEV.TO 84 | [Dev.to](https://dev.to) is an inclusive community of software developers where you can publish content and have conversations on technology in collaborative and learning-driven ways. 85 | 86 | * Explore the [**#staticwebapps**](https://dev.to/t/staticwebapps) tag - to browse ~100 articles on SWA. 87 | * Leave comments or reactions - to provide valued feedback! 88 | * Create [**a tagged post**](https://dev.to/new/staticwebapps) - to share your own learnings. 89 | ::: 90 | 91 | Here's a snapshot of what that tag profile looks like! **Follow** the tag to get articles in your dev.to feed - or [subscribe to the feed](https://dev.to/feed/tag/staticwebapps) from your favorite RSS reader. 92 | 93 | > ![dev.to #staticwebapps page](./devto.png) 94 | 95 | That's all we had for this roundup! Tell us what you think about this new format for a monthly summary! And don't forget to send us _your_ contributions. 96 | 97 | --- 98 | 99 | ## 🚨 | Call For Content 100 | 101 | :::tip Next Roundup: Sep 28, 2022 102 | Submissions welcome till Sep 25, 2022. 103 | 104 | * Did you author an article, create a SWA application or sample? 105 | * Are you organizing an event with a SWA-related session? 106 | * Are you a student who just created your first SWA app or blog post? 107 | 108 | Submit the details [**using this custom issue**](https://github.com/staticwebdev/30DaysOfSWA/issues/new?assignees=&labels=ThisMonthIn+-+Community&template=---this-month-in-swa--community-submission.md&title=This+Month+In%3A+Community) as soon as possible. We can't wait to share your contributions! 109 | ::: 110 | -------------------------------------------------------------------------------- /www/blog/2022-10-26-thismonth/studentsummit.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/blog/2022-10-26-thismonth/studentsummit.png -------------------------------------------------------------------------------- /www/blog/2023-01-23-thismonth/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | slug: roundup-2023-jan 3 | title: "SWA Roundup: Jan 2023" 4 | authors: [reshmi, nitya, sara] 5 | tags: [swa, thismonth, jan] 6 | draft: false 7 | --- 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | It's here!! Our January roundup of **This Month in SWA** 🎉 22 | 23 | :::info ABOUT THE ROUNDUP 24 | 25 | We publish a roundup of Azure Static Web Apps product news, announcements and content updates **on the last Wednesday of each month**. Catch up on all the updates in one friendly post - and don't forget to contribute _your_ updates for inclusion in the next issue! 26 | 27 | * Want to make sure you don't miss it? **Subscribe to the feed**. 28 | * Want to contribute items for roundup? [**Submit this custom issue**](https://github.com/staticwebdev/30DaysOfSWA/issues/new?assignees=&labels=ThisMonthIn+-+Community&template=---this-month-in-swa--community-submission.md&title=This+Month+In%3A+Community). 29 | * Want to catch up on past posts? [**Browse past editions.**](/thismonth#view-past-editions) 30 | 31 | ::: 32 | 33 | --- 34 | 35 | ![](../../static/img/png/roundup/jan.png) 36 | 37 | --- 38 | 39 | ## Product News 40 | 41 | _This section covers recent news or announcements from the product team. Read on to learn the latest news from the world of Azure Static Web Apps!_ 42 | 43 | * **Dec 14** | [Generally available: Static Web Apps Diagnostics](https://azure.microsoft.com/en-us/updates/generally-available-static-web-apps-diagnostics/?WT.mc_id=academic-86055-sagibbon) Azure Static Web Apps Diagnostics is an intelligent tool to help you troubleshoot your static web app directly from the Azure Portal. When issues arise, Static Web Apps diagnostics will help you diagnose what went wrong and will show you how to resolve the issues. [**Get Started**](https://learn.microsoft.com/en-us/azure/static-web-apps/diagnostics-overview/?WT.mc_id=academic-86055-sagibbon) with your Static Web App diagnositics. 44 | 45 | --- 46 | 47 | ## Dev Resources 48 | 49 | _This section covers content, events and code samples from Microsoft authors. Check them out for relevant learning resources and best practices._ 50 | 51 | * **Dec 6** | `learn.microsoft.com` - [Publish a Blazor WebAssembly app and .NET API with Azure Static Web Apps](https://learn.microsoft.com/en-us/shows/learn-live/modern-web-development-net6-ep04-publish-blazor-webassembly-net-api-azure-static-web-apps/?WT.mc_id=academic-86055-sagibbon) by _Jon Galloway and James Montemagno_ Follow along with this Learn Live session as Jon and James walk you through how to automatically deploy and update a Blazor web application and its API from a GitHub repository. [**Get started**](https://learn.microsoft.com/en-us/training/modules/publish-app-service-static-web-app-api-dotnet/?WT.mc_id=academic-86055-sagibbon) with the accompanying Learn Module. 52 | * **Dec 13** | `github.com` - [JavaScript Portfolio Site with GitHub Codespaces](https://github.com/education/codespaces-project-template-js) by _Sara Gibbons_ Build and deploy your own portfolio site using Codespaces and Azure Static Web Apps. All from within your browser! [**Watch the release discussion**](https://www.youtube.com/watch?v=5c_X-GC7Eds) to learn more. 53 | * **Jan 10** | `learn.microsoft.com` - [Configure front-end frameworks and libraries with Azure Static Web Apps](https://learn.microsoft.com/en-us/azure/static-web-apps/front-end-frameworks/?WT.mc_id=academic-86055-sagibbon) The list of frameworks that work with Azure Static Web Apps continues to grow! Find a new framework to explore using the provided configuration to deploy your app. [**Learn more**](https://learn.microsoft.com/en-us/azure/static-web-apps/build-configuration?tabs=github-actions/?WT.mc_id=academic-86055-sagibbon) on all Static Web App build configuration options to get started. 54 | 55 | --- 56 | 57 | ## Community Buzz 58 | 59 | :::info AUTHORED BY DEVS LIKE YOU! 60 | _This section highlights content from our amazing developer community - submitted directly, or published to the relevant tag in sites like Tech Community and dev.to._ 61 | ::: 62 | 63 | * **Dec 31** | `dev.to` - [Deep linking with Azure Static Web Apps and Easy Auth](https://dev.to/johnnyreilly/deep-linking-with-azure-static-web-apps-and-easy-auth-26in) by _John Reilly_ Dig in on deep linking and authentication within Azure Static Web Apps. What each is, and how to implement together for your web app. 64 | * **Jan 10** | `dotnetthoughts.net` - [Implementing Authentication in Azure Static Web Apps](https://dotnetthoughts.net/implementing-authentication-in-static-web-apps-part1/) by _Anuraj Parameswaran_ In this two part series, explore creating and running an app on the Azure Static Web App free plan and standard plans, along with setting up authentication for your app. 65 | * **Jan 21** | `youtube.com` - [Azure Static Web Apps for the Enterprise](https://azureday.community/en-live-from-the-netherlands/azure-static-web-apps-for-the-enterprise/) by _Stacy Cashmore_ Azure Static Web Apps is enterprise ready, and Stacy shows you the steps from infrastructure to authentication on how you can utilize Static Web Apps for your organization. 66 | 67 | --- 68 | 69 | ## Upcoming Events 70 | 71 | _This section highlights in-person or online events that are likely to feature Azure Static Web Apps content or developer conversations - links to CFPs or registration links are welcome!_ 72 | 73 | * **Jan 26** | ✨ **Join LIVE for [Azure Static Web Apps Community Standups](https://www.youtube.com/watch?v=7hTQJs9Ku5Y)** ✨ In this first edition of the SWA Community Standup, we'll introduce the team, the product, some community contributions, and we'll demo how to get up and running quickly from your favorite tools. 74 | * **Jan 23** | Join [Cloud Native New Year](https://azure.github.io/Cloud-Native/New-Year/) 75 | * **Feb 1** | Get ready for [Low Code February](https://microsoft.github.io/Low-Code/blog/2023-kickoff/) 76 | 77 | --- 78 | 79 | ## Did You Know? 80 | 81 | _Each month, we hope to turn the spotlight on one key resource or person that is worth knowing about, in the context of Azure Static Web Apps._ 82 | 83 | :::info 🌟 SPOTLIGHT ON: SWA CLI 84 | 85 | [**Static Web Apps CLI**](https://azure.github.io/static-web-apps-cli/) is an all-in-one local development tool For Azure Static Web Apps. Using SWA CLI you can deploy your apps right from your local enviroment to the Azure cloud without a CI/CD workflow, and instead a simple CLI command. 86 | 87 | From the SWA CLI you can login to Azure subscriptions, initialize an Azure Static Web Apps project, set build configurations, and deploy your app. 88 | 89 | ::: 90 | 91 | To get you started here is a list of SWA CLI resources: 92 | * [**Develop with SWA CLI**](https://www.azurestaticwebapps.dev/blog/devtools-swacli-develop) - Covering the basics of getting started with SWA CLI for your development cycle. 93 | * [**Deploy with SWA CLI**](https://www.azurestaticwebapps.dev/blog/devtools-swacli-deploy) - Get connected to Azure and deploy your Static Web App. Including the use of environment variables. 94 | * [**SWA CLI GitHub Repo**](https://github.com/Azure/static-web-apps-cli) - Covering all of SWA CLI, and where [**you can share**](https://github.com/Azure/static-web-apps-cli/issues/new/choose) your questions, report a bug, and request a feature. 95 | 96 | --- 97 | 98 | ## 🚨 | Call For Content 99 | 100 | :::tip Next Roundup: Feb 20, 2023 101 | Submissions welcome till Feb 15, 2023. 102 | 103 | * Did you author an article, create a SWA application or sample? 104 | * Are you organizing an event with a SWA-related session? 105 | * Are you a student who just created your first SWA app or blog post? 106 | 107 | Submit the details [**using this custom issue**](https://github.com/staticwebdev/30DaysOfSWA/issues/new?assignees=&labels=ThisMonthIn+-+Community&template=---this-month-in-swa--community-submission.md&title=This+Month+In%3A+Community) as soon as possible. We can't wait to share your contributions! 108 | ::: 109 | -------------------------------------------------------------------------------- /www/blog/authors.yml: -------------------------------------------------------------------------------- 1 | nitya: 2 | name: Nitya Narasimhan 3 | title: Senior Cloud Advocate @Microsoft 4 | url: https://twitter.com/nitya 5 | image_url: https://github.com/nitya.png 6 | 7 | sara: 8 | name: Sara Gibbons 9 | title: Next Gen Experiences Advocate @Microsoft 10 | url: https://github.com/saragibby 11 | image_url: https://github.com/saragibby.png 12 | 13 | reshmi: 14 | name: Reshmi Sriram 15 | title: PM, Static Web Apps @Microsoft 16 | url: https://twitter.com/reshsriram 17 | image_url: https://github.com/Reshmi-Sriram.png\ 18 | 19 | simona: 20 | name: Simona Cotin 21 | title: Principal PM @Microsoft 22 | url: https://github.com/simonaco 23 | image_url: https://github.com/simonaco.png 24 | 25 | glaucia: 26 | name: Glaucia Llemos 27 | title: Cloud Advocate @Microsoft 28 | url: https://github.com/glaucia86 29 | image_url: https://github.com/glaucia86.png 30 | 31 | anthony: 32 | name: Anthony Chu 33 | title: Senior PM @Microsoft 34 | url: https://github.com/anthonychu 35 | image_url: https://github.com/anthonychu.png 36 | 37 | mitali: 38 | name: Mitali Karmarkar 39 | title: Software Engineer @Microsoft 40 | url: https://twitter.com/KarmarkarMitali 41 | image_url: https://pbs.twimg.com/profile_images/1292880690237718529/yFXe2D99_400x400.jpg 42 | 43 | michail: 44 | name: Michail Shaposhnikov 45 | title: Software Engineer @Microsoft 46 | url: https://github.com/mishapos 47 | image_url: https://github.com/mishapos.png 48 | 49 | joseph: 50 | name: Joseph Lin 51 | title: Software Engineer @Microsoft 52 | url: https://github.com/joslinmicrosoft 53 | image_url: https://github.com/joslinmicrosoft.png 54 | 55 | chris: 56 | name: Chris Noring 57 | title: Senior Cloud Advocate @Microsoft 58 | url: https://twitter.com/chris_noring 59 | image_url: https://github.com/softchris.png 60 | 61 | justin: 62 | name: Justin Yoo 63 | title: Senior Cloud Advocate @Microsoft 64 | url: http://devkimchi.com 65 | image_url: https://github.com/justinyoo.png 66 | 67 | max: 68 | name: Maxim Salnikov 69 | title: Developer Relations @Microsoft 70 | url: https://twitter.com/webmaxru 71 | image_url: https://github.com/webmaxru.png 72 | 73 | jen: 74 | name: Jen Looper 75 | title: Principal Cloud Advocate @Microsoft 76 | url: https://github.com/jlooper 77 | image_url: https://github.com/jlooper.png 78 | 79 | alex: 80 | name: Alex Weininger 81 | title: Developer @Microsoft, for @code and @Azure 82 | url: https://twitter.com/alexweininger 83 | image_url: https://github.com/alexweininger.png 84 | 85 | patrick: 86 | name: Patrick Brosset 87 | title: Edge Dev Experience PM @Microsoft 88 | url: https://twitter.com/patrickbrosset 89 | image_url: https://github.com/captainbrosset.png 90 | 91 | yohan: 92 | name: Yohan Lasorsa 93 | title: Senior Cloud Advocate @Microsoft 94 | url: https://twitter.com/sinedied 95 | image_url: https://github.com/sinedied.png 96 | 97 | wassim: 98 | name: Wassim Chegham 99 | title: Senior Cloud Advocate @Microsoft 100 | url: https://twitter.com/manekinekko 101 | image_url: https://github.com/manekinekko.png 102 | 103 | natalia: 104 | name: Natalia Venditto 105 | title: Principal Program Manager @Microsoft 106 | url: https://github.com/anfibiacreativa 107 | image_url: https://github.com/anfibiacreativa.png 108 | 109 | dina: 110 | name: Dina Berry 111 | title: Senior Content Developer @Microsoft 112 | url: https://github.com/diberry 113 | image_url: https://github.com/diberry.png 114 | 115 | oliver: 116 | name: Oliver Leplus 117 | title: Developer Relations @Microsoft France 118 | url: https://github.com/tagazok 119 | image_url: https://github.com/tagazok.png 120 | 121 | jeff: 122 | name: Jeff Fritz 123 | title: Program Manager @Microsoft 124 | url: https://github.com/csharpfritz 125 | image_url: https://github.com/csharpfritz.png 126 | 127 | craig: 128 | name: Craig Shoemaker 129 | title: Senior Content Developer @Microsoft 130 | url: https://craigshoemaker.net/ 131 | image_url: https://github.com/craigshoemaker.png 132 | 133 | david: 134 | name: David Rousset 135 | title: Senior Program Manager @Microsoft 136 | url: https://github.com/davrous 137 | image_url: https://github.com/davrous.png 138 | 139 | debbie: 140 | name: Debbie O'Brien 141 | title: Senior PM @Microsoft @Playwright 142 | url: https://twitter.com/debs-obrien 143 | image_url: https://github.com/debs-obrien.png 144 | 145 | yönet: 146 | name: Ayşegül Yönet 147 | title: Senior Developer Advocate @Microsoft 148 | url: https://github.com/Yonet 149 | image_url: https://github.com/Yonet.png 150 | 151 | christopher: 152 | name: Christopher Harrison 153 | title: Senior Developer Advocate @Microsoft 154 | url: https://github.com/GeekTrainer 155 | image_url: https://github.com/GeekTrainer.png -------------------------------------------------------------------------------- /www/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "www", 3 | "version": "0.0.0", 4 | "private": true, 5 | "scripts": { 6 | "docusaurus": "docusaurus", 7 | "start": "docusaurus start", 8 | "build": "docusaurus build", 9 | "swizzle": "docusaurus swizzle", 10 | "deploy": "docusaurus deploy", 11 | "clear": "docusaurus clear", 12 | "serve": "docusaurus serve", 13 | "playwright_test": "playwright test", 14 | "write-translations": "docusaurus write-translations", 15 | "write-heading-ids": "docusaurus write-heading-ids" 16 | }, 17 | "dependencies": { 18 | "@docusaurus/core": "^2.4.0", 19 | "@docusaurus/plugin-ideal-image": "^2.4.0", 20 | "@docusaurus/preset-classic": "^2.4.0", 21 | "@mdx-js/react": "^1.6.22", 22 | "clsx": "^1.1.1", 23 | "docusaurus-plugin-clarity": "^2.1.0", 24 | "prism-react-renderer": "^1.3.1", 25 | "react": "^17.0.2", 26 | "react-dom": "^17.0.2" 27 | }, 28 | "browserslist": { 29 | "production": [ 30 | ">0.5%", 31 | "not dead", 32 | "not op_mini all" 33 | ], 34 | "development": [ 35 | "last 1 chrome version", 36 | "last 1 firefox version", 37 | "last 1 safari version" 38 | ] 39 | }, 40 | "devDependencies": { 41 | "@playwright/test": "^1.23.4" 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /www/playwright.config.ts: -------------------------------------------------------------------------------- 1 | import type { PlaywrightTestConfig } from '@playwright/test'; 2 | import { devices } from '@playwright/test'; 3 | 4 | /** 5 | * Read environment variables from file. 6 | * https://github.com/motdotla/dotenv 7 | */ 8 | // require('dotenv').config(); 9 | 10 | /** 11 | * See https://playwright.dev/docs/test-configuration. 12 | */ 13 | const config: PlaywrightTestConfig = { 14 | testDir: './tests', 15 | /* Maximum time one test can run for. */ 16 | timeout: 30 * 1000, 17 | expect: { 18 | /** 19 | * Maximum time expect() should wait for the condition to be met. 20 | * For example in `await expect(locator).toHaveText();` 21 | */ 22 | timeout: 5000 23 | }, 24 | /* Run tests in files in parallel */ 25 | fullyParallel: true, 26 | /* Fail the build on CI if you accidentally left test.only in the source code. */ 27 | forbidOnly: !!process.env.CI, 28 | /* Retry on CI only */ 29 | retries: process.env.CI ? 2 : 0, 30 | /* Opt out of parallel tests on CI. */ 31 | workers: process.env.CI ? 1 : undefined, 32 | /* Reporter to use. See https://playwright.dev/docs/test-reporters */ 33 | reporter: [ 34 | ['html', { outputFolder: 'pw-report' }], 35 | ['json', { outputFolder: 'pw-report', outputFile: 'report.json' }] 36 | ], 37 | /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */ 38 | use: { 39 | /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */ 40 | actionTimeout: 0, 41 | /* Base URL to use in actions like `await page.goto('/')`. */ 42 | baseURL: 'http://localhost:3000', 43 | 44 | /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */ 45 | trace: 'on', 46 | }, 47 | 48 | /* Configure projects for major browsers */ 49 | projects: [ 50 | { 51 | name: 'chromium', 52 | use: { 53 | ...devices['Desktop Chrome'], 54 | }, 55 | }, 56 | 57 | { 58 | name: 'firefox', 59 | use: { 60 | ...devices['Desktop Firefox'], 61 | }, 62 | }, 63 | 64 | { 65 | name: 'webkit', 66 | use: { 67 | ...devices['Desktop Safari'], 68 | }, 69 | }, 70 | 71 | ], 72 | 73 | /* Run your local dev server before starting the tests */ 74 | webServer: { 75 | command: 'npm run start', 76 | port: 3000, 77 | } 78 | }; 79 | 80 | export default config; 81 | -------------------------------------------------------------------------------- /www/sidebars.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Creating a sidebar enables you to: 3 | - create an ordered group of docs 4 | - render a sidebar for each doc of that group 5 | - provide next/previous navigation 6 | 7 | The sidebars can be generated from the filesystem, or explicitly defined here. 8 | 9 | Create as many sidebars as you want. 10 | */ 11 | 12 | // @ts-check 13 | 14 | /** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */ 15 | const sidebars = { 16 | // By default, Docusaurus generates a sidebar from the docs folder structure 17 | tutorialSidebar: [{type: 'autogenerated', dirName: '.'}], 18 | 19 | // But you can create a sidebar manually 20 | /* 21 | tutorialSidebar: [ 22 | { 23 | type: 'category', 24 | label: 'Tutorial', 25 | items: ['hello'], 26 | }, 27 | ], 28 | */ 29 | }; 30 | 31 | module.exports = sidebars; 32 | -------------------------------------------------------------------------------- /www/src/components/HomepageFeatures/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import clsx from 'clsx'; 3 | import styles from './styles.module.css'; 4 | 5 | const FeatureList = [ 6 | { 7 | title: '#30DaysOfSWA', 8 | Svg: require('@site/static/img/svg/logo-30days.svg').default, 9 | link: "roadmap", 10 | description: ( 11 | <> 12 | Jumpstart your learning with the #30DaysofSWA blog series. 13 | 14 | ), 15 | }, 16 | /* 17 | { 18 | title: 'Building Blocks', 19 | Svg: require('@site/static/img/svg/landing-blocks.svg').default, 20 | link: "/roadmap#core-concepts", 21 | description: ( 22 | <> 23 | Learn core concepts behind Azure Static Web Apps. Setup your dev environment. 24 | 25 | ), 26 | }, 27 | { 28 | title: 'Usage Examples', 29 | Svg: require('@site/static/img/svg/landing-action.svg').default, 30 | link: "/roadmap#usage-examples", 31 | description: ( 32 | <> 33 | See Static Web Apps in action with front-end frameworks, static site generators. 34 | 35 | ), 36 | }, 37 | { 38 | title: 'Developer Tools', 39 | Svg: require('@site/static/img/svg/landing-devtools.svg').default, 40 | link: "/roadmap#developer-tools", 41 | description: ( 42 | <> 43 | Explore tools and workflows that create the optimal developer experience. 44 | 45 | ), 46 | }, 47 | { 48 | title: 'Best Practices', 49 | Svg: require('@site/static/img/svg/landing-tips.svg').default, 50 | link: "/roadmap#best-practices", 51 | description: ( 52 | <> 53 | Design better end-to-end user experiences with rich service integrations. 54 | 55 | ), 56 | }, 57 | { 58 | title: 'SWA Anniversary', 59 | Svg: require('@site/static/img/svg/landing-anniversary.svg').default, 60 | link: "https://aka.ms/swaanniversary", 61 | description: ( 62 | <> 63 | Join us May 19 for our SWA Anniversary. Watch it live or catch the replay. 64 | 65 | ), 66 | }, 67 | */ 68 | { 69 | title: 'This Month In SWA', 70 | Svg: require('@site/static/img/svg/landing-anniversary.svg').default, 71 | link: "thismonth", 72 | description: ( 73 | <> 74 | Subscribe to our blog for a monthly roundup of SWA news and content 75 | 76 | ), 77 | }, 78 | { 79 | title: 'SWA Showcase', 80 | Svg: require('@site/static/img/svg/landing-showcase.svg').default, 81 | link: "showcase", 82 | description: ( 83 | <> 84 | Browse community-contributed examples for inspiration. Add your project! 85 | 86 | ), 87 | }, 88 | ]; 89 | 90 | function Feature({Svg, title, description, link}) { 91 | return ( 92 |
93 | 94 |
95 | 96 |
97 | 98 |
99 |

{title}

100 |

{description}

101 |
102 |
103 | ); 104 | } 105 | 106 | export default function HomepageFeatures() { 107 | return ( 108 |
109 |
110 |
111 | {FeatureList.map((props, idx) => ( 112 | 113 | ))} 114 |
115 |
116 |
117 | ); 118 | } 119 | -------------------------------------------------------------------------------- /www/src/components/HomepageFeatures/styles.module.css: -------------------------------------------------------------------------------- 1 | .features { 2 | display: flex; 3 | align-items: center; 4 | padding: 2rem 0; 5 | width: 100%; 6 | } 7 | 8 | .featureSvg { 9 | height: 75px; 10 | width: 75px; 11 | fill: #a67af4; 12 | } 13 | 14 | .featureImg { 15 | width: 90% 16 | } -------------------------------------------------------------------------------- /www/src/components/ListRowCard/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styles from "./styles.module.css"; 3 | 4 | // Import Image 5 | import Image from '@theme/IdealImage'; 6 | 7 | function RowCardItem({ img, title, description, link }) { 8 | return ( 9 |
10 |
11 | 12 |
13 | 14 |
15 | 16 |
17 |
18 |
19 |

{title}

20 |

{description}

21 |
22 |
23 |
24 | ); 25 | } 26 | 27 | export default function ListRowCard({ itemList }) { 28 | return ( 29 |
30 |
31 | {itemList.map((props, idx) => ( 32 | 33 | ))} 34 |
35 |
36 | ); 37 | } 38 | -------------------------------------------------------------------------------- /www/src/components/ListRowCard/styles.module.css: -------------------------------------------------------------------------------- 1 | .rowcard { 2 | display: flex; 3 | align-items: center; 4 | padding: 2rem 0; 5 | width: 100%; 6 | } 7 | 8 | .colImg{ 9 | height: 100%; 10 | padding: 1rem; 11 | } 12 | 13 | .colText{ 14 | padding: 1rem; 15 | width: 100%; 16 | } -------------------------------------------------------------------------------- /www/src/css/custom.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Any CSS included here will be global. The classic template 3 | * bundles Infima by default. Infima is a CSS framework designed to 4 | * work well for content-centric websites. 5 | */ 6 | 7 | /* You can override the default Infima variables here. */:root { 8 | --ifm-color-primary: #552f99; 9 | --ifm-color-primary-dark: #4d2a8a; 10 | --ifm-color-primary-darker: #482882; 11 | --ifm-color-primary-darkest: #3c216b; 12 | --ifm-color-primary-light: #5e34a8; 13 | --ifm-color-primary-lighter: #6236b0; 14 | --ifm-color-primary-lightest: #6f40c4; 15 | } 16 | 17 | /* For readability concerns, you should choose a lighter palette in dark mode. */ 18 | [data-theme='dark'] { 19 | --ifm-color-primary: #50e6ff; 20 | --ifm-color-primary-dark: #2fe1ff; 21 | --ifm-color-primary-darker: #1edfff; 22 | --ifm-color-primary-darkest: #00c9eb; 23 | --ifm-color-primary-light: #72ebff; 24 | --ifm-color-primary-lighter: #82edff; 25 | --ifm-color-primary-lightest: #b4f4ff; 26 | } 27 | 28 | .docusaurus-highlight-code-line { 29 | background-color: rgba(0, 0, 0, 0.1); 30 | display: block; 31 | margin: 0 calc(-1 * var(--ifm-pre-padding)); 32 | padding: 0 var(--ifm-pre-padding); 33 | } 34 | 35 | [data-theme='dark'] .docusaurus-highlight-code-line { 36 | background-color: rgba(0, 0, 0, 0.3); 37 | } 38 | 39 | 40 | .header-github-link:hover { 41 | opacity: 0.6; 42 | } 43 | 44 | .header-github-link::before { 45 | content: ''; 46 | width: 24px; 47 | height: 24px; 48 | display: flex; 49 | background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E") 50 | no-repeat; 51 | } 52 | 53 | [data-theme='dark'] .header-github-link::before { 54 | background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E") 55 | no-repeat; 56 | } 57 | 58 | /* 59 | Theming SVG icons 60 | See: Inline SVG 61 | https://docusaurus.io/docs/markdown-features/assets#inline-svgs 62 | 63 | [data-theme='light'] .themedSvg [fill='#000000'] { 64 | fill: #a67af4; 65 | height: 50px; 66 | width: 50px; 67 | } 68 | 69 | [data-theme='dark'] .themedSvg [fill='#000000'] { 70 | fill: #50E6FF; 71 | height: 50px; 72 | width: 50px; 73 | } 74 | */ -------------------------------------------------------------------------------- /www/src/pages/collections/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Layout from '@theme/Layout'; 3 | import ListRowCard from '@site/src/components/ListRowCard'; 4 | 5 | const ItemList = [ 6 | { 7 | title: '🆕 | Database Connections ', 8 | img: require('@site/static/img/collections/dab/swa-dab-launch.png'), 9 | link: "collections/dab", 10 | description: ( 11 | <> 12 | Mar 15, 2023: Today marked the launch of a new feature: Database Connections for Azure Static Web Apps. This feature enables your application to connect seamlessly to supported Azure databases over REST or GraphQL endpoints, without you having to write any backend code. Explore this collection to learn about the feature, browse docs, and explore code samples and tutorials for applied understanding. 13 | 14 | ), 15 | }, 16 | { 17 | title: '01 | Core Concepts', 18 | img: require('@site/static/img/png/week1-roadmap.png'), 19 | link: "roadmap#core-concepts", 20 | description: ( 21 | <> 22 | Get started on your learning journey with an introduction to the core concepts of Azure Static Web Apps. Buiild and deploy your first SWA. Add a Serverless API backend. Configure build process, app settings and behavior. Secure your app with authentication options. Stage deployments for preview. Automate CI/CD with various options. 23 | 24 | ), 25 | }, 26 | { 27 | title: '02 | Usage Examples', 28 | img: require('@site/static/img/png/week2-roadmap.png'), 29 | link: "roadmap#usage-examples", 30 | description: ( 31 | <> 32 | Get hands-on experience building and deploying web applications using Azure Static Web Apps - using familiar frameworks. Build a blog with Astro. Manage inventory with React. Get creative with Vue. Share documentation with Docusaurus. Build a headless CMS with Blazor. Build and deploy a progressive web app! 33 | 34 | ), 35 | }, 36 | { 37 | title: '03 | Developer Tools', 38 | img: require('@site/static/img/png/week3-roadmap.png'), 39 | link: "roadmap#developer-tools", 40 | description: ( 41 | <> 42 | Explore the developer experience in building and deploying modern web apps. We'll introduce you to a few tools that can simplify your develop-debug-deploy-test workflows. Some of these tools are specific to Azure Static Web Apps, but most are broadly applicable for modern web app development. 43 | 44 | ), 45 | }, 46 | { 47 | title: '04 | Best Practices', 48 | img: require('@site/static/img/png/week4-roadmap.png'), 49 | link: "roadmap#best-practices", 50 | description: ( 51 | <> 52 | Let's explore advanced use cases and best practices that can help take your Azure Static Web App to the next level. This collection provides insights into E2E development, real-world case studies and Azure service integrations. 53 | 54 | 55 | ), 56 | }, 57 | ]; 58 | 59 | export default function Sprints() { 60 | return ( 61 | 64 |
65 | 66 |
67 | 68 | ); 69 | } -------------------------------------------------------------------------------- /www/src/pages/collections/styles.module.css: -------------------------------------------------------------------------------- 1 | /** 2 | * CSS files with the .module.css suffix will be treated as CSS modules 3 | * and scoped locally. 4 | */ 5 | 6 | .heroBanner { 7 | padding: 4rem 0; 8 | text-align: center; 9 | position: relative; 10 | overflow: hidden; 11 | } 12 | 13 | @media screen and (max-width: 996px) { 14 | .heroBanner { 15 | padding: 2rem; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /www/src/pages/contribute.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Contribute 3 | --- 4 | 5 | :::caution COMING SOON: Contributor Guidelines 6 | The #30DaysOfSWA launched on May 1, 2022 and will run through May 31, 2022. We are working on an update to this page with contributor guidelines so please check back. 7 | ::: 8 | 9 | We value our community. We're working on contributor guidelines that will cover 10 | * Code Of Conduct 11 | * Contributions Types 12 | * Getting Started 13 | * Good First Issues 14 | 15 | to help you make your first contributions (and more) to this project. Please check back on this page for updates. Until then, please do contribute bug reports, feature requests and other feedback by **[filing an issue](https://github.com/staticwebdev/30DaysOfSWA/issues/new)**. -------------------------------------------------------------------------------- /www/src/pages/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import clsx from 'clsx'; 3 | import Layout from '@theme/Layout'; 4 | import Link from '@docusaurus/Link'; 5 | import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; 6 | import styles from './index.module.css'; 7 | import HomepageFeatures from '@site/src/components/HomepageFeatures'; 8 | 9 | // Import roadmap 10 | import Image from '@theme/IdealImage'; 11 | import bannerImg from './../../static/img/png/roundup/tmis-links.png'; 12 | //import bannerImg from './../../static/img/collections/dab/swa-dab-launch.png'; 13 | 14 | function HomepageHeader() { 15 | const {siteConfig} = useDocusaurusContext(); 16 | return ( 17 |
18 |
19 | {/* 20 |

{siteConfig.title}

21 |

{siteConfig.tagline}

22 | */} 23 | { /*

#ThisMonthInSWA - Feb 2023!

*/ } 24 |

🍿 Catch Up On the Latest SWA News Each Month!

25 | 26 | 27 | 28 |
Click the banner to visit the archives!
29 |
30 |
31 | ); 32 | } 33 | 34 | /* 35 | Was originally with Homepage Header. 36 | Removed it as a test 37 | 38 |
39 | 40 |
41 | */ 42 | export default function Home() { 43 | const {siteConfig} = useDocusaurusContext(); 44 | return ( 45 | 48 |
49 | 50 | 51 |
52 | 53 | ); 54 | } 55 | -------------------------------------------------------------------------------- /www/src/pages/index.module.css: -------------------------------------------------------------------------------- 1 | /** 2 | * CSS files with the .module.css suffix will be treated as CSS modules 3 | * and scoped locally. 4 | */ 5 | 6 | .heroBanner { 7 | padding: 4rem 0; 8 | text-align: center; 9 | position: relative; 10 | overflow: hidden; 11 | } 12 | 13 | @media screen and (max-width: 996px) { 14 | .heroBanner { 15 | padding: 2rem; 16 | } 17 | } 18 | 19 | .buttons { 20 | display: flex; 21 | align-items: center; 22 | justify-content: center; 23 | } 24 | -------------------------------------------------------------------------------- /www/src/pages/resources.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Self-Study Resources 3 | --- 4 | 5 | # Learning Resources 6 | 7 | Want to continue the #30Days learning journey on your own? Bookmark this page! We'll keep it updated with links to relevant documentation, tutorials, and videos, that can help skill you up! 8 | 9 | --- 10 | 11 | ## `Microsoft Resources` 12 | --- 13 | 14 | ## Core Concepts 15 | 16 | * [What is Azure Static Web Apps?](https://docs.microsoft.com/en-us/azure/static-web-apps/overview?WT.mc_id=javascript-61155-ninarasi) 17 | * [API Support With Azure Functions](https://docs.microsoft.com/en-us/azure/static-web-apps/apis?WT.mc_id=javascript-61155-ninarasi) 18 | 19 | 20 | 21 | ## Quickstarts 22 | 23 | Step-by-step walkthroughs demonstrating core featurs using one of the starter projects below. 24 | 25 | * Deploy from a **GitHub Repository** 26 | * [With Visual Studio Code](https://docs.microsoft.com/en-us/azure/static-web-apps/getting-started?tabs=vanilla-javascript&WT.mc_id=javascript-61155-ninarasi) 27 | * [With Azure CLI](https://docs.microsoft.com/en-us/azure/static-web-apps/get-started-cli?WT.mc_id=javascript-61155-ninarasi) 28 | * [With Azure Portal](https://docs.microsoft.com/en-us/azure/static-web-apps/get-started-portal?tabs=vanilla-javascript&pivots=github&WT.mc_id=javascript-61155-ninarasi) 29 | * Deploy from **GitLab** 30 | * [With Azure Portal](https://docs.microsoft.com/en-us/azure/static-web-apps/gitlab?tabs=vanilla-javascript&WT.mc_id=javascript-61155-ninarasi) 31 | * Deploy from **BitBucket** 32 | * [With Azure Portal](https://docs.microsoft.com/en-us/azure/static-web-apps/bitbucket?tabs=vanilla-javascript&WT.mc_id=javascript-61155-ninarasi) 33 | * Add **Serverless API** capability 34 | - [Use Managed Functions](https://docs.microsoft.com/en-us/azure/static-web-apps/add-api?tabs=vanilla-javascript&WT.mc_id=javascript-61155-ninarasi) (maintained by SWA, HTTP triggers only) 35 | - [Bring Your Own Functions](https://docs.microsoft.com/en-us/azure/static-web-apps/functions-bring-your-own?WT.mc_id=javascript-61155-ninarasi) (use pre-existing Functions apps, all features) 36 | 37 | 38 | ## Starter Projects 39 | 40 | These starter projects help demonstrate SWA capabilities with core front-end frameworks. 41 | 42 | * [Vanilla JS](https://github.com/staticwebdev/vanilla-basic.git?WT.mc_id=javascript-61155-ninarasi) starter app (no framework). 43 | * [React](https://github.com/staticwebdev/react-basic.git?WT.mc_id=javascript-61155-ninarasi) 44 | * [Blazor](https://github.com/staticwebdev/blazor-basic.git?WT.mc_id=javascript-61155-ninarasi) starter app. 45 | * [Angular](https://github.com/staticwebdev/angular-basic.git?WT.mc_id=javascript-61155-ninarasi) starter app. 46 | * [Vue](https://github.com/staticwebdev/vue-basic.git?WT.mc_id=javascript-61155-ninarasi) starter app 47 | 48 | Using a different framework? Follow the same process, but configure it for your target technology. 49 | * [Configure front-end framewworks with SWA](https://docs.microsoft.com/en-us/azure/static-web-apps/front-end-frameworks?WT.mc_id=javascript-61155-ninarasi) 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | --- 58 | ## `Community Resources` 59 | --- 60 | 61 | * **dev.to** | Follow the [#staticwebapps](https://dev.to/t/staticwebapps) tag to get the latest articles 62 | * **awesome-lists** | Explore the [awesome-azure-static-web-apps](https://github.com/staticwebdev/awesome-azure-static-web-apps?WT.mc_id=javascript-61155-ninarasi) resources. 63 | 64 | --- 65 | 66 | Have resources you recommend that are missing in this list? Have comments or other feedback we can use to improve these resources? **Share them on our [Discussions](https://github.com/orgs/staticwebdev/discussions?WT.mc_id=javascript-61155-ninarasi) forum.** 67 | -------------------------------------------------------------------------------- /www/src/pages/roadmap.md: -------------------------------------------------------------------------------- 1 | # Roadmap 2 | 3 | Welcome to **#30DaysOfSWA** - a fun way to jumpstart your learning journey into Azure Static Web Apps. 4 | 5 | Over the next four weeks, we'll learn core concepts, see usage examples, explore developer tools, and discuss best practices to design richer end-to-end user experiences. We've put together a tentative plan for the content. While the weekly themes are fixed, we may adapt or alter planned posts in response to your feedback or requests. 6 | 7 | So share your questions, comments and suggestions. Help us make this more journey better! 8 | * **Preferred**: Post feedback to our [Discussions](https://github.com/orgs/staticwebdev/discussions/categories/-30daysofswa) board. 9 | * Alternatively, post feedback as comments in the related post [on dev.to](https://dev.to/nitya/series/17901). 10 | * You can also tweet comments or share learnings using the `#30DaysOfSWA` hashtag. 11 | 12 | --- 13 | 14 | ## Kickoff 15 | 16 | :::info KICKOFF 17 | 18 | What is #30DaysOfSWA? How can you participate? Who are the people behind this project? Join us for a visual roadmap of the journey ahead, and get motivated to learn about Azure Static Web Apps in #30Days! 19 | ::: 20 | 21 | ![Kickoff](../../static/img/series/banner-kickoff.png) 22 | 23 | --- 24 | 25 | ## Core Concepts 26 | 27 | _Welcome to the first week of your learning journey. Let's talk about some fundamental concepts for developing and deploying Static Web Apps. At the end of this week you should have built and deployed a basic SWA._ 28 | 29 | :::info Week 1 ARTICLES 30 | * [**Introducing SWA**](blog/introducing-swa) _(Simona, Nitya)_ - What is Static Web Apps? 31 | * [**Building SWA**](blog/building-swa) _(Glaucia, Nitya)_ - Build & Deploy Your First SWA! 32 | * [**API-Enabling SWA**](blog/api-enabling-swa) _(Anthony, Nitya)_ - Add a Serverless API backend. 33 | * [**Configuring SWA**](blog/configuring-swa) _(Joseph, Nitya)_ -- Configure Build Process, App Settings & Behavior 34 | * [**Securing SWA**](blog/securing-swa) _(Mitali, Nitya)_ - Built-in & Custom Authentication Options for SWA 35 | * [**Previewing SWA**](blog/previewing-swa) _(Michail , Nitya)_ - Staging Deployments For Previewing (PR, Branches) 36 | * [**Deploying SWA**](blog/deploying-swa) _(Reshmi)_ - Deploy from GitLab, BitBucket, Azure DevOps. Using ARM Templates 37 | ::: 38 | 39 | ![Week 1 Roadmap](../../static/img/png/week1-roadmap.png) 40 | 41 | 42 | --- 43 | 44 | ## Usage Examples 45 | 46 | _Welcome to Week 2. So you know what SWA is but what web frameworks and libraries can you use it with? And what kinds of applications can you spin up quickly using this approach? Let's look at some examples_. 47 | 48 | :::info Week 2 ARTICLES 49 | * [Build a Blog - with Astro](blog/build-with-astro) 50 | * [Manage Inventory - with React](blog/build-with-react) 51 | * [Get Creative - with Vue](blog/build-with-vuejs) 52 | * [Share Content - with Docusaurus](blog/build-with-docusaurus) 53 | * [Headless CMS - with Blazor](blog/build-with-blazor) 54 | * [Hosting PWA - with SWA](blog/pwa-on-swa) 55 | * [Show & Tell - SWArm of Apps](blog/show-and-tell) 56 | ::: 57 | 58 | ![Week 2 Roadmap](../../static/img/png/week2-roadmap.png) 59 | 60 | --- 61 | 62 | ## Developer Tools 63 | 64 | _Welcome to Week 3 - let's talk about the developer experience in building and deploying modern web apps. We'll introduce you to a few tools that can simplify your develop-debug-deploy-test workflows. While some are SWA-specific, others are useful for modern web app dev in general._ 65 | 66 | :::info Week 3 ARTICLES 67 | * [Develop - with Azure Tools](blog/devtools-azure) - 68 | * [Test Automation - with Playwright](blog/devtools-playwright) - 69 | * [Multi-Stage Deploy - with Azure DevOps](blog/devtools-ado) - 70 | * [Debug - with Edge DevTools](blog/devtools-msedge) - 71 | * [Develop - with SWA CLI](blog/devtools-swacli-develop) - 72 | * [Deploy - with SWA CLI](blog/devtools-swacli-deploy) - 73 | * [Run & Debug - with VS Code](blog/devtools-vscode) - 74 | ::: 75 | 76 | ![Week 3 Roadmap](../../static/img/png/week3-roadmap.png) 77 | 78 | --- 79 | 80 | ## Best Practices 81 | 82 | _We made it to the final week!! We've learned core concepts, seen examples of SWA in action, and explored tools to improve the developer experience. Now let's explore how SWA works with other Azure or third party services, and end with some tips and tricks to make your SWA development journey fun and functional!_ 83 | 84 | :::info Week 4 ARTICLES 85 | * [E2E Development - and SWA](https://www.azurestaticwebapps.dev/blog/practices-e2e) - a roadmap 86 | * [Cognitive Search - and SWA](https://www.azurestaticwebapps.dev/blog/practices-cognitive-search) - build a Searchable Catalog 87 | * [Cognitive Services - and SWA](https://www.azurestaticwebapps.dev/blog/practices-cognitive-services) - bring Custom Vision to your app 88 | * [KlipTok - and SWA](https://www.azurestaticwebapps.dev/blog/practices-case-study) - a real-world Case Study 89 | * [Azure Functions - and SWA](https://www.azurestaticwebapps.dev/blog/practices-byo-functions) - Bring Your Own Functions! 90 | * [Video Conferencing - and SWA](https://www.azurestaticwebapps.dev/blog/practices-cosmosdb) - integrate Azure Communication Services using SWA Auth and CosmosDB 91 | * [Full Stack - and SWA](https://www.azurestaticwebapps.dev/blog/practices-full-stack-react) - React/Redux front-end, Functions back-end and CosmosDB database (using Mongoose) 92 | ::: 93 | 94 | ![Week 4 Roadmap](../../static/img/png/week4-roadmap.png) 95 | 96 | 97 | --- 98 | 99 | ## Wrap-up 100 | 101 | :::success THANK YOU & NEXT STEPS 102 | Thank you for staying the course with us. In the final two posts of this series we'll do two things: 103 | * **Look Back** - with a quick retrospective of what was covered. 104 | * **Look Ahead** - with resources and suggestions for how you can skill up further! 105 | 106 | We appreciate your time and attention and we hope you found this curated tour valuable. Feedback and suggestions are always welcome. From our entire team, we wish you **good luck with the learning journey - now go build some apps and share your knowledge!** 🎉 107 | ::: 108 | 109 | 110 | ![Kickoff](../../static/img/series/29-banner.png) 111 | 112 | --- -------------------------------------------------------------------------------- /www/src/pages/roundup.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: This Month In SWA 3 | --- 4 | 5 | 6 | ## 💬 | Monthly Standup 7 | 8 | :::info | JOIN THE MONTHLY COMMUNITY STANDUP! 9 | 10 | Did you know the Azure Static Web Apps Team now hosts a monthly standup for the community on the **last Thursday** of each month? Join members of the Azure Static Web Apps team and their special guests as they cover key announcements and topics **LIVE!** and take your questions on chat! 11 | 12 | 🔗 [**https://aka.ms/swa/community/standups**](https://aka.ms/swa/community/standups) 13 | ::: 14 | 15 | **Watch the replay from the last standup** 16 | 17 | 18 | 19 | --- 20 | 21 | ## 🗓 | Monthly Roundup 22 | 23 | :::info Lets talk about #ThisMonthInSWA 24 | 25 | Welcome to **This Month In SWA** - a monthly roundup of [Azure Static Web Apps](https://docs.microsoft.com/azure/static-web-apps/overview) news and updates from the Product Team, Cloud & Student Advocacy - and from you, our amazing Developer Community. 26 | * Visit [**#ThisMonthInSWA**](/thismonth) to view past issues. 27 | * Subscribe to the [**RSS Feed**](/thismonth/rss.xml) to get new issues directly! 28 | ::: 29 | 30 | When we wrapped the [#30DaysOfSWA](roadmap) series in June 2022, we many of you continuing to stop by the site for content updates. There are many resources you can track individually: 31 | * Follow the [**#staticwebapps tag on dev.to**](https://dev.to/t/staticwebapps) for community posts 32 | * Follow the [**StaticWebApps topic on TechCommunity**](https://techcommunity.microsoft.com/t5/apps-on-azure-blog/bg-p/AppsonAzureBlog/label-name/Static%20Web%20Apps) for product team and advocacy posts 33 | * Follow the [**@AzureStaticApps handle on Twitter**](https://twitter.com/AzureStaticApps) for news on upcoming events & announcements 34 | 35 | But we thought it might help if we had a _round up_ of all the key news and content updates in a single montly post for convenient reading. That's the origin story for **#ThisMonthInSWA**. We hope to cover: 36 | 37 | * 🗓 | ** Events**: Past and Upcoming, featuring SWA talks or training opportunities. 38 | * 📢 | **Announcements**: Latest news or updates from the Product and Engineering teams. 39 | * 👀 | **Content Updates**: New articles, tutorials or samples authored by Microsoft developers. 40 | * 🐝 | **Community Buzz**: New articles, tutorials or samples authored by Community developers 41 | * 🌟 | **Spotlight**: Featuring a project or person that makes a difference to SWA developers. 42 | 43 | [**Click here to read the latest issue** 44 | ![](../../static/img/png/roundup/feb.png)](/thismonth/roundup-2023-feb) 45 | 46 | --- 47 | 48 | ## 🚀 | Content Collections 49 | 50 | :::info 🆕 LEARN WITH CONTENT COLLECTIONS 51 | 52 | Welcome to **[Content Collections](/collections)** - a new feature on this site that bundles a relevant set of posts or resources into a short collection that can help you skill up on a specific topic! 53 | * Bookmark [**the collections page**](/collections) and revisit it for updates 54 | * We will _spotlight_ new collections on #ThisMonthInSWA so [**subscribe to the RSS Feed**](https://www.azurestaticwebapps.dev/thismonth/rss.xml) 55 | ::: 56 | 57 | When we created the [#30DaysOfSWA](roadmap) series, we deliberately designed a content plan with _themed weeks_ focused on a specific topic. Now, we are packaging these into **collections** - short content bundles that provide a deep dive into a particular topic or theme, that you can reuse, refer to, or compose into custom roadmaps. 58 | 59 | We also realized this was a good way to provide a comprehensive _content bundle_ to skill you up on new features on their debut - giving you a way to go from the launch announcement, to the documentation, to new tutorials and video resources that enhance your understanding. 60 | 61 | 62 | [**Click here for the latest collection on: Database Connections** ![SWA Dab Launch](../../static/img/collections/dab/swa-dab-launch.png)](/collections/dab) 63 | 64 | --- 65 | 66 | ## 📣 | Call For Contributions 67 | 68 | **Have you built something recently you want to share**?
Use [**the custom issue**](https://github.com/staticwebdev/30DaysOfSWA/issues/new/choose) to submit your news, articles, or events, for consideration this month, or in future issues. We typically review submissions received at least 3 days ahead of our publication date. Accepted contributions may be published in the next roundup, or in a future roundup (if time or space constraints factor in). 69 | 70 | * Roundup Post: **Last Monday each month** 71 | * Standup Livestream: **Last Thursday each month.** 72 | 73 | --- 74 | -------------------------------------------------------------------------------- /www/src/pages/showcase.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Community Showcase 3 | --- 4 | 5 | ## Community Showcase 6 | 7 | We're working on a new **Community Showcase** site where you can discover real-world applications and code samples contributed by the developer community. You should be able to: 8 | * Filter by tags to see examples for specific front-end frameworks and static site generators 9 | * Filter by "open source" to see projects that have links to source code, for inspiration. 10 | * Add your project, to inspire others and celebrate your achievements! 11 | 12 | Here's a sneak peek at what that will look like. Stay tuned for more details. 13 | 14 | --- 15 | 16 | [![](../../static/img/png/swa-showcase.png)](https://microsoft.github.io/static-web-apps-gallery-code-samples/) -------------------------------------------------------------------------------- /www/static/.nojekyll: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/.nojekyll -------------------------------------------------------------------------------- /www/static/img/collections/dab/dab-walkthrough.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/collections/dab/dab-walkthrough.gif -------------------------------------------------------------------------------- /www/static/img/collections/dab/swa-dab-launch.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/collections/dab/swa-dab-launch.png -------------------------------------------------------------------------------- /www/static/img/collections/dab/swa-database-connections.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/collections/dab/swa-database-connections.png -------------------------------------------------------------------------------- /www/static/img/collections/dab/swa-sverdle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/collections/dab/swa-sverdle.png -------------------------------------------------------------------------------- /www/static/img/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/favicon.ico -------------------------------------------------------------------------------- /www/static/img/png/contoso-sketchnote.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/png/contoso-sketchnote.png -------------------------------------------------------------------------------- /www/static/img/png/logo-light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/png/logo-light.png -------------------------------------------------------------------------------- /www/static/img/png/roundup/apr.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/png/roundup/apr.png -------------------------------------------------------------------------------- /www/static/img/png/roundup/aug.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/png/roundup/aug.png -------------------------------------------------------------------------------- /www/static/img/png/roundup/blank.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/png/roundup/blank.png -------------------------------------------------------------------------------- /www/static/img/png/roundup/dec.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/png/roundup/dec.png -------------------------------------------------------------------------------- /www/static/img/png/roundup/feb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/png/roundup/feb.png -------------------------------------------------------------------------------- /www/static/img/png/roundup/jan.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/png/roundup/jan.png -------------------------------------------------------------------------------- /www/static/img/png/roundup/jul.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/png/roundup/jul.png -------------------------------------------------------------------------------- /www/static/img/png/roundup/jun.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/png/roundup/jun.png -------------------------------------------------------------------------------- /www/static/img/png/roundup/mar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/png/roundup/mar.png -------------------------------------------------------------------------------- /www/static/img/png/roundup/may.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/png/roundup/may.png -------------------------------------------------------------------------------- /www/static/img/png/roundup/nov.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/png/roundup/nov.png -------------------------------------------------------------------------------- /www/static/img/png/roundup/oct.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/png/roundup/oct.png -------------------------------------------------------------------------------- /www/static/img/png/roundup/sep.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/png/roundup/sep.png -------------------------------------------------------------------------------- /www/static/img/png/roundup/template.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/png/roundup/template.png -------------------------------------------------------------------------------- /www/static/img/png/roundup/tmis-banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/png/roundup/tmis-banner.png -------------------------------------------------------------------------------- /www/static/img/png/roundup/tmis-links.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/png/roundup/tmis-links.png -------------------------------------------------------------------------------- /www/static/img/png/swa-showcase.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/png/swa-showcase.png -------------------------------------------------------------------------------- /www/static/img/png/swanniversary.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/png/swanniversary.png -------------------------------------------------------------------------------- /www/static/img/png/this-month.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/png/this-month.png -------------------------------------------------------------------------------- /www/static/img/png/week1-roadmap.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/png/week1-roadmap.png -------------------------------------------------------------------------------- /www/static/img/png/week2-roadmap.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/png/week2-roadmap.png -------------------------------------------------------------------------------- /www/static/img/png/week3-roadmap.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/png/week3-roadmap.png -------------------------------------------------------------------------------- /www/static/img/png/week4-roadmap.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/png/week4-roadmap.png -------------------------------------------------------------------------------- /www/static/img/series/01-banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/series/01-banner.png -------------------------------------------------------------------------------- /www/static/img/series/01-swa-overview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/series/01-swa-overview.png -------------------------------------------------------------------------------- /www/static/img/series/01-ten-things.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/series/01-ten-things.png -------------------------------------------------------------------------------- /www/static/img/series/02-banner-glaucia.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/series/02-banner-glaucia.png -------------------------------------------------------------------------------- /www/static/img/series/02-banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/series/02-banner.png -------------------------------------------------------------------------------- /www/static/img/series/02-vanillajs-start.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/series/02-vanillajs-start.png -------------------------------------------------------------------------------- /www/static/img/series/03-banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/series/03-banner.png -------------------------------------------------------------------------------- /www/static/img/series/03-may4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/series/03-may4.png -------------------------------------------------------------------------------- /www/static/img/series/04-banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/series/04-banner.png -------------------------------------------------------------------------------- /www/static/img/series/05-banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/series/05-banner.png -------------------------------------------------------------------------------- /www/static/img/series/06-banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/series/06-banner.png -------------------------------------------------------------------------------- /www/static/img/series/07-banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/series/07-banner.png -------------------------------------------------------------------------------- /www/static/img/series/08-astro.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/series/08-astro.jpeg -------------------------------------------------------------------------------- /www/static/img/series/08-banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/series/08-banner.png -------------------------------------------------------------------------------- /www/static/img/series/09-banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/series/09-banner.png -------------------------------------------------------------------------------- /www/static/img/series/09-snowpack.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/series/09-snowpack.png -------------------------------------------------------------------------------- /www/static/img/series/10-banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/series/10-banner.png -------------------------------------------------------------------------------- /www/static/img/series/10-olympic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/series/10-olympic.png -------------------------------------------------------------------------------- /www/static/img/series/10-ombromanie.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/series/10-ombromanie.png -------------------------------------------------------------------------------- /www/static/img/series/10-posedance.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/series/10-posedance.png -------------------------------------------------------------------------------- /www/static/img/series/10-spacequest.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/series/10-spacequest.png -------------------------------------------------------------------------------- /www/static/img/series/11-banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/series/11-banner.png -------------------------------------------------------------------------------- /www/static/img/series/11-blog.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/series/11-blog.png -------------------------------------------------------------------------------- /www/static/img/series/11-commit.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/series/11-commit.png -------------------------------------------------------------------------------- /www/static/img/series/11-docs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/series/11-docs.png -------------------------------------------------------------------------------- /www/static/img/series/11-extension.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/series/11-extension.png -------------------------------------------------------------------------------- /www/static/img/series/11-landing.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/series/11-landing.png -------------------------------------------------------------------------------- /www/static/img/series/11-markdown.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/series/11-markdown.png -------------------------------------------------------------------------------- /www/static/img/series/11-reload.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/series/11-reload.png -------------------------------------------------------------------------------- /www/static/img/series/11-swa-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/series/11-swa-1.png -------------------------------------------------------------------------------- /www/static/img/series/11-swa-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/series/11-swa-2.png -------------------------------------------------------------------------------- /www/static/img/series/11-swa-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/series/11-swa-3.png -------------------------------------------------------------------------------- /www/static/img/series/11-swa-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/series/11-swa-4.png -------------------------------------------------------------------------------- /www/static/img/series/11-swa-5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/series/11-swa-5.png -------------------------------------------------------------------------------- /www/static/img/series/11-swa-browse.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/series/11-swa-browse.png -------------------------------------------------------------------------------- /www/static/img/series/11-swa-created.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/series/11-swa-created.png -------------------------------------------------------------------------------- /www/static/img/series/11-swa-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/series/11-swa-dark.png -------------------------------------------------------------------------------- /www/static/img/series/11-swa-deployed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/series/11-swa-deployed.png -------------------------------------------------------------------------------- /www/static/img/series/11-swa-light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/series/11-swa-light.png -------------------------------------------------------------------------------- /www/static/img/series/11-swa-plus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/series/11-swa-plus.png -------------------------------------------------------------------------------- /www/static/img/series/11-swa-sidebar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/series/11-swa-sidebar.png -------------------------------------------------------------------------------- /www/static/img/series/11-vscode.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/series/11-vscode.png -------------------------------------------------------------------------------- /www/static/img/series/12-banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/series/12-banner.png -------------------------------------------------------------------------------- /www/static/img/series/12-swa-fritz.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/series/12-swa-fritz.png -------------------------------------------------------------------------------- /www/static/img/series/12-swa-quickstart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/series/12-swa-quickstart.png -------------------------------------------------------------------------------- /www/static/img/series/12-swa-wordpress.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/series/12-swa-wordpress.png -------------------------------------------------------------------------------- /www/static/img/series/13-banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/series/13-banner.png -------------------------------------------------------------------------------- /www/static/img/series/13-pwa-30days.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/series/13-pwa-30days.jpg -------------------------------------------------------------------------------- /www/static/img/series/13-pwa-starter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/series/13-pwa-starter.png -------------------------------------------------------------------------------- /www/static/img/series/14-banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/series/14-banner.png -------------------------------------------------------------------------------- /www/static/img/series/14-codelabs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/series/14-codelabs.png -------------------------------------------------------------------------------- /www/static/img/series/14-recipeme.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/series/14-recipeme.png -------------------------------------------------------------------------------- /www/static/img/series/14-simona-stickers.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/series/14-simona-stickers.png -------------------------------------------------------------------------------- /www/static/img/series/15-banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/series/15-banner.png -------------------------------------------------------------------------------- /www/static/img/series/15-extensions.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/series/15-extensions.png -------------------------------------------------------------------------------- /www/static/img/series/16-banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/series/16-banner.png -------------------------------------------------------------------------------- /www/static/img/series/16-playwright.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/series/16-playwright.jpg -------------------------------------------------------------------------------- /www/static/img/series/17-banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/series/17-banner.png -------------------------------------------------------------------------------- /www/static/img/series/18-banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/series/18-banner.png -------------------------------------------------------------------------------- /www/static/img/series/19-banner.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/series/19-banner.jpeg -------------------------------------------------------------------------------- /www/static/img/series/19-banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/series/19-banner.png -------------------------------------------------------------------------------- /www/static/img/series/19-cli-banner-1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/series/19-cli-banner-1.jpeg -------------------------------------------------------------------------------- /www/static/img/series/19-cli-banner-2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/series/19-cli-banner-2.jpeg -------------------------------------------------------------------------------- /www/static/img/series/19-init.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/series/19-init.png -------------------------------------------------------------------------------- /www/static/img/series/20-banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/series/20-banner.png -------------------------------------------------------------------------------- /www/static/img/series/21-banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/series/21-banner.png -------------------------------------------------------------------------------- /www/static/img/series/22-banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/series/22-banner.png -------------------------------------------------------------------------------- /www/static/img/series/23-banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/series/23-banner.png -------------------------------------------------------------------------------- /www/static/img/series/24-banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/series/24-banner.png -------------------------------------------------------------------------------- /www/static/img/series/25-banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/series/25-banner.png -------------------------------------------------------------------------------- /www/static/img/series/26-banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/series/26-banner.png -------------------------------------------------------------------------------- /www/static/img/series/27-banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/series/27-banner.png -------------------------------------------------------------------------------- /www/static/img/series/28-banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/series/28-banner.png -------------------------------------------------------------------------------- /www/static/img/series/29-banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/series/29-banner.png -------------------------------------------------------------------------------- /www/static/img/series/30Days.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/series/30Days.png -------------------------------------------------------------------------------- /www/static/img/series/banner-kickoff.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/series/banner-kickoff.png -------------------------------------------------------------------------------- /www/static/img/series/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/series/banner.png -------------------------------------------------------------------------------- /www/static/img/series/roadmap.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/series/roadmap.png -------------------------------------------------------------------------------- /www/static/img/series/series-people.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/series/series-people.png -------------------------------------------------------------------------------- /www/static/img/series/w3d4/alttext.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/series/w3d4/alttext.png -------------------------------------------------------------------------------- /www/static/img/series/w3d4/colorpicker.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/series/w3d4/colorpicker.png -------------------------------------------------------------------------------- /www/static/img/series/w3d4/contrastratiolines.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/series/w3d4/contrastratiolines.gif -------------------------------------------------------------------------------- /www/static/img/series/w3d4/cssissue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/series/w3d4/cssissue.png -------------------------------------------------------------------------------- /www/static/img/series/w3d4/detachedelements-memory.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/series/w3d4/detachedelements-memory.png -------------------------------------------------------------------------------- /www/static/img/series/w3d4/detachedelements.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/series/w3d4/detachedelements.png -------------------------------------------------------------------------------- /www/static/img/series/w3d4/firstrun.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/series/w3d4/firstrun.png -------------------------------------------------------------------------------- /www/static/img/series/w3d4/install.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/series/w3d4/install.png -------------------------------------------------------------------------------- /www/static/img/series/w3d4/launchjson.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/series/w3d4/launchjson.png -------------------------------------------------------------------------------- /www/static/img/series/w3d4/mirror.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/series/w3d4/mirror.png -------------------------------------------------------------------------------- /www/static/img/series/w3d4/perftool.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/series/w3d4/perftool.png -------------------------------------------------------------------------------- /www/static/img/series/w3d4/sourceorder.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/series/w3d4/sourceorder.png -------------------------------------------------------------------------------- /www/static/img/series/w4d1/SWAF5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/series/w4d1/SWAF5.png -------------------------------------------------------------------------------- /www/static/img/series/w4d1/swaF1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/series/w4d1/swaF1.png -------------------------------------------------------------------------------- /www/static/img/series/w4d1/swaF3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/series/w4d1/swaF3.png -------------------------------------------------------------------------------- /www/static/img/series/w4d1/swaF4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/series/w4d1/swaF4.png -------------------------------------------------------------------------------- /www/static/img/series/w4d1/swaF6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/series/w4d1/swaF6.png -------------------------------------------------------------------------------- /www/static/img/series/w4d2/cognitive-search-enabled-book-website.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/series/w4d2/cognitive-search-enabled-book-website.png -------------------------------------------------------------------------------- /www/static/img/series/w4d2/visual-studio-code-search-extension-view-docs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/series/w4d2/visual-studio-code-search-extension-view-docs.png -------------------------------------------------------------------------------- /www/static/img/series/w4d3/kliptok-architecture-simplified.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/series/w4d3/kliptok-architecture-simplified.png -------------------------------------------------------------------------------- /www/static/img/series/w4d3/kliptok-dashboard.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/series/w4d3/kliptok-dashboard.png -------------------------------------------------------------------------------- /www/static/img/series/w4d3/kliptok-site.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/series/w4d3/kliptok-site.png -------------------------------------------------------------------------------- /www/static/img/series/w4d6/ACSSWA001.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/series/w4d6/ACSSWA001.jpg -------------------------------------------------------------------------------- /www/static/img/series/w4d6/ACSSWA002.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/series/w4d6/ACSSWA002.jpg -------------------------------------------------------------------------------- /www/static/img/series/w4d6/ACSSWA003.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/series/w4d6/ACSSWA003.jpg -------------------------------------------------------------------------------- /www/static/img/series/w4d6/ACSSWA004.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/series/w4d6/ACSSWA004.jpg -------------------------------------------------------------------------------- /www/static/img/svg/landing-action.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /www/static/img/svg/landing-anniversary.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /www/static/img/svg/landing-blocks.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /www/static/img/svg/landing-calendar.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /www/static/img/svg/landing-devtools.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /www/static/img/svg/landing-roundup.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /www/static/img/svg/landing-showcase.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /www/static/img/svg/landing-tips.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /www/static/img/svg/logo-swa.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /www/static/img/svg/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /www/static/img/tutorial/docsVersionDropdown.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/tutorial/docsVersionDropdown.png -------------------------------------------------------------------------------- /www/static/img/tutorial/localeDropdown.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/img/tutorial/localeDropdown.png -------------------------------------------------------------------------------- /www/static/orig/week1-roadmap.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/orig/week1-roadmap.png -------------------------------------------------------------------------------- /www/static/orig/week2-roadmap.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/orig/week2-roadmap.png -------------------------------------------------------------------------------- /www/static/orig/week3-roadmap.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/orig/week3-roadmap.png -------------------------------------------------------------------------------- /www/static/orig/week4-roadmap.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/staticwebdev/30DaysOfSWA/077754842aca7e84066c82b024d422e5a58d30a2/www/static/orig/week4-roadmap.png -------------------------------------------------------------------------------- /www/tests/Test.README.md: -------------------------------------------------------------------------------- 1 | # Testing 2 | 3 | To run tests run `npm run playwright_test`. Note tests are in the `www` directory so the `playwright` workflow runs from the `www` directory. -------------------------------------------------------------------------------- /www/tests/playwright.spec.ts: -------------------------------------------------------------------------------- 1 | import { test, expect } from '@playwright/test'; 2 | 3 | //checks to see if at least 1 of the h3s contains the text #30DaysOfSWA 4 | test('#30DaysOfSWA test', async ({ page }) => { 5 | await page.goto('/'); 6 | await page.waitForSelector('h3'); 7 | const elements = await page.$$("h3"); 8 | var hasText = false 9 | await Promise.all(elements.map(async (e)=>{ 10 | const text = await e.innerText(); 11 | if(text== '#30DaysOfSWA'){ 12 | hasText = true; 13 | } 14 | })) 15 | await expect(hasText).toEqual(true); 16 | }) --------------------------------------------------------------------------------