How to customize login page and learner's dashboard using indigo theme

allen_luna · February 26, 2024, 6:39pm

Hello,

Is possible to use indigo theme to override the styles of login page and learner’s dashboard? I just want to change the background color etc., but can’t find the the files where I can change the styles in the login page

I can customize indigo theme but I can’t customize or override the login page, base on documentation

Please give me some guidance of how to customize the login page and learner’s dashboard using indigo theme if possible.

Thank you

rediris · February 26, 2024, 7:17pm

Hi @allen_luna ,
There’s already an existing thread about this. I suggest you check it out first, and follow-up with any questions there.

allen_luna · February 26, 2024, 7:30pm

Hi @rediris ,
I already saw the discussion about of what you said, but I just want to ask if possible to use indigo theme to override the styles of login page and learner’s dashboard.

Thank you.

hinakhadim · February 27, 2024, 7:22am

Hi @allen_luna,
The indigo theme can’t override the styles for MFEs directly. It overrides styles for edx-platform. As Authn(login page) and learner’s dashboard are MFEs, you can override their styles using @edx/brand package and then add your package in tutor-indigo. In this way, you can override your styles.

hooks.Filters.ENV_PATCHES.add_item((
            "mfe-dockerfile-post-npm-install-authn",
            """
RUN npm install '@edx/brand@your-package'
""",
        ))

allen_luna · February 27, 2024, 7:12pm

Hi @hinakhadim ,

I just install this using npm command, but I encountered error, what do you think what’s happening in here? about ssh? please see image below for reference

Thank you.

rax · February 28, 2024, 8:10am

Hello @allen_luna

If you use Open edX tutor you cannot run npm like that. You have to create a plugin (Creating a Tutor plugin — Tutor documentation)

mkdir -p “$(tutor plugins printroot)”
touch “$(tutor plugins printroot)/myplugin.py”

Edit “myplugin.py” and add:

from tutor import hooks

hooks.Filters.ENV_PATCHES.add_items(
[
(
“mfe-dockerfile-post-npm-install-communications”,
“”"
RUN npm install “@edx/brand@git+https://github.com/allenluna/VXI_Brand-OpenEdx”
“”"
),
]
)

Then check your plugins:

tutor plugins list

Activate your plugin:

tutor plugins enable myplugin

And run again tutor local launch to install the plugin.

Note: If you installed tutor as root, you should run all commands with sudo.

good luck,
rax

allen_luna · February 28, 2024, 4:23pm

HI @rax ,

Thank you for you response, yes I already create and enabled it, but my concern right now is every time I run tutor images build mfe my server is hanging up

rax · February 28, 2024, 8:01pm

It may be a resource consumption problem. You might be interested in taking a look at this post:

github.com/overhangio/tutor-mfe

Document how to use BuildKit options to reduce resources consumption

opened 01:04PM - 16 May 23 UTC

closed 08:27AM - 07 Nov 23 UTC

ghassanmas

documentation

## Context By palm it's expected that tutor/tutor-mfe would require BuildKit t…o be enabled by docker _which is the case by default for docker since 23 version that is BuildKit is the default builder[^1]_. Buildkit adds extra features to tutor/tutor-mfe, mainly cache related, however one of it's main feature. > Parallelize building independent build stages [^1]. Would consume a lot of resources in case of tutor-mfe, given it would run `npm install` and `npm run build` concurrently for the X MFEs that are enabled by tutor-mfe, this can lead to errors related to network for former and the high resources consumption for the latter. Also another concern about this is that consider the case of which the same machine that is used to deploy an Open edX instance is used for building, it's would be quite risky a low resources machine to run build the image while also having tutor containers running. i.e. in case system crash, it would the affect the availability of the service. ## Possible solution: Note: Those are not exclusive of each others. 1. Configure BuildKit to use less resources as suggested by @regisb [^2] [^3] 2. Make it optimal to use the BuildKit builder just when building tutor-mfe. 3. Rethink the way MFEs are built/deployed, i.e.. - Use External service to build each MFE separatly. For example this can be a path openedx/wg-devops/issues/14 ## Related issue/concern: Also in Development mode, it has been observed that typically a developer would need to work on a specific MFE, however tutor dev would by default run all MFEs in development mode, i.e. `npm run start` X times of the enabled MFEs, while is totally different issue, it's probably related. ## Possible outcomes _at least before palm release_ - Document a possible way to utilize buildkit with a low resources machine. i.e. at least mention it in the release note, or/and have a link that detail a recommended set-up for a low resources machine. - For ref the release note openedx/docs.openedx.org/pull/321 [^1]: https://docs.docker.com/build/buildkit/#overview [^2]: Docs https://docs.docker.com/build/buildkit/configure/#max-parallelism [^3]: Slack thread https://openedx.slack.com/archives/CGE253B7V/p1684170597489729

