Go to file
Vivian Phung 5f5b0a4d4f
[2/n][Storybook] Move AuthHeader Stories (#21)
### TL;DR

This pull request refactors the directory structure of the `AuthHeader` component, moving it to the `Pages/Auth` directory. The meta property's attributes were also refined.

### What changed?

The `AuthHeader` component and its story were relocated from the `packages/frontend/src/stories/` directory to the `packages/frontend/src/stories/Pages/Auth/` directory. The title in the meta property has been updated to `Pages/Auth/Header`. The previously explicit assertion that meta satisfies `Meta<typeof Header>` has been removed, making the type assertion implicit.

### How to test?

To test these changes, navigate to the new directory and any references associated with `AuthHeader` component, verify that the software builds successfully, and confirm that Storybook correctly displays the AuthHeader story.

### Why make this change?

This change improves the organization of the codebase by categorizing components into functionally relevant directories. This allows for better management and scalability of the code. Additionally, the adjustments made to the component's metadata in Storybook makes the documentation easier to understand.
2024-05-14 15:28:35 -04:00
.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 Badges 2024-05-14 19:26:48 +00:00
scripts Switch from cra to vite 2024-04-11 21:48:58 -05:00
.gitignore update gitignore for build output 2024-05-06 13:02:37 -04:00
.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 fix: use correct output directory for build 2024-04-23 09:43:52 -04:00
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 storybook 2024-05-09 16:22:03 -04: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