Go to file
2024-03-06 09:02:02 +08:00
.github/workflows Add github CI for running lint (#5) 2023-12-11 12:04:33 +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 Merge pull request #155 from snowball-tools/andrehadianto/T-4940-project-overview-mobile-layout 2024-03-06 09:02:02 +08:00
.gitignore Add deployer package for frontend app (#123) 2024-02-27 11:52:05 +05:30
.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 Update instructions and general package cleanup (#29) 2024-02-01 11:37:57 +05:30
README.md Merge branch 'main' of github.com:snowball-tools/snowballtools-base into designsystem 2024-02-26 17:44:42 -05:00
yarn.lock ⚒️ build: add usehooks-ts 2024-03-05 14:16:54 +08:00

snowballtools-base

Setup

  • Clone the snowballtools-base repo

    git clone git@github.com:snowball-tools/snowballtools-base.git
    
  • In root of the repo, install depedencies

    yarn
    
  • Build packages

    yarn build --ignore frontend
    

Backend

  • Change directory to packages/backend

    cd packages/backend
    
  • Rename backend config file from environments/local.toml.example to local.toml

    mv environments/local.toml.example environments/local.toml
    
  • Set gitHub.oAuth.clientId and gitHub.oAuth.clientSecret in backend config file

    • Client ID and secret will be available after creating an OAuth app
      • In "Homepage URL", type http://localhost:3000
      • In "Authorization callback URL", type http://localhost:3000/organization/projects/create
      • Generate a new client secret after app is created

Backend Production

  • Let us assume the following domains for backend and frontend

    • Backend server: api.snowballtools.com
    • Frontend app: dashboard.snowballtools.com
  • 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

    • Client ID and secret will be available after creating an OAuth app
      • In "Homepage URL", type https://dashboard.snowballtools.com
      • In "Authorization callback URL", type 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"
    ...
    
  • Start the server in packages/backend

    yarn start
    

Backend Development

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

    • Client ID and secret will be available after creating an OAuth app
      • In "Homepage URL", type http://localhost:3000
      • In "Authorization callback URL", type 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"
      ...
      
  • Start the server in packages/backend

    yarn start:dev
    

Frontend

  • Change directory to packages/frontend in a new terminal

    cd packages/frontend
    
  • Rename .env.example to .env

    mv .env.example .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

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

Frontend Production

  • Let us assume the following domains for backend and frontend

    • Backend server: api.snowballtools.com
    • Frontend app: dashboard.snowballtools.com
  • Set the following values in .env file

    # Backend server endpoint
    REACT_APP_SERVER_URL = 'https://api.snowballtools.com'
    
  • 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
    

Frontend 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>
    
  • Start the React application

    yarn start
    
  • The React application will be running in http://localhost:3000/