Course creation

Process

1. Secure the code base - https://github.com/j143/openmined

2. Find a development environment

3. Mentally be prepared for the quantum of time required to complete this project

4. Components - Sanity CMS - yarn - Firebase

5. Know the components may not work out-of-the box

6. The course content is not yet created.

7. link https://courses.onevara.com

Checklist

• Frontend working fine

• Sanity configuration

• Firebase api

• Cypress - https://on.cypress.io/required-dependencies

Course dashboard

Course content - https://github.com/OpenMined/openmined/blob/dev/apps/courses-e2e/src/integration/courses.spec.ts#L96

Auxiliary tools

1. nx - https://nx.dev/latest/node/getting-started/cli-overview

Configuration

.local.env

NX_FIREBASE_API_KEY=AIzaSyCsgXp-0CkvWsc-iTcO5PmbkU6F-_R8MPY
NX_FIREBASE_AUTH_DOMAIN=openmined-org-dev.firebaseapp.com
NX_FIREBASE_DATABASE_URL=https://openmined-org-dev.firebaseio.com
NX_FIREBASE_PROJECT_ID=openmined-org-dev
NX_FIREBASE_STORAGE_BUCKET=openmined-org-dev.appspot.com
NX_FIREBASE_MESSAGING_SENDER_ID=466298787757
NX_FIREBASE_APP_ID=1:466298787757:web:c9e0cc241b34835d7df324
NX_FIREBASE_MEASUREMENT_ID=G-PQ5T6T7932

NX_SANITY_COURSES_PROJECT_ID=rzeg7i8f
NX_SANITY_COURSES_DATASET=development

.env

NX_FIREBASE_API_KEY=AIzaSyC4B2McdAHd8NsRWhFJUO5Ho9fzp4MY5Co
NX_FIREBASE_AUTH_DOMAIN=openmined-org.firebaseapp.com
NX_FIREBASE_DATABASE_URL=https://openmined-org.firebaseio.com
NX_FIREBASE_PROJECT_ID=openmined-org
NX_FIREBASE_STORAGE_BUCKET=openmined-org.appspot.com
NX_FIREBASE_MESSAGING_SENDER_ID=430689683505
NX_FIREBASE_APP_ID=1:430689683505:web:3a1be74e07cad9ab712d10
NX_FIREBASE_MEASUREMENT_ID=G-EC9MJ6CP8X

NX_SANITY_COURSES_PROJECT_ID=rzeg7i8f
NX_SANITY_COURSES_DATASET=production

1. Goto https://console.firebase.google.com/project/onevara-courses/settings/general Create a web app to receive the following credentials.

2. Database creation

   • Database creation

   • https://console.firebase.google.com/project/onevara-courses/firestore

   • Which database to choose - https://firebase.google.com/docs/database/rtdb-vs-firestore?authuser=0

   • Cloud firestore location

   • Create index - https://firebase.google.com/docs/firestore/query-data/indexing?authuser=0#create_a_missing_index_through_an_error_message

Firestore configuration

for .env

var firebaseConfig = {
    apiKey: "AIzaSyD5cPfaE4y6UNUCJBJvGgkfTTKF3PNdWwo",
    authDomain: "onevara-courses.firebaseapp.com",
    projectId: "onevara-courses",
    storageBucket: "onevara-courses.appspot.com",
    messagingSenderId: "561704292197",
    appId: "1:561704292197:web:78633a0f954452b0b79b8c",
    measurementId: "G-B2S733DPKH"
  };

NX_FIREBASE_API_KEY=AIzaSyD5cPfaE4y6UNUCJBJvGgkfTTKF3PNdWwo
NX_FIREBASE_AUTH_DOMAIN=onevara-courses.firebaseapp.com
NX_FIREBASE_DATABASE_URL=https://onevara-courses.firebaseio.com
NX_FIREBASE_PROJECT_ID=onevara-courses
NX_FIREBASE_STORAGE_BUCKET=onevara-courses.appspot.com
NX_FIREBASE_MESSAGING_SENDER_ID=561704292197
NX_FIREBASE_APP_ID=1:561704292197:web:78633a0f954452b0b79b8c
NX_FIREBASE_MEASUREMENT_ID=G-B2S733DPKH

