⚡️(lti) separate css from the js bundle

We need css files and font from the Cunningham packages
to style our app, but the css was included directly in the js bundle,
which was not optimal.
The css is now in a separate file, which is loaded in the html
template. This allows the browser to cache the css file and
improves the loading time of the page.

CHANGELOG.md

@@ -18,6 +18,7 @@ Versioning](https://semver.org/spec/v2.0.0.html).
 ### Changed
 
 - Replace grommet Image and Grid component (#2518)
+- Optimized apps bundle (#2528)
 
 ## [4.9.0] - 2023-12-04
 

src/backend/marsha/core/templates/core/resource.html

@@ -12,6 +12,7 @@
 
     <div id="marsha-frontend-root"></div>
     <script src='{% static "js/build/lti_site/index.js" %}'></script>
+    <link href='{% static "js/build/lti_site/main.css" %}' rel="stylesheet" />
     {% for external_script in external_javascript_scripts %}
       <script src="{{ external_script }}" ></script>
     {% endfor %}

src/backend/marsha/core/templates/core/site.html

@@ -11,6 +11,7 @@
 
     <div id="marsha-frontend-root" style="height: 100%;"></div>
     <script src='{% static "js/build/lti_site/index.js" %}'></script>
+    <link href='{% static "js/build/lti_site/main.css" %}' rel="stylesheet" />
     {% for external_script in external_javascript_scripts %}
     <script src="{{ external_script }}"></script>
     {% endfor %}

src/backend/marsha/e2e/test_lti.py

@@ -673,11 +673,13 @@ def test_lti_video_play(page: Page, live_server: LiveServer, mock_video_cloud_st
         ).get("en-US")
 
     def check_xapi_played(request: Request):
-        """Check xapi played call."""
-        assert request.method == "POST"
-        assert (
-            request.post_data_json.get("verb").get("display").get("en-US") == "played"
-        )
+        # """Check xapi played call."""
+        if "/xapi/" in request.url:
+            assert request.method == "POST"
+            assert (
+                request.post_data_json.get("verb").get("display").get("en-US")
+                == "played"
+            )
 
     page.on("request", check_xapi_played)
 

src/frontend/apps/lti_site/package.json

@@ -29,6 +29,7 @@
     "@babel/preset-env": "7.23.5",
     "@babel/preset-react": "7.23.3",
     "@babel/preset-typescript": "7.23.3",
+    "@faker-js/faker": "*",
     "@formatjs/cli": "6.2.4",
     "@testing-library/jest-dom": "*",
     "@testing-library/react": "*",
@@ -56,13 +57,13 @@
     "css-loader": "6.8.1",
     "eslint": "*",
     "eslint-config-marsha": "*",
-    "@faker-js/faker": "*",
     "fetch-mock": "9.11.0",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
     "jest-matchmedia-mock": "1.1.0",
     "jest-styled-components": "7.2.0",
     "lib-tests": "*",
+    "mini-css-extract-plugin": "2.7.6",
     "node-fetch": "2.6.7",
     "prettier": "*",
     "sass": "1.69.5",

src/frontend/apps/lti_site/webpack.config.js

@@ -1,6 +1,10 @@
 const TerserPlugin = require('terser-webpack-plugin');
 const webpack = require('webpack');
 const { alias } = require('marsha-config');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+const outputDir =
+  __dirname + '/../../../backend/marsha/static/js/build/lti_site';
 
 module.exports = (_, argv) => {
   process.env.NODE_ENV = argv.mode || 'development';
@@ -27,7 +31,7 @@ module.exports = (_, argv) => {
     // is on AWS.
     output: {
       filename: 'index.js',
-      path: __dirname + '/../../../backend/marsha/static/js/build/lti_site',
+      path: outputDir,
       chunkFilename: '[id].[fullhash].index.js',
       clean: true,
     },
@@ -48,7 +52,19 @@ module.exports = (_, argv) => {
 
     module: {
       rules: [
-        { test: /\.css$/, use: ['style-loader', 'css-loader'] },
+        {
+          test: /\.css$/,
+          use: [
+            {
+              loader: MiniCssExtractPlugin.loader,
+              options: {
+                publicPath: outputDir,
+              },
+            },
+            'css-loader',
+          ],
+          sideEffects: true,
+        },
         {
           test: /\.(png|svg|jpg|jpeg|gif)$/i,
           type: 'asset/resource',
@@ -102,6 +118,7 @@ module.exports = (_, argv) => {
         Buffer: ['buffer', 'Buffer'],
         process: 'process/browser.js',
       }),
+      new MiniCssExtractPlugin(),
     ],
   };
 

src/frontend/yarn.lock

@@ -12955,6 +12955,13 @@ min-indent@^1.0.0:
   resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869"
   integrity sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==
 
+mini-css-extract-plugin@2.7.6:
+  version "2.7.6"
+  resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-2.7.6.tgz#282a3d38863fddcd2e0c220aaed5b90bc156564d"
+  integrity sha512-Qk7HcgaPkGG6eD77mLvZS1nmxlao3j+9PkrT9Uc7HAE1id3F41+DdBRYRYkbyfNRGzm8/YWtzhw7nVPmwhqTQw==
+  dependencies:
+    schema-utils "^4.0.0"
+
 mini-css-extract-plugin@^2.4.5:
   version "2.7.2"
   resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-2.7.2.tgz#e049d3ea7d3e4e773aad585c6cb329ce0c7b72d7"