I recommend that you follow these steps:

Create a buildtkit.toml configuration file with the following contents:

[worker.oci]
max-parallelism = 1

Create a builder that uses that configuration:
docker buildx create --use --name=max1cpu --driver=docker-container --config=./buildkit.toml

Build the mfe image:

tutor images build mfe

good luck,
rax

allen_luna · February 29, 2024, 12:27am

Hi @rax ,

I think it works because the server is not hanging up just like before and I do same command like this

but I encountered an error after running tutor images build mfe, please see below for your reference

User
=> CANCELED [ora-grading-prod 1/1] RUN npm run build 311.3s
=> ERROR [profile-prod 1/1] RUN npm run build 251.1s
=> CANCELED [authn-common 6/6] COPY --from=authn-i18n /openedx/app/src/i18n/messages /openedx/app/src/i18n/messa 0.0s

[profile-prod 1/1] RUN npm run build:
1.468
1.468 > @edx/frontend-app-profile@1.0.0-semantically-released build
1.468 > fedx-scripts webpack
1.468
1.625 Running with resolved config:
1.625 /openedx/app/node_modules/@edx/frontend-build/config/webpack.prod.config.js
1.625
250.8 Killed
250.9 npm notice
250.9 npm notice New minor version of npm available! 10.2.3 → 10.5.0
250.9 npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.5.0
250.9 npm notice Run npm install -g npm@10.5.0 to update!
250.9 npm notice

Dockerfile:670

668 | FROM profile-common AS profile-prod
669 | ENV NODE_ENV=production
670 | >>> RUN npm run build
671 |

672
ERROR: failed to solve: process “/bin/sh -c npm run build” did not complete successfully: exit code: 137
Error: Command failed with status 1: docker buildx build --tag=docker.io/overhangio/openedx-mfe:17.0.0-indigo --output=type=docker --cache-from=type=registry,ref=docker.io/overhangio/openedx-mfe:17.0.0-indigo-cache /home/itechadmin/.local/share/tutor/env/plugins/mfe/build/mfe

Danyal_Faheem · February 29, 2024, 10:08am

Hi @allen_luna, The error code 137 for npm means the system has run out of memory.

For this, you can try to reduce the parallelism in the answer defined by @rax to 1 like so.

[worker.oci]
max-parallelism = 1

This will reduce the memory usage while building the MFE image but the build process will be slower.

allen_luna · March 4, 2024, 8:13pm

HI @Danyal_Faheem @rax ,

I do the following but it didn’t take effect:

create my mfe file in .local/share/tutor-plugins, inside this folder I create custommfe.py and inside that file I do:

from tutor import hooks

hooks.Filters.ENV_PATCHES.add_item(
(
“mfe-dockerfile-post-npm-install”,
“”"
RUN npm install ‘@edx/brand@git+https://github.com/allenluna/VXI_Brand-OpenEdx.git’
“”"
)
)

and enabled it as a plugins and followed by tutor config save, tutor images build mfe (note: I am working at production)

rax · March 6, 2024, 8:48am

Have you re-run tutor local launch after enabling plugin?

Mahendra · March 7, 2024, 10:31am

Hi @rax,

As per your given steps I performed below in my production. I’m using Tutor, version 16.1.8(Palm).

I created a plugin file at /home/ubuntu/.local/share/tutor-plugins with the name mfeplugin.py. Added below in mfeplugin.py:

from tutor import hooks

hooks.Filters.ENV_PATCHES.add_items(
    [
        (
            "mfe-dockerfile-post-npm-install",
            """
RUN npm install '@edx/brand@git+https://github.com/<username>/Brand-OpenEdx'
            """
        )
    ]
)

Then:

tutor plugins enable mfeplugin
tutor config save
tutor images build mfe --no-cache
tutor local start -d

But it’s not reflecting my changes. Is there any way so I can check https://github.com/<username>/Brand-OpenEdx is applied or not?