NX_SANITY_COURSES_PROJECT_ID=x6ltnsla

for .local.env

  var firebaseConfig = {
    apiKey: "AIzaSyAbgi1VBJV1dC0n55EmVoKUHYsZg-eNwd4",
    authDomain: "onevara-courses-dev.firebaseapp.com",
    projectId: "onevara-courses-dev",
    storageBucket: "onevara-courses-dev.appspot.com",
    messagingSenderId: "1079044769160",
    appId: "1:1079044769160:web:e803eb87a5547b1bc9263d",
    measurementId: "G-RYMK55S6QK"
  };


NX_FIREBASE_API_KEY=AIzaSyAbgi1VBJV1dC0n55EmVoKUHYsZg-eNwd4
NX_FIREBASE_AUTH_DOMAIN=onevara-courses-dev.firebaseapp.com
NX_FIREBASE_DATABASE_URL=https://onevara-courses-dev.firebaseio.com
NX_FIREBASE_PROJECT_ID=onevara-courses-dev
NX_FIREBASE_STORAGE_BUCKET=onevara-courses-dev.appspot.com
NX_FIREBASE_MESSAGING_SENDER_ID=1079044769160
NX_FIREBASE_APP_ID=1:1079044769160:web:e803eb87a5547b1bc9263d
NX_FIREBASE_MEASUREMENT_ID=G-RYMK55S6QK

NX_SANITY_COURSES_PROJECT_ID=x6ltnsla

Code

Sanity

sanity.json

{
  "root": true,
  "project": {
    "name": "Courses"
  },
  "api": {
    "projectId": "rzeg7i8f",
    "dataset": "production"
  },
  "plugins": [
    "@sanity/base",
    "@sanity/components",
    "@sanity/default-layout",
    "@sanity/default-login",
    "@sanity/desk-tool",
    "intl-input",
    "media"
  ],
  "env": {
    "development": {
      "api": {
        "dataset": "development"
      },
      "plugins": [
        "@sanity/vision"
      ]
    }
  },
  "parts": [
    {
      "name": "part:@sanity/base/schema",
      "path": "./schemas"
    },
    {
      "name": "part:@sanity/desk-tool/structure",
      "path": "./desk-structure.ts"
    }
  ]
}

yarn start sanity-api

Update projectId to x6ltnsla.

Sanity studio

Sanity import data

.https://www.sanity.io/docs/importing-data

sanity dataset import <file.ndjson> <targetDataset>

Course content schema

folder structure for sanity cms

Sanity errors

yarn build firebase-api

Firebase

firebase.json

name	Type of entity
onevara-courses	Organization name
onevara-courses-dev	Organization name
onevara-education	App nickname
onevara-education-dev	App nickname

{
  "firestore": {
    "rules": "apps/firebase-api/firestore.rules",
    "indexes": "apps/firebase-api/firestore.indexes.json"
  },
  "functions": {
    "source": "/"
  },
  "hosting": [
    {
      "target": "openmined-education",
      "public": "dist/apps/courses",
      "rewrites": [
        {
          "source": "**",
          "destination": "/index.html"
        }
      ]
    },
    {
      "target": "openmined-education-dev",
      "public": "dist/apps/courses",
      "rewrites": [
        {
          "source": "**",
          "destination": "/index.html"
        }
      ]
    }
  ],
  "storage": {
    "rules": "apps/firebase-api/storage.rules"
  },
  "emulators": {
    "auth": {
      "port": 5500
    },
    "functions": {
      "port": 5501
    },
    "firestore": {
      "port": 5502
    },
    "ui": {
      "enabled": true
    }
  }
}

