Go to file
Nabarun Gogoi 72f1abcdf6
Add CI to test web app deployment and undeployment (#174)
* Add a script to deploy test records

* Add checks for ApplicationDeploymentRecord and the deployment URL

* Add a CI workflow to run the app deployment test

* Update test deployment request record config

* Add test for deployment removal

* Update test deployment request record

* Increase max retries

* Add retries when checking if URL is up or down

* Rename test script

* Run webapp deployment test CI on PR

* Remove unnecessary jq installation step from CI

* Revert "Run webapp deployment test CI on PR"

This reverts commit 01f373501a.

* Add a step for Slack alerts on a CI failure

* Add a workflow dispatch for manual trigger

* Update workflow title and remove trigger on main

* Document deployment test setup

---------

Co-authored-by: Prathamesh Musale <prathamesh.musale0@gmail.com>
2024-04-15 14:10:59 +05:30
.github/workflows Add CI to test web app deployment and undeployment (#174) 2024-04-15 14:10:59 +05:30
.husky Add husky to run pre-commit lint (#3) 2023-12-08 09:59:45 +05:30
.vscode Project Deployments - Deployed line items (#147) 2024-03-01 10:05:50 +05:45
packages Add CI to test web app deployment and undeployment (#174) 2024-04-15 14:10:59 +05:30
scripts Switch from cra to vite 2024-04-11 21:48:58 -05:00
.gitignore Add deployer package for frontend app (#123) 2024-02-27 11:52:05 +05:30
.node-version Switch from cra to vite 2024-04-11 21:48:58 -05:00
.npmrc Publish app deployment record in Laconic registry on creating new deployments (#62) 2024-02-12 11:34:01 +05:30
build-webapp.sh Remove check for .env in build script (#144) 2024-02-29 12:51:32 +05:30
lerna.json Add husky to run pre-commit lint (#3) 2023-12-08 09:59:45 +05:30
package.json Lint using tsc; fix type errors 2024-04-11 21:49:14 -05:00
README.md Update README.md 2024-02-29 21:59:41 -07:00
yarn.lock Not yet 2024-04-11 21:59:33 -05:00

snowballtools-base

Setup

  • Clone the snowballtools-base repo

    git clone git@github.com:snowball-tools/snowballtools-base.git
    cd snowballtools-base
    
  • Install dependencies in root

    yarn
    
  • Build packages

    yarn build --ignore frontend
    

Let us assume the following domains for backend and frontend

  • Backend server: api.snowballtools.com

  • Frontend app: dashboard.snowballtools.com

  • Configuration Files

    • For Backend:

      cp packages/backend/environments/local.toml.example packages/backend/environments/local.toml
      
      • Production

        • Update the following in backend config file

          [server]
            ...
            [server.session]
              # Secret should be changed to a different random string
              secret = "p4yfpkqnddkui2iw7t6hbhwq74lbqs7sidnc382"
              # Set URL of the frontend app
              appOriginUrl = "https://dashboard.snowballtools.com"
              # Set to true for session cookies to work behind proxy
              trustProxy = true
              # Set empty domain when using secure connection
              domain = ""
          
        • Set gitHub.oAuth.clientId and gitHub.oAuth.clientSecret in backend config file

          • OAuth App Creation
            • Homepage URL: https://dashboard.snowballtools.com
            • Authorization callback URL: https://dashboard.snowballtools.com/organization/projects/create
            • Generate a new client secret after app is created
        • Set gitHub.webhookUrl in backend config file

          [gitHub]
            webhookUrl = "https://api.snowballtools.com"
          
        • Let us assume domain for Laconicd to be api.laconic.com and set the following in backend config file

          [registryConfig]
            fetchDeploymentRecordDelay = 5000
            # Use actual port for REST endpoint
            restEndpoint = "http://api.laconic.com:1317"
            # Use actual port for GQL endpoint
            gqlEndpoint = "http://api.laconic.com:9473/api"
            # Set private key of account to be used in Laconicd
            privateKey = "0wtu92cd4f1y791ezpjwgzzazni4dmd3q3mzqc3t6i6r9v06ji784tey6hwmnn69"
            # Set Bond ID to be used for publishing records
            bondId = "8xk8c2pb61kajwixpm223zvptr2x2ncajq0vd998p6aqhvqqep2reu6pik245epf"
            chainId = "laconic_9000-1"
            # Set authority that is existing in the chain
            authority = "laconic"
            [registryConfig.fee]
              amount = "200000"
              denom = "aphoton"
              gas = "750000"
          
      • Development

        • Set gitHub.oAuth.clientId and gitHub.oAuth.clientSecret in backend config file

          • OAuth App Creation
            • Homepage URL: http://localhost:3000
            • Authorization callback URL: http://localhost:3000/organization/projects/create
            • Generate a new client secret after app is created
        • Setup Laconicd

          • Run the laconicd stack following this doc

          • Get the private key and set registryConfig.privateKey in backend config file

            laconic-so --stack fixturenet-laconic-loaded deploy exec laconicd "laconicd keys export mykey --unarmored-hex --unsafe"
            # WARNING: The private key will be exported as an unarmored hexadecimal string. USE AT YOUR OWN RISK. Continue? [y/N]: y
            # 754cca7b4b729a99d156913aea95366411d072856666e95ba09ef6c664357d81
            
          • Get the REST and GQL endpoint ports of Laconicd and replace the ports for registryConfig.restEndpoint and registryConfig.gqlEndpoint in backend config file

            # For registryConfig.restEndpoint
            laconic-so --stack fixturenet-laconic-loaded deploy port laconicd 1317
            # 0.0.0.0:32777
            
            # For registryConfig.gqlEndpoint
            laconic-so --stack fixturenet-laconic-loaded deploy port laconicd 9473
            # 0.0.0.0:32771
            
          • Set authority in registryConfig.authority in backend config file

          • Run the script to create bond, reserve the authority and set authority bond

            yarn test:registry:init
            # snowball:initialize-registry bondId: 6af0ab81973b93d3511ae79841756fb5da3fd2f70ea1279e81fae7c9b19af6c4 +0ms
            
            • Get the bond id and set registryConfig.bondId in backend config file
        • Setup ngrok for GitHub webhooks

          • ngrok getting started

          • Start ngrok and point to backend server endpoint

            ngrok http http://localhost:8000
            
          • Look for the forwarding URL in ngrok

            Forwarding                    https://19c1-61-95-158-116.ngrok-free.app -> http://localhost:8000
            
          • Set gitHub.webhookUrl in backend config file

            [gitHub]
              webhookUrl = "https://19c1-61-95-158-116.ngrok-free.app"
            
    • For Frontend:

      cp packages/frontend/.env.example packages/frontend/.env
      
      • Copy the GitHub OAuth app client ID from previous steps and set it in frontend .env file

        REACT_APP_GITHUB_CLIENT_ID = <CLIENT_ID>
        
      • Set REACT_APP_GITHUB_PWA_TEMPLATE_REPO and REACT_APP_GITHUB_IMAGE_UPLOAD_PWA_TEMPLATE_REPO in .env file

        REACT_APP_GITHUB_PWA_TEMPLATE_REPO = 'cerc-io/test-progressive-web-app'   # Set actual owner/name of the template repo that will be used for creating new repo
        REACT_APP_GITHUB_IMAGE_UPLOAD_PWA_TEMPLATE_REPO = 'cerc-io/image-upload-pwa-example'  # Set actual owner/name of the template repo that will be used for creating new repo
        
      • Production

        • Set the following values in .env file

          REACT_APP_SERVER_URL = 'https://api.snowballtools.com'   # Backend server endpoint
          
        • Sign in to wallet connect to create a project ID

          • Create a project and add information to use wallet connect SDK
            • Add project name and select project type as App
            • Set project home page URL to https://dashboard.snowballtools.com
          • On creation of project, use the Project ID and set it in REACT_APP_WALLET_CONNECT_ID in .env file
          REACT_APP_WALLET_CONNECT_ID = <PROJECT_ID>
          
        • Build the React application

          yarn build
          
        • Use a web server for hosting static built files

          python3 -m http.server -d build 3000
          
      • Development

        • Copy the graphQL endpoint from terminal and add the endpoint in the .env file present in packages/frontend

          REACT_APP_SERVER_URL = 'http://localhost:8000'
          
        • Sign in to wallet connect to create a project ID.

          • Create a project and add information to use wallet connect SDK
            • Add project name and select project type as App
            • Project home page URL is not required to be set
          • On creation of project, use the Project ID and set it in REACT_APP_WALLET_CONNECT_ID in .env file
          REACT_APP_WALLET_CONNECT_ID = <Project_ID>
          
        • The React application will be running in http://localhost:3000/

Development

  • Start the backend server

    yarn start:backend
    
  • Start the frontend

    yarn start