Course creation
Process
Secure the code base - https://github.com/j143/openmined
Find a development environment
Mentally be prepared for the quantum of time required to complete this project
Components - Sanity CMS - yarn - Firebase
Know the components may not work out-of-the box
The course content is not yet created.
Checklist

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

Auxiliary tools
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
Goto https://console.firebase.google.com/project/onevara-courses/settings/general Create a web app to receive the following credentials.
Database creation

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
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 import data
.https://www.sanity.io/docs/importing-data
sanity dataset import <file.ndjson> <targetDataset>
Course content schema

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

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".
=== 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
yarn dev:docs
An error occured while attempting to reach the Sanity API.
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
Create design tutorials, and courses
make sanity work
Last updated
Was this helpful?