yarn test firebase-api

.https://firebase.google.com/docs/cli#the_firebasejson_file

.https://firebase.google.com/docs/cli/targets#configure_your_firebasejson_file_to_use_deploy_targets

.https://firebase.google.com/docs/functions/manage-functions#deploy_functions

Region

issue related to region europe-west1

firebase deploy --only hosting:onevara-education
firebase deploy --only functions:onevara-education

Firebase deployment

Change the .env credentials to that of .local.env still the same error

$ firebase deploy --only "functions,firestore:rules,storage"
!  functions: package.json indicates an outdated version of firebase-functions.
Please upgrade using npm install --save firebase-functions@latest in your functions directory.

=== Deploying to 'onevara-courses-dev'...

i  deploying storage, firestore, functions


There was an issue deploying your functions. Verify that your project has a Google App Engine instance setup at https://console.cloud.google.com/appengine and try again. If this issue persists, please contact support.

Error: HTTP Error: 404, Could not find Application "onevara-courses-dev".

firebase deploy -P onevara-courses-dev

=== Deploying to 'onevara-courses-dev'...

i  deploying storage, firestore, functions, hosting


There was an issue deploying your functions. Verify that your project has a Google App Engine instance setup at https://console.cloud.google.com/appengine and try again. If this issue persists, please contact support.

Error: HTTP Error: 404, Could not find Application "onevara-courses-dev".

Based on the error message https://console.firebase.google.com/project/onevara-courses-dev/firestore/ has been created in us-central.

Collection

Nodejs API

.https://googleapis.dev/nodejs/firestore/latest/DocumentReference.html

Cypress

 yarn e2e courses-e2e

Billing

.https://console.firebase.google.com/project/onevara-courses/usage/details

Errors

1 Uncaught TypeError

Uncaught TypeError: data.sort is not a function
    at push../routes/homepage/Learn.tsx.__webpack_exports__.default (/main.js:8811)
    at renderWithHooks (/vendor.js:115827)
    at updateFunctionComponent (/vendor.js:118198)
    at beginWork (/vendor.js:119905)
    at HTMLUnknownElement.callCallback (/vendor.js:104787)
    at Object.invokeGuardedCallbackDev (/vendor.js:104836)
    at invokeGuardedCallback (/vendor.js:104898)
    at beginWork$1 (/vendor.js:124801)
    at performUnitOfWork (/vendor.js:123616)
    at workLoopSync (/vendor.js:123544)

// webpack:////workspace/onevara/libs/shared/data-access-sanity/src/index.tsx
export const useSanity = (query) => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  const { client } = useContext(SanityContext);

  const prepareData = (d) => {
    Object.keys(d).forEach((i) => {
      const elem = d[i];

      // Make sure we convert all breaking spaces to <br /> tags
      if (typeof elem === 'string' && elem.includes('\n')) {
        d[i] = (
          <span
            dangerouslySetInnerHTML={{
              __html: elem.split('\n').join('<br />'),
            }}
          />
        );
      }
    });

    return d;
  };

2 React will try to recreate this component tree

from scratch using the error boundary you provided, ErrorBoundary. logCapturedError @ vendor.js:120927