Did I miss any steps? @allen_luna let me know how you solved it.

allen_luna · March 7, 2024, 10:56am

Hi @Mahendra ,

You should specify the installment base on your choice. Ex. You want to customize the authn or learner-dashboard you shoud do this

from tutor import hooks

hooks.Filters.ENV_PATCHES.add_items(
[
(
“mfe-dockerfile-post-npm-install-authn”,
“”"
RUN npm install ‘@edx/brand@git+https://github.com//Brand-OpenEdx’
“”"
),
(
“mfe-dockerfile-post-npm-install-learner-dashboard”,
“”"
RUN npm install ‘@edx/brand@git+https://github.com//Brand-OpenEdx’
“”"
),
]
)

Then follow by
tutor config save
tutor images build mfe --no-cache
tutor local start -d

Yagnesh · March 7, 2024, 11:28am

@Mahendra For more details, please follow up on this topic as it was recently closed here.

Mahendra · March 7, 2024, 1:03pm

Hi @Yagnesh,

Thanks now it’s solved. But I have one more question. I want to make some modifications to the header. Is the same process for it? I created a plugin with below:

from tutor import hooks

hooks.Filters.ENV_PATCHES.add_items(
    [
        (
            "mfe-dockerfile-post-npm-install",
            """
RUN npm install '@edx/frontend-component-header@git+https://github.com/<username>/frontend-component-header.git#<my-branch>'
            """
        )
    ]
)

I follow this docs. But getting errors during tutor images build mfe --no-cache

19.82 npm ERR! Could not resolve dependency:
19.82 npm ERR! peer @edx/frontend-platform@"^7.0.0" from @edx/frontend-component-header@1.0.0-semantically-released
19.82 npm ERR! node_modules/@edx/frontend-component-header
19.82 npm ERR!   @edx/frontend-component-header@"git+https://github.com/Mahendra/frontend-component-header.git#master" from the root project
19.82 npm ERR! 
19.82 npm ERR! Fix the upstream dependency conflict, or retry
19.82 npm ERR! this command with --force or --legacy-peer-deps
19.82 npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
19.82 npm ERR! 
19.82 npm ERR! 
19.82 npm ERR! For a full report see:
19.82 npm ERR! /root/.npm/_logs/2024-03-07T12_51_51_338Z-eresolve-report.txt
19.83 
19.83 npm ERR! A complete log of this run can be found in:
19.83 npm ERR!     /root/.npm/_logs/2024-03-07T12_51_51_338Z-debug-0.log
------
Dockerfile:376
--------------------
 374 |     
 375 |     
 376 | >>> RUN npm install '@edx/frontend-component-header@git+https://github.com/Mahendra/frontend-component-header.git#master'
 377 |                 
 378 |     COPY --from=learning-src / /openedx/app
--------------------
ERROR: failed to solve: process "/bin/sh -c npm install '@edx/frontend-component-header@git+https://github.com/Mahendra/frontend-component-header.git#master'" did not complete successfully: exit code: 1

Yagnesh · March 7, 2024, 1:08pm

@Mahendra It seems like there’s a dependency conflict in your npm installation.

Mahendra · March 7, 2024, 1:17pm

Yes, I feel the same. Insted of using the master branch first I have to check out a specific branch like v5.x.x or v4.x.x. I’m using Palm and how can I find out which tag/branch is for the Palm version?

Do you have any idea?

hinakhadim · March 7, 2024, 2:37pm

Hi @Mahendra,
In case of frontend-component-header, there is no palm or quince branch. There’s only the master branch. For installing a compatible header version,You first need to check from package.json of a MFE (palm branch) (example: learning and profile MFE) and find the @edx/frontend-platform version. Then, check which of the header versions supports that @edx/frontend-platform version. Use the latest one or of your choice. Then the compatibility issue will resolve.

Mahendra · March 7, 2024, 4:36pm

Thanks @hinakhadim

I did the following steps in my production:

First I check Open edX version by tutor config printvalue OPENEDX_COMMON_VERSION and it’s open-release/palm.4
I want to make changes in the learning mfe header. So I check the package.json file in learning-mfe
Here "@edx/frontend-platform": "^4.2.0" and "@edx/frontend-component-header": "^4.0.0"
I checked frontend-platform package.json file but didn’t found frontend-component-header version.
So I used "@edx/frontend-component-header": "^4.0.0" and created plugin with below details.

