Page Not Found
We could not find what you were looking for.
Please contact the owner of the site that linked you to the original URL and let them know their link is broken.
We could not find what you were looking for.
Please contact the owner of the site that linked you to the original URL and let them know their link is broken.
richie-education",id:"installing-richie-education",level:2},{value:"Building the Javascript bundle",id:"building-the-javascript-bundle",level:2},{value:"Building the CSS",id:"building-the-css",level:2}];function l(e){const n={code:"code",h2:"h2",li:"li",p:"p",pre:"pre",ul:"ul",...(0,o.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.p,{children:"Richie offers plenty of opportunities to customize the way it works and make it suit the needs of your own project. Most of these go through Django settings."}),"\n",(0,t.jsx)(n.p,{children:"Part of Richie is a React frontend however. If you want to change how it works in ways that cannot be changed from the Django settings, you will need to build your own frontend."}),"\n",(0,t.jsxs)(n.h2,{id:"installing-richie-education",children:["Installing ",(0,t.jsx)(n.code,{children:"richie-education"})]}),"\n",(0,t.jsx)(n.p,{children:"If you have not already, you should create a directory for the frontend in your project. We recommend you mirror Richie's file structure so it's easier to keep track of the changes you make."}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-bash",children:"mkdir -p src/frontend\n"})}),"\n",(0,t.jsx)(n.p,{children:"Then, you need to bootstrap your own frontend project in this new directory."}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-bash",children:"cd src/frontend\nyarn init\n"})}),"\n",(0,t.jsxs)(n.p,{children:["With each version of Richie, we build and publish an ",(0,t.jsx)(n.code,{children:"NPM"})," package to enable Richie users to build their own Javascript and CSS. You're now ready to install it."]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-bash",children:"yarn add richie-education\n"})}),"\n",(0,t.jsxs)(n.p,{children:["In your ",(0,t.jsx)(n.code,{children:"package.json"})," file, you should see it in the list of dependencies. Also, there's a ",(0,t.jsx)(n.code,{children:"node_modules"})," directory where the package and its dependencies are actually installed."]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-json",children:'"dependencies": {\n "richie-education": "1.12.0"\n},\n'})}),"\n",(0,t.jsx)(n.h2,{id:"building-the-javascript-bundle",children:"Building the Javascript bundle"}),"\n",(0,t.jsx)(n.p,{children:"You are now ready to run your own frontend build. We'll just be using webpack directly."}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-bash",children:"yarn webpack --config node_modules/richie-education/webpack.config.js --output-path ./build --richie-dependent-build\n"})}),"\n",(0,t.jsx)(n.p,{children:"Here is everything that is happening:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"yarn webpack"})," \u2014 run the webpack CLI;"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"--config node_modules/richie-education/webpack.config.js"})," \u2014 point webpack to ",(0,t.jsx)(n.code,{children:"richie-education"}),"'s webpack config file;"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"--output-path ./build"})," \u2014 make sure we get our output where we need it to be;"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"--richie-dependent-build"})," \u2014 enable some affordances with import paths. We pre-configured Richie's webpack to be able to run it from a dependent project."]}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:"You can now run your build to change frontend settings or override frontend components with your own."}),"\n",(0,t.jsx)(n.h2,{id:"building-the-css",children:"Building the CSS"}),"\n",(0,t.jsx)(n.p,{children:"If you want to change styles in Richie, or add new styles for components & templates you develop yourself, you can run the SASS/CSS build yourself."}),"\n",(0,t.jsxs)(n.p,{children:["Start by creating your own ",(0,t.jsx)(n.code,{children:"main"})," file. The ",(0,t.jsx)(n.code,{children:"_"})," underscore at the beginning is there to prevent sass from auto-compiling the file."]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-bash",children:"mkdir -p src/frontend/scss\ntouch src/frontend/scss/_mains.scss\n"})}),"\n",(0,t.jsxs)(n.p,{children:["Start by importing Richie's main scss file. If you prefer, you can also directly import any files you want to include \u2014 in effect re-doing Richie's ",(0,t.jsx)(n.code,{children:"_main.scss"})," on your own."]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-sass",children:'@import "richie-education/scss/main";\n'})}),"\n",(0,t.jsx)(n.p,{children:"You are now ready to run the CSS build:"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:"cd src/frontend\nyarn build-sass\n"})}),"\n",(0,t.jsx)(n.p,{children:"This gives you one output CSS file that you can put in the static files directory of your project and use to override Richie's style or add your own parts."})]})}function u(e={}){const{wrapper:n}={...(0,o.a)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(l,{...e})}):l(e)}},11151:(e,n,i)=>{i.d(n,{Z:()=>d,a:()=>s});var t=i(67294);const o={},r=t.createContext(o);function s(e){const n=t.useContext(r);return t.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function d(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:s(e.components),t.createElement(r.Provider,{value:n},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/02aff391.34c4176e.js b/assets/js/02aff391.34c4176e.js
deleted file mode 100644
index 0e918c3ac3..0000000000
--- a/assets/js/02aff391.34c4176e.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunkrichie_education_docs=self.webpackChunkrichie_education_docs||[]).push([[27128],{92485:(e,n,i)=>{i.r(n),i.d(n,{assets:()=>c,contentTitle:()=>s,default:()=>u,frontMatter:()=>r,metadata:()=>d,toc:()=>a});var t=i(85893),o=i(11151);const r={id:"building-the-frontend",title:"Building Richie's frontend in your own project",sidebar_label:"Building the frontend"},s=void 0,d={id:"building-the-frontend",title:"Building Richie's frontend in your own project",description:"Richie offers plenty of opportunities to customize the way it works and make it suit the needs of your own project. Most of these go through Django settings.",source:"@site/versioned_docs/version-2.21.0/building-the-frontend.md",sourceDirName:".",slug:"/building-the-frontend",permalink:"/docs/2.21.0/building-the-frontend",draft:!1,unlisted:!1,tags:[],version:"2.21.0",lastUpdatedBy:"jbpenrath",lastUpdatedAt:1679473023,formattedLastUpdatedAt:"Mar 22, 2023",frontMatter:{id:"building-the-frontend",title:"Building Richie's frontend in your own project",sidebar_label:"Building the frontend"},sidebar:"docs",previous:{title:"Django & React",permalink:"/docs/2.21.0/django-react-interop"},next:{title:"Frontend overrides",permalink:"/docs/2.21.0/frontend-overrides"}},c={},a=[{value:"Installing richie-education",id:"installing-richie-education",level:2},{value:"Building the Javascript bundle",id:"building-the-javascript-bundle",level:2},{value:"Building the CSS",id:"building-the-css",level:2}];function l(e){const n={code:"code",h2:"h2",li:"li",p:"p",pre:"pre",ul:"ul",...(0,o.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.p,{children:"Richie offers plenty of opportunities to customize the way it works and make it suit the needs of your own project. Most of these go through Django settings."}),"\n",(0,t.jsx)(n.p,{children:"Part of Richie is a React frontend however. If you want to change how it works in ways that cannot be changed from the Django settings, you will need to build your own frontend."}),"\n",(0,t.jsxs)(n.h2,{id:"installing-richie-education",children:["Installing ",(0,t.jsx)(n.code,{children:"richie-education"})]}),"\n",(0,t.jsx)(n.p,{children:"If you have not already, you should create a directory for the frontend in your project. We recommend you mirror Richie's file structure so it's easier to keep track of the changes you make."}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-bash",children:"mkdir -p src/frontend\n"})}),"\n",(0,t.jsx)(n.p,{children:"Then, you need to bootstrap your own frontend project in this new directory."}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-bash",children:"cd src/frontend\nyarn init\n"})}),"\n",(0,t.jsxs)(n.p,{children:["With each version of Richie, we build and publish an ",(0,t.jsx)(n.code,{children:"NPM"})," package to enable Richie users to build their own Javascript and CSS. You're now ready to install it."]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-bash",children:"yarn add richie-education\n"})}),"\n",(0,t.jsxs)(n.p,{children:["In your ",(0,t.jsx)(n.code,{children:"package.json"})," file, you should see it in the list of dependencies. Also, there's a ",(0,t.jsx)(n.code,{children:"node_modules"})," directory where the package and its dependencies are actually installed."]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-json",children:'"dependencies": {\n "richie-education": "1.12.0"\n},\n'})}),"\n",(0,t.jsx)(n.h2,{id:"building-the-javascript-bundle",children:"Building the Javascript bundle"}),"\n",(0,t.jsx)(n.p,{children:"You are now ready to run your own frontend build. We'll just be using webpack directly."}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-bash",children:"yarn webpack --config node_modules/richie-education/webpack.config.js --output-path ./build --richie-dependent-build\n"})}),"\n",(0,t.jsx)(n.p,{children:"Here is everything that is happening:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"yarn webpack"})," \u2014 run the webpack CLI;"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"--config node_modules/richie-education/webpack.config.js"})," \u2014 point webpack to ",(0,t.jsx)(n.code,{children:"richie-education"}),"'s webpack config file;"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"--output-path ./build"})," \u2014 make sure we get our output where we need it to be;"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"--richie-dependent-build"})," \u2014 enable some affordances with import paths. We pre-configured Richie's webpack to be able to run it from a dependent project."]}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:"You can now run your build to change frontend settings or override frontend components with your own."}),"\n",(0,t.jsx)(n.h2,{id:"building-the-css",children:"Building the CSS"}),"\n",(0,t.jsx)(n.p,{children:"If you want to change styles in Richie, or add new styles for components & templates you develop yourself, you can run the SASS/CSS build yourself."}),"\n",(0,t.jsxs)(n.p,{children:["Start by creating your own ",(0,t.jsx)(n.code,{children:"main"})," file. The ",(0,t.jsx)(n.code,{children:"_"})," underscore at the beginning is there to prevent sass from auto-compiling the file."]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-bash",children:"mkdir -p src/frontend/scss\ntouch src/frontend/scss/_mains.scss\n"})}),"\n",(0,t.jsxs)(n.p,{children:["Start by importing Richie's main scss file. If you prefer, you can also directly import any files you want to include \u2014 in effect re-doing Richie's ",(0,t.jsx)(n.code,{children:"_main.scss"})," on your own."]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-sass",children:'@import "richie-education/scss/main";\n'})}),"\n",(0,t.jsx)(n.p,{children:"You are now ready to run the CSS build:"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:"cd src/frontend\nyarn build-sass\n"})}),"\n",(0,t.jsx)(n.p,{children:"This gives you one output CSS file that you can put in the static files directory of your project and use to override Richie's style or add your own parts."})]})}function u(e={}){const{wrapper:n}={...(0,o.a)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(l,{...e})}):l(e)}},11151:(e,n,i)=>{i.d(n,{Z:()=>d,a:()=>s});var t=i(67294);const o={},r=t.createContext(o);function s(e){const n=t.useContext(r);return t.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function d(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:s(e.components),t.createElement(r.Provider,{value:n},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/02fbc50f.06a2e257.js b/assets/js/02fbc50f.06a2e257.js
deleted file mode 100644
index d264f573a1..0000000000
--- a/assets/js/02fbc50f.06a2e257.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunkrichie_education_docs=self.webpackChunkrichie_education_docs||[]).push([[60274],{19950:(e,n,i)=>{i.r(n),i.d(n,{assets:()=>a,contentTitle:()=>r,default:()=>h,frontMatter:()=>t,metadata:()=>c,toc:()=>d});var s=i(85893),o=i(11151);const t={id:"joanie-connection",title:"Joanie Connection",sidebar_label:"Joanie Connection"},r=void 0,c={id:"joanie-connection",title:"Joanie Connection",description:"Joanie delivers an API able to manage course",source:"@site/versioned_docs/version-2.25.0-beta.1/joanie-connection.md",sourceDirName:".",slug:"/joanie-connection",permalink:"/docs/2.25.0-beta.1/joanie-connection",draft:!1,unlisted:!1,tags:[],version:"2.25.0-beta.1",lastUpdatedBy:"jbpenrath",lastUpdatedAt:1704462108,formattedLastUpdatedAt:"Jan 5, 2024",frontMatter:{id:"joanie-connection",title:"Joanie Connection",sidebar_label:"Joanie Connection"}},a={},d=[{value:"Configuring Joanie",id:"configuring-joanie",level:2},{value:"BASE_URL",id:"base_url",level:3},{value:"BACKEND",id:"backend",level:3},{value:"JS_BACKEND",id:"js_backend",level:3},{value:"COURSE_REGEX",id:"course_regex",level:3},{value:"JS_COURSE_REGEX",id:"js_course_regex",level:3},{value:"COURSE_RUN_SYNC_NO_UPDATE_FIELDS",id:"course_run_sync_no_update_fields",level:3},{value:"DEFAULT_COURSE_RUN_SYNC_MODE",id:"default_course_run_sync_mode",level:3},{value:"Access Token",id:"access-token",level:2},{value:"Lifetime configuration",id:"lifetime-configuration",level:3},{value:"Technical support",id:"technical-support",level:2}];function l(e){const n={a:"a",code:"code",em:"em",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",ul:"ul",...(0,o.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.a,{href:"https://github.com/openfun/joanie",children:"Joanie"})," delivers an API able to manage course\nenrollment/subscription, payment and certificates delivery. Richie can be configured to display\ncourse runs and micro-credentials managed through Joanie."]}),"\n",(0,s.jsxs)(n.p,{children:["In fact, Richie treats Joanie almost like a ",(0,s.jsx)(n.a,{href:"/docs/2.25.0-beta.1/lms-backends",children:"LMS backend"})," that's why settings\nare similars."]}),"\n",(0,s.jsx)(n.h2,{id:"configuring-joanie",children:"Configuring Joanie"}),"\n",(0,s.jsxs)(n.p,{children:["All settings related to Joanie have to be declared in the ",(0,s.jsx)(n.code,{children:"JOANIE_BACKEND"})," dictionnary\nwithin ",(0,s.jsx)(n.code,{children:"settings.py"}),"."]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-python",children:'JOANIE_BACKEND = {\n "BASE_URL": values.Value(environ_name="JOANIE_BASE_URL", environ_prefix=None),\n "BACKEND": values.Value("richie.apps.courses.lms.joanie.JoanieBackend", environ_name="JOANIE_BACKEND", environ_prefix=None),\n "JS_BACKEND": values.Value("joanie", environ_name="JOANIE_JS_BACKEND", environ_prefix=None),\n "COURSE_REGEX": values.Value(\n r"^.*/api/v1.0(?Pmkcert on your local machine",id:"a-install-mkcert-on-your-local-machine",level:6},{value:"b. Install Mkcert Certificate Authority",id:"b-install-mkcert-certificate-authority",level:6},{value:"2. On Richie",id:"2-on-richie",level:5},{value:"3. On OpenEdx",id:"3-on-openedx",level:5},{value:"4. Start Richie and OpenEdx over SSL",id:"4-start-richie-and-openedx-over-ssl",level:5}];function l(e){const n={a:"a",blockquote:"blockquote",code:"code",em:"em",h2:"h2",h3:"h3",h4:"h4",h5:"h5",h6:"h6",li:"li",p:"p",pre:"pre",ul:"ul",...(0,i.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"richie"})," can be connected to one or more Learning Management Systems (LMS) like OpenEdx, Moodle\nor Canvas for a seamless experience between browsing the course catalog on ",(0,t.jsx)(n.code,{children:"richie"})," and following\nthe course itself on the LMS."]}),"\n",(0,t.jsxs)(n.p,{children:["In order to connect ",(0,t.jsx)(n.code,{children:"richie"})," with a LMS, there is an API bridge\nto synchronize course information and enrollments."]}),"\n",(0,t.jsx)(n.h3,{id:"api-bridge",children:"API bridge"}),"\n",(0,t.jsxs)(n.p,{children:["The ",(0,t.jsx)(n.code,{children:"APIHandler"})," utility acts as a proxy that routes queries to the correct LMS backend API,\nbased on a regex match on the URL of the course."]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-python",children:'RICHIE_LMS_BACKENDS=[\n {\n "BASE_URL": "https://www.lms-example2.org",\n "BACKEND": "richie.apps.courses.lms.edx.EdXLMSBackend",\n "COURSE_REGEX": r"^.*/courses/(?Pmkcert on your local machine",id:"a-install-mkcert-on-your-local-machine",level:6},{value:"b. Install Mkcert Certificate Authority",id:"b-install-mkcert-certificate-authority",level:6},{value:"2. On Richie",id:"2-on-richie",level:5},{value:"3. On OpenEdx",id:"3-on-openedx",level:5},{value:"4. Start Richie and OpenEdx over SSL",id:"4-start-richie-and-openedx-over-ssl",level:5}];function l(e){const n={a:"a",blockquote:"blockquote",code:"code",em:"em",h2:"h2",h3:"h3",h4:"h4",h5:"h5",h6:"h6",li:"li",p:"p",pre:"pre",ul:"ul",...(0,i.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"richie"})," can be connected to one or more Learning Management Systems (LMS) like OpenEdx, Moodle\nor Canvas for a seamless experience between browsing the course catalog on ",(0,t.jsx)(n.code,{children:"richie"})," and following\nthe course itself on the LMS."]}),"\n",(0,t.jsxs)(n.p,{children:["In order to connect ",(0,t.jsx)(n.code,{children:"richie"})," with a LMS, there is an API bridge\nto synchronize course information and enrollments."]}),"\n",(0,t.jsx)(n.h3,{id:"api-bridge",children:"API bridge"}),"\n",(0,t.jsxs)(n.p,{children:["The ",(0,t.jsx)(n.code,{children:"APIHandler"})," utility acts as a proxy that routes queries to the correct LMS backend API,\nbased on a regex match on the URL of the course."]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-python",children:'RICHIE_LMS_BACKENDS=[\n {\n "BASE_URL": "https://www.lms-example2.org",\n "BACKEND": "richie.apps.courses.lms.edx.EdXLMSBackend",\n "COURSE_REGEX": r"^.*/courses/(?P