vendor.js:120927 The above error occurred in one of your React components:

    at push../routes/homepage/Learn.tsx.__webpack_exports__.default (https://onevara-education.web.app/main.js:8803:3)
    at push.../../../libs/shared/util-page/src/index.tsx.__webpack_exports__.default (https://onevara-education.web.app/main.js:366:5)
    at div
    at https://onevara-education.web.app/vendor.js:31696:73
    at RouteWrapper (https://onevara-education.web.app/main.js:9275:13)
    at D (https://onevara-education.web.app/vendor.js:132094:673)
    at E (https://onevara-education.web.app/vendor.js:132097:804)
    at Suspense
    at SuspenseWithPerf (https://onevara-education.web.app/vendor.js:136028:23)
    at x (https://onevara-education.web.app/vendor.js:132096:23)
    at App (https://onevara-education.web.app/main.js:607:85)
    at ErrorBoundary (https://onevara-education.web.app/vendor.js:58213:47)
    at ErrorBoundary (https://onevara-education.web.app/main.js:1962:1)
    at SEOProvider (https://onevara-education.web.app/main.js:359:3)
    at ColorModeProvider (https://onevara-education.web.app/vendor.js:2997:5)
    at ThemeProvider (https://onevara-education.web.app/vendor.js:31730:71)
    at ChakraProvider (https://onevara-education.web.app/vendor.js:17385:5)
    at r (https://onevara-education.web.app/vendor.js:129077:5327)
    at FirebaseAppProvider (https://onevara-education.web.app/vendor.js:135615:32)
    at WrappedApp

3 Can't perform a React state update

vendor.js:100909 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
    at push../routes/homepage/Learn.tsx.__webpack_exports__.default (https://onevara-education.web.app/main.js:8803:3)
    at push.../../../libs/shared/util-page/src/index.tsx.__webpack_exports__.default (https://onevara-education.web.app/main.js:366:5)
    at div
    at https://onevara-education.web.app/vendor.js:31696:73
    at RouteWrapper (https://onevara-education.web.app/main.js:9275:13)
    at D (https://onevara-education.web.app/vendor.js:132094:673)
    at E (https://onevara-education.web.app/vendor.js:132097:804)
    at Suspense
    at SuspenseWithPerf (https://onevara-education.web.app/vendor.js:136028:23)
    at x (https://onevara-education.web.app/vendor.js:132096:23)
    at App (https://onevara-education.web.app/main.js:607:85)

4 Signup or signin error

This is due to development server using .local.env and pinging with development projectId.

5 Sanity is not yet connected

data received from

https://firestore.googleapis.com/google.firestore.v1.Firestore/Listen/channel?database=projects%2Fonevara-courses%2Fdatabases%2F(default)&gsessionid=_bUTEJirdogmUzE0uwJeDAdhRtPSNKoZp0zKiTWXGb0&VER=8&RID=rpc&SID=YBZ06ScVEIwtB4bWMWa2UQ&CI=0&AID=33&TYPE=xmlhttp&zx=9usy97on9ofu&t=1

is

29
[[34,["noop"]],[35,["noop"]]]

6 Property '_path' does not exist on type ' '

TS2551: Property '_path' does not exist on type 'DocumentReference<DocumentData>'

Possible solution could be https://firebase.google.com/docs/functions/beta-v1-diff

Errors2

.https://github.com/sanity-io/design/blob/next/CONTRIBUTING.md

1. yarn dev:docs

An error occured while attempting to reach the Sanity API.

1. Unable to build sanity ui project documentation

Lint

.https://eslint.org/docs/user-guide/getting-started

yarn add eslint --dev
yarn run eslint --init

.https://eslint.org/docs/user-guide/configuring/

Updates

Add seed data to firestore firebase

Resources. how do I seed data to firebase firestore

Check that queries are functioning as intended.

# queries.ts
# Sanity Query for homepageCourses
*[_type == "course"] {

  visual {
    "default": default.asset -> url,
    "full": full.asset -> url
  },
}

# output

{"ms":328,"query":"*[_type == \"course\"] { visual { \"default\": default.asset -\u003e url, \"full\": full.asset -\u003e url }, }","result":[{"visual":{"default":"https://cdn.sanity.io/images/x6ltnsla/production/da22bd244116b6f11efaec65e71273a1149b5804-299x106.png"}},{}]}

Keep the fork up to date with the OS repository

git fetch https://github.com/openmined/openmined dev
git merge https://github.com/openmined/openmined dev

TODO

1. Create design tutorials, and courses

2. make sanity work