from tutor import hooks

hooks.Filters.ENV_PATCHES.add_items(
    [
        (
            "mfe-dockerfile-post-npm-install-learning",
            """
RUN npm install '@edx/frontend-component-header@git+https://github.com/openedx/frontend-component-header.git#v4.0.0'
            """
        )
    ]
)

Then:

tutor config save
tutor images build mfe --no-cache

But getting below error:

------
 > [learning-prod 1/1] RUN npm run build:
0.899 
0.899 > @edx/frontend-app-learning@1.0.0-semantically-released build
0.899 > fedx-scripts webpack
0.899 
0.979 Running with resolved config:
0.979 /openedx/app/webpack.prod.config.js
0.979 
2.912 Browserslist: caniuse-lite is outdated. Please run:
2.912   npx update-browserslist-db@latest
2.912   Why you should do it regularly: https://github.com/browserslist/update-db#readme
194.8 Error parsing bundle asset "/openedx/app/dist/475.b0c25edd729eea54fd70.js": no such file
194.8 Error parsing bundle asset "/openedx/app/dist/app.2620868490ae00979113.js": no such file
194.8 Error parsing bundle asset "/openedx/app/dist/216.45fe4776bd50b67d4f15.js": no such file
194.8 Error parsing bundle asset "/openedx/app/dist/700.5cffb78f9a20e01ba194.js": no such file
194.8 Error parsing bundle asset "/openedx/app/dist/35.748a72791af8fd5f6a6b.js": no such file
194.8 Error parsing bundle asset "/openedx/app/dist/106.ad15e599c40228db320e.js": no such file
194.8 Error parsing bundle asset "/openedx/app/dist/runtime.f4b511705b08799f211a.js": no such file
194.8 Error parsing bundle asset "/openedx/app/dist/210.f5a70901e714ae4d24c2.js": no such file
194.8 Error parsing bundle asset "/openedx/app/dist/974.266021e4ab1c31eb7060.js": no such file
194.8 Error parsing bundle asset "/openedx/app/dist/159.b7d27609fce09260e712.js": no such file
194.8 Error parsing bundle asset "/openedx/app/dist/437.4382cf91d1ab96d684e5.js": no such file
194.8 Error parsing bundle asset "/openedx/app/dist/724.9df859b1afcf09dcdd69.js": no such file
194.8 Error parsing bundle asset "/openedx/app/dist/715.4a69e9d9d483eb5e318b.js": no such file
194.8 Error parsing bundle asset "/openedx/app/dist/901.3c2fb7494896ae24f37f.js": no such file
194.8 Error parsing bundle asset "/openedx/app/dist/28.6fb223466e052b6470d7.js": no such file
194.8 Error parsing bundle asset "/openedx/app/dist/443.7d4b7dead5ef7f7c034b.js": no such file
194.8 
194.8 No bundles were parsed. Analyzer will show only original module sizes from stats file.
194.8 
195.0 Webpack Bundle Analyzer saved report to /openedx/app/dist/report.html
195.6 assets by status 6.92 MiB [cached] 36 assets
195.6 Entrypoint app = runtime.f4b511705b08799f211a.js 475.b0c25edd729eea54fd70.css 475.b0c25edd729eea54fd70.js app.2620868490ae00979113.css app.2620868490ae00979113.js 20 auxiliary assets
195.6 orphan modules 5.29 MiB [orphan] 3098 modules
195.6 runtime modules 7.95 KiB 15 modules
195.6 cacheable modules 8.66 MiB (javascript) 1.02 MiB (css/mini-extract)
195.6   modules by path ./node_modules/ 7.52 MiB (javascript) 0 bytes (css/mini-extract)
195.6     javascript modules 7.41 MiB 1062 modules
195.6     json modules 115 KiB 26 modules
195.6     css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/resolve-url-loader/index.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[4]!./node_modules/@edx/paragon/scss/core/_exports.module.scss 0 bytes [built] [code generated]
195.6   modules by path ./src/ 1.14 MiB (javascript) 1.02 MiB (css/mini-extract)
195.6     javascript modules 1.14 MiB 38 modules
195.6     css modules 1.02 MiB
195.6       css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/resolve-url-loader/index.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[4]!./src/index.scss 534 KiB [built] [code generated]
195.6       css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/resolve-url-loader/index.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[4]!./src/course-home/outline-tab/widgets/FlagButton.scss 515 KiB [built] [code generated]
195.6       css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/resolve-url-loader/index.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[4]!./src/course-home/outline-tab/DateSummary.scss 215 bytes [built] [code generated]
195.6   readable-stream (ignored) 15 bytes [built] [code generated]
195.6 
195.6 WARNING in ./node_modules/react-responsive/dist/react-responsive.js
195.6 Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
195.6 Failed to parse source map: 'webpack:///dist/react-responsive.js' URL is not supported
195.6  @ ./node_modules/@edx/paragon/dist/index.js 111:0-102 111:0-102 111:0-102 111:0-102
195.6  @ ./src/course-home/progress-tab/ProgressTab.jsx
195.6  @ ./src/index.jsx 22:0-65 99:46-57
195.6 
195.6 1 warning has detailed information that is not shown.
195.6 Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.
195.6 
195.6 ERROR in ./src/course-home/goal-unsubscribe/GoalUnsubscribe.jsx 5:0-74
195.6 Module not found: Error: Can't resolve '@edx/frontend-component-header' in '/openedx/app/src/course-home/goal-unsubscribe'
195.6  @ ./src/course-home/goal-unsubscribe/index.jsx 1:0-48 2:15-30
195.6  @ ./src/index.jsx 21:0-61 50:25-40
195.6 
195.6 ERROR in ./src/generic/CourseAccessErrorPage.jsx 7:0-74
195.6 Module not found: Error: Can't resolve '@edx/frontend-component-header' in '/openedx/app/src/generic'
195.6  @ ./src/index.jsx 30:0-68 56:25-46
195.6 
195.6 ERROR in ./src/index.jsx 9:0-76
195.6 Module not found: Error: Can't resolve '@edx/frontend-component-header' in '/openedx/app/src'
195.6 
195.6 ERROR in ./src/tab-page/TabPage.jsx 16:0-74
195.6 Module not found: Error: Can't resolve '@edx/frontend-component-header' in '/openedx/app/src/tab-page'
195.6  @ ./src/tab-page/index.js 2:0-47 2:0-47
195.6  @ ./src/index.jsx 23:0-42 59:42-54 67:42-54 75:42-54 83:42-54 95:41-53 104:42-54
195.6 
195.6 4 errors have detailed information that is not shown.
195.6 Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.
195.6 
195.6 webpack 5.82.0 compiled with 4 errors and 1 warning in 186056 ms
------
Dockerfile:535
--------------------
 533 |     FROM learning-common AS learning-prod
 534 |     ENV NODE_ENV=production
 535 | >>> RUN npm run build
 536 |     
 537 |     ######## ora-grading (production)
