narikenabilli / reactjs-webapp-functions

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Welcome to the React.js and serverless accelerator

Archictecture Overview

This accelerator implements a node.js (Express) webapp with a React.js frontend, hosted as an Azure Web app backed by a PostgreSQL database. Events from the React.js site will invoke background functions implemented as Azure Functions and invoke a webhook in Teams.

NOTE: Check below for required secrets and changes to get started

To get started, simply open the repository in Codespaces and start debugging. This is possible because the accelerator has a development environment defined in a container (a .devcontainer). There are database migration and seed data processes configured to run when your devcontainer starts, so expect some data to show up.

The webapp has a single model and route implemented. You can simply go ahead and add your business model and logic to the app.

Most of the routines you would want to run when developing are implemeted as make targets, so simply invoke 'make build' to build the application, or use VS Code tasks to run 'make test' - and checkout the testing framework implemented.

On checkins, the app builds and a Porter bundle is being created and pushed to a registry (To be implemented in #11).

In order to deploy the application and all the required resources, checkin a change to an environment file (To be implemented #11). The environment file also includes all the parameters used for that deployment.

Required to get started

  1. Setup an ARC-enabled Kubernetes cluster, by following these instructions. The src/arc/lima-setup.sh script can help, but check the setup instructions in the above link, as these change frequently.

  2. Enable CNAB bundle support in GitHub

    1. Follow this guide to enable support for CNAB on GitHub
  3. Set following deployment time parameters as GitHub secrets

    Parameter GitHub Secret Description
    Teams Webhook TEAMS_WEBHOOK_URL Create a Team Channel and add an Incoming Webhook connector.
    Package admin PACKAGE_ADMIN Create a personal access token with 'write:packages' permissions and save the value to this secret
    Azure credentials AZURE_CREDENTIALS az login -o none && az ad sp create-for-rbac --role contributor --sdk-auth
    Postgres admin password POSTGRES_DB_ADMIN_PASSWORD Configure what postgres database admin password you want to use - more info by saving the password to a GitHub Secrets name
  4. Check the environment.yaml file. For ARC deployments, ensure to include the correct App Service Environment to use. The syntax is commented in the file.

  5. Run the build workflow, this will eventually kick-off the deployment workflow as well.

About


Languages

Language:JavaScript 29.4%Language:Bicep 27.3%Language:Shell 25.3%Language:Dockerfile 5.9%Language:TypeScript 3.9%Language:HTML 3.0%Language:Makefile 2.9%Language:CSS 2.3%Language:Pug 0.1%