--------------------
ERROR: failed to solve: process "/bin/sh -c npm run build" did not complete successfully: exit code: 1

As of now, I used GitHub - openedx/frontend-component-header without adding my customization. But still, it’s failed to build mfe build.

Any suggestion here?

Thanks

Topic		Replies	Views
Open edX tutor indigo custom login Site Operators theming , tutor , lms	0	280	May 10, 2023
Default theme path Tutor Help how-to , tutor	2	487	July 23, 2022
Tutor Indigo (tutor-indigo) – Multiple Themes Configuration Site Operations Help tutor	3	908	October 5, 2022
Where did i find _override.scss in indigo theme that is applyed in authn mfe? Tutor Help how-to , tutor , tutor-indigo , quince	4	83	March 13, 2024
How to use indigo to create a custom theme Site Operators	5	402	July 12, 2023

How to customize login page and learner's dashboard using indigo theme

User => CANCELED [ora-grading-prod 1/1] RUN npm run build 311.3s => ERROR [profile-prod 1/1] RUN npm run build 251.1s => CANCELED [authn-common 6/6] COPY --from=authn-i18n /openedx/app/src/i18n/messages /openedx/app/src/i18n/messa 0.0s

Dockerfile:670

Related Topics

User
=> CANCELED [ora-grading-prod 1/1] RUN npm run build 311.3s
=> ERROR [profile-prod 1/1] RUN npm run build 251.1s
=> CANCELED [authn-common 6/6] COPY --from=authn-i18n /openedx/app/src/i18n/messages /openedx/app/src/i18n/messa